started a more proper implementation of the player

src/features/player/controls/playState.tsx

@@ -0,0 +1,15 @@
+import { Component, createMemo } from "solid-js";
+import { useVideo } from "../context";
+
+export const PlayState: Component<{}> = (props) => {
+  const video = useVideo();
+
+  const icon = createMemo(() => {
+    return {
+      playing: "⏵",
+      paused: "⏸",
+    }[video.state()];
+  });
+
+  return <button onclick={(e) => video.togglePlayState()}>{icon()}</button>;
+};

src/features/player/controls/seekBar.tsx

@@ -0,0 +1,26 @@
+import { Component } from "solid-js";
+
+interface SeekBarProps {
+  video: HTMLVideoElement | undefined;
+}
+
+export const SeekBar: Component<SeekBarProps> = () => {
+  return (
+    <>
+      <input
+        list="chapters"
+        type="range"
+        max={duration().toFixed(0)}
+        value={currentTime().toFixed(0)}
+        oninput={(e) => setTime(e.target.valueAsNumber)}
+        step="1"
+      />
+
+      <datalist id="chapters">
+        <option value="100">Chapter 1</option>
+        <option value="200">Chapter 2</option>
+        <option value="300">Chapter 3</option>
+      </datalist>
+    </>
+  );
+};

src/features/player/controls/volume.tsx

@@ -2,15 +2,21 @@ import { Component, createEffect, createSignal, Show } from "solid-js";
 import css from "./volume.module.css";
 import { createStore, unwrap } from "solid-js/store";
 import { trackDeep } from "@solid-primitives/deep";
+import { useVideo } from "../context";
 
 interface VolumeProps {
   value: number;
   muted?: boolean;
-  onInput?: (next: { volume: number, muted: boolean }) => any;
+  onInput?: (next: { volume: number; muted: boolean }) => any;
 }
 
 export const Volume: Component<VolumeProps> = (props) => {
-  const [state, setState] = createStore({ volume: props.value, muted: props.muted ?? false });
+  const video = useVideo();
+
+  const [state, setState] = createStore({
+    volume: props.value,
+    muted: props.muted ?? false,
+  });
 
   createEffect(() => {
     props.onInput?.(unwrap(trackDeep(state)));
@@ -18,8 +24,21 @@ export const Volume: Component<VolumeProps> = (props) => {
 
   return (
     <div class={css.container}>
-      <button onClick={() => setState('muted', m => !m)}><Show when={state.muted} fallback="mute">unmute</Show></button>
-      <input type="range" value={state.volume} min="0" max="1" step="0.01" onInput={(e) => setState('volume', e.target.valueAsNumber)} />
+      <button onClick={() => setState("muted", (m) => !m)}>
+        <Show when={state.muted} fallback="mute">
+          unmute
+        </Show>
+      </button>
+      <input
+        type="range"
+        value={state.volume}
+        min="0"
+        max="1"
+        step="0.01"
+        onInput={(e) =>
+          setState({ muted: false, volume: e.target.valueAsNumber })
+        }
+      />
     </div>
   );
 };