Add play controls to Ruffle taskbar peek

components/apps/Ruffle/types.ts

@@ -3,6 +3,7 @@ type BaseLoadOptions = {
   autoplay?: "auto" | "off" | "on";
   backgroundColor?: string | null;
   letterbox?: "fullscreen" | "off" | "on";
+  menu?: boolean;
   unmuteOverlay?: "hidden";
 };
 
@@ -16,7 +17,10 @@ type DataLoadOptions = {
 };
 
 export type RufflePlayer = HTMLElement & {
+  isPlaying: () => boolean;
   load: (options: BaseLoadOptions & DataLoadOptions) => Promise<void>;
+  pause: () => void;
+  play: () => void;
 };
 
 type SourceAPI = {

components/apps/Ruffle/useRuffle.ts

@@ -1,5 +1,5 @@
 import { basename, extname } from "path";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { type RufflePlayer } from "components/apps/Ruffle/types";
 import { type ContainerHookProps } from "components/system/Apps/AppContainer";
 import useTitle from "components/system/Window/useTitle";
@@ -13,9 +13,13 @@ const useRuffle = ({
   setLoading,
   url,
 }: ContainerHookProps): void => {
-  const { linkElement, processes: { [id]: { libs = [] } = {} } = {} } =
-    useProcesses();
+  const {
+    argument,
+    linkElement,
+    processes: { [id]: { libs = [] } = {} } = {},
+  } = useProcesses();
   const [player, setPlayer] = useState<RufflePlayer>();
+  const eventTarget = useRef(new EventTarget());
   const { appendFileToTitle } = useTitle(id);
   const { readFile } = useFileSystem();
   const loadFlash = useCallback(async () => {
@@ -40,6 +44,7 @@ const useRuffle = ({
           autoplay: "on",
           backgroundColor: "#000000",
           letterbox: "on",
+          menu: false,
           polyfills: false,
           preloader: false,
           unmuteOverlay: "hidden",
@@ -59,10 +64,26 @@ const useRuffle = ({
     if (containerRef.current && player) {
       containerRef.current.append(player);
       linkElement(id, "peekElement", player);
+      argument(id, "play", () => {
+        player.play();
+        eventTarget.current.dispatchEvent(new Event("play"));
+      });
+      argument(id, "pause", () => {
+        player.pause();
+        eventTarget.current.dispatchEvent(new Event("pause"));
+      });
+      argument(id, "paused", (callback?: (paused: boolean) => void) => {
+        if (callback) {
+          eventTarget.current.addEventListener("pause", () => callback(true));
+          eventTarget.current.addEventListener("play", () => callback(false));
+        }
+
+        return !player.isPlaying;
+      });
     }
 
     return () => player?.remove();
-  }, [containerRef, id, linkElement, player]);
+  }, [argument, containerRef, id, linkElement, player]);
 
   useEffect(() => {
     if (containerRef.current && player && url) loadFlash();