add support for EXT-X-PRELOAD-HINT in hls.js (#96)

assets/js/app.ts

@@ -3,6 +3,8 @@ import { Socket } from "phoenix";
 import { LiveSocket, type ViewHook } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
 import { VidstackPlayer, VidstackPlayerLayout } from "vidstack/global/player";
+import { isHLSProvider } from "vidstack";
+import HLS from "@algora/hls.js";
 
 // TODO: add eslint & biome
 // TODO: enable strict mode
@@ -229,6 +231,16 @@ const Hooks = {
         this.player.streamType = opts.is_live ? "ll-live:dvr" : "on-demand";
         this.player.src = opts.url;
 
+        this.player.addEventListener("provider-change", (event) => {
+          const provider = event.detail;
+          if (isHLSProvider(provider)) {
+            provider.library = HLS;
+            provider.config = {
+              targetlatency: 6, // one segment
+            };
+          }
+        });
+
         setMediaSession();
 
         if (backdrop) {

assets/package.json

@@ -20,6 +20,7 @@
     "@types/phoenix_live_view": "^0.18.4"
   },
   "dependencies": {
+    "@algora/hls.js": "1.0.0",
     "vidstack": "^1.12.9"
   }
 }