feat: Player RESET event

Author: matvp91

packages/app/src/components/PlayerControls.tsx

@@ -46,7 +46,12 @@ function Seekbar() {
     onSeeked: seekTo,
   });
 
-  const percentage = (time - seekableStart) / (duration - seekableStart);
+  let percentage = Number.isNaN(duration)
+    ? 0
+    : (time - seekableStart) / (duration - seekableStart);
+  if (percentage < 0) {
+    percentage = 0;
+  }
 
   return (
     <div {...seekbar.rootProps} className="w-full relative cursor-pointer">

packages/player/src/hls-player.ts

@@ -4,6 +4,7 @@ import { EventEmitter } from "tseep";
 import { EventManager } from "./event-manager";
 import { getLangCode } from "./helpers";
 import { getState, State } from "./state";
+import { Events } from "./types";
 import type {
   AudioTrack,
   HlsPlayerEventMap,
@@ -25,9 +26,6 @@ export class HlsPlayer {
 
   constructor(public container: HTMLDivElement) {
     this.media_ = this.createMedia_();
-
-    // Make sure we're in unload state.
-    this.unload();
   }
 
   private createMedia_() {
@@ -43,11 +41,13 @@ export class HlsPlayer {
   }
 
   load(url: string) {
+    this.unload();
+
     this.bindMediaListeners_();
     const hls = this.createHls_();
 
     this.state_ = new State({
-      emitter: this.emitter_,
+      onEvent: (event: Events) => this.emit_(event),
       getTiming: () => ({
         primary: hls.interstitialsManager?.primary ?? hls.media,
         asset: hls.interstitialsManager?.playerQueue.find(
@@ -71,6 +71,8 @@ export class HlsPlayer {
       this.hls_.destroy();
       this.hls_ = null;
     }
+
+    this.emit_(Events.RESET);
   }
 
   destroy() {
@@ -417,4 +419,9 @@ export class HlsPlayer {
       this.state_?.setSeeking(false);
     });
   }
+
+  private emit_(event: Events) {
+    this.emitter_.emit(event);
+    this.emitter_.emit("*", event);
+  }
 }

packages/player/src/state.ts

@@ -3,21 +3,19 @@ import { Events } from "./types";
 import type {
   Asset,
   AudioTrack,
-  HlsPlayerEventMap,
   Interstitial,
   Playhead,
   Quality,
   SubtitleTrack,
 } from "./types";
-import type { EventEmitter } from "tseep";
 
 interface MediaShim {
   currentTime: number;
   duration: number;
 }
 
 interface StateParams {
-  emitter: EventEmitter<HlsPlayerEventMap>;
+  onEvent(event: Events): void;
   getTiming(): {
     primary?: MediaShim | null;
     asset?: MediaShim | null;
@@ -69,7 +67,7 @@ export class State implements StateProperties {
     }
     this.ready = true;
     this.requestTimingSync();
-    this.emit_(Events.READY);
+    this.params_.onEvent(Events.READY);
   }
 
   setPlayhead(playhead: Playhead) {
@@ -83,20 +81,20 @@ export class State implements StateProperties {
       this.requestTimingSync();
     }
 
-    this.emit_(Events.PLAYHEAD_CHANGE);
+    this.params_.onEvent(Events.PLAYHEAD_CHANGE);
   }
 
   setStarted() {
     if (this.started) {
       return;
     }
     this.started = true;
-    this.emit_(Events.STARTED);
+    this.params_.onEvent(Events.STARTED);
   }
 
   setInterstitial(interstitial: Interstitial | null) {
     this.interstitial = interstitial;
-    this.emit_(Events.INTERSTITIAL_CHANGE);
+    this.params_.onEvent(Events.INTERSTITIAL_CHANGE);
   }
 
   setAsset(asset: Omit<Asset, "time" | "duration"> | null) {
@@ -121,12 +119,12 @@ export class State implements StateProperties {
 
     if (diff(this.qualities) !== diff(qualities)) {
       this.qualities = qualities;
-      this.emit_(Events.QUALITIES_CHANGE);
+      this.params_.onEvent(Events.QUALITIES_CHANGE);
     }
 
     if (autoQuality !== this.autoQuality) {
       this.autoQuality = autoQuality;
-      this.emit_(Events.AUTO_QUALITY_CHANGE);
+      this.params_.onEvent(Events.AUTO_QUALITY_CHANGE);
     }
   }
 
@@ -135,7 +133,7 @@ export class State implements StateProperties {
 
     if (diff(this.audioTracks) !== diff(audioTracks)) {
       this.audioTracks = audioTracks;
-      this.emit_(Events.AUDIO_TRACKS_CHANGE);
+      this.params_.onEvent(Events.AUDIO_TRACKS_CHANGE);
     }
   }
 
@@ -148,7 +146,7 @@ export class State implements StateProperties {
       diff(this.subtitleTracks) !== diff(subtitleTracks)
     ) {
       this.subtitleTracks = subtitleTracks;
-      this.emit_(Events.SUBTITLE_TRACKS_CHANGE);
+      this.params_.onEvent(Events.SUBTITLE_TRACKS_CHANGE);
     }
   }
 
@@ -157,20 +155,20 @@ export class State implements StateProperties {
       return;
     }
     this.volume = volume;
-    this.emit_(Events.VOLUME_CHANGE);
+    this.params_.onEvent(Events.VOLUME_CHANGE);
   }
 
   setSeeking(seeking: boolean) {
     if (seeking === this.seeking) {
       return;
     }
     this.seeking = seeking;
-    this.emit_(Events.SEEKING_CHANGE);
+    this.params_.onEvent(Events.SEEKING_CHANGE);
   }
 
   setCuePoints(cuePoints: number[]) {
     this.cuePoints = cuePoints;
-    this.emit_(Events.CUEPOINTS_CHANGE);
+    this.params_.onEvent(Events.CUEPOINTS_CHANGE);
   }
 
   requestTimingSync() {
@@ -195,7 +193,7 @@ export class State implements StateProperties {
     }
 
     if (shouldEmit) {
-      this.emit_(Events.TIME_CHANGE);
+      this.params_.onEvent(Events.TIME_CHANGE);
     }
   }
 
@@ -227,11 +225,6 @@ export class State implements StateProperties {
     return oldTime !== target.time || oldDuration !== target.duration;
   }
 
-  private emit_(event: Events) {
-    this.params_.emitter.emit(event);
-    this.params_.emitter.emit("*", event);
-  }
-
   ready = noState.ready;
   playhead = noState.playhead;
   started = noState.started;

packages/player/src/types.ts

@@ -3,6 +3,7 @@ import type { Level, MediaPlaylist } from "hls.js";
 export type Playhead = "idle" | "play" | "playing" | "pause" | "ended";
 
 export enum Events {
+  RESET = "reset",
   READY = "ready",
   STARTED = "started",
   PLAYHEAD_CHANGE = "playheadChange",
@@ -18,6 +19,7 @@ export enum Events {
 }
 
 export type HlsPlayerEventMap = {
+  [Events.RESET]: () => void;
   [Events.READY]: () => void;
   [Events.STARTED]: () => void;
   [Events.PLAYHEAD_CHANGE]: () => void;