Feat: Implement useCanPlay on pluginApi

packages/base-plugin/src/client/PluginAPIProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useEffect, useRef, useState } from "react";
 
 import { AwarenessContext, PluginContext } from "..";
 import { initPluginApi } from "./initPluginApi";
@@ -34,6 +34,8 @@ export const PluginAPIProvider = ({
   const [pluginAPI, setPluginAPI] =
     useState<ReturnType<InitPluginApiFunc> | null>(null);
 
+  const audioRef = useRef<HTMLAudioElement>(null);
+
   useEffect(() => {
     setPluginAPI(
       initPluginApi({
@@ -42,6 +44,7 @@ export const PluginAPIProvider = ({
         awarenessContext,
         pluginContext,
         setRenderCurrentScene,
+        audioRef,
       }),
     );
   }, [
@@ -55,7 +58,32 @@ export const PluginAPIProvider = ({
 
   return (
     <PluginAPIContext.Provider value={{ pluginAPI }}>
+      <audio ref={audioRef} src={objectUrl} />
       {pluginAPI && children}
     </PluginAPIContext.Provider>
   );
 };
+
+const objectUrl = URL.createObjectURL(
+  new Blob(
+    [
+      new Uint8Array([
+        255, 227, 24, 196, 0, 0, 0, 3, 72, 1, 64, 0, 0, 4, 132, 16, 31, 227,
+        192, 225, 76, 255, 67, 12, 255, 221, 27, 255, 228, 97, 73, 63, 255, 195,
+        131, 69, 192, 232, 223, 255, 255, 207, 102, 239, 255, 255, 255, 101,
+        158, 206, 70, 20, 59, 255, 254, 95, 70, 149, 66, 4, 16, 128, 0, 2, 2,
+        32, 240, 138, 255, 36, 106, 183, 255, 227, 24, 196, 59, 11, 34, 62, 80,
+        49, 135, 40, 0, 253, 29, 191, 209, 200, 141, 71, 7, 255, 252, 152, 74,
+        15, 130, 33, 185, 6, 63, 255, 252, 195, 70, 203, 86, 53, 15, 255, 255,
+        247, 103, 76, 121, 64, 32, 47, 255, 34, 227, 194, 209, 138, 76, 65, 77,
+        69, 51, 46, 57, 55, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170,
+        255, 227, 24, 196, 73, 13, 153, 210, 100, 81, 135, 56, 0, 170, 170, 170,
+        170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170,
+        170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170,
+        170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170,
+        170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170, 170,
+      ]),
+    ],
+    { type: "audio/mpeg" },
+  ),
+);

packages/base-plugin/src/client/initPluginApi.tsx

@@ -1,5 +1,6 @@
 import { YjsWatcher, appData } from "@repo/lib";
 import isEqual from "fast-deep-equal";
+import { useEffect, useState } from "react";
 import { useLocation } from "react-use";
 import { typeidUnboxed } from "typeid-js";
 import { proxy } from "valtio";
@@ -23,12 +24,14 @@ export function initPluginApi<
   awarenessContext,
   pluginContext,
   setRenderCurrentScene,
+  audioRef,
 }: {
   yjsPluginSceneData: ObjectToTypedMap<Plugin<PluginSceneDataType>>;
   yjsPluginRendererData: ObjectToTypedMap<PluginRendererDataType>;
   awarenessContext: AwarenessContext;
   pluginContext: PluginContext;
   setRenderCurrentScene: () => void;
+  audioRef: React.RefObject<HTMLAudioElement | null>;
 }) {
   // TODO: Should only be called once
   const sceneWatcher = new YjsWatcher(yjsPluginSceneData as any);
@@ -60,6 +63,8 @@ export function initPluginApi<
   // Then on all updates
   awarenessContext.awarenessObj.on("update", onAwarenessUpdate);
 
+  let canPlay = false;
+
   return {
     env: appData,
     pluginContext,
@@ -111,6 +116,28 @@ export function initPluginApi<
         return pluginContext.sceneId === scene;
       },
     },
+    audio: {
+      useCanPlay: () => {
+        const [status, setStatus] = useState(canPlay);
+
+        useEffect(() => {
+          if (status) return;
+          const interval = setInterval(async () => {
+            try {
+              await audioRef.current?.play();
+              canPlay = true;
+              setStatus(true);
+
+              clearInterval(interval);
+            } catch (e) {
+              console.log("Checking autoplay. Error:", e);
+            }
+          }, 1000);
+        }, []);
+
+        return status;
+      },
+    },
     dispose: () => {
       unbindScene();
       unbindRenderer();

plugins/video-player/package.json

@@ -24,15 +24,13 @@
     "@trpc/client": "^11.0.0-rc.593",
     "@trpc/react-query": "^11.0.0-rc.593",
     "@trpc/server": "^11.0.0-rc.593",
-    "@types/can-autoplay": "^3.0.5",
     "@types/react": "npm:types-react@rc",
     "@uppy/core": "^4.2.2",
     "@uppy/dashboard": "^4.1.1",
     "@uppy/file-input": "^4.0.2",
     "@uppy/react": "^4.0.2",
     "@uppy/status-bar": "^4.0.3",
     "@uppy/xhr-upload": "^4.2.1",
-    "can-autoplay": "^3.0.2",
     "framer-motion": "^11.11.10",
     "react": "rc",
     "react-dom": "rc",

plugins/video-player/view/Renderer/index.tsx

@@ -1,4 +1,3 @@
-import canAutoPlay from "can-autoplay";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactPlayer from "react-player/lazy";
 
@@ -32,21 +31,9 @@ const VideoPlayerRendererInner = () => {
 const Player = () => {
   const pluginApi = usePluginAPI();
 
-  const [canPlay, setCanPlay] = useState(false);
-  const [ready, setReady] = useState(false);
+  const canPlay = pluginApi.audio.useCanPlay();
 
-  useEffect(() => {
-    const check = async () => {
-      const res = await canAutoPlay.audio({ inline: true });
-      if (res.result) {
-        setCanPlay(true);
-      } else {
-        setTimeout(check, 1000);
-      }
-    };
-
-    check();
-  }, []);
+  const [ready, setReady] = useState(false);
 
   const ref = useRef<ReactPlayer>(null);