@hanifhan1f/vidstack 1.12.13

package/src/core/state/media-state-sync.ts

@@ -0,0 +1,162 @@
+import { effect } from 'maverick.js';
+
+import { MediaPlayerController } from '../api/player-controller';
+import type { MediaPlayerProps } from '../api/player-props';
+
+/**
+ * Sync player props with internal store and dispatch change events.
+ */
+export class MediaStateSync extends MediaPlayerController {
+  protected override onSetup() {
+    this.#init();
+
+    if (__SERVER__) return;
+
+    if (__DEV__) effect(this.#watchLogLevel.bind(this));
+
+    const effects = [
+      this.#watchMetadata,
+      this.#watchAutoplay,
+      this.#watchClipStartTime,
+      this.#watchClipEndTime,
+      this.#watchControls,
+      this.#watchCrossOrigin,
+      this.#watchDuration,
+      this.#watchLive,
+      this.#watchLiveEdge,
+      this.#watchLiveTolerance,
+      this.#watchLoop,
+      this.#watchPlaysInline,
+      this.#watchPoster,
+      this.#watchProvidedTypes,
+      this.#watchTitle,
+    ];
+
+    for (const callback of effects) {
+      effect(callback.bind(this));
+    }
+  }
+
+  #init() {
+    const providedProps = {
+      duration: 'providedDuration',
+      loop: 'providedLoop',
+      poster: 'providedPoster',
+      streamType: 'providedStreamType',
+      title: 'providedTitle',
+      viewType: 'providedViewType',
+    };
+
+    const skip = new Set<keyof MediaPlayerProps>([
+      'currentTime',
+      'paused',
+      'playbackRate',
+      'volume',
+    ]);
+
+    for (const prop of Object.keys(this.$props) as (keyof MediaPlayerProps)[]) {
+      if (skip.has(prop)) continue;
+      this.$state[providedProps[prop] ?? prop]?.set(this.$props[prop]());
+    }
+
+    this.$state.muted.set(this.$props.muted() || this.$props.volume() === 0);
+  }
+
+  // Sync "provided" props with internal state. Provided props are used to differentiate from
+  // provider inferred values.
+  #watchProvidedTypes() {
+    const { viewType, streamType, title, poster, loop } = this.$props,
+      $state = this.$state;
+    $state.providedPoster.set(poster());
+    $state.providedStreamType.set(streamType());
+    $state.providedViewType.set(viewType());
+    $state.providedTitle.set(title());
+    $state.providedLoop.set(loop());
+  }
+
+  #watchLogLevel() {
+    if (!__DEV__) return;
+    this.$state.logLevel.set(this.$props.logLevel());
+  }
+
+  #watchMetadata() {
+    const { artist, artwork } = this.$props;
+    this.$state.artist.set(artist());
+    this.$state.artwork.set(artwork());
+  }
+
+  #watchTitle() {
+    const { title } = this.$state;
+    this.dispatch('title-change', { detail: title() });
+  }
+
+  #watchAutoplay() {
+    // autoplay prop is deprecated, we're syncing for backwards compatibility.
+    const autoPlay = this.$props.autoPlay() || this.$props.autoplay();
+    this.$state.autoPlay.set(autoPlay);
+    this.dispatch('auto-play-change', { detail: autoPlay });
+  }
+
+  #watchLoop() {
+    const loop = this.$state.loop();
+    this.dispatch('loop-change', { detail: loop });
+  }
+
+  #watchControls() {
+    const controls = this.$props.controls();
+    this.$state.controls.set(controls);
+  }
+
+  #watchPoster() {
+    const { poster } = this.$state;
+    this.dispatch('poster-change', { detail: poster() });
+  }
+
+  #watchCrossOrigin() {
+    // crossorigin prop is deprecated, we're syncing for backwards compatibility.
+    const crossOrigin = this.$props.crossOrigin() ?? this.$props.crossorigin(),
+      value = crossOrigin === true ? '' : (crossOrigin as '');
+    this.$state.crossOrigin.set(value);
+  }
+
+  #watchDuration() {
+    const { duration } = this.$props;
+    this.dispatch('media-duration-change-request', {
+      detail: duration(),
+    });
+  }
+
+  #watchPlaysInline() {
+    // playsinline prop is deprecated, we're syncing for backwards compatibility.
+    const inline = this.$props.playsInline() || this.$props.playsinline();
+    this.$state.playsInline.set(inline);
+    this.dispatch('plays-inline-change', { detail: inline });
+  }
+
+  #watchClipStartTime() {
+    const { clipStartTime } = this.$props;
+    this.dispatch('media-clip-start-change-request', {
+      detail: clipStartTime(),
+    });
+  }
+
+  #watchClipEndTime() {
+    const { clipEndTime } = this.$props;
+    this.dispatch('media-clip-end-change-request', {
+      detail: clipEndTime(),
+    });
+  }
+
+  #watchLive() {
+    this.dispatch('live-change', { detail: this.$state.live() });
+  }
+
+  #watchLiveTolerance() {
+    this.$state.liveEdgeTolerance.set(this.$props.liveEdgeTolerance());
+    this.$state.minLiveDVRWindow.set(this.$props.minLiveDVRWindow());
+  }
+
+  #watchLiveEdge() {
+    this.dispatch('live-edge-change', { detail: this.$state.liveEdge() });
+  }
+}

package/src/core/state/media-storage.ts

@@ -0,0 +1,196 @@
+import throttle from 'just-throttle';
+import type { MaybeStopEffect } from 'maverick.js';
+
+import type { Src } from '../api/src-types';
+
+export interface MediaStorage {
+  getVolume(): Promise<number | null>;
+  setVolume?(volume: number): Promise<void>;
+
+  getMuted(): Promise<boolean | null>;
+  setMuted?(muted: boolean): Promise<void>;
+
+  getTime(): Promise<number | null>;
+  setTime?(time: number, ended?: boolean): Promise<void>;
+
+  getLang(): Promise<string | null>;
+  setLang?(lang: string | null): Promise<void>;
+
+  getCaptions(): Promise<boolean | null>;
+  setCaptions?(captions: boolean): Promise<void>;
+
+  getPlaybackRate(): Promise<number | null>;
+  setPlaybackRate?(rate: number): Promise<void>;
+
+  getVideoQuality(): Promise<SerializedVideoQuality | null>;
+  setVideoQuality?(quality: SerializedVideoQuality | null): Promise<void>;
+
+  getAudioGain(): Promise<number | null>;
+  setAudioGain?(gain: number | null): Promise<void>;
+
+  /**
+   * Called when media is ready for playback and new data can be loaded.
+   */
+  onLoad?(src: Src): void | Promise<void>;
+
+  /**
+   * Called when the `mediaId` has changed. This method can return a function to be called
+   * before the next change.
+   *
+   * - The `mediaId` is computed from the current source and clip times. It will be `null` if
+   * there is no source.
+   *
+   * - The `playerId` is the string provided to the player `storage` prop (if set), or the `id`
+   *   set on the player element, otherwise `undefined`.
+   */
+  onChange?(src: Src, mediaId: string | null, playerId?: string): MaybeStopEffect;
+
+  /**
+   * Called when storage is being destroyed either because the `storage` property on the player
+   * has changed, or the player is being destroyed.
+   */
+  onDestroy?(): void;
+}
+
+export interface SerializedVideoQuality {
+  id: string;
+  width: number;
+  height: number;
+  bitrate?: number | null;
+}
+
+export class LocalMediaStorage implements MediaStorage {
+  protected playerId = 'vds-player';
+  protected mediaId: string | null = null;
+
+  #data: SavedMediaData = {
+    volume: null,
+    muted: null,
+    audioGain: null,
+    time: null,
+    lang: null,
+    captions: null,
+    rate: null,
+    quality: null,
+  };
+
+  async getVolume() {
+    return this.#data.volume;
+  }
+
+  async setVolume(volume: number) {
+    this.#data.volume = volume;
+    this.save();
+  }
+
+  async getMuted() {
+    return this.#data.muted;
+  }
+
+  async setMuted(muted: boolean) {
+    this.#data.muted = muted;
+    this.save();
+  }
+
+  async getTime() {
+    return this.#data.time;
+  }
+
+  async setTime(time: number, ended: boolean) {
+    const shouldClear = time < 0;
+
+    this.#data.time = !shouldClear ? time : null;
+
+    if (shouldClear || ended) this.saveTime();
+    else this.saveTimeThrottled();
+  }
+
+  async getLang() {
+    return this.#data.lang;
+  }
+
+  async setLang(lang: string | null) {
+    this.#data.lang = lang;
+    this.save();
+  }
+
+  async getCaptions() {
+    return this.#data.captions;
+  }
+
+  async setCaptions(enabled: boolean) {
+    this.#data.captions = enabled;
+    this.save();
+  }
+
+  async getPlaybackRate() {
+    return this.#data.rate;
+  }
+
+  async setPlaybackRate(rate) {
+    this.#data.rate = rate;
+    this.save();
+  }
+
+  async getAudioGain() {
+    return this.#data.audioGain;
+  }
+
+  async setAudioGain(gain: number | null) {
+    this.#data.audioGain = gain;
+    this.save();
+  }
+
+  async getVideoQuality() {
+    return this.#data.quality;
+  }
+
+  async setVideoQuality(quality: SerializedVideoQuality | null) {
+    this.#data.quality = quality;
+    this.save();
+  }
+
+  onChange(src: Src, mediaId: string | null, playerId = 'vds-player') {
+    const savedData = playerId ? localStorage.getItem(playerId) : null,
+      savedTime = mediaId ? localStorage.getItem(mediaId) : null;
+
+    this.playerId = playerId;
+    this.mediaId = mediaId;
+
+    this.#data = {
+      volume: null,
+      muted: null,
+      audioGain: null,
+      lang: null,
+      captions: null,
+      rate: null,
+      quality: null,
+      ...(savedData ? JSON.parse(savedData) : {}),
+      time: savedTime ? +savedTime : null,
+    };
+  }
+
+  protected save() {
+    if (__SERVER__ || !this.playerId) return;
+    const data = JSON.stringify({ ...this.#data, time: undefined });
+    localStorage.setItem(this.playerId, data);
+  }
+
+  protected saveTimeThrottled = throttle(this.saveTime.bind(this), 1000);
+  private saveTime() {
+    if (__SERVER__ || !this.mediaId) return;
+    const data = (this.#data.time ?? 0).toString();
+    localStorage.setItem(this.mediaId, data);
+  }
+}
+
+interface SavedMediaData {
+  volume: number | null;
+  muted: boolean | null;
+  audioGain: number | null;
+  time: number | null;
+  lang: string | null;
+  captions: boolean | null;
+  rate: number | null;
+  quality: SerializedVideoQuality | null;
+}

package/src/core/state/navigator-media-session.ts

@@ -0,0 +1,62 @@
+import { effect, onDispose } from 'maverick.js';
+import { DOMEvent, isNumber } from 'maverick.js/std';
+
+import { MediaPlayerController } from '../api/player-controller';
+
+const actions = ['play', 'pause', 'seekforward', 'seekbackward', 'seekto'] as const;
+
+export class NavigatorMediaSession extends MediaPlayerController {
+  protected override onConnect() {
+    effect(this.#onMetadataChange.bind(this));
+    effect(this.#onPlaybackStateChange.bind(this));
+
+    const handleAction = this.#handleAction.bind(this);
+    for (const action of actions) {
+      navigator.mediaSession.setActionHandler(action, handleAction);
+    }
+
+    onDispose(this.#onDisconnect.bind(this));
+  }
+
+  #onDisconnect() {
+    for (const action of actions) {
+      navigator.mediaSession.setActionHandler(action, null);
+    }
+  }
+
+  #onMetadataChange() {
+    const { title, artist, artwork, poster } = this.$state;
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: title(),
+      artist: artist(),
+      artwork: artwork() ?? [{ src: poster() }],
+    });
+  }
+
+  #onPlaybackStateChange() {
+    const { canPlay, paused } = this.$state;
+    navigator.mediaSession.playbackState = !canPlay() ? 'none' : paused() ? 'paused' : 'playing';
+  }
+
+  #handleAction(details: MediaSessionActionDetails) {
+    const trigger = new DOMEvent(`media-session-action`, { detail: details });
+    switch (details.action) {
+      case 'play':
+        this.dispatch('media-play-request', { trigger });
+        break;
+      case 'pause':
+        this.dispatch('media-pause-request', { trigger });
+        break;
+      case 'seekto':
+      case 'seekforward':
+      case 'seekbackward':
+        this.dispatch('media-seek-request', {
+          detail: isNumber(details.seekTime)
+            ? details.seekTime
+            : this.$state.currentTime() + (details.seekOffset ?? (details.action === "seekforward" ? 10 : -10)),
+          trigger,
+        });
+        break;
+    }
+  }
+}