feat(player): new storageKey player prop

mihar-22 · mihar-22 · commit b39785943849 · 2023-12-22T17:14:16.000+11:00
diff --git a/packages/vidstack/mangle.json b/packages/vidstack/mangle.json
@@ -628,5 +628,10 @@
   "_getEndTime": "Hk",
   "_appendMediaFragment": "Ik",
   "_clipEnded": "Kk",
-  "_pausedSeeking": "Jk"
+  "_pausedSeeking": "Jk",
+  "_attachLoadPlayListener": "Mk",
+  "_handleLoadPlayStrategy": "Lk",
+  "_onLoadPoster": "Ok",
+  "_onPreconnect": "Pk",
+  "_saveTime": "Nk"
 }
diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -51,6 +51,7 @@ import { MediaPlayerDelegate } from '../core/state/media-player-delegate';
 import { MediaRequestContext, MediaRequestManager } from '../core/state/media-request-manager';
 import { MediaStateManager } from '../core/state/media-state-manager';
 import { MediaStateSync } from '../core/state/media-state-sync';
+import { MediaStorage } from '../core/storage';
 import { TextTrackSymbol } from '../core/tracks/text/symbols';
 import { canFullscreen } from '../foundation/fullscreen/controller';
 import { Logger } from '../foundation/logger/controller';
@@ -134,11 +135,15 @@ export class MediaPlayer
 
     new MediaStateSync();
 
+    const mediaStorageKey = computed(this._computeMediaKey.bind(this)),
+      storage = new MediaStorage(this.$props.storageKey, mediaStorageKey);
+
     const context = {
       player: this,
       scope: getScope(),
       qualities: new VideoQualityList(),
       audioTracks: new AudioTrackList(),
+      storage,
       $provider: signal<MediaProvider | null>(null),
       $providerSetup: signal(false),
       $props: this.$props,
@@ -156,7 +161,7 @@ export class MediaPlayer
     context.remote = new MediaRemoteControl(__DEV__ ? context.logger : undefined);
     context.remote.setPlayer(this);
     context.$iosControls = computed(this._isIOSControls.bind(this));
-    context.textTracks = new TextTrackList();
+    context.textTracks = new TextTrackList(storage);
     context.textTracks[TextTrackSymbol._crossorigin] = this.$state.crossorigin;
     context.textRenderers = new TextRenderers(context);
     context.ariaKeys = {};
@@ -243,6 +248,14 @@ export class MediaPlayer
     this.canPlayQueue._reset();
   }
 
+  private _computeMediaKey() {
+    const { storageKey, clipStartTime, clipEndTime } = this.$props,
+      { source } = this.$state;
+    return storageKey() && source().src
+      ? `${storageKey()}:${source().src}:${clipStartTime()}:${clipEndTime()}`
+      : null;
+  }
+
   private _skipTitleUpdate = false;
   private _watchTitle() {
     if (this._skipTitleUpdate) {
diff --git a/packages/vidstack/src/core/api/media-context.ts b/packages/vidstack/src/core/api/media-context.ts
@@ -14,6 +14,7 @@ import type { MediaKeyShortcuts } from '../keyboard/types';
 import type { VideoQualityList } from '../quality/video-quality';
 import type { MediaPlayerDelegate } from '../state/media-player-delegate';
 import type { MediaRemoteControl } from '../state/remote-control';
+import type { MediaStorage } from '../storage';
 import type { AudioTrackList } from '../tracks/audio-tracks';
 import type { TextRenderers } from '../tracks/text/render/text-renderer';
 import type { TextTrackList } from '../tracks/text/text-tracks';
@@ -23,6 +24,7 @@ import type { PlayerStore } from './player-state';
 export interface MediaContext {
   player: MediaPlayer;
   scope: Scope;
+  storage: MediaStorage;
   remote: MediaRemoteControl;
   delegate: MediaPlayerDelegate;
   qualities: VideoQualityList;
diff --git a/packages/vidstack/src/core/api/player-props.ts b/packages/vidstack/src/core/api/player-props.ts
@@ -36,6 +36,7 @@ export const mediaPlayerProps: MediaPlayerProps = {
   keyDisabled: false,
   keyTarget: 'player',
   keyShortcuts: MEDIA_KEY_SHORTCUTS,
+  storageKey: null,
 };
 
 export interface MediaStateAccessors
@@ -190,4 +191,9 @@ export interface MediaPlayerProps
    * ```
    */
   keyShortcuts: MediaKeyShortcuts;
+  /**
+   * Determines whether volume, time, and captions settings should be saved to local storage
+   * and used when initializing media.
+   */
+  storageKey: string | null;
 }
diff --git a/packages/vidstack/src/core/index.ts b/packages/vidstack/src/core/index.ts
@@ -9,6 +9,7 @@ export type { MediaPlayerProps, MediaStateAccessors, PlayerSrc } from './api/pla
 export type { MediaPlayerEvents } from './api/player-events';
 export { MediaRemoteControl } from './state/remote-control';
 export { MediaControls } from './controls';
+export type { MediaStorage } from './storage';
 export * from './tracks/text/render/text-renderer';
 export * from './tracks/text/render/libass-text-renderer';
 export * from './tracks/text/text-track';
diff --git a/packages/vidstack/src/core/state/media-player-delegate.ts b/packages/vidstack/src/core/state/media-player-delegate.ts
@@ -61,13 +61,15 @@ export class MediaPlayerDelegate {
     }
 
     const provider = peek(this._media.$provider),
-      { muted, volume, playsinline, clipStartTime } = this._media.$props;
+      { storage } = this._media,
+      { muted, volume, playsinline, clipStartTime } = this._media.$props,
+      startTime = storage.data.time ?? clipStartTime();
 
     if (provider) {
-      provider.setVolume(peek(volume));
-      provider.setMuted(peek(muted));
+      provider.setVolume(storage.data.volume ?? peek(volume));
+      provider.setMuted(storage.data.muted ?? peek(muted));
       provider.setPlaysinline?.(peek(playsinline));
-      if (peek(clipStartTime) > 0) provider.setCurrentTime(peek(clipStartTime));
+      if (startTime > 0) provider.setCurrentTime(startTime);
     }
 
     if ($state.canPlay() && $state.autoplay() && !$state.started()) {
diff --git a/packages/vidstack/src/core/state/media-state-manager.ts b/packages/vidstack/src/core/state/media-state-manager.ts
@@ -596,14 +596,30 @@ export class MediaStateManager extends MediaPlayerController {
       this._clipEnded = true;
       this.dispatch('media-pause-request', { trigger: event });
     }
+
+    this._saveTime();
+  }
+
+  private _saveTime() {
+    const { storage } = this._media,
+      { canPlay, realCurrentTime } = this.$state;
+
+    if (!canPlay()) return;
+
+    storage.time = realCurrentTime();
   }
 
   ['volume-change'](event: ME.MediaVolumeChangeEvent) {
-    const { volume, muted } = this.$state,
+    const { storage } = this._media,
+      { volume, muted } = this.$state,
       detail = event.detail;
+
     volume.set(detail.volume);
     muted.set(detail.muted || detail.volume === 0);
     this._satisfyRequest('volume', event);
+
+    storage.volume = volume();
+    storage.muted = muted();
   }
 
   ['seeking'] = throttle(
diff --git a/packages/vidstack/src/core/storage.ts b/packages/vidstack/src/core/storage.ts
@@ -0,0 +1,94 @@
+import throttle from 'just-throttle';
+import { effect, type ReadSignal } from 'maverick.js';
+import { noop } from 'maverick.js/std';
+
+export class MediaStorage {
+  private _data!: SavedMediaData;
+
+  constructor(
+    private _playerKey: ReadSignal<string | null>,
+    private _mediaKey: ReadSignal<string | null>,
+  ) {
+    effect(this._load.bind(this));
+  }
+
+  get playerKey() {
+    return this._playerKey();
+  }
+
+  get mediaKey() {
+    return this._mediaKey();
+  }
+
+  get data(): Readonly<SavedMediaData> {
+    return this._data;
+  }
+
+  set volume(volume: number) {
+    this._data.volume = volume;
+    this._save();
+  }
+
+  set muted(muted: boolean) {
+    this._data.muted = muted;
+    this._save();
+  }
+
+  set time(time: number) {
+    this._data.time = time;
+    this._saveTime();
+  }
+
+  set lang(lang: string | null) {
+    this._data.lang = lang;
+    this._save();
+  }
+
+  set captions(enabled: boolean) {
+    this._data.captions = enabled;
+    this._save();
+  }
+
+  private _load() {
+    const playerKey = this._playerKey(),
+      mediaKey = this._mediaKey(),
+      savedData = playerKey ? localStorage.getItem(playerKey) : null,
+      savedTime = mediaKey ? localStorage.getItem(mediaKey) : null;
+
+    this._data = {
+      volume: null,
+      muted: null,
+      lang: null,
+      captions: null,
+      ...(savedData ? JSON.parse(savedData) : {}),
+      time: savedTime ? +savedTime : null,
+    };
+  }
+
+  private _save() {
+    if (__SERVER__) return;
+
+    const playerKey = this._playerKey();
+    if (!playerKey) return;
+
+    const data = JSON.stringify({ ...this._data, time: undefined });
+    localStorage.setItem(playerKey, data);
+  }
+
+  private _saveTime = __SERVER__
+    ? noop
+    : throttle(() => {
+        const mediaKey = this._mediaKey();
+        if (!mediaKey) return;
+        const data = this._data.time + '';
+        localStorage.setItem(mediaKey, data);
+      }, 1000);
+}
+
+export interface SavedMediaData {
+  volume: number | null;
+  muted: boolean | null;
+  time: number | null;
+  lang: string | null;
+  captions: boolean | null;
+}
diff --git a/packages/vidstack/src/core/tracks/text/text-tracks.ts b/packages/vidstack/src/core/tracks/text/text-tracks.ts
@@ -1,7 +1,9 @@
+import debounce from 'just-debounce-it';
 import { DOMEvent } from 'maverick.js/std';
 
 import { List, type ListReadonlyChangeEvent } from '../../../foundation/list/list';
 import { ListSymbol } from '../../../foundation/list/symbols';
+import type { MediaStorage } from '../../storage';
 import { TextTrackSymbol } from './symbols';
 import {
   isTrackCaptionKind,
@@ -16,29 +18,47 @@ import {
 export class TextTrackList extends List<TextTrack, TextTrackListEvents> {
   private _canLoad = false;
   private _defaults: Record<string, TextTrack | undefined> = {};
+  private _preferredLang: string | null = null;
 
   /** @internal */
   [TextTrackSymbol._crossorigin]?: () => string | null;
 
+  constructor(private readonly _storage?: MediaStorage) {
+    super();
+  }
+
   get selected() {
     const track = this._items.find((t) => t.mode === 'showing' && isTrackCaptionKind(t));
     return track ?? null;
   }
 
+  get preferredLang() {
+    return this._preferredLang;
+  }
+
+  set preferredLang(lang: string | null) {
+    this._preferredLang = lang;
+  }
+
   add(init: TextTrackInit | TextTrack, trigger?: Event) {
     const isTrack = init instanceof TextTrack,
-      track = isTrack ? init : new TextTrack(init);
+      track = isTrack ? init : new TextTrack(init),
+      kind = init.kind === 'captions' || init.kind === 'subtitles' ? 'captions' : init.kind;
 
-    if (this._defaults[init.kind] && init.default) delete init.default;
+    if (this._defaults[kind] && init.default) delete init.default;
 
     track.addEventListener('mode-change', this._onTrackModeChangeBind);
     this[ListSymbol._add](track, trigger);
     track[TextTrackSymbol._crossorigin] = this[TextTrackSymbol._crossorigin];
     if (this._canLoad) track[TextTrackSymbol._canLoad]();
 
     if (init.default) {
-      this._defaults[init.kind] = track;
-      track.mode = 'showing';
+      this._defaults[kind] = track;
+      if (kind !== 'captions') {
+        track.mode = 'showing';
+      } else {
+        this._selectCaptions();
+      }
     }
 
     return this;
@@ -78,10 +98,39 @@ export class TextTrackList extends List<TextTrack, TextTrackListEvents> {
     this._canLoad = true;
   }
 
+  private _selectCaptions = debounce(() => {
+    if (this.selected || this._storage?.data.captions === false) return;
+
+    if (!this._preferredLang && this._storage) {
+      this._preferredLang = this._storage.data.lang;
+    }
+
+    const preferredTrack =
+        this._preferredLang &&
+        this._items.find(
+          (track) => isTrackCaptionKind(track) && track.language === this._preferredLang,
+        ),
+      defaultTrack = this._defaults.captions;
+
+    if (preferredTrack) {
+      preferredTrack.mode = 'showing';
+    } else if (defaultTrack) {
+      if (defaultTrack) defaultTrack.mode = 'showing';
+    }
+
+    if (this._storage) {
+      this._storage.lang = this._preferredLang ?? defaultTrack?.language ?? null;
+    }
+  }, 300);
+
   private _onTrackModeChangeBind = this._onTrackModeChange.bind(this);
   private _onTrackModeChange(event: TextTrackModeChangeEvent) {
     const track = event.detail;
 
+    if (this._storage && isTrackCaptionKind(track)) {
+      this._storage.captions = track.mode === 'showing';
+    }
+
     if (track.mode === 'showing') {
       const kinds = isTrackCaptionKind(track) ? ['captions', 'subtitles'] : [track.kind];
       for (const t of this._items) {
