diff --git a/assets/js/app.ts b/assets/js/app.ts index f9a3f92b..80253423 100644 --- a/assets/js/app.ts +++ b/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) { diff --git a/assets/package.json b/assets/package.json index 3233c26a..0d469f03 100644 --- a/assets/package.json +++ b/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" } } diff --git a/assets/pnpm-lock.yaml b/assets/pnpm-lock.yaml index 1cb26d3f..7235fdbc 100644 --- a/assets/pnpm-lock.yaml +++ b/assets/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@algora/hls.js': + specifier: 1.0.0 + version: 1.0.0 vidstack: specifier: ^1.12.9 version: 1.12.9 @@ -19,6 +22,10 @@ devDependencies: packages: + /@algora/hls.js@1.0.0: + resolution: {integrity: sha512-2Lh/sBnxeyD4gi2F8Isr5CsliQQ6t5Nf0+I9jLkibLmHkryVMis+z0PssPA5iOGZncvSgAwhAlDf2wxwJtsRcw==} + dev: false + /@floating-ui/core@1.6.7: resolution: {integrity: sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==} dependencies: