cool beans yo

src/features/player/controls/volume.tsx

@@ -1,17 +1,25 @@
-import { Component, createSignal } from "solid-js";
+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";
 
 interface VolumeProps {
   value: number;
+  muted?: boolean;
+  onInput?: (next: { volume: number, muted: boolean }) => any;
 }
 
 export const Volume: Component<VolumeProps> = (props) => {
-  const [volume, setVolume] = createSignal(props.value);
+  const [state, setState] = createStore({ volume: props.value, muted: props.muted ?? false });
+
+  createEffect(() => {
+    props.onInput?.(unwrap(trackDeep(state)));
+  });
 
   return (
     <div class={css.container}>
-      <button>mute</button>
-      <input type="range" value={volume()} min="0" max="1" step="0.01" />
+      <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)} />
     </div>
   );
 };

src/features/player/player.tsx

@@ -6,6 +6,7 @@ import { createAsync, json, query } from "@solidjs/router";
 import { Component, createEffect, createMemo, createSignal } from "solid-js";
 import css from "./player.module.css";
 import { Volume } from "./controls/volume";
+import { getEntry } from "../content";
 
 const metadata = query(async (id: string) => {
   "use server";
@@ -42,9 +43,12 @@ export const Player: Component<PlayerProps> = (props) => {
   const [video, setVideo] = createSignal<HTMLVideoElement>(
     undefined as unknown as HTMLVideoElement,
   );
+
+  const entry = createAsync(() => getEntry(props.id));
+
   const data = createAsync(() => metadata(props.id), {
     deferStream: true,
-    initialValue: {},
+    initialValue: {} as any,
   });
   const captionUrl = createMemo(() => {
     const { captions } = data();
@@ -168,7 +172,7 @@ export const Player: Component<PlayerProps> = (props) => {
 
   return (
     <figure class={css.player}>
-      <h1>{props.id}</h1>
+      <h1>{entry()?.title}</h1>
 
       <video
         ref={setVideo}
@@ -194,7 +198,10 @@ export const Player: Component<PlayerProps> = (props) => {
       </video>
 
       <figcaption>
-        <Volume value={0.5} />
+        <Volume value={video()?.volume ?? 0} muted={video()?.muted ?? false} onInput={({ volume, muted }) => {
+          video().volume = volume;
+          video().muted = muted;
+        }} />
       </figcaption>
 
       <button onclick={toggle}>play/pause</button>