@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/src/components/player.ts

@@ -1,758 +0,0 @@
-import {
-  Component,
-  computed,
-  effect,
-  method,
-  onDispose,
-  peek,
-  prop,
-  provideContext,
-  signal,
-  type WriteSignalRecord,
-} from 'maverick.js';
-import type { ElementAttributesRecord } from 'maverick.js/element';
-import {
-  animationFrameThrottle,
-  camelToKebabCase,
-  isString,
-  listenEvent,
-  setAttribute,
-  setStyle,
-  uppercaseFirstChar,
-} from 'maverick.js/std';
-
-import { MEDIA_ATTRIBUTES, mediaAttributes } from '../core/api/media-attrs';
-import { mediaContext, type MediaContext } from '../core/api/media-context';
-import type { MediaFullscreenRequestTarget } from '../core/api/media-request-events';
-import type {
-  FindMediaPlayerEvent,
-  MediaPlayerConnectEvent,
-  MediaPlayerEvents,
-} from '../core/api/player-events';
-import {
-  mediaPlayerProps,
-  type MediaPlayerProps,
-  type MediaStateAccessors,
-} from '../core/api/player-props';
-import {
-  boundTime,
-  mediaState,
-  type MediaPlayerState,
-  type MediaStore,
-} from '../core/api/player-state';
-import type { MediaControls } from '../core/controls';
-import { MediaKeyboardController } from '../core/keyboard/controller';
-import { VideoQualityList } from '../core/quality/video-quality';
-import { MediaEventsLogger } from '../core/state/media-events-logger';
-import { MediaLoadController } from '../core/state/media-load-controller';
-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 { LocalMediaStorage, type MediaStorage } from '../core/state/media-storage';
-import { NavigatorMediaSession } from '../core/state/navigator-media-session';
-import { MediaRemoteControl } from '../core/state/remote-control';
-import { AudioTrackList } from '../core/tracks/audio/audio-tracks';
-import { TextRenderers } from '../core/tracks/text/render/text-renderer';
-import { TextTrackSymbol } from '../core/tracks/text/symbols';
-import { isTrackCaptionKind } from '../core/tracks/text/text-track';
-import { TextTrackList } from '../core/tracks/text/text-tracks';
-import { Logger } from '../foundation/logger/controller';
-import { LogPrinter } from '../foundation/logger/log-printer';
-import { FocusVisibleController } from '../foundation/observers/focus-visible';
-import { ScreenOrientationController } from '../foundation/orientation/controller';
-import { RequestQueue } from '../foundation/queue/request-queue';
-import type { AnyMediaProvider, MediaProviderAdapter } from '../providers/types';
-import { setAttributeIfEmpty } from '../utils/dom';
-import { clampNumber } from '../utils/number';
-import { IS_IPHONE } from '../utils/support';
-
-declare global {
-  interface HTMLElementEventMap {
-    'media-player-connect': MediaPlayerConnectEvent;
-    'find-media-player': FindMediaPlayerEvent;
-  }
-}
-
-/**
- * All media elements exist inside the `<media-player>` component. This component's main
- * responsibilities are to manage media state updates, dispatch media events, handle media
- * requests, and expose media state through HTML attributes and CSS properties for styling
- * purposes.
- *
- * @attr data-airplay - Whether AirPlay is connected.
- * @attr data-autoplay - Autoplay has successfully started.
- * @attr data-autoplay-error - Autoplay has failed to start.
- * @attr data-buffering - Media is not ready for playback or waiting for more data.
- * @attr data-can-airplay - Whether AirPlay is available.
- * @attr data-can-fullscreen - Fullscreen mode is available.
- * @attr data-can-google-cast - Whether Google Cast is available.
- * @attr data-can-load - Media can now begin loading.
- * @attr data-can-pip - Picture-in-Picture mode is available.
- * @attr data-can-play - Media is ready for playback.
- * @attr data-can-seek - Seeking operations are permitted.
- * @attr data-captions - Captions are available and visible.
- * @attr data-controls - Controls are visible.
- * @attr data-ended - Playback has ended.
- * @attr data-error - Issue with media loading/playback.
- * @attr data-fullscreen - Fullscreen mode is active.
- * @attr data-google-cast - Whether Google Cast is connected.
- * @attr data-ios-controls - iOS controls are visible.
- * @attr data-load - Specified load strategy.
- * @attr data-live - Media is live stream.
- * @attr data-live-edge - Playback is at the live edge.
- * @attr data-loop - Media is set to replay on end.
- * @attr data-media-type - Current media type (audio/video).
- * @attr data-muted - Whether volume is muted (0).
- * @attr data-orientation - Current screen orientation (landscape/portrait).
- * @attr data-paused - Whether playback is paused.
- * @attr data-pip - Picture-in-picture mode is active.
- * @attr data-playing - Playback is active.
- * @attr data-playsinline - Media should play inline by default (iOS).
- * @attr data-pointer - The user's pointer device type (coarse/fine).
- * @attr data-preview - The user is interacting with the time slider.
- * @attr data-remote-type - The remote playback type (airplay/google-cast).
- * @attr data-remote-state - The remote playback state (connecting/connected/disconnected).
- * @attr data-seeking - User is seeking to a new playback position.
- * @attr data-started - Media playback has started.
- * @attr data-stream-type - Current stream type.
- * @attr data-view-type - Current view type (audio/video).
- * @attr data-waiting - Media is waiting for more data to resume playback.
- * @attr data-focus - Whether player is being keyboard focused.
- * @attr data-hocus - Whether player is being keyboard focused or hovered over.
- * @docs {@link https://www.vidstack.io/docs/player/components/media/player}
- */
-export class MediaPlayer
-  extends Component<MediaPlayerProps, MediaPlayerState, MediaPlayerEvents>
-  implements MediaStateAccessors
-{
-  static props: MediaPlayerProps = mediaPlayerProps;
-  static state = mediaState;
-
-  readonly #media: MediaContext;
-  readonly #stateMgr: MediaStateManager;
-  readonly #requestMgr: MediaRequestManager;
-
-  @prop
-  readonly canPlayQueue = new RequestQueue();
-
-  @prop
-  readonly remoteControl: MediaRemoteControl;
-
-  get #provider() {
-    return this.#media.$provider() as AnyMediaProvider | null;
-  }
-
-  get #props() {
-    return this.$props as unknown as WriteSignalRecord<MediaPlayerProps>;
-  }
-
-  constructor() {
-    super();
-
-    new MediaStateSync();
-
-    const context = {
-      player: this,
-      qualities: new VideoQualityList(),
-      audioTracks: new AudioTrackList(),
-      storage: null,
-      $provider: signal<MediaProvider | null>(null),
-      $providerSetup: signal(false),
-      $props: this.$props,
-      $state: this.$state as MediaStore,
-    } as unknown as MediaContext;
-
-    if (__DEV__) {
-      const logPrinter = new LogPrinter();
-      effect(() => {
-        logPrinter.logLevel = this.$props.logLevel();
-      });
-    }
-
-    if (__DEV__) context.logger = new Logger();
-    context.remote = this.remoteControl = new MediaRemoteControl(
-      __DEV__ ? context.logger : undefined,
-    );
-    context.remote.setPlayer(this);
-    context.textTracks = new TextTrackList();
-    context.textTracks[TextTrackSymbol.crossOrigin] = this.$state.crossOrigin;
-    context.textRenderers = new TextRenderers(context);
-    context.ariaKeys = {};
-
-    this.#media = context;
-    provideContext(mediaContext, context);
-
-    this.orientation = new ScreenOrientationController();
-
-    new FocusVisibleController();
-    new MediaKeyboardController(context);
-    if (__DEV__) new MediaEventsLogger(context);
-
-    const request = new MediaRequestContext();
-    this.#stateMgr = new MediaStateManager(request, context);
-    this.#requestMgr = new MediaRequestManager(this.#stateMgr, request, context);
-
-    context.delegate = new MediaPlayerDelegate(this.#stateMgr.handle.bind(this.#stateMgr), context);
-
-    context.notify = context.delegate.notify.bind(context.delegate);
-
-    if (typeof navigator !== 'undefined' && 'mediaSession' in navigator) {
-      new NavigatorMediaSession();
-    }
-
-    new MediaLoadController('load', this.startLoading.bind(this));
-    new MediaLoadController('posterLoad', this.startLoadingPoster.bind(this));
-  }
-
-  protected override onSetup(): void {
-    this.#setupMediaAttributes();
-    effect(this.#watchCanPlay.bind(this));
-    effect(this.#watchMuted.bind(this));
-    effect(this.#watchPaused.bind(this));
-    effect(this.#watchVolume.bind(this));
-    effect(this.#watchCurrentTime.bind(this));
-    effect(this.#watchPlaysInline.bind(this));
-    effect(this.#watchPlaybackRate.bind(this));
-  }
-
-  protected override onAttach(el: HTMLElement): void {
-    el.setAttribute('data-media-player', '');
-    setAttributeIfEmpty(el, 'tabindex', '0');
-    setAttributeIfEmpty(el, 'role', 'region');
-
-    effect(this.#watchStorage.bind(this));
-
-    if (__SERVER__) this.#watchTitle();
-    else effect(this.#watchTitle.bind(this));
-
-    if (__SERVER__) this.#watchOrientation();
-    else effect(this.#watchOrientation.bind(this));
-
-    listenEvent(el, 'find-media-player', this.#onFindPlayer.bind(this));
-  }
-
-  protected override onConnect(el: HTMLElement) {
-    if (IS_IPHONE) setAttribute(el, 'data-iphone', '');
-
-    const pointerQuery = window.matchMedia('(pointer: coarse)');
-    this.#onPointerChange(pointerQuery);
-    pointerQuery.onchange = this.#onPointerChange.bind(this);
-
-    const resize = new ResizeObserver(animationFrameThrottle(this.#onResize.bind(this)));
-    resize.observe(el);
-
-    effect(this.#onResize.bind(this));
-
-    this.dispatch('media-player-connect', {
-      detail: this,
-      bubbles: true,
-      composed: true,
-    });
-
-    if (__DEV__) this.#media.logger!.setTarget(el);
-
-    onDispose(() => {
-      resize.disconnect();
-      pointerQuery.onchange = null;
-      if (__DEV__) this.#media.logger!.setTarget(null);
-    });
-  }
-
-  protected override onDestroy(): void {
-    // @ts-expect-error
-    this.#media.player = null;
-    this.canPlayQueue.reset();
-  }
-
-  #skipTitleUpdate = false;
-  #watchTitle() {
-    const el = this.$el,
-      { title, live, viewType, providedTitle } = this.$state,
-      isLive = live(),
-      type = uppercaseFirstChar(viewType()),
-      typeText = type !== 'Unknown' ? `${isLive ? 'Live ' : ''}${type}` : isLive ? 'Live' : 'Media',
-      currentTitle = title();
-
-    setAttribute(
-      this.el!,
-      'aria-label',
-      `${typeText} Player` + (currentTitle ? ` - ${currentTitle}` : ''),
-    );
-
-    // Title attribute is removed to prevent popover interfering with user hovering over player.
-    if (!__SERVER__ && el?.hasAttribute('title')) {
-      this.#skipTitleUpdate = true;
-      el?.removeAttribute('title');
-    }
-  }
-
-  #watchOrientation() {
-    const orientation = this.orientation.landscape ? 'landscape' : 'portrait';
-    this.$state.orientation.set(orientation);
-    setAttribute(this.el!, 'data-orientation', orientation);
-    this.#onResize();
-  }
-
-  #watchCanPlay() {
-    if (this.$state.canPlay() && this.#provider) this.canPlayQueue.start();
-    else this.canPlayQueue.stop();
-  }
-
-  #setupMediaAttributes() {
-    if (MediaPlayer[MEDIA_ATTRIBUTES]) {
-      this.setAttributes(MediaPlayer[MEDIA_ATTRIBUTES]);
-      return;
-    }
-
-    const $attrs: ElementAttributesRecord = {
-      'data-load': function (this: MediaPlayer) {
-        return this.$props.load();
-      },
-      'data-captions': function (this: MediaPlayer) {
-        const track = this.$state.textTrack();
-        return !!track && isTrackCaptionKind(track);
-      },
-      'data-ios-controls': function (this: MediaPlayer) {
-        return this.$state.iOSControls();
-      },
-      'data-controls': function (this: MediaPlayer) {
-        return this.controls.showing;
-      },
-      'data-buffering': function (this: MediaPlayer) {
-        const { canLoad, canPlay, waiting } = this.$state;
-        return canLoad() && (!canPlay() || waiting());
-      },
-      'data-error': function (this: MediaPlayer) {
-        const { error } = this.$state;
-        return !!error();
-      },
-      'data-autoplay-error': function (this: MediaPlayer) {
-        const { autoPlayError } = this.$state;
-        return !!autoPlayError();
-      },
-    };
-
-    const alias: Partial<Record<keyof MediaPlayerState, string>> = {
-      autoPlay: 'autoplay',
-      canAirPlay: 'can-airplay',
-      canPictureInPicture: 'can-pip',
-      pictureInPicture: 'pip',
-      playsInline: 'playsinline',
-      remotePlaybackState: 'remote-state',
-      remotePlaybackType: 'remote-type',
-      isAirPlayConnected: 'airplay',
-      isGoogleCastConnected: 'google-cast',
-    };
-
-    for (const prop of mediaAttributes) {
-      const attrName = 'data-' + (alias[prop] ?? camelToKebabCase(prop));
-      $attrs[attrName] = function (this: MediaPlayer) {
-        return this.$state[prop]() as string | number;
-      };
-    }
-
-    delete $attrs.title;
-    MediaPlayer[MEDIA_ATTRIBUTES] = $attrs;
-    this.setAttributes($attrs);
-  }
-
-  #onFindPlayer(event: FindMediaPlayerEvent) {
-    event.detail(this);
-  }
-
-  #onResize() {
-    if (__SERVER__ || !this.el) return;
-
-    const width = this.el.clientWidth,
-      height = this.el.clientHeight;
-
-    this.$state.width.set(width);
-    this.$state.height.set(height);
-
-    setStyle(this.el, '--player-width', width + 'px');
-    setStyle(this.el, '--player-height', height + 'px');
-  }
-
-  #onPointerChange(queryList: MediaQueryList | MediaQueryListEvent) {
-    if (__SERVER__) return;
-    const pointer = queryList.matches ? 'coarse' : 'fine';
-    setAttribute(this.el!, 'data-pointer', pointer);
-    this.$state.pointer.set(pointer);
-    this.#onResize();
-  }
-
-  /**
-   * The current media provider.
-   */
-  @prop
-  get provider(): AnyMediaProvider | null {
-    return this.#provider;
-  }
-
-  /**
-   * Media controls settings.
-   */
-  @prop
-  get controls(): MediaControls {
-    return this.#requestMgr.controls;
-  }
-
-  set controls(controls: boolean) {
-    this.#props.controls.set(controls);
-  }
-
-  /**
-   * Controls the screen orientation of the current browser window and dispatches orientation
-   * change events on the player.
-   */
-  @prop
-  readonly orientation: ScreenOrientationController;
-
-  /**
-   * The title of the current media.
-   */
-  @prop
-  get title() {
-    return peek(this.$state.title);
-  }
-
-  set title(newTitle) {
-    if (this.#skipTitleUpdate) {
-      this.#skipTitleUpdate = false;
-      return;
-    }
-
-    this.#props.title.set(newTitle);
-  }
-
-  /**
-   * A list of all `VideoQuality` objects representing the set of available video renditions.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/video-quality}
-   */
-  @prop
-  get qualities(): VideoQualityList {
-    return this.#media.qualities;
-  }
-
-  /**
-   * A list of all `AudioTrack` objects representing the set of available audio tracks.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/audio-tracks}
-   */
-  @prop
-  get audioTracks(): AudioTrackList {
-    return this.#media.audioTracks;
-  }
-
-  /**
-   * A list of all `TextTrack` objects representing the set of available text tracks.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/text-tracks}
-   */
-  @prop
-  get textTracks(): TextTrackList {
-    return this.#media.textTracks;
-  }
-
-  /**
-   * Contains text renderers which are responsible for loading, parsing, and rendering text
-   * tracks.
-   */
-  @prop
-  get textRenderers(): TextRenderers {
-    return this.#media.textRenderers;
-  }
-
-  @prop
-  get duration() {
-    return this.$state.duration();
-  }
-
-  set duration(duration: number) {
-    this.#props.duration.set(duration);
-  }
-
-  @prop
-  get paused() {
-    return peek(this.$state.paused);
-  }
-
-  set paused(paused) {
-    this.#queuePausedUpdate(paused);
-  }
-
-  #watchPaused() {
-    this.#queuePausedUpdate(this.$props.paused());
-  }
-
-  #queuePausedUpdate(paused: boolean) {
-    if (paused) {
-      this.canPlayQueue.enqueue('paused', () => this.#requestMgr.pause());
-    } else this.canPlayQueue.enqueue('paused', () => this.#requestMgr.play());
-  }
-
-  @prop
-  get muted() {
-    return peek(this.$state.muted);
-  }
-
-  set muted(muted) {
-    this.#queueMutedUpdate(muted);
-  }
-
-  #watchMuted() {
-    this.#queueMutedUpdate(this.$props.muted());
-  }
-
-  #queueMutedUpdate(muted: boolean) {
-    this.canPlayQueue.enqueue('muted', () => {
-      if (this.#provider) this.#provider.setMuted(muted);
-    });
-  }
-
-  @prop
-  get currentTime() {
-    return peek(this.$state.currentTime);
-  }
-
-  set currentTime(time) {
-    this.#queueCurrentTimeUpdate(time);
-  }
-
-  #watchCurrentTime() {
-    this.#queueCurrentTimeUpdate(this.$props.currentTime());
-  }
-
-  #queueCurrentTimeUpdate(time: number) {
-    this.canPlayQueue.enqueue('currentTime', () => {
-      const { currentTime } = this.$state;
-
-      if (time === peek(currentTime)) return;
-
-      peek(() => {
-        if (!this.#provider) return;
-
-        const boundedTime = boundTime(time, this.$state);
-
-        if (Number.isFinite(boundedTime)) {
-          this.#provider.setCurrentTime(boundedTime);
-        }
-      });
-    });
-  }
-
-  @prop
-  get volume() {
-    return peek(this.$state.volume);
-  }
-
-  set volume(volume) {
-    this.#queueVolumeUpdate(volume);
-  }
-
-  #watchVolume() {
-    this.#queueVolumeUpdate(this.$props.volume());
-  }
-
-  #queueVolumeUpdate(volume: number) {
-    const clampedVolume = clampNumber(0, volume, 1);
-    this.canPlayQueue.enqueue('volume', () => {
-      if (this.#provider) this.#provider.setVolume(clampedVolume);
-    });
-  }
-
-  @prop
-  get playbackRate() {
-    return peek(this.$state.playbackRate);
-  }
-
-  set playbackRate(rate) {
-    this.#queuePlaybackRateUpdate(rate);
-  }
-
-  #watchPlaybackRate() {
-    this.#queuePlaybackRateUpdate(this.$props.playbackRate());
-  }
-
-  #queuePlaybackRateUpdate(rate: number) {
-    this.canPlayQueue.enqueue('rate', () => {
-      if (this.#provider) (this.#provider as MediaProviderAdapter).setPlaybackRate?.(rate);
-    });
-  }
-
-  #watchPlaysInline() {
-    this.#queuePlaysInlineUpdate(this.$props.playsInline());
-  }
-
-  #queuePlaysInlineUpdate(inline: boolean) {
-    this.canPlayQueue.enqueue('playsinline', () => {
-      if (this.#provider) (this.#provider as MediaProviderAdapter).setPlaysInline?.(inline);
-    });
-  }
-
-  #watchStorage() {
-    let storageValue = this.$props.storage(),
-      storage: MediaStorage | null = isString(storageValue)
-        ? new LocalMediaStorage()
-        : storageValue;
-
-    if (storage?.onChange) {
-      const { source } = this.$state,
-        playerId = isString(storageValue) ? storageValue : this.el?.id,
-        mediaId = computed(this.#computeMediaId.bind(this));
-
-      effect(() => storage!.onChange!(source(), mediaId(), playerId || undefined));
-    }
-
-    this.#media.storage = storage;
-    this.#media.textTracks.setStorage(storage);
-
-    onDispose(() => {
-      storage?.onDestroy?.();
-      this.#media.storage = null;
-      this.#media.textTracks.setStorage(null);
-    });
-  }
-
-  #computeMediaId() {
-    const { clipStartTime, clipEndTime } = this.$props,
-      { source } = this.$state,
-      src = source();
-    return src.src ? `${src.src}:${clipStartTime()}:${clipEndTime()}` : null;
-  }
-
-  /**
-   * Begins/resumes playback of the media. If this method is called programmatically before the
-   * user has interacted with the player, the promise may be rejected subject to the browser's
-   * autoplay policies. This method will throw if called before media is ready for playback.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play}
-   */
-  @method
-  async play(trigger?: Event) {
-    return this.#requestMgr.play(trigger);
-  }
-
-  /**
-   * Pauses playback of the media. This method will throw if called before media is ready for
-   * playback.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause}
-   */
-  @method
-  async pause(trigger?: Event) {
-    return this.#requestMgr.pause(trigger);
-  }
-
-  /**
-   * Attempts to display the player in fullscreen. The promise will resolve if successful, and
-   * reject if not. This method will throw if any fullscreen API is _not_ currently available.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/fullscreen}
-   */
-  @method
-  async enterFullscreen(target?: MediaFullscreenRequestTarget, trigger?: Event) {
-    return this.#requestMgr.enterFullscreen(target, trigger);
-  }
-
-  /**
-   * Attempts to display the player inline by exiting fullscreen. This method will throw if any
-   * fullscreen API is _not_ currently available.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/fullscreen}
-   */
-  @method
-  async exitFullscreen(target?: MediaFullscreenRequestTarget, trigger?: Event) {
-    return this.#requestMgr.exitFullscreen(target, trigger);
-  }
-
-  /**
-   * Attempts to display the player in picture-in-picture mode. This method will throw if PIP is
-   * not supported. This method will also return a `PictureInPictureWindow` if the current
-   * provider supports it.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/picture-in-picture}
-   */
-  @method
-  enterPictureInPicture(trigger?: Event) {
-    return this.#requestMgr.enterPictureInPicture(trigger);
-  }
-
-  /**
-   * Attempts to display the player in inline by exiting picture-in-picture mode. This method
-   * will throw if not supported.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/picture-in-picture}
-   */
-  @method
-  exitPictureInPicture(trigger?: Event) {
-    return this.#requestMgr.exitPictureInPicture(trigger);
-  }
-
-  /**
-   * Sets the current time to the live edge (i.e., `duration`). This is a no-op for non-live
-   * streams and will throw if called before media is ready for playback.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/live}
-   */
-  @method
-  seekToLiveEdge(trigger?: Event): void {
-    this.#requestMgr.seekToLiveEdge(trigger);
-  }
-
-  /**
-   * Called when media can begin loading. Calling this method will trigger the initial provider
-   * loading process. Calling it more than once has no effect.
-   *
-   * @see {@link https://vidstack.io/docs/player/core-concepts/loading#load-strategies}
-   */
-  @method
-  startLoading(trigger?: Event): void {
-    this.#media.notify('can-load', undefined, trigger);
-  }
-
-  /**
-   * Called when the poster image can begin loading. Calling it more than once has no effect.
-   *
-   * @see {@link https://vidstack.io/docs/player/core-concepts/loading#load-strategies}
-   */
-  @method
-  startLoadingPoster(trigger?: Event) {
-    this.#media.notify('can-load-poster', undefined, trigger);
-  }
-
-  /**
-   * Request Apple AirPlay picker to open.
-   */
-  @method
-  requestAirPlay(trigger?: Event) {
-    return this.#requestMgr.requestAirPlay(trigger);
-  }
-
-  /**
-   * Request Google Cast device picker to open. The Google Cast framework will be loaded if it
-   * hasn't yet.
-   */
-  @method
-  requestGoogleCast(trigger?: Event) {
-    return this.#requestMgr.requestGoogleCast(trigger);
-  }
-
-  /**
-   * Set the audio gain, amplifying volume and enabling a maximum volume above 100%.
-   *
-   * @see {@link https://vidstack.io/docs/player/api/audio-gain}
-   */
-  @method
-  setAudioGain(gain: number, trigger?: Event) {
-    return this.#requestMgr.setAudioGain(gain, trigger);
-  }
-
-  override destroy() {
-    super.destroy();
-    this.#media.remote.setPlayer(null);
-    this.dispatch('destroy');
-  }
-}