feat: timeline tracks

src/components/controls/Controls.module.scss

@@ -46,6 +46,16 @@
   }
 }
 
+.select,
+.input {
+  background: #404040;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0;
+  border-radius: 4px;
+  padding: 0 8px;
+  font-size: 14px;
+}
+
 .pause {
   -webkit-mask-image: url('../../img/icons/pause.svg');
 }

src/components/controls/Input.tsx

@@ -0,0 +1,9 @@
+import styles from './Controls.module.scss';
+
+import type {JSX} from 'preact';
+
+interface InputProps extends JSX.HTMLAttributes<HTMLInputElement> {}
+
+export function Input(props: InputProps) {
+  return <input className={styles.input} {...props} />;
+}

src/components/controls/Select.tsx

@@ -0,0 +1,27 @@
+import styles from './Controls.module.scss';
+
+interface SelectProps<T> {
+  options: {value: T, text: string}[];
+  value: T;
+  onChange: (value: T) => any;
+}
+
+export function Select<T>({options, value, onChange}: SelectProps<T>) {
+  return (
+    <select
+      className={styles.select}
+      value={options.findIndex(option => option.value === value)}
+      onChange={event =>
+        onChange(
+          options[parseInt((event.target as HTMLSelectElement).value)].value,
+        )
+      }
+    >
+      {options.map((option, index) => (
+        <option key={option.value} value={index}>
+          {option.text}
+        </option>
+      ))}
+    </select>
+  );
+}

src/components/playback/CurrentTime.tsx

@@ -0,0 +1,12 @@
+import {VNode} from 'preact';
+import {usePlayerTime} from '../../hooks';
+
+interface CurrentTimeProps {
+  render: (time: number) => VNode<any>;
+}
+
+export function CurrentTime({render}: CurrentTimeProps) {
+  const time = usePlayerTime();
+
+  return render(time.frame);
+}

src/components/playback/Framerate.tsx

@@ -0,0 +1,31 @@
+import {VNode} from 'preact';
+import {useMemo, useRef} from 'preact/hooks';
+import {usePlayerTime} from '../../hooks';
+
+interface FramerateProps {
+  render: (framerate: number) => VNode<any>;
+}
+
+export function Framerate({render}: FramerateProps) {
+  const time = usePlayerTime();
+  const {current: state} = useRef({
+    history: [],
+    lastUpdate: performance.now(),
+    overallTime: 0,
+  });
+
+  const framerate = useMemo(() => {
+    const passed = performance.now() - state.lastUpdate;
+    state.overallTime += passed;
+    state.history.push(passed);
+    if (state.history.length > 10) {
+      state.overallTime -= state.history.shift();
+    }
+
+    const value = Math.floor(1000 / (state.overallTime / state.history.length));
+    state.lastUpdate = performance.now();
+    return value;
+  }, [time.frame]);
+
+  return render(framerate);
+}

src/components/playback/Playback.module.scss

@@ -7,3 +7,9 @@
   height: 2px;
   background-color: var(--theme);
 }
+
+.controls {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}

src/components/playback/PlaybackControls.tsx

@@ -1,16 +1,28 @@
+import styles from './Playback.module.scss';
+
 import {Icon, IconButton, IconCheckbox} from '../controls';
 import {usePlayer, usePlayerState} from '../../hooks';
+import {Select} from '../controls/Select';
+import {Input} from '../controls/Input';
+import {Framerate} from './Framerate';
 
-interface PlaybackControlsProps {
-  className?: string;
-}
-
-export function PlaybackControls({className}: PlaybackControlsProps) {
+export function PlaybackControls() {
   const player = usePlayer();
   const state = usePlayerState();
 
   return (
-    <div className={className}>
+    <div className={styles.controls}>
+      <Select
+        options={[
+          {value: 0.25, text: 'x0.25'},
+          {value: 0.5, text: 'x0.5'},
+          {value: 1, text: 'x1'},
+          {value: 1.5, text: 'x1.5'},
+          {value: 2, text: 'x2'},
+        ]}
+        value={state.speed}
+        onChange={speed => player.updateState({speed})}
+      />
       <IconCheckbox
         id={'audio'}
         iconOn={Icon.volumeOn}
@@ -41,6 +53,11 @@ export function PlaybackControls({className}: PlaybackControlsProps) {
         checked={state.loop}
         onChange={value => player.updateState({loop: value})}
       />
+      <Framerate
+        render={framerate => (
+          <Input size={4} readOnly value={`${framerate} FPS`} />
+        )}
+      />
     </div>
   );
 }

src/components/timeline/LabelTrack.tsx

@@ -0,0 +1,28 @@
+import styles from './Timeline.module.scss';
+
+import {usePlayer, usePlayerState} from '../../hooks';
+
+export function LabelTrack() {
+  const player = usePlayer();
+  const state = usePlayerState();
+
+  return (
+    <div className={styles.labelTrack}>
+      {Object.entries(player.labels).map(([name, time]) => (
+        <div
+          className={styles.labelClip}
+          data-name={name}
+          style={{
+            left: `${
+              (player.project.secondsToFrames(time) / state.duration) * 100
+            }%`,
+          }}
+          onClick={event => {
+            event.stopPropagation();
+            player.requestSeek(player.project.secondsToFrames(time));
+          }}
+        />
+      ))}
+    </div>
+  );
+}

src/components/timeline/SceneTrack.tsx

@@ -0,0 +1,26 @@
+import styles from './Timeline.module.scss';
+
+import {usePlayerState} from '../../hooks';
+import {useScenes} from '../../hooks/useScenes';
+
+export function SceneTrack() {
+  const scenes = useScenes();
+  const state = usePlayerState();
+
+  return (
+    <div className={styles.sceneTrack}>
+      {scenes.map(scene => (
+        <div
+          className={styles.sceneClip}
+          data-name={scene.name()}
+          style={{
+            width: `${
+              ((scene.lastFrame - scene.firstFrame) / state.duration) * 100
+            }%`,
+            left: `${(scene.firstFrame / state.duration) * 100}%`,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

src/components/timeline/Timeline.module.scss

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: auto;
   position: relative;
 
   &::-webkit-scrollbar {
@@ -20,9 +20,9 @@
 }
 
 .track {
+  position: relative;
   padding-top: 16px;
   overflow: hidden;
-  height: 100%;
 }
 
 .timestampTrack {
@@ -43,12 +43,59 @@
   border-left: 1px solid rgba(255, 255, 255, 0.24);
 }
 
+.sceneTrack {
+  position: relative;
+  height: 48px;
+  padding: 4px 0;
+}
+
+.sceneClip {
+  position: absolute;
+  height: 48px;
+  padding: 4px;
+
+  &::before {
+    box-sizing: border-box;
+    padding: 0 12px;
+    content: attr(data-name);
+    display: block;
+    line-height: 42px;
+    border-radius: 8px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.24);
+  }
+}
+
+.labelTrack {
+  position: relative;
+  height: 32px;
+  padding: 4px 0;
+}
+
+.labelClip {
+  position: absolute;
+  height: 32px;
+  padding: 4px;
+  cursor: pointer;
+
+  &::before {
+    content: attr(data-name);
+    display: block;
+    line-height: 24px;
+    border-radius: 0 12px 12px 12px;
+    padding: 0 8px;
+    background-color: var(--theme);
+  }
+}
+
 .playhead {
   position: absolute;
   width: 2px;
   top: 0;
   bottom: 0;
   background-color: var(--theme);
+  pointer-events: none;
 }
 
 .playheadPreview {
@@ -58,6 +105,7 @@
   bottom: 0;
   background-color: white;
   opacity: 0;
+  pointer-events: none;
 
   .root:hover & {
     opacity: 0.24;

src/components/timeline/Timeline.tsx

@@ -1,8 +1,16 @@
 import styles from './Timeline.module.scss';
 
-import {useLayoutEffect, useMemo, useRef, useState} from 'preact/hooks';
-import {usePlayer, usePlayerState, useSize} from '../../hooks';
+import {useCallback, useLayoutEffect, useRef, useState} from 'preact/hooks';
+import {
+  useDocumentEvent,
+  usePlayer,
+  usePlayerState,
+  useSize,
+} from '../../hooks';
 import {Playhead} from './Playhead';
+import {TimestampTrack} from './TimestampTrack';
+import {LabelTrack} from './LabelTrack';
+import {SceneTrack} from './SceneTrack';
 
 const ZOOM_SPEED = 0.1;
 
@@ -16,34 +24,29 @@ export function Timeline() {
   const [mouse, setMouse] = useState(0);
 
   const trackSize = rect.width * scale;
-  const power = Math.pow(2, Math.round(Math.log2(scale)));
-  let density = Math.floor(
-    (Math.floor((state.duration * 20) / rect.width) * 10) / power,
+
+  useDocumentEvent(
+    'keydown',
+    useCallback(
+      event => {
+        if (event.key !== 'f') return;
+        const time = player.getTime();
+        const maxOffset = trackSize - rect.width;
+        const playhead = trackSize * time.completion;
+        const newScroll = playhead - rect.width / 2;
+        setScroll(
+          newScroll < 0 ? 0 : newScroll > maxOffset ? maxOffset : newScroll,
+        );
+        setScale(scale * 0.99);
+      },
+      [trackSize, rect, scale],
+    ),
   );
-  density = density < 1 ? 1 : density;
 
   useLayoutEffect(() => {
     containerRef.current.scrollLeft = scroll;
   }, [scale]);
 
-  const startFrame = Math.floor(
-    ((scroll / trackSize) * state.duration) / density,
-  );
-  const endFrame = Math.ceil(
-    (((scroll + rect.width) / trackSize) * state.duration) / density,
-  );
-
-  const timestamps = useMemo(() => {
-    const timestamps = [];
-    for (let i = startFrame; i < endFrame; i++) {
-      timestamps.push({
-        time: i * density,
-        style: {left: `${((i * density) / state.duration) * trackSize}px`},
-      });
-    }
-    return timestamps;
-  }, [startFrame, endFrame, state.duration, trackSize, density]);
-
   return (
     <div
       className={styles.root}
@@ -74,17 +77,14 @@ export function Timeline() {
       onMouseMove={event => setMouse(event.x)}
     >
       <div className={styles.track} style={{width: `${trackSize}px`}}>
-        <div className={styles.timestampTrack}>
-          {timestamps.map(value => (
-            <div
-              className={styles.timestamp}
-              style={value.style}
-              key={value.time}
-            >
-              {value.time}
-            </div>
-          ))}
-        </div>
+        <TimestampTrack
+          fullLength={trackSize}
+          viewLength={rect.width}
+          offset={scroll}
+          scale={scale}
+        />
+        <SceneTrack />
+        <LabelTrack />
       </div>
       <div
         className={styles.playheadPreview}

src/components/timeline/TimestampTrack.tsx

@@ -0,0 +1,53 @@
+import styles from './Timeline.module.scss';
+
+import {usePlayerState} from '../../hooks';
+import {useMemo} from 'preact/hooks';
+
+interface TimestampTrackProps {
+  fullLength: number;
+  viewLength: number;
+  offset: number;
+  scale: number;
+}
+
+export function TimestampTrack({
+  fullLength,
+  viewLength,
+  offset,
+  scale,
+}: TimestampTrackProps) {
+  const state = usePlayerState();
+  const power = Math.pow(2, Math.round(Math.log2(scale)));
+  const density = Math.max(
+    1,
+    Math.floor((Math.floor((state.duration * 20) / viewLength) * 10) / power),
+  );
+
+  const startFrame = Math.floor(
+    ((offset / fullLength) * state.duration) / density,
+  );
+  const endFrame = Math.ceil(
+    (((offset + viewLength) / fullLength) * state.duration) / density,
+  );
+
+  const timestamps = useMemo(() => {
+    const timestamps = [];
+    for (let i = startFrame; i < endFrame; i++) {
+      timestamps.push({
+        time: i * density,
+        style: {left: `${((i * density) / state.duration) * fullLength}px`},
+      });
+    }
+    return timestamps;
+  }, [startFrame, endFrame, state.duration, fullLength, density]);
+
+  return (
+    <div className={styles.timestampTrack}>
+      {timestamps.map(value => (
+        <div className={styles.timestamp} style={value.style} key={value.time}>
+          {value.time}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/viewport/Viewport.module.scss

@@ -16,10 +16,23 @@
   background-color: #000000;
 }
 
-.controls {
-  display: flex;
-  justify-content: center;
-  gap: 16px;
-  padding: 16px;
+.playback {
   background: #202020;
+  display: grid;
+  grid-template-columns: 1fr min-content 1fr;
+  padding: 16px;
+}
+
+.time {
+  color: rgba(255, 255, 255, 0.54);
+  font-size: 14px;
+  line-height: 24px;
+  text-align: left;
+}
+
+.duration {
+  color: rgba(255, 255, 255, 0.54);
+  font-size: 14px;
+  line-height: 24px;
+  text-align: right;
 }

src/components/viewport/Viewport.tsx

@@ -1,16 +1,24 @@
 import styles from './Viewport.module.scss';
 
 import {PlaybackControls, PlaybackProgress} from '../playback';
-import {useDocumentEvent, usePlayer, useStorage} from '../../hooks';
-import {useCallback, useRef, useState} from 'preact/hooks';
 import {View} from './View';
+import {CurrentTime} from '../playback/CurrentTime';
+import {usePlayerState} from '../../hooks';
 
 export function Viewport() {
+  const state = usePlayerState();
+  console.log('update');
   return (
     <div className={styles.root}>
       <View />
       <PlaybackProgress />
-      <PlaybackControls className={styles.controls} />
+      <div className={styles.playback}>
+        <CurrentTime
+          render={time => <div className={styles.time}>{time}</div>}
+        />
+        <PlaybackControls />
+        <div className={styles.duration}>{state.duration}</div>
+      </div>
     </div>
   );
 }

src/hooks/useScenes.ts

@@ -0,0 +1,13 @@
+import {usePlayer} from "./usePlayer";
+import {useEffect, useState} from "preact/hooks";
+
+export function useScenes() {
+    const player = usePlayer();
+    const [scenes, setScenes] = useState(player.project.scenes);
+    useEffect(() => {
+        player.project.ScenesChanged.subscribe(setScenes);
+        return () => player.project.ScenesChanged.unsubscribe(setScenes);
+    }, [player, setScenes]);
+
+    return scenes;
+}