@hanifhan1f/vidstack 1.12.13 → 1.12.14

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

@@ -1,162 +0,0 @@
-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

@@ -1,196 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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;
-    }
-  }
-}