Feat: Support custom streamUrl in Demo component (#413)

Novage · Sep 23, 2024 · fb5300b · fb5300b
1 parent 353317e
commit fb5300b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -2,7 +2,14 @@ import "./app.css";
 import { P2PVideoDemo } from "p2p-media-loader-demo";
 
 function App() {
-  return <P2PVideoDemo debugToolsEnabled={false} />;
+  return (
+    <P2PVideoDemo
+      streamUrl={
+        "https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8"
+      }
+      debugToolsEnabled={false}
+    />
+  );
 }
 
 export default App;
diff --git a/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx b/packages/p2p-media-loader-demo/src/components/P2PVideoDemo.tsx
@@ -22,6 +22,7 @@ import { HlsjsVidstack } from "./players/hlsjs/HlsjsVidstack";
 import { PeerDetails } from "p2p-media-loader-core";
 
 type DemoProps = {
+  streamUrl?: string;
   debugToolsEnabled?: boolean;
 };
 
@@ -53,7 +54,10 @@ const playerComponents = {
   vidstack_hls: HlsjsVidstack,
 };
 
-export const P2PVideoDemo = ({ debugToolsEnabled = false }: DemoProps) => {
+export const P2PVideoDemo = ({
+  streamUrl,
+  debugToolsEnabled = false,
+}: DemoProps) => {
   const data = useRef<DownloadStats>({
     httpDownloaded: 0,
     p2pDownloaded: 0,
@@ -115,7 +119,7 @@ export const P2PVideoDemo = ({ debugToolsEnabled = false }: DemoProps) => {
 
     return PlayerComponent ? (
       <PlayerComponent
-        streamUrl={queryParams.streamUrl}
+        streamUrl={streamUrl ?? queryParams.streamUrl}
         announceTrackers={trackers}
         onPeerConnect={onPeerConnect}
         onPeerClose={onPeerClose}