Hls: manually fetch segments and control playback stream level

p2p-media-loader-demo/src/App.tsx

@@ -18,7 +18,7 @@ type Player = (typeof players)[number];
 type ShakaPlayer = shaka.Player;
 type ExtendedWindow = Window & { videoPlayer?: { destroy?: () => void } };
 
-const videoUrl = {
+const streamUrl = {
   bigBunnyBuck: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
   byteRangeVideo:
     "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8",
@@ -48,7 +48,7 @@ function App() {
   const [playerType, setPlayerType] = useState<Player | undefined>(
     localStorage.player
   );
-  const [url, setUrl] = useState<string>(localStorage.videoUrl);
+  const [url, setUrl] = useState<string>(localStorage.streamUrl);
   const shakaEngine = useRef<ShakaEngine>(new ShakaEngine(shakaLib));
   const hlsEngine = useRef<HlsJsEngine>(new HlsJsEngine());
   const containerRef = useRef<HTMLDivElement>(null);
@@ -65,9 +65,9 @@ function App() {
       localStorage.player = "hls-dplayer";
       setPlayerType("hls-dplayer");
     }
-    if (!localStorage.videoUrl) {
-      localStorage.videoUrl = videoUrl.live2;
-      setUrl(videoUrl.live2);
+    if (!localStorage.streamUrl) {
+      localStorage.streamUrl = streamUrl.live2;
+      setUrl(streamUrl.live2);
     }
 
     switch (playerType) {
@@ -182,7 +182,7 @@ function App() {
   };
 
   const onVideoUrlChange = (url: string) => {
-    localStorage.url = url;
+    localStorage.streamUrl = url;
     setUrl(url);
     destroyAndWindowPlayer();
   };
@@ -210,7 +210,7 @@ function App() {
             value={url}
             onChange={(event) => onVideoUrlChange(event.target.value)}
           >
-            {Object.entries(videoUrl).map(([name, url]) => {
+            {Object.entries(streamUrl).map(([name, url]) => {
               return (
                 <option key={name} value={url}>
                   {name}

packages/p2p-media-loader-hlsjs/src/services/engine.ts

@@ -18,12 +18,43 @@ export class Engine {
 
   public initHlsJsEvents(hls: Hls) {
     hls.on("hlsManifestLoaded" as Events.MANIFEST_LOADED, (event, data) => {
+      console.log(data);
+      for (const [index, track] of data.audioTracks.entries()) {
+        data.audioTracks[index] = handleObjPropChange(
+          track,
+          "details",
+          (value) => {
+            this.segmentManager.updateVideoPlaylist(value);
+          }
+        );
+      }
       this.segmentManager.processMasterManifest(data);
     });
 
-    hls.on("hlsLevelLoaded" as Events.LEVEL_LOADED, (event, data) => {
-      this.segmentManager.setPlaylist(data);
+    hls.on("hlsLevelUpdated" as Events.LEVEL_UPDATED, (event, data) => {
+      console.log("VIDEO PLAYLIST UPDATED");
+      console.log(data);
+      this.segmentManager.updateVideoPlaylist(data);
     });
+
+    // hls.on(
+    //   "hlsAudioTracksUpdated" as Events.AUDIO_TRACKS_UPDATED,
+    //   (event, data) => {
+    //     data.audioTracks.forEach((track) => {
+    //       console.log("TRACK_DETAILS", track.details);
+    //     });
+    //   }
+    // );
+
+    // hls.on(
+    //   "hlsAudioTracksUpdated" as Events.AUDIO_TRACK_LOADING,
+    //   (event, data) => {
+    //     console.log("AUDIO PLAYLIST UPDATED");
+    //     console.log(data);
+    //     // console.log(data.details.url);
+    //     this.segmentManager.updateVideoPlaylist(data);
+    //   }
+    // );
   }
 
   private createFragmentLoaderClass() {
@@ -42,3 +73,33 @@ export class Engine {
     };
   }
 }
+
+const handler = {
+  set<T extends object, P extends keyof T>(
+    target: T,
+    property: P,
+    value: T[P]
+  ) {
+    if (property === "details") {
+    }
+    return true;
+  },
+};
+
+function handleObjPropChange<T extends object, P extends keyof T>(
+  obj: T,
+  property: P,
+  decorator: (obj: T) => void
+) {
+  const handler = {
+    set(target: T, prop: P, value: unknown) {
+      console.log("FUCK");
+      if (prop === property && target[prop] !== value) {
+        decorator(target);
+      }
+      return Reflect.set(target, prop, value);
+    },
+  };
+
+  return new Proxy(obj, handler as any);
+}