diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index 988e2135..1ed66282 100644
--- 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 ;
+ return (
+
+ );
}
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
index 273a11de..44a75057 100644
--- 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({
httpDownloaded: 0,
p2pDownloaded: 0,
@@ -115,7 +119,7 @@ export const P2PVideoDemo = ({ debugToolsEnabled = false }: DemoProps) => {
return PlayerComponent ? (