chore: Added none and auto to quality and text selection

packages/hlsjs/lib/Controls/components/CheckList.scss

@@ -6,6 +6,7 @@
 }
 
 .mix-checklist-item {
+  min-width: 8em;
   height: 2.5em;
   display: flex;
   align-items: center;

packages/hlsjs/lib/Controls/components/CheckList.tsx

@@ -1,8 +1,14 @@
 import cn from "clsx";
 
+export type CheckListItem = {
+  id: number | null;
+  label: React.ReactNode;
+  checked: boolean;
+};
+
 type CheckListProps = {
-  onSelect(id: number): void;
-  items: { id: number; label: string; checked: boolean }[];
+  onSelect(id: CheckListItem["id"]): void;
+  items: CheckListItem[];
 };
 
 export function CheckList({ items, onSelect }: CheckListProps) {

packages/hlsjs/lib/Controls/components/QualitiesPane.tsx

@@ -1,22 +1,33 @@
 import { CheckList } from "./CheckList";
 import { Pane } from "./Pane";
 import type { HlsFacade, HlsState } from "../../main";
+import type { CheckListItem } from "./CheckList";
 
 type QualitiesPaneProps = {
   state: HlsState;
   facade: HlsFacade;
 };
 
 export function QualitiesPane({ facade, state }: QualitiesPaneProps) {
+  const activeQuality = state.qualities.find((it) => it.active);
+
+  const qualityItems = state.qualities.map<CheckListItem>((it) => ({
+    id: it.id,
+    label: `${it.level.height}p`,
+    checked: !state.autoQuality && activeQuality === it,
+  }));
+
+  qualityItems.push({
+    id: null,
+    label: "Auto",
+    checked: state.autoQuality,
+  });
+
   return (
     <Pane title="Quality">
       <CheckList
         onSelect={(id) => facade.setQuality(id)}
-        items={state.qualities.map((quality) => ({
-          id: quality.id,
-          label: `${quality.height}p`,
-          checked: quality.active,
-        }))}
+        items={qualityItems}
       />
     </Pane>
   );

packages/hlsjs/lib/Controls/components/TextAudioPane.tsx

@@ -1,32 +1,41 @@
 import { CheckList } from "./CheckList";
 import { Pane } from "./Pane";
 import type { HlsFacade, HlsState } from "../../main";
+import type { CheckListItem } from "./CheckList";
 
 type QualitiesPaneProps = {
   state: HlsState;
   facade: HlsFacade;
 };
 
 export function TextAudioPane({ facade, state }: QualitiesPaneProps) {
+  const subtitleItems = state.subtitleTracks.map<CheckListItem>((it) => ({
+    id: it.id,
+    label: toLang(it.playlist.name),
+    checked: it.active,
+  }));
+
+  subtitleItems.push({
+    id: null,
+    label: "None",
+    checked: !state.subtitleTracks.some((it) => it.active),
+  });
+
   return (
     <div className="mix-textaudiopane">
       <Pane title="Subtitles">
         <CheckList
           onSelect={(id) => facade.setSubtitleTrack(id)}
-          items={state.subtitleTracks.map((subtitleTrack) => ({
-            id: subtitleTrack.id,
-            label: toLang(subtitleTrack.name),
-            checked: subtitleTrack.active,
-          }))}
+          items={subtitleItems}
         />
       </Pane>
       <Pane title="Audio">
         <CheckList
           onSelect={(id) => facade.setAudioTrack(id)}
-          items={state.audioTracks.map((audioTrack) => ({
-            id: audioTrack.id,
-            label: toLang(audioTrack.name),
-            checked: audioTrack.active,
+          items={state.audioTracks.map((it) => ({
+            id: it.id,
+            label: toLang(it.playlist.name),
+            checked: it.active,
           }))}
         />
       </Pane>

packages/hlsjs/lib/main.ts

@@ -2,6 +2,7 @@ import Hls from "hls.js";
 import update from "immutability-helper";
 import EventEmitter from "eventemitter3";
 import type { Spec } from "immutability-helper";
+import type { Level, MediaPlaylist } from "hls.js";
 
 export { Controls as HlsControls } from "./Controls";
 
@@ -11,20 +12,20 @@ export type HlsInterstitial = {
 
 export type HlsQuality = {
   id: number;
-  height: number;
   active: boolean;
+  level: Level;
 };
 
 export type HlsSubtitleTrack = {
   id: number;
-  name: string;
   active: boolean;
+  playlist: MediaPlaylist;
 };
 
 export type HlsAudioTrack = {
   id: number;
-  name: string;
   active: boolean;
+  playlist: MediaPlaylist;
 };
 
 export type HlsSeekRange = {
@@ -39,6 +40,7 @@ export type HlsState = {
   interstitial: HlsInterstitial | null;
   cuePoints: number[];
   qualities: HlsQuality[];
+  autoQuality: boolean;
   subtitleTracks: HlsSubtitleTrack[];
   audioTracks: HlsAudioTrack[];
 };
@@ -54,7 +56,13 @@ export class HlsFacade extends EventEmitter<HlsFacadeEvent> {
     super();
 
     hls.once(Hls.Events.BUFFER_CREATED, () => {
-      this.syncState_();
+      this.syncTimings_();
+    });
+
+    hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (_, data) => {
+      data.player.once(Hls.Events.BUFFER_CREATED, () => {
+        this.syncTimings_();
+      });
     });
 
     hls.on(Hls.Events.LEVEL_SWITCHING, () => {
@@ -65,14 +73,12 @@ export class HlsFacade extends EventEmitter<HlsFacadeEvent> {
       this.syncAudioTracks_();
     });
 
-    hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, () => {
+    hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, () => {
       this.syncSubtitleTracks_();
     });
 
-    hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (_, data) => {
-      data.player.once(Hls.Events.BUFFER_CREATED, () => {
-        this.syncState_();
-      });
+    hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, () => {
+      this.syncSubtitleTracks_();
     });
 
     hls.on(Hls.Events.INTERSTITIAL_STARTED, (_, data) => {
@@ -115,19 +121,11 @@ export class HlsFacade extends EventEmitter<HlsFacadeEvent> {
     interstitial: null,
     cuePoints: [],
     qualities: [],
+    autoQuality: this.hls.autoLevelEnabled,
     subtitleTracks: [],
     audioTracks: [],
   };
 
-  private onTick_() {
-    const { integrated } = this.getInterstitialsManager_();
-
-    this.setState_({
-      time: { $set: integrated.currentTime },
-      seekRange: { $set: { start: 0, end: integrated.duration } },
-    });
-  }
-
   playOrPause() {
     const media = this.getMedia_();
     const { playheadState } = this.state;
@@ -152,27 +150,18 @@ export class HlsFacade extends EventEmitter<HlsFacadeEvent> {
   }
 
   setQuality(id: number | null) {
-    if (id) {
-      this.hls.nextLevel = id - 1;
-    } else {
-      this.hls.nextLevel = -1;
-    }
+    this.setState_({
+      autoQuality: { $set: id === null },
+    });
+    this.hls.nextLevel = id ? id - 1 : -1;
   }
 
   setSubtitleTrack(id: number | null) {
-    if (id) {
-      this.hls.subtitleTrack = id - 1;
-    } else {
-      this.hls.subtitleTrack = -1;
-    }
+    this.hls.subtitleTrack = id ? id - 1 : -1;
   }
 
   setAudioTrack(id: number | null) {
-    if (id) {
-      this.hls.audioTrack = id - 1;
-    } else {
-      this.hls.audioTrack = -1;
-    }
+    this.hls.audioTrack = id ? id - 1 : -1;
   }
 
   private setState_(spec: Spec<HlsState>) {
@@ -200,20 +189,30 @@ export class HlsFacade extends EventEmitter<HlsFacadeEvent> {
     return media;
   }
 
-  private syncState_() {
+  private syncTimings_() {
     clearInterval(this.intervalId_);
-    this.intervalId_ = setInterval(() => this.onTick_(), 500);
-    this.onTick_();
+
+    const onTick = () => {
+      const { integrated } = this.getInterstitialsManager_();
+
+      this.setState_({
+        time: { $set: integrated.currentTime },
+        seekRange: { $merge: { start: 0, end: integrated.duration } },
+      });
+    };
+
+    this.intervalId_ = setInterval(onTick, 500);
+    onTick();
   }
 
   private syncQualities_() {
     const qualities = this.hls.levels.map<HlsQuality>((level, index) => ({
       id: index + 1,
-      height: level.height ?? 0,
       active: index === this.hls.nextLoadLevel,
+      level,
     }));
 
-    qualities.sort((a, b) => b.height - a.height);
+    qualities.sort((a, b) => b.level.height - a.level.height);
 
     this.setState_({
       qualities: { $set: qualities },
@@ -224,8 +223,8 @@ export class HlsFacade extends EventEmitter<HlsFacadeEvent> {
     const audioTracks = this.hls.audioTracks.map<HlsAudioTrack>(
       (audioTrack, index) => ({
         id: index + 1,
-        name: audioTrack.name,
         active: index === this.hls.audioTrack,
+        playlist: audioTrack,
       }),
     );
 
@@ -238,8 +237,8 @@ export class HlsFacade extends EventEmitter<HlsFacadeEvent> {
     const subtitleTracks = this.hls.subtitleTracks.map<HlsSubtitleTrack>(
       (subtitleTrack, index) => ({
         id: index + 1,
-        name: subtitleTrack.name,
         active: index === this.hls.subtitleTrack,
+        playlist: subtitleTrack,
       }),
     );
 

packages/hlsjs/src/main.tsx

@@ -14,7 +14,7 @@ Object.assign(window, { facade });
 // hls.config.startPosition = 10;
 
 hls.loadSource(
-  "http://127.0.0.1:52002/session/6371e172-bf65-4e7c-a0bd-b167c1256ba0/master.m3u8",
+  "https://streamer.ams3.cdn.digitaloceanspaces.com/package/293e9584-f5b0-4d43-a365-ac1c5e232af8/hls/master.m3u8",
 );
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);