started a more proper implementation of the player

src/features/player/context.tsx

@@ -0,0 +1,83 @@
+import { isServer } from "solid-js/web";
+import {
+  ContextProviderProps,
+  createContextProvider,
+} from "@solid-primitives/context";
+import { Accessor, createMemo } from "solid-js";
+import { createStore } from "solid-js/store";
+import { createEventListenerMap } from "@solid-primitives/event-listener";
+
+type State = "playing" | "paused";
+
+interface Volume {
+  value: number;
+  muted: boolean;
+}
+
+export interface VideoAPI {
+  readonly state: Accessor<State>;
+  readonly volume: Accessor<Volume>;
+
+  play(): void;
+  pause(): void;
+  togglePlayState(): void;
+}
+
+interface VideoProviderProps extends ContextProviderProps {
+  video: HTMLVideoElement | undefined;
+}
+
+interface VideoStore {
+  state: State;
+  volume: Volume;
+}
+
+export const [VideoProvider, useVideo] = createContextProvider<
+  VideoAPI,
+  VideoProviderProps
+>(
+  (props) => {
+    const video = props.video;
+    const [store, setStore] = createStore<VideoStore>({
+      state: "paused",
+      volume: {
+        value: 0.5,
+        muted: false,
+      },
+    });
+
+    const api: VideoAPI = {
+      state: createMemo(() => store.state),
+
+      play() {
+        setStore("state", "playing");
+      },
+
+      pause() {
+        setStore("state", "paused");
+      },
+
+      togglePlayState() {
+        setStore("state", (state) =>
+          state === "playing" ? "paused" : "playing"
+        );
+      },
+    };
+
+    if (isServer || video === undefined) {
+      return api;
+    }
+
+    createEventListenerMap(video, {
+      play(e) {
+        setStore("state", "playing");
+      },
+      pause(e) {
+        setStore("state", "paused");
+      },
+    });
+
+    return api;
+  },
+  { state: () => "paused" }
+);