Feat: players

demo/package.json

@@ -17,9 +17,9 @@
     "dplayer": "^1.27.1",
     "mux.js": "^6.3.0",
     "p2p-media-loader-core": "workspace:*",
+    "p2p-media-loader-demo": "workspace:*",
     "p2p-media-loader-hlsjs": "workspace:*",
     "p2p-media-loader-shaka": "workspace:*",
-    "p2p-media-loader-demo": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/p2p-media-loader-demo/package.json

@@ -45,10 +45,18 @@
     "clean-with-modules": "rimraf node_modules && pnpm clean"
   },
   "dependencies": {
+    "@vidstack/react": "^1.11.21",
+    "@vime/react": "^5.4.1",
     "d3": "^7.9.0",
+    "dplayer": "^1.27.1",
     "hls.js": "^1.5.7",
+    "mediaelement": "^7.0.3",
+    "openplayerjs": "^2.14.3",
     "p2p-media-loader-core": "workspace:*",
-    "p2p-media-loader-hlsjs": "workspace:*"
+    "p2p-media-loader-hlsjs": "workspace:*",
+    "p2p-media-loader-shaka": "workspace:*",
+    "plyr": "^3.7.8",
+    "shaka-player": "^4.7.13"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx

@@ -1,26 +1,55 @@
 import "./demo.css";
-import type Hls from "hls.js";
 import { PlaybackOptions } from "./PlaybackOptions";
 import { PLAYERS } from "../constants";
 import { useQueryParams } from "../hooks/useQueryParams";
-import { HlsjsPlayer } from "./players/Hlsjs";
+import { HlsjsPlayer } from "./players/hlsjs/Hlsjs";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { DownloadStatsChart } from "./chart/DownloadStatsChart";
 import { NodeNetwork } from "./nodeNetwork/NodeNetwork";
 import { DebugTools } from "./debugTools/DebugTools";
-import { DownloadStats } from "../types";
+import { DownloadStats, PlayerKey } from "../types";
+import { HlsjsDPlayer } from "./players/hlsjs/HlsjsDPLayer";
+import { HlsjsClapprPlayer } from "./players/hlsjs/HlsjsClapprPlayer";
+import { HlsjsVime } from "./players/hlsjs/HlsjsVime";
+import { HlsjsPlyr } from "./players/hlsjs/HlsjsPlyr";
+import { HlsjsOpenPlayer } from "./players/hlsjs/HlsjsOpenPlayer";
+import { Shaka } from "./players/shaka/Shaka";
+import { ShakaDPlayer } from "./players/shaka/ShakaDPlayer";
+import { ShakaClappr } from "./players/shaka/ShakaClappr";
+import { HlsjsMediaElement } from "./players/hlsjs/HlsjsMediaElement";
+import { ShakaPlyr } from "./players/shaka/ShakaPlyr";
+import { HlsJsP2PEngine } from "p2p-media-loader-hlsjs";
+import Hls from "hls.js";
+import { HlsjsVidstack } from "./players/hlsjs/HlsjsVidstack";
+
+type DemoProps = {
+  debugToolsEnabled?: boolean;
+};
+
+const HlsWithP2PType = HlsJsP2PEngine.injectMixin(Hls);
 
 declare global {
   interface Window {
-    Hls: typeof Hls;
-    videoPlayer?: { destroy?: () => void };
+    shaka?: unknown;
+    Hls?: typeof HlsWithP2PType;
+    LevelSelector: unknown;
+    DashShakaPlayback: unknown;
   }
 }
 
-export type Player = (typeof PLAYERS)[number];
-
-type DemoProps = {
-  debugToolsEnabled?: boolean;
+const playerComponents = {
+  openPlayer_hls: HlsjsOpenPlayer,
+  plyr_hls: HlsjsPlyr,
+  vime_hls: HlsjsVime,
+  clappr_hls: HlsjsClapprPlayer,
+  dplayer_hls: HlsjsDPlayer,
+  hlsjs_hls: HlsjsPlayer,
+  shaka: Shaka,
+  dplayer_shaka: ShakaDPlayer,
+  clappr_shaka: ShakaClappr,
+  mediaElement_hls: HlsjsMediaElement,
+  plyr_shaka: ShakaPlyr,
+  vidstack_hls: HlsjsVidstack,
 };
 
 export const P2PVideoDemo = ({ debugToolsEnabled }: DemoProps) => {
@@ -72,26 +101,23 @@ export const P2PVideoDemo = ({ debugToolsEnabled }: DemoProps) => {
   }, []);
 
   const handlePlaybackOptionsUpdate = (url: string, player: string) => {
-    if (!PLAYERS.includes(player as Player)) return;
+    if (!(player in PLAYERS)) return;
     setURLQueryParams({ streamUrl: url, player });
   };
 
   const renderPlayer = () => {
-    switch (queryParams.player) {
-      case "hlsjs":
-        return (
-          <HlsjsPlayer
-            streamUrl={queryParams.streamUrl}
-            announceTrackers={trackers}
-            onPeerConnect={onPeerConnect}
-            onPeerDisconnect={onPeerDisconnect}
-            onChunkDownloaded={onChunkDownloaded}
-            onChunkUploaded={onChunkUploaded}
-          />
-        );
-      default:
-        return null;
-    }
+    const PlayerComponent = playerComponents[queryParams.player as PlayerKey];
+
+    return PlayerComponent ? (
+      <PlayerComponent
+        streamUrl={queryParams.streamUrl}
+        announceTrackers={trackers}
+        onPeerConnect={onPeerConnect}
+        onPeerDisconnect={onPeerDisconnect}
+        onChunkDownloaded={onChunkDownloaded}
+        onChunkUploaded={onChunkUploaded}
+      />
+    ) : null;
   };
 
   return (

packages/p2p-media-loader-demo/src/components/PlaybackOptions.tsx

@@ -1,5 +1,6 @@
 import { useRef } from "react";
 import { PLAYERS } from "../constants";
+import { PlayerKey, PlayerName } from "../types";
 
 type PlaybackOptions = {
   updatePlaybackOptions: (url: string, player: string) => void;
@@ -17,6 +18,17 @@ export const PlaybackOptions = ({
 
   const isHttps = window.location.protocol === "https:";
 
+  const hlsPlayers: Partial<Record<PlayerKey, PlayerName>> = {};
+  const shakaPlayers: Partial<Record<PlayerKey, PlayerName>> = {};
+
+  Object.entries(PLAYERS).forEach(([key, name]) => {
+    if (key.includes("hls")) {
+      hlsPlayers[key as PlayerKey] = name;
+    } else if (key.includes("shaka")) {
+      shakaPlayers[key as PlayerKey] = name;
+    }
+  });
+
   const handleApply = () => {
     const player = playerSelectRef.current?.value;
     const streamUrl = streamUrlInputRef.current?.value;
@@ -34,6 +46,7 @@ export const PlaybackOptions = ({
             Video URL{isHttps ? " (HTTPS only)" : ""}:
           </label>
           <input
+            key={streamUrl}
             className="item"
             defaultValue={streamUrl}
             id="streamUrl"
@@ -45,16 +58,27 @@ export const PlaybackOptions = ({
           <label htmlFor="player">Player:</label>
           <select
             className="item"
-            key={currentPlayer}
+            key={String(currentPlayer)}
             ref={playerSelectRef}
             id="player"
-            defaultValue={currentPlayer}
+            defaultValue={String(currentPlayer)}
           >
-            {PLAYERS.map((player) => (
-              <option key={player} value={player}>
-                {player}
-              </option>
-            ))}
+            <optgroup label="Hls.js P2P Engine (HLS Only)">
+              {Object.entries(hlsPlayers).map(([key, name]) => (
+                <option key={key} value={key}>
+                  {name}
+                </option>
+              ))}
+            </optgroup>
+            {Object.keys(shakaPlayers).length > 0 && (
+              <optgroup label="Shaka Players">
+                {Object.entries(shakaPlayers).map(([key, name]) => (
+                  <option key={key} value={key}>
+                    {name}
+                  </option>
+                ))}
+              </optgroup>
+            )}
           </select>
         </div>
 

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

@@ -146,3 +146,12 @@
   display: flex;
   gap: 1em;
 }
+
+.error-message {
+  margin-top: 1em;
+  padding: 1em;
+  background-color: #f8d7da;
+  border: 1px solid #f5c6cb;
+  border-radius: 0.25rem;
+  color: #721c24;
+}