feat: 🎸 add backup cdn urls

hoangvu12 · Sep 15, 2023 · c41f7c0 · c41f7c0
1 parent c1ef60b
commit c41f7c0
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['10.x', '12.x', '14.x']
+        node: [16, 18]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
@@ -14,10 +14,18 @@ const getHlsScriptUrl = (version = 'latest') => {
   return `https://cdn.jsdelivr.net/npm/hls.js@${version}/dist/hls.min.js`;
 };
 
+const getAltHlsScriptUrl = (version = '1.4.10') => {
+  return `https://cdnjs.cloudflare.com/ajax/libs/hls.js/${version}/hls.min.js`;
+};
+
 const getDashScriptUrl = (version = 'latest') => {
   return `https://cdn.jsdelivr.net/npm/dashjs@${version}/dist/dash.all.min.js`;
 };
 
+const getAltDashScriptUrl = (version = '4.7.1') => {
+  return `https://cdnjs.cloudflare.com/ajax/libs/dashjs/${version}/dash.all.min.js`;
+};
+
 export interface PlayerProps extends React.HTMLAttributes<HTMLVideoElement> {
   sources: Source[];
   hlsRef?: React.MutableRefObject<Hls | null>;
@@ -66,14 +74,13 @@ const Player = React.forwardRef<HTMLVideoElement, PlayerProps>(
     const dashjs = React.useRef<DashJS.MediaPlayerClass | null>(null);
     const { state, setState } = useVideoState();
 
-    const DASH_SCRIPT_URL = React.useMemo(
-      () => getDashScriptUrl(dashVersion),
-      [dashVersion]
-    );
-    const HLS_SCRIPT_URL = React.useMemo(
-      () => getHlsScriptUrl(hlsVersion),
-      [hlsVersion]
-    );
+    const DASH_SCRIPT_URLS = React.useMemo(() => {
+      return [getDashScriptUrl(dashVersion), getAltDashScriptUrl(dashVersion)];
+    }, [dashVersion]);
+
+    const HLS_SCRIPT_URLS = React.useMemo(() => {
+      return [getHlsScriptUrl(hlsVersion), getAltHlsScriptUrl(hlsVersion)];
+    }, [hlsVersion]);
 
     const playerRef = React.useCallback(
       (node) => {
@@ -108,7 +115,7 @@ const Player = React.forwardRef<HTMLVideoElement, PlayerProps>(
       async (source: Source) => {
         async function _initHlsPlayer() {
           const HlsSDK = await loadScript<typeof Hls>(
-            HLS_SCRIPT_URL,
+            HLS_SCRIPT_URLS,
             HLS_VARIABLE_NAME
           );
 
@@ -223,7 +230,7 @@ const Player = React.forwardRef<HTMLVideoElement, PlayerProps>(
           if (!innerRef.current) return;
 
           const DashSDK = await loadScript<typeof DashJS>(
-            DASH_SCRIPT_URL,
+            DASH_SCRIPT_URLS,
             DASH_VARIABLE_NAME
           );
 

diff --git a/src/utils/load-script.ts b/src/utils/load-script.ts
@@ -52,4 +52,32 @@ function loadScript<T>(
   });
 }
 
-export default loadScript;
+function loadBackupScript<T>(
+  src: HTMLScriptElement['src'][],
+  variableName: string,
+  options: Options = {}
+): Promise<T> {
+  return new Promise((resolve, reject) => {
+    let index = 0;
+
+    const loadNextScript = () => {
+      if (index >= src.length) {
+        reject(new Error('Failed to load script from all URLs'));
+        return;
+      }
+
+      const currentSrc = src[index];
+
+      loadScript<T>(currentSrc, variableName, options)
+        .then(resolve)
+        .catch(() => {
+          index++;
+          loadNextScript();
+        });
+    };
+
+    loadNextScript();
+  });
+}
+
+export default loadBackupScript;