Merge with v1.

Novage · Dec 28, 2023 · 61eeb8e · 61eeb8e
2 parents 4ec4ee2 + 2fd5fb0
commit 61eeb8e
Show file tree

Hide file tree

Showing 27 changed files with 1,093 additions and 1,210 deletions.
diff --git a/.prettierrc.common.cjs b/.prettierrc.common.cjs
@@ -1,4 +1,5 @@
 module.exports = {
   editorconfig: true,
   singleQuote: false,
+  trailingComma: "es5"
 };
diff --git a/p2p-media-loader-demo/.eslintrc.cjs b/p2p-media-loader-demo/.eslintrc.cjs
@@ -1,18 +1,18 @@
 module.exports = {
-    env: {es2020: true},
-    extends: ["../.eslintrc.common.cjs", "plugin:react-hooks/recommended"],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        project: "tsconfig.json",
-        tsconfigRootDir: __dirname,
-    },
-    plugins: ["react-refresh"],
-    rules: {
-        "react-refresh/only-export-components": "warn",
-        "@typescript-eslint/ban-ts-comment": 0,
-        "react-hooks/exhaustive-deps": 0,
-        "@typescript-eslint/no-explicit-any": 0
-    },
+  env: { es2020: true },
+  extends: ["../.eslintrc.common.cjs", "plugin:react-hooks/recommended"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: "tsconfig.json",
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": "warn",
+    "@typescript-eslint/ban-ts-comment": 0,
+    "react-hooks/exhaustive-deps": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+  },
 };
diff --git a/p2p-media-loader-demo/index.html b/p2p-media-loader-demo/index.html
@@ -1,13 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <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/clappr@latest"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/shaka-player@~4.6.0/dist/shaka-player.compiled.min.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.external.js"></script>
+  <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@latest/dist/hls.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest"></script>
+  <script type="text/javascript"
+          src="https://cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
+  <script type="text/javascript"
+          src="https://cdn.jsdelivr.net/npm/shaka-player@~4.6.0/dist/shaka-player.compiled.min.js"></script>
+  <script type="text/javascript"
+          src="https://cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.external.js"></script>
 </head>
 <body>
 <div id="root"></div>

diff --git a/p2p-media-loader-demo/package.json b/p2p-media-loader-demo/package.json
@@ -13,20 +13,19 @@
   },
   "dependencies": {
     "dplayer": "^1.27.1",
-    "hls.js": "^1.4.5",
     "mux.js": "^6.3.0",
     "p2p-media-loader-hlsjs": "workspace:*",
     "p2p-media-loader-shaka": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/dplayer": "^1.25.2",
-    "@types/react": "^18.2.9",
-    "@types/react-dom": "^18.2.4",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@types/dplayer": "^1.25.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.1",
-    "vite-plugin-node-polyfills": "^0.14.1"
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite-plugin-node-polyfills": "^0.18.0"
   }
 }
diff --git a/p2p-media-loader-demo/src/App.tsx b/p2p-media-loader-demo/src/App.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Engine as HlsJsEngine } from "p2p-media-loader-hlsjs";
 import { Engine as ShakaEngine } from "p2p-media-loader-shaka";
-import Hls from "hls.js";
 import DPlayer from "dplayer";
 import muxjs from "mux.js";
 import debug from "debug";
@@ -25,38 +24,36 @@ const streamUrls = {
     "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8",
   hlsOneLevelByteRangeVideo:
     "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/gear1/prog_index.m3u8",
+  hlsBasicExample:
+    "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8",
   hlsAdvancedVideo:
     "https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8",
   hlsAdvancedVideo2:
     "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_adv_example_hevc/master.m3u8",
-  hlsAdvancedVideo3:
-    "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8",
-  hlsAdvancedVideo4:
-    "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8",
-  hlsBasicExample:
-    "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8",
   hlsLive1:
     "https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8",
   hlsLive2:
     "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8",
-  live2OnlyLevel4:
+  hlsLive2Level4Only:
     "https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/level_4.m3u8",
-  audioOnly:
+  hlsAudioOnly:
     "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/a1/prog_index.m3u8",
   bigBunnyBuckDash: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
   dashLiveBigBunnyBuck:
     "https://livesim.dashif.org/livesim/testpic_2s/Manifest.mpd",
   dashVODBigBunnyBuck:
     "https://dash.akamaized.net/dash264/TestCases/5b/nomor/6.mpd",
+  dashLiveHokey:
+    "https://d24rwxnt7vw9qb.cloudfront.net/v1/dash/e6d234965645b411ad572802b6c9d5a10799c9c1/All_Reference_Streams/4577dca5f8a44756875ab5cc913cd1f1/index.mpd",
 };
 
 function App() {
   const [playerType, setPlayerType] = useState<Player | undefined>(
-    localStorage.player
+    localStorage.player,
   );
   const [streamUrl, setStreamUrl] = useState<string>(localStorage.streamUrl);
   const shakaInstance = useRef<shaka.Player>();
-  const hlsInstance = useRef<Hls>();
+  const hlsInstance = useRef<any>();
   const containerRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
   const [httpLoaded, setHttpLoaded] = useState<number>(0);
@@ -65,13 +62,13 @@ function App() {
     "httpLoaded",
     0,
     (v) => v.toString(),
-    (v) => (v !== null ? +v : 0)
+    (v) => (v !== null ? +v : 0),
   );
   const [p2pLoadedGlob, setP2PLoadedGlob] = useLocalStorageItem<number>(
     "p2pLoaded",
     0,
     (v) => v.toString(),
-    (v) => (v !== null ? +v : 0)
+    (v) => (v !== null ? +v : 0),
   );
 
   const hlsEngine = useRef<HlsJsEngine>();
@@ -99,7 +96,7 @@ function App() {
 
   useEffect(() => {
     if (
-      !Hls.isSupported() ||
+      !window.Hls.isSupported() ||
       (window as unknown as ExtendedWindow).videoPlayer
     ) {
       return;
@@ -115,15 +112,16 @@ function App() {
     createNewPlayer();
   }, [playerType]);
 
-  const setPlayerToWindow = (player: DPlayer | ShakaPlayer | Hls) => {
+  const setPlayerToWindow = (
+    player: DPlayer | ShakaPlayer | typeof window.Hls,
+  ) => {
     (window as unknown as ExtendedWindow).videoPlayer = player;
   };
 
   const initHlsJsPlayer = (url: string) => {
-    if (!videoRef.current) return;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const engine = hlsEngine.current!;
-    const hls = new Hls({
+    if (!videoRef.current || !hlsEngine.current) return;
+    const engine = hlsEngine.current;
+    const hls = new window.Hls({
       ...engine.getConfig(),
     });
     engine.setHls(hls);
@@ -134,7 +132,7 @@ function App() {
   };
 
   const initHlsDPlayer = (url: string) => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    if (!hlsEngine.current) return;
     const engine = hlsEngine.current!;
     const player = new DPlayer({
       container: containerRef.current,
@@ -143,10 +141,7 @@ function App() {
         type: "customHls",
         customType: {
           customHls: (video: HTMLVideoElement) => {
-            const hls = new Hls({
-              ...engine.getConfig(),
-              liveSyncDurationCount: 7,
-            });
+            const hls = new window.Hls(engine.getConfig());
             engine.setHls(hls);
             hls.loadSource(video.src);
             hls.attachMedia(video);
@@ -199,7 +194,7 @@ function App() {
             shakaPlayer.addEventListener("error", (event: { code: number }) => {
               onError(event);
             });
-            engine.initShakaPlayer(shakaPlayer);
+            engine.configureAndInitShakaPlayer(shakaPlayer);
             shakaPlayer.load(src).catch(onError);
 
             shakaInstance.current = shakaPlayer;
@@ -222,7 +217,7 @@ function App() {
     player.addEventListener("error", (event: { detail: { code: unknown } }) => {
       onError(event.detail);
     });
-    engine.initShakaPlayer(player);
+    engine.configureAndInitShakaPlayer(player);
     player.load(url).catch(onError);
     shakaInstance.current = player;
     setPlayerToWindow(player);
@@ -237,7 +232,7 @@ function App() {
       source: url,
       plugins: [window.DashShakaPlayback, window.LevelSelector],
       shakaOnBeforeLoad: (shakaPlayerInstance: any) => {
-        engine.initShakaPlayer(shakaPlayerInstance);
+        engine.configureAndInitShakaPlayer(shakaPlayerInstance);
       },
     });
     setPlayerToWindow(clapprPlayer);
@@ -304,6 +299,10 @@ function App() {
     }
   };
 
+  const createInNewTab = () => {
+    window.open(window.location.href, "_blank");
+  };
+
   return (
     <div style={{ width: 1000, margin: "auto" }}>
       <div style={{ textAlign: "center" }}>
@@ -340,6 +339,7 @@ function App() {
             <button onClick={loadStreamWithExistingInstance}>
               Load stream with existing hls/shaka instance
             </button>
+            <button onClick={createInNewTab}>Create in new tab</button>
           </div>
         </div>
         <div style={{ display: "flex", justifyContent: "center" }}>
@@ -408,12 +408,12 @@ function LoggersSelect() {
       setTimeout(() => debug.enable(localStorage.debug), 0);
       if (!storageItem) return [];
       return storageItem.split(",");
-    }
+    },
   );
 
   const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     setActiveLoggers(
-      Array.from(event.target.selectedOptions, (option) => option.value)
+      Array.from(event.target.selectedOptions, (option) => option.value),
     );
   };
 
@@ -454,10 +454,10 @@ function useLocalStorageItem<T>(
   prop: string,
   initValue: T,
   valueToStorageItem: (value: T) => string | null,
-  storageItemToValue: (storageItem: string | null) => T
+  storageItemToValue: (storageItem: string | null) => T,
 ): [T, React.Dispatch<React.SetStateAction<T>>] {
   const [value, setValue] = useState<T>(
-    storageItemToValue(localStorage[prop]) ?? initValue
+    storageItemToValue(localStorage[prop]) ?? initValue,
   );
   const setValueExternal = useCallback((value: T | ((prev: T) => T)) => {
     setValue(value);

diff --git a/p2p-media-loader-demo/src/global.d.ts b/p2p-media-loader-demo/src/global.d.ts
@@ -4,6 +4,8 @@ declare global {
     LevelSelector: any;
     DashShakaPlayback: any;
     shaka: any;
+    muxjs: any;
+    Hls: any;
   }
 }
 

diff --git a/p2p-media-loader-demo/src/main.tsx b/p2p-media-loader-demo/src/main.tsx
@@ -5,5 +5,5 @@ import App from "./App";
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/package.json b/package.json
@@ -14,22 +14,17 @@
     "type-check": "pnpm --recursive run type-check"
   },
   "devDependencies": {
-    "@types/debug": "^4.1.8",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "eslint": "^8.39.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.8",
-    "rimraf": "^5.0.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.2"
+    "@types/debug": "^4.1.12",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "prettier": "^3.1.1",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   },
   "dependencies": {
     "debug": "^4.3.4"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "[email protected]": "patches/[email protected]"
-    }
   }
 }
diff --git a/packages/p2p-media-loader-core/package.json b/packages/p2p-media-loader-core/package.json
@@ -27,9 +27,7 @@
     "type-check": "npx tsc --noEmit"
   },
   "dependencies": {
-    "bittorrent-tracker": "10.0.12",
+    "bittorrent-tracker": "^11.0.0",
     "nano-md5": "^1.0.5"
-  },
-  "devDependencies": {
   }
 }
diff --git a/packages/p2p-media-loader-core/src/event-dispatcher.ts b/packages/p2p-media-loader-core/src/event-dispatcher.ts
@@ -1,7 +1,7 @@
 export class EventDispatcher<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   T extends { [key: string]: (...args: any[]) => void | Promise<void> },
-  K extends keyof T = keyof T
+  K extends keyof T = keyof T,
 > {
   private readonly listeners = new Map<keyof T, Set<T[K]>>();
 

diff --git a/packages/p2p-media-loader-core/src/hybrid-loader.ts b/packages/p2p-media-loader-core/src/hybrid-loader.ts
@@ -226,7 +226,11 @@ export class HybridLoader {
           break;
         }
 
+        const isP2PLoadingRequest =
+          request?.status === "loading" && request.type === "p2p";
+
         if (this.requests.executingHttpCount < simultaneousHttpDownloads) {
+          if (isP2PLoadingRequest) request.abortFromEngine();
           void this.loadThroughHttp(segment);
           continue;
         }
@@ -235,11 +239,12 @@ export class HybridLoader {
           this.abortLastHttpLoadingInQueueAfterItem(queue, segment) &&
           this.requests.executingHttpCount < simultaneousHttpDownloads
         ) {
+          if (isP2PLoadingRequest) request.abortFromEngine();
           void this.loadThroughHttp(segment);
           continue;
         }
 
-        if (request?.type === "p2p" && request.status === "loading") continue;
+        if (isP2PLoadingRequest) continue;
 
         if (this.requests.executingP2PCount < simultaneousP2PDownloads) {
           void this.loadThroughP2P(segment);

diff --git a/packages/p2p-media-loader-core/src/p2p/tracker-client.ts b/packages/p2p-media-loader-core/src/p2p/tracker-client.ts
@@ -108,7 +108,9 @@ export class P2PTrackerClient {
         },
         this.settings
       );
-      this.logger(`connected with peer: ${peerItem.peer.id}`);
+      this.logger(
+        `connected with peer: ${peerItem.peer.id} ${this.streamShortId}`
+      );
       this.eventHandlers.onPeerConnected(peerItem.peer);
     });
   };