From 17471aef89d44d18868a20d03dad7057a0084db1 Mon Sep 17 00:00:00 2001
From: DimaDemchenko <demchenkodmytro73@gmail.com>
Date: Fri, 29 Nov 2024 11:05:27 +0200
Subject: [PATCH] fix: shaka player components

---
 .../src/components/players/loader/Loader.tsx  | 10 +++++
 .../src/components/players/loader/loader.css  | 33 ++++++++++++++
 .../components/players/shaka/ShakaClappr.tsx  | 43 ++++++-------------
 .../components/players/shaka/ShakaDPlayer.tsx |  2 +-
 4 files changed, 57 insertions(+), 31 deletions(-)
 create mode 100644 packages/p2p-media-loader-demo/src/components/players/loader/Loader.tsx
 create mode 100644 packages/p2p-media-loader-demo/src/components/players/loader/loader.css

diff --git a/packages/p2p-media-loader-demo/src/components/players/loader/Loader.tsx b/packages/p2p-media-loader-demo/src/components/players/loader/Loader.tsx
new file mode 100644
index 00000000..f120da70
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/p2p-media-loader-demo/src/components/players/loader/loader.css b/packages/p2p-media-loader-demo/src/components/players/loader/loader.css
new file mode 100644
index 00000000..0a12bc6d
--- /dev/null
+++ b/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);
+  }
+}
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
index eb141593..14d14632 100644
--- a/packages/p2p-media-loader-demo/src/components/players/shaka/ShakaClappr.tsx
+++ b/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,7 +81,6 @@ export const ShakaClappr = ({
     };
     /* eslint-enable  */
   }, [
-    isClapprLoaded,
     announceTrackers,
     onChunkDownloaded,
     onChunkUploaded,
@@ -110,8 +88,13 @@ export const ShakaClappr = ({
     onPeerClose,
     streamUrl,
     swarmId,
+    areScriptsLoaded,
   ]);
 
+  if (!areScriptsLoaded) {
+    return <Loader />;
+  }
+
   return window.shaka.Player.isBrowserSupported() ? (
     <div ref={containerRef} id="clappr-player" />
   ) : (
diff --git a/packages/p2p-media-loader-demo/src/components/players/shaka/ShakaDPlayer.tsx b/packages/p2p-media-loader-demo/src/components/players/shaka/ShakaDPlayer.tsx
index a112e42b..a94f1627 100644
--- a/packages/p2p-media-loader-demo/src/components/players/shaka/ShakaDPlayer.tsx
+++ b/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>