kaas

src/features/player/controls/playState.tsx

@@ -1,15 +1,23 @@
-import { Component, createMemo } from "solid-js";
+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();
 
-  const icon = createMemo(() => {
-    return {
-      playing: "⏵",
-      paused: "⏸",
-    }[video.state()];
-  });
-
-  return <button onclick={(e) => video.togglePlayState()}>{icon()}</button>;
+  return (
+    <button
+      class={css.play}
+      onclick={(e) =>
+        video.state.setState((last) =>
+          last === "playing" ? "paused" : "playing"
+        )
+      }
+    >
+      <Show when={video.state.state() === "playing"} fallback={<FaSolidPlay />}>
+        <FaSolidPause />
+      </Show>
+    </button>
+  );
 };