fix: shaka player components (#449)

packages/p2p-media-loader-demo/src/components/players/loader/Loader.tsx

@@ -0,0 +1,10 @@
+// Loader.tsx
+import "./loader.css";
+
+export const Loader = () => {
+  return (
+    <div className="loader-container">
+      <div className="loader"></div>
+    </div>
+  );
+};

packages/p2p-media-loader-demo/src/components/players/loader/loader.css

@@ -0,0 +1,33 @@
+.loader-container {
+  width: 100%;
+  height: 20%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .loader-container {
+    height: 40%;
+  }
+}
+
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #fff;
+  border-bottom-color: #ff3d00;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

packages/p2p-media-loader-demo/src/components/players/shaka/ShakaClappr.tsx

@@ -1,9 +1,10 @@
 import "../clappr.css";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { PlayerProps } from "../../../types";
 import { ShakaP2PEngine } from "p2p-media-loader-shaka";
 import { subscribeToUiEvents } from "../utils";
 import { useScripts } from "../../../hooks/useScripts";
+import { Loader } from "../loader/Loader";
 
 const SCRIPTS = [
   "https://cdn.jsdelivr.net/npm/shaka-player@~4/dist/shaka-player.compiled.min.js",
@@ -21,43 +22,21 @@ export const ShakaClappr = ({
   onChunkDownloaded,
   onChunkUploaded,
 }: PlayerProps) => {
-  useScripts(SCRIPTS);
-
-  const [isClapprLoaded, setIsClapprLoaded] = useState(false);
+  const areScriptsLoaded = useScripts(SCRIPTS);
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    let intervalId: NodeJS.Timeout | null = null;
-
-    const checkClapprLoaded = () => {
-      if (
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        window.Clappr &&
-        window.LevelSelector &&
-        window.DashShakaPlayback &&
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        window.shaka.Player
-      ) {
-        if (intervalId) clearInterval(intervalId);
-        setIsClapprLoaded(true);
-        ShakaP2PEngine.registerPlugins();
-      }
-    };
+    if (!areScriptsLoaded) return;
 
-    intervalId = setInterval(checkClapprLoaded, 200);
-
-    return () => {
-      clearInterval(intervalId);
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (window.shaka) ShakaP2PEngine.unregisterPlugins();
-    };
-  }, []);
+    ShakaP2PEngine.registerPlugins(window.shaka);
+    return () => ShakaP2PEngine.unregisterPlugins(window.shaka);
+  }, [areScriptsLoaded]);
 
   useEffect(() => {
     if (
+      !areScriptsLoaded ||
       !containerRef.current ||
-      !isClapprLoaded ||
       !window.shaka.Player.isBrowserSupported()
     ) {
       return;
@@ -102,16 +81,20 @@ export const ShakaClappr = ({
     };
     /* eslint-enable  */
   }, [
-    isClapprLoaded,
     announceTrackers,
     onChunkDownloaded,
     onChunkUploaded,
     onPeerConnect,
     onPeerClose,
     streamUrl,
     swarmId,
+    areScriptsLoaded,
   ]);
 
+  if (!areScriptsLoaded) {
+    return <Loader />;
+  }
+
   return window.shaka.Player.isBrowserSupported() ? (
     <div ref={containerRef} id="clappr-player" />
   ) : (

packages/p2p-media-loader-demo/src/components/players/shaka/ShakaDPlayer.tsx

@@ -73,7 +73,7 @@ export const ShakaDPlayer = ({
     swarmId,
   ]);
 
-  return window.shaka.Player.isBrowserSupported() ? (
+  return shaka.Player.isBrowserSupported() ? (
     <div ref={containerRef} className="video-container">
       <video playsInline autoPlay muted />
     </div>