Fix: Clappr demo (#389)

* Fix Clappr example in api docs * Fix Clappr Demo
Novage · Jul 4, 2024 · 6dd55d3 · 6dd55d3
1 parent f76062b
commit 6dd55d3
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 41 deletions.
diff --git a/api_documentation.md b/api_documentation.md
@@ -48,9 +48,7 @@ To include **P2P Media Loader** in your project using npm, follow these steps:
      import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
 
      export default {
-       plugins: [
-         new NodePolyfillPlugin({ additionalAliases: ["process"] }),
-       ],
+       plugins: [new NodePolyfillPlugin({ additionalAliases: ["process"] })],
      };
      ```
 
@@ -240,8 +238,10 @@ For more examples with npm packages, you may check our [React demo](https://gith
     height: "100%",
     width: "100%",
     parentId: `#player`,
-    hlsjsConfig: {
-      ...engine.getConfigForHlsJs(),
+    playback: {
+      hlsjsConfig: {
+        ...engine.getConfigForHlsJs(),
+      },
     },
   });
 

diff --git a/demo/index.html b/demo/index.html
@@ -4,26 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/hls.js@~1/dist/hls.min.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/@clappr/player@~0/dist/clappr.min.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@~0/dist/level-selector.min.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/shaka-player@~4/dist/shaka-player.compiled.min.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/dash-shaka-playback@~3/dist/dash-shaka-playback.external.min.js"
-    ></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx b/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
@@ -34,6 +34,9 @@ declare global {
     Hls?: typeof HlsWithP2PType;
     LevelSelector: unknown;
     DashShakaPlayback: unknown;
+    Clappr: {
+      Player: unknown;
+    };
   }
 }
 

diff --git a/packages/p2p-media-loader-demo/src/components/players/clappr.css b/packages/p2p-media-loader-demo/src/components/players/clappr.css
@@ -43,7 +43,3 @@
     height: 411px;
   }
 }
-
-#clappr-player {
-  width: 100%;
-}
diff --git a/packages/p2p-media-loader-demo/src/components/players/hlsjs/HlsjsClapprPlayer.tsx b/packages/p2p-media-loader-demo/src/components/players/hlsjs/HlsjsClapprPlayer.tsx
@@ -4,6 +4,12 @@ import { PlayerProps } from "../../../types";
 import { HlsJsP2PEngine } from "p2p-media-loader-hlsjs";
 import { subscribeToUiEvents } from "../utils";
 import Hls from "hls.js";
+import { useScripts } from "../../../hooks/useScripts";
+
+const SCRIPTS = [
+  "https://cdn.jsdelivr.net/npm/@clappr/player@~0/dist/clappr.min.js",
+  "https://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@~0/dist/level-selector.min.js",
+];
 
 export const HlsjsClapprPlayer = ({
   streamUrl,
@@ -13,12 +19,31 @@ export const HlsjsClapprPlayer = ({
   onChunkDownloaded,
   onChunkUploaded,
 }: PlayerProps) => {
+  useScripts(SCRIPTS);
+
+  const [isClapprLoaded, setIsClapprLoaded] = useState(false);
   const [isHlsSupported, setIsHlsSupported] = useState(true);
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!containerRef.current) return;
+    let intervalId: NodeJS.Timeout | null = null;
+
+    const checkClapprLoaded = () => {
+      if (!window.Clappr && !window.LevelSelector) return;
+      if (intervalId) clearInterval(intervalId);
+      setIsClapprLoaded(true);
+    };
+
+    intervalId = setInterval(checkClapprLoaded, 200);
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current || !isClapprLoaded) return;
     if (!Hls.isSupported()) {
       setIsHlsSupported(false);
       return;
@@ -56,14 +81,15 @@ export const HlsjsClapprPlayer = ({
       height: "100%",
     });
 
-    engine.bindHls(() => (clapprPlayer as any).core.getCurrentPlayback()?._hls);
+    engine.bindHls(() => clapprPlayer.core.getCurrentPlayback()?._hls);
 
     return () => {
       clapprPlayer.destroy();
       engine.destroy();
     };
     /* eslint-enable  */
   }, [
+    isClapprLoaded,
     announceTrackers,
     onChunkDownloaded,
     onChunkUploaded,

diff --git a/packages/p2p-media-loader-demo/src/components/players/shaka/ShakaClappr.tsx b/packages/p2p-media-loader-demo/src/components/players/shaka/ShakaClappr.tsx
@@ -3,6 +3,14 @@ import { useEffect, useRef, useState } from "react";
 import { PlayerProps } from "../../../types";
 import { ShakaP2PEngine } from "p2p-media-loader-shaka";
 import { subscribeToUiEvents } from "../utils";
+import { useScripts } from "../../../hooks/useScripts";
+
+const SCRIPTS = [
+  "https://cdn.jsdelivr.net/npm/shaka-player@~4/dist/shaka-player.compiled.min.js",
+  "https://cdn.jsdelivr.net/npm/@clappr/player@~0/dist/clappr.min.js",
+  "https://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@~0/dist/level-selector.min.js",
+  "https://cdn.jsdelivr.net/npm/dash-shaka-playback@~3/dist/dash-shaka-playback.external.min.js",
+];
 
 export const ShakaClappr = ({
   streamUrl,
@@ -12,30 +20,49 @@ export const ShakaClappr = ({
   onChunkDownloaded,
   onChunkUploaded,
 }: PlayerProps) => {
+  useScripts(SCRIPTS);
+
+  const [isClapprLoaded, setIsClapprLoaded] = useState(false);
   const [isShakaSupported, setIsShakaSupported] = useState(true);
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    ShakaP2PEngine.registerPlugins();
-    return () => ShakaP2PEngine.unregisterPlugins();
+    let intervalId: NodeJS.Timeout | null = null;
+
+    const checkClapprLoaded = () => {
+      if (
+        window.Clappr &&
+        window.LevelSelector &&
+        window.DashShakaPlayback &&
+        window.shaka.Player
+      ) {
+        if (intervalId) clearInterval(intervalId);
+        setIsClapprLoaded(true);
+        ShakaP2PEngine.registerPlugins();
+      }
+    };
+
+    intervalId = setInterval(checkClapprLoaded, 200);
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+      if (window.shaka) ShakaP2PEngine.unregisterPlugins();
+    };
   }, []);
 
   useEffect(() => {
-    if (!containerRef.current) return;
+    if (!containerRef.current || !isClapprLoaded) return;
     if (!window.shaka.Player.isBrowserSupported()) {
       setIsShakaSupported(false);
       return;
     }
 
-    const shakaP2PEngine = new ShakaP2PEngine(
-      {
-        core: {
-          announceTrackers,
-        },
+    const shakaP2PEngine = new ShakaP2PEngine({
+      core: {
+        announceTrackers,
       },
-      window.shaka,
-    );
+    });
 
     /* eslint-disable  */
     // @ts-ignore
@@ -69,6 +96,7 @@ export const ShakaClappr = ({
     };
     /* eslint-enable  */
   }, [
+    isClapprLoaded,
     announceTrackers,
     onChunkDownloaded,
     onChunkUploaded,

diff --git a/packages/p2p-media-loader-demo/src/hooks/useScripts.ts b/packages/p2p-media-loader-demo/src/hooks/useScripts.ts
@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+
+const loadScript = (url: string): Promise<HTMLScriptElement> => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = url;
+    script.async = true;
+    script.type = "text/javascript";
+    script.onload = () => resolve(script);
+    script.onerror = (error) => reject(error);
+    document.body.appendChild(script);
+  });
+};
+export const useScripts = (scripts: string[]) => {
+  useEffect(() => {
+    let isCleanup = false;
+
+    const loadAllScripts = async () => {
+      for (const script of scripts) {
+        await loadScript(script);
+        if (isCleanup) break;
+      }
+    };
+
+    void loadAllScripts();
+
+    return () => {
+      isCleanup = true;
+      scripts.forEach((url) => {
+        const scriptElement = document.querySelector(`script[src="${url}"]`);
+        if (scriptElement) {
+          document.body.removeChild(scriptElement);
+        }
+      });
+    };
+  }, [scripts]);
+};