aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-06-25 10:59:57 +0200
committerlonkaars <loek@pipeframe.xyz>2021-06-25 10:59:57 +0200
commit5489f68c0e75eab76fc16b6257605d5f75b87be4 (patch)
tree3b7fa2d21371e6eb91e77bfab66bf4f324dbfd4f
parenta9910cd880a38aa6dc5a5c2b63a61291cdb56e0e (diff)
ready state / disabled editor and playerhookstate-nolag2
-rw-r--r--pages/editor.tsx22
-rw-r--r--styles/editor.css44
2 files changed, 60 insertions, 6 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 0290fe1..40aeefc 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -71,7 +71,7 @@ interface project {
timeline: boolean;
video: {
available: boolean;
- fullyloaded: boolean;
+ playable: boolean;
};
};
update: {
@@ -102,7 +102,7 @@ var project = createState<project>({
timeline: false,
video: {
available: false,
- fullyloaded: false,
+ playable: false,
},
},
update: {
@@ -504,6 +504,8 @@ function TimelineEditor() {
var mouseX = 0;
+ var ready = useHookstate(project).ready;
+
var timelineRef = useRef(null);
var selectionAreaRef = useRef(null);
useEffect(() => {
@@ -653,7 +655,7 @@ function TimelineEditor() {
}, []);
return <div
- className='timeline posrel'
+ className={'timeline posrel ' + (ready.timeline.get() ? '' : 'disabled')}
style={{ '--zoom': zoomToPx(timelineZoom.value) } as CSSProperties}
ref={timelineRef}
>
@@ -810,6 +812,12 @@ function DefaultSettings() {
var reader = new FileReader();
reader.addEventListener('load', ev => {
player.loadVideo(ev.target.result as string);
+ project.ready.video.available.set(true);
+
+ player.player.addEventListener(
+ 'canplaythrough',
+ () => project.ready.video.playable.set(true),
+ );
player.player.addEventListener('play', () => project.timeline.playing.set(true));
player.player.addEventListener('pause', () => project.timeline.playing.set(false));
@@ -949,6 +957,8 @@ export default function Index() {
document.addEventListener('gesturechange', preventDefault);
}, []);
+ var ready = useHookstate(project).ready;
+
return <>
<div className='appGrid posabs a0'>
<AppBar position='static' color='transparent' elevation={0}>
@@ -963,12 +973,12 @@ export default function Index() {
</div>
</div>
<div className='viewer'>
- <div className='player posrel'>
+ <div className={'player posrel ' + (ready.video.available.get() ? '' : 'disabled')}>
<div className='outer posabs abscenter'>
<video id='player' ref={playerRef} className='fullwidth' />
</div>
</div>
- <div className='controls'>
+ <div className={'controls ' + (ready.timeline.get() ? '' : 'disabled')}>
<div className='posabs abscenter'>
<Fab
size='small'
@@ -979,7 +989,7 @@ export default function Index() {
}}
/>
<Fab
- className='playPause'
+ className={'playPause ' + (ready.video.playable.get() ? '' : 'disabled')}
size='medium'
onClick={() => {
player.next();
diff --git a/styles/editor.css b/styles/editor.css
index 95cff49..9ae1baa 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -169,6 +169,7 @@
.tools .time .framerate,
.tools .time .timecode {
+ user-select: none;
transition-property: opacity, color;
transition-duration: 150ms;
}
@@ -279,7 +280,13 @@
line-height: 0;
}
+.player.disabled .outer {
+ border-color: var(--c400) !important;
+}
+
.appGrid .viewer .player .outer {
+ transition-property: border-color;
+ transition-duration: 150ms;
border: 8px solid var(--piss);
border-radius: 8px;
}
@@ -311,11 +318,26 @@
.appGrid .viewer .controls .MuiFab-root.playPause {
background-color: var(--blue);
}
+.appGrid .viewer .controls.disabled .playPause,
+.appGrid .viewer .controls .playPause.disabled {
+ color: var(--c700);
+ opacity: .6;
+ background-color: var(--c400);
+}
.appGrid .viewer .controls .MuiFab-root {
color: var(--fg);
}
+.appGrid .viewer .controls.disabled .MuiFab-root {
+ color: var(--c700);
+ opacity: .6;
+ pointer-events: none;
+}
+.appGrid .viewer .controls .MuiFab-root {
+ transition-property: background-color, color, opacity;
+ transition-duration: 150ms;
+}
.appGrid .viewer .controls .MuiFab-root:not(.playPause) {
background-color: var(--transparent);
box-shadow: none;
@@ -423,11 +445,33 @@
.timeline .scrubber .head { fill: var(--blue); }
.timeline .scrubber .needle { background-color: var(--blue); }
+.timeline .scrubber .head,
+.timeline .scrubber .needle {
+ transition-property: fill, background-color;
+ transition-duration: 150ms;
+}
+
+.timeline.disabled .scrubberJumpArea { pointer-events: none; }
+.timeline.disabled .scrubber .head { fill: var(--c600); }
+.timeline.disabled .scrubber .needle { background-color: var(--c600); }
+
.timeline .labels .label {
transform: translate(-50%, -100%);
color: var(--c700);
}
+.timeline .labels .label,
+.timeline .timeScale {
+ transition-property: color, opacity;
+ transition-duration: 150ms;
+}
+
+.timeline.disabled .labels .label,
+.timeline.disabled .timeScale {
+ color: var(--c600);
+ opacity: .6;
+}
+
.timeline .scrubberJumpArea {
height: 28px;
z-index: 9;