woooot, got streaming via the jellyfin api working!

src/features/player/controls/fullscreen.tsx

@@ -0,0 +1,15 @@
+import { Component, Show } from "solid-js";
+import { useVideo } from "../context";
+import { FaSolidCompress, FaSolidExpand } from "solid-icons/fa";
+
+export const Fullscreen: Component<{}> = (props) => {
+  const video = useVideo();
+
+  return (
+    <button onclick={(e) => video.setFullscreen((last) => !last)}>
+      <Show when={video.fullscreen()} fallback={<FaSolidExpand />}>
+        <FaSolidCompress />
+      </Show>
+    </button>
+  );
+};

src/features/player/controls/playState.module.css

@@ -1,13 +0,0 @@
-.play {
-    font-size: var(--size-7);
-    text-shadow: 0 0 .5rem #000;
-    aspect-ratio: 1;
-    background-color: transparent;
-    border-radius: var(--radius-2);
-    
-    transition: background-color .2s var(--ease-in-out-1);
-
-    &:hover {
-        background-color: rgba(from var(--gray-2) r g b / .25);
-    }
-}

src/features/player/controls/playState.tsx

@@ -1,14 +1,12 @@
 import { Component, Show } from "solid-js";
 import { useVideo } from "../context";
 import { FaSolidPause, FaSolidPlay } from "solid-icons/fa";
-import css from "./playState.module.css";
 
 export const PlayState: Component<{}> = (props) => {
   const video = useVideo();
 
   return (
     <button
-      class={css.play}
       onclick={(e) =>
         video.state.setState((last) =>
           last === "playing" ? "paused" : "playing"

src/features/player/controls/settings.tsx

@@ -0,0 +1,19 @@
+import { Component } from "solid-js";
+import { useVideo } from "../context";
+import { FaSolidEllipsisVertical } from "solid-icons/fa";
+
+export const Settings: Component<{}> = (props) => {
+  const video = useVideo();
+
+  return (
+    <button
+      onclick={(e) =>
+        video.state.setState((last) =>
+          last === "playing" ? "paused" : "playing"
+        )
+      }
+    >
+      <FaSolidEllipsisVertical />
+    </button>
+  );
+};

src/features/player/controls/volume.tsx

@@ -1,13 +1,9 @@
 import { Component, Show } from "solid-js";
-import css from "./volume.module.css";
 import { useVideo } from "../context";
 import { FaSolidVolumeOff, FaSolidVolumeXmark } from "solid-icons/fa";
+import css from "./volume.module.css";
 
-interface VolumeProps {
-  value: number;
-  muted?: boolean;
-  onInput?: (next: { volume: number; muted: boolean }) => any;
-}
+interface VolumeProps {}
 
 export const Volume: Component<VolumeProps> = (props) => {
   const video = useVideo();