feat: Added interstitial to player and delay

Author: matvp91

apps/stitcher/src/interstitials.ts

@@ -114,6 +114,13 @@ export async function getAssets(
     if (timedEvent.assets) {
       assets.push(...timedEvent.assets);
     }
+
+    if (timedEvent.delay) {
+      // When we have a delay on purpose, wait it out.
+      await new Promise((resolve) => {
+        setTimeout(resolve, timedEvent.delay);
+      });
+    }
   }
 
   // If we have a generic vast config on our session, use that one to resolve (eg; for live streams)

apps/stitcher/src/routes/sessions.ts

@@ -38,6 +38,7 @@ export const sessionsApp = new Hono()
             z.object({
               time: z.union([z.number(), z.string()]),
               duration: z.number().optional(),
+              delay: z.number().optional(),
               assets: z
                 .array(
                   z.object({

apps/stitcher/src/session.ts

@@ -29,6 +29,7 @@ export interface Session {
 interface InterstitialInput {
   time: string | number;
   duration?: number;
+  delay?: number;
   assets?: {
     uri: string;
   }[];
@@ -105,6 +106,7 @@ export async function mapInterstitialToTimedEvent(
   return {
     dateTime: toDateTime(startTime, interstitial.time),
     duration: interstitial.duration,
+    delay: interstitial.delay,
     assets: interstitial.assets
       ? await Promise.all(
           interstitial.assets.map(async (asset) => {

apps/stitcher/src/types.ts

@@ -18,6 +18,7 @@ export interface AssetResolver {
 export interface TimedEvent {
   dateTime: DateTime;
   duration?: number;
+  delay?: number;
   assets?: Asset[];
   vast?: VastParams;
 }

packages/player/src/hls-player.ts

@@ -50,6 +50,7 @@ export class HlsPlayer {
     this.state_ = new State({
       onEvent: (event: Events) => this.emit_(event),
       getTiming: () => hls.interstitialsManager?.integrated,
+      getInterstitialTiming: () => hls.interstitialsManager?.bufferingPlayer,
     });
 
     hls.attachMedia(this.media_);
@@ -225,6 +226,10 @@ export class HlsPlayer {
     return getState(this.state_, "timeline");
   }
 
+  get interstitial() {
+    return getState(this.state_, "interstitial");
+  }
+
   private createHls_() {
     const hls = new Hls();
 
@@ -269,7 +274,7 @@ export class HlsPlayer {
         acc.push({
           start: item.integrated.start,
           duration: item.integrated.end - item.integrated.start,
-          rangeDuration: item.event.dateRange.plannedDuration ?? undefined,
+          plannedDuration: item.event.dateRange.plannedDuration ?? undefined,
         });
 
         return acc;
@@ -278,7 +283,11 @@ export class HlsPlayer {
     });
 
     listen(Hls.Events.INTERSTITIAL_STARTED, () => {
-      this.state_?.setSeeking(false);
+      this.state_?.setInterstitial({});
+    });
+
+    listen(Hls.Events.INTERSTITIAL_ENDED, () => {
+      this.state_?.setInterstitial(null);
     });
 
     return hls;

packages/player/src/state.ts

@@ -1,7 +1,9 @@
+import { assert } from "shared/assert";
 import { preciseFloat } from "./helpers";
 import { Events } from "./types";
 import type {
   AudioTrack,
+  Interstitial,
   Playhead,
   Quality,
   SubtitleTrack,
@@ -16,7 +18,8 @@ interface Timing {
 
 interface StateParams {
   onEvent(event: Events): void;
-  getTiming(): undefined | Timing;
+  getTiming(): undefined | Timing | null;
+  getInterstitialTiming(): undefined | Omit<Timing, "seekableStart"> | null;
 }
 
 interface StateProperties {
@@ -34,6 +37,7 @@ interface StateProperties {
   seeking: boolean;
   live: boolean;
   timeline: TimelineItem[];
+  interstitial: Interstitial | null;
 }
 
 const noState: StateProperties = {
@@ -51,6 +55,7 @@ const noState: StateProperties = {
   seeking: false,
   live: false,
   timeline: [],
+  interstitial: null,
 };
 
 export class State implements StateProperties {
@@ -121,7 +126,8 @@ export class State implements StateProperties {
 
     if (
       // TODO: Come up with a generic logical check.
-      (!this.subtitleTracks.length && subtitleTracks.length) ||
+      !this.subtitleTracks.length ||
+      subtitleTracks.length ||
       diff(this.subtitleTracks) !== diff(subtitleTracks)
     ) {
       this.subtitleTracks = subtitleTracks;
@@ -151,34 +157,73 @@ export class State implements StateProperties {
     this.params_.onEvent(Events.TIMELINE_CHANGE);
   }
 
-  requestTimingSync() {
+  setInterstitial(
+    interstitial: Omit<Interstitial, "currentTime" | "duration"> | null,
+  ) {
+    if (interstitial) {
+      this.setSeeking(false);
+    }
+
+    this.interstitial = interstitial
+      ? {
+          ...interstitial,
+          currentTime: 0,
+          duration: NaN,
+        }
+      : null;
+
+    this.requestTimingSync(/* skipEvent= */ true);
+
+    this.params_.onEvent(Events.INTERSTITIAL_CHANGE);
+  }
+
+  requestTimingSync(skipEvent?: boolean) {
     clearTimeout(this.timerId_);
     this.timerId_ = window.setTimeout(() => {
       this.requestTimingSync();
     }, 250);
+    let emitEvent = false;
 
     const timing = this.params_.getTiming();
-    if (!timing) {
-      return;
+    if (timing) {
+      const currentTime = preciseFloat(timing.currentTime);
+      const duration = preciseFloat(timing.duration);
+      const seekableStart = preciseFloat(timing.seekableStart);
+
+      if (
+        currentTime !== this.currentTime ||
+        duration !== this.duration ||
+        seekableStart !== this.seekableStart
+      ) {
+        emitEvent = true;
+      }
+
+      this.currentTime = currentTime;
+      this.duration = duration;
+      this.seekableStart = seekableStart;
     }
 
-    const currentTime = preciseFloat(timing.currentTime);
-    const duration = preciseFloat(timing.duration);
-    const seekableStart = preciseFloat(timing.seekableStart);
+    const interstitialTiming = this.params_.getInterstitialTiming();
+    if (interstitialTiming) {
+      assert(this.interstitial);
 
-    if (
-      currentTime === this.currentTime &&
-      duration === this.duration &&
-      seekableStart === this.seekableStart
-    ) {
-      return;
-    }
+      const currentTime = preciseFloat(interstitialTiming.currentTime);
+      const duration = preciseFloat(interstitialTiming.duration);
 
-    this.currentTime = currentTime;
-    this.duration = duration;
-    this.seekableStart = seekableStart;
+      if (
+        currentTime !== this.interstitial.currentTime ||
+        duration !== this.interstitial.duration
+      ) {
+        emitEvent = true;
+      }
 
-    this.params_.onEvent(Events.TIME_CHANGE);
+      this.interstitial.currentTime = currentTime;
+      this.interstitial.duration = duration;
+    }
+
+    if (!skipEvent && emitEvent) {
+      this.params_.onEvent(Events.TIME_CHANGE);
+    }
   }
 
   ready = noState.ready;
@@ -195,6 +240,7 @@ export class State implements StateProperties {
   seeking = noState.seeking;
   live = noState.live;
   timeline = noState.timeline;
+  interstitial = noState.interstitial;
 }
 
 export function getState<N extends keyof StateProperties>(

packages/player/src/types.ts

@@ -15,6 +15,7 @@ export enum Events {
   AUTO_QUALITY_CHANGE = "autoQualityChange",
   SEEKING_CHANGE = "seekingChange",
   TIMELINE_CHANGE = "timelineChange",
+  INTERSTITIAL_CHANGE = "interstitialChange",
 }
 
 export type HlsPlayerEventMap = {
@@ -30,6 +31,7 @@ export type HlsPlayerEventMap = {
   [Events.AUTO_QUALITY_CHANGE]: () => void;
   [Events.SEEKING_CHANGE]: () => void;
   [Events.TIMELINE_CHANGE]: () => void;
+  [Events.INTERSTITIAL_CHANGE]: () => void;
 } & {
   "*": (event: Events) => void;
 };
@@ -57,5 +59,10 @@ export interface SubtitleTrack {
 export interface TimelineItem {
   start: number;
   duration: number;
-  rangeDuration?: number;
+  plannedDuration?: number;
+}
+
+export interface Interstitial {
+  currentTime: number;
+  duration: number;
 }