@hanifhan1f/vidstack 1.12.13

package/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "types",
+    "paths": {}
+  },
+  "exclude": ["src/**/*.test.ts", "src/test-utils"]
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "paths": {
+      "$test-utils": ["./src/test-utils/index.ts"]
+    },
+    "types": ["@types/node", "vitest/globals"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/types/components/aria/announcer.d.ts

@@ -0,0 +1,27 @@
+import { Component, State } from 'maverick.js';
+import { type DOMEvent } from 'maverick.js/std';
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/announcer}
+ */
+export declare class MediaAnnouncer extends Component<MediaAnnouncerProps, MediaAnnouncerState, MediaAnnouncerEvents> {
+    #private;
+    static props: MediaAnnouncerProps;
+    static state: State<MediaAnnouncerState>;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+}
+export interface MediaAnnouncerProps {
+    translations: Partial<MediaAnnouncerTranslations> | null;
+}
+export interface MediaAnnouncerState {
+    label: string | null;
+    busy: boolean;
+}
+export interface MediaAnnouncerEvents {
+    change: DOMEvent<string>;
+}
+export type MediaAnnouncerWord = 'Play' | 'Pause' | 'Enter Fullscreen' | 'Exit Fullscreen' | 'Enter PiP' | 'Exit PiP' | 'Closed-Captions On' | 'Closed-Captions Off' | 'Mute' | 'Volume' | 'Seek Forward' | 'Seek Backward';
+export type MediaAnnouncerTranslations = {
+    [word in MediaAnnouncerWord]: string;
+};

package/types/components/layouts/default/audio-layout.d.ts

@@ -0,0 +1,15 @@
+import { DefaultLayout } from './default-layout';
+import type { DefaultLayoutProps } from './props';
+/**
+ * The audio layout is our production-ready UI that's displayed when the media view type is set to
+ * 'audio'. It includes support for audio tracks, slider chapters, captions, live streams, and much
+ * more out of the box.
+ *
+ * @attr data-match - Whether this layout is being used (query match).
+ * @attr data-sm - The small layout is active
+ * @attr data-lg - The large layout is active.
+ * @attr data-size - The active layout size (sm or lg).
+ */
+export declare class DefaultAudioLayout extends DefaultLayout {
+    static props: DefaultLayoutProps;
+}

package/types/components/layouts/default/context.d.ts

@@ -0,0 +1,9 @@
+import { type ReadSignalRecord, type WriteSignal } from 'maverick.js';
+import type { DefaultLayoutProps } from './props';
+export interface DefaultLayoutContext extends ReadSignalRecord<DefaultLayoutProps> {
+    menuPortal: WriteSignal<HTMLElement | null>;
+    userPrefersAnnouncements: WriteSignal<boolean>;
+    userPrefersKeyboardAnimations: WriteSignal<boolean>;
+}
+export declare const defaultLayoutContext: import("maverick.js").Context<DefaultLayoutContext>;
+export declare function useDefaultLayoutContext(): DefaultLayoutContext;

package/types/components/layouts/default/default-layout.d.ts

@@ -0,0 +1,10 @@
+import { Component } from 'maverick.js';
+import { type DefaultLayoutProps } from './props';
+export declare class DefaultLayout extends Component<DefaultLayoutProps> {
+    #private;
+    static props: DefaultLayoutProps;
+    get isMatch(): boolean;
+    get isSmallLayout(): boolean;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+}

package/types/components/layouts/default/props.d.ts

@@ -0,0 +1,125 @@
+import type { MediaPlayerQuery } from '../../../core/api/player-state';
+import type { FileDownloadInfo } from '../../../utils/network';
+import type { ThumbnailSrc } from '../../ui/thumbnails/thumbnail-loader';
+import type { DefaultLayoutTranslations } from './translations';
+export declare const defaultLayoutProps: DefaultLayoutProps;
+export interface DefaultLayoutEpisode {
+    title: string;
+    episodeTitle?: string;
+    overview?: string;
+    thumbnail?: string;
+    runtime?: number;
+    episodeNumber?: number;
+    seasonNumber?: number;
+}
+export interface DefaultLayoutProps {
+    /**
+     * Determines when the UI should be displayed.
+     */
+    when: boolean | MediaPlayerQuery;
+    /**
+     * Determines when the small (e.g., mobile) UI should be displayed.
+     */
+    smallWhen: 'never' | boolean | MediaPlayerQuery;
+    /**
+     * The thumbnails resource.
+     *
+     * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
+     */
+    thumbnails: ThumbnailSrc;
+    /**
+     * Whether light or dark color theme should be active. Defaults to user operating system
+     * preference.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme}
+     */
+    colorScheme: 'light' | 'dark' | 'system' | 'default';
+    /**
+     * Sets the download URL and filename for the download button.
+     */
+    download: FileDownloadInfo;
+    /**
+     * Whether the default icons should _not_ be loaded. Set this to `true` when providing your own
+     * icons.
+     */
+    customIcons: boolean;
+    /**
+     * Translation map from english to your desired language for words used throughout the layout.
+     */
+    translations: Partial<DefaultLayoutTranslations> | null;
+    /**
+     * A document query selector string or `HTMLElement` to mount the menu container inside. Defaults
+     * to `document.body` when set to `null`.
+     */
+    menuContainer: string | HTMLElement | null;
+    /**
+     * Specifies whether menu buttons should be placed in the top or bottom controls group. This
+     * only applies to the large video layout.
+     */
+    menuGroup: 'top' | 'bottom';
+    /**
+     * Disable audio boost slider in the settings menu.
+     */
+    noAudioGain: boolean;
+    /**
+     * Whether modal menus should be disabled when the small layout is active. A modal menu is
+     * a floating panel that floats up from the bottom of the screen (outside of the player). It's
+     * enabled by default as it provides a better user experience for touch devices.
+     */
+    noModal: boolean;
+    /**
+     * Whether to disable scrubbing by touch swiping left or right on the player canvas.
+     */
+    noScrubGesture: boolean;
+    /**
+     * The minimum width of the slider to start displaying slider chapters when available.
+     */
+    sliderChaptersMinWidth: number;
+    /**
+     * Whether the time slider should be disabled.
+     */
+    disableTimeSlider: boolean;
+    /**
+     * Whether all gestures such as press to play or seek should not be active.
+     */
+    noGestures: boolean;
+    /**
+     * Whether keyboard actions should not be displayed.
+     */
+    noKeyboardAnimations: boolean;
+    /**
+     * Whether the bitrate should be hidden in the settings quality hint.
+     *
+     * @defaultValue false
+     */
+    hideQualityBitrate: boolean;
+    /**
+     * Episode list shown in the default video layout panel.
+     */
+    episodes: DefaultLayoutEpisode[] | null;
+    /**
+     * Title shown at the top of the episodes panel.
+     */
+    episodesTitle: string;
+    /**
+     * The playback rate options to be displayed in the settings menu.
+     */
+    playbackRates: number[] | {
+        min: number;
+        max: number;
+        step: number;
+    };
+    /**
+     * The audio gain options to be displayed in the settings menu.
+     */
+    audioGains: number[] | {
+        min: number;
+        max: number;
+        step: number;
+    };
+    /**
+     * The number of seconds to seek forward or backward when pressing the seek button or using
+     * keyboard shortcuts.
+     */
+    seekStep: number;
+}

package/types/components/layouts/default/translations.d.ts

@@ -0,0 +1,6 @@
+import type { ReadSignal } from 'maverick.js';
+export type DefaultLayoutWord = 'Announcements' | 'Accessibility' | 'AirPlay' | 'Audio' | 'Auto' | 'Boost' | 'Captions' | 'Caption Styles' | 'Captions look like this' | 'Chapters' | 'Closed-Captions Off' | 'Closed-Captions On' | 'Connected' | 'Continue' | 'Connecting' | 'Default' | 'Disabled' | 'Disconnected' | 'Display Background' | 'Download' | 'Enter Fullscreen' | 'Enter PiP' | 'Exit Fullscreen' | 'Exit PiP' | 'Font' | 'Family' | 'Fullscreen' | 'Google Cast' | 'Keyboard Animations' | 'LIVE' | 'Loop' | 'Mute' | 'Normal' | 'Off' | 'Pause' | 'Play' | 'Playback' | 'PiP' | 'Quality' | 'Replay' | 'Reset' | 'Seek Backward' | 'Seek Forward' | 'Seek' | 'Settings' | 'Skip To Live' | 'Speed' | 'Size' | 'Color' | 'Opacity' | 'Shadow' | 'Text' | 'Text Background' | 'Track' | 'Unmute' | 'Volume';
+export type DefaultLayoutTranslations = {
+    [word in DefaultLayoutWord]: string;
+};
+export declare function i18n(translations: ReadSignal<Partial<DefaultLayoutTranslations> | null>, word: string): any;

package/types/components/layouts/default/video-layout.d.ts

@@ -0,0 +1,15 @@
+import { DefaultLayout } from './default-layout';
+import type { DefaultLayoutProps } from './props';
+/**
+ * The video layout is our production-ready UI that's displayed when the media view type is set to
+ * 'video'. It includes support for picture-in-picture, fullscreen, slider chapters, slider
+ * previews, captions, audio/quality settings, live streams, and much more out of the box.
+ *
+ * @attr data-match - Whether this layout is being used (query match).
+ * @attr data-sm - The small layout is active
+ * @attr data-lg - The large layout is active.
+ * @attr data-size - The active layout size.
+ */
+export declare class DefaultVideoLayout extends DefaultLayout {
+    static props: DefaultLayoutProps;
+}

package/types/components/layouts/plyr/context.d.ts

@@ -0,0 +1,7 @@
+import { type ReadSignalRecord, type WriteSignal } from 'maverick.js';
+import type { PlyrLayoutProps } from './props';
+export interface PlyrLayoutContext extends ReadSignalRecord<PlyrLayoutProps> {
+    previewTime: WriteSignal<number>;
+}
+export declare const plyrLayoutContext: import("maverick.js").Context<PlyrLayoutContext>;
+export declare function usePlyrLayoutContext(): PlyrLayoutContext;

package/types/components/layouts/plyr/plyr-layout.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'maverick.js';
+import { type MediaContext } from '../../../core/api/media-context';
+import { type PlyrLayoutProps } from './props';
+export declare class PlyrLayout extends Component<PlyrLayoutProps> {
+    #private;
+    static props: PlyrLayoutProps;
+    protected onSetup(): void;
+}
+export declare function usePlyrLayoutClasses(el: HTMLElement, media: MediaContext): () => void;

package/types/components/layouts/plyr/props.d.ts

@@ -0,0 +1,68 @@
+import type { FileDownloadInfo } from '../../../utils/network';
+import type { ThumbnailSrc } from '../../ui/thumbnails/thumbnail-loader';
+import type { PlyrLayoutTranslations } from './translations';
+export declare const plyrLayoutProps: PlyrLayoutProps;
+export interface PlyrLayoutProps {
+    /**
+     * Press the video container to toggle play/pause.
+     */
+    clickToPlay: boolean;
+    /**
+     * Double-press the video container to toggle fullscreen.
+     */
+    clickToFullscreen: boolean;
+    /**
+     * The controls to be included in the layout and their order specified by the position in the
+     * array.
+     */
+    controls: PlyrControl[];
+    /**
+     * Whether the default icons should _not_ be loaded. Set this to `true` when providing your own
+     * icons.
+     */
+    customIcons: boolean;
+    /**
+     * Whether the duration should be displayed. This is ignored if `toggleTime` is `true`.
+     */
+    displayDuration: boolean;
+    /**
+     * Sets the download URL and filename for the download button. The download button must be
+     * included in the `controls` prop for this to take effect.
+     */
+    download: FileDownloadInfo;
+    /**
+     * Points on the time slider which should be visually marked for the user.
+     */
+    markers: PlyrMarker[] | null;
+    /**
+     * Display the current time as a countdown rather than an incremental counter.
+     */
+    invertTime: boolean;
+    /**
+     * The thumbnails resource.
+     *
+     * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
+     */
+    thumbnails: ThumbnailSrc;
+    /**
+     * Allow users to press to toggle the inverted time.
+     */
+    toggleTime: boolean;
+    /**
+     * Translation map from english to your desired language for words used throughout the layout.
+     */
+    translations: Partial<PlyrLayoutTranslations> | null;
+    /**
+     * The time, in seconds, to seek when a user hits fast forward or rewind.
+     */
+    seekTime: number;
+    /**
+     * The speed options to display in the UI.
+     */
+    speed: (string | number)[];
+}
+export type PlyrControl = 'airplay' | 'captions' | 'current-time' | 'download' | 'duration' | 'fast-forward' | 'fullscreen' | 'mute' | 'mute+volume' | 'pip' | 'play-large' | 'play' | 'progress' | 'restart' | 'rewind' | 'settings' | 'volume';
+export interface PlyrMarker {
+    time: number;
+    label: string;
+}

package/types/components/layouts/plyr/translations.d.ts

@@ -0,0 +1,6 @@
+import type { ReadSignal } from 'maverick.js';
+export type PlyrLayoutWord = 'Ad' | 'All' | 'AirPlay' | 'Audio' | 'Auto' | 'Buffered' | 'Captions' | 'Current time' | 'Default' | 'Disable captions' | 'Disabled' | 'Download' | 'Duration' | 'Enable captions' | 'Enabled' | 'End' | 'Enter Fullscreen' | 'Exit Fullscreen' | 'Forward' | 'Go back to previous menu' | 'LIVE' | 'Loop' | 'Mute' | 'Normal' | 'Pause' | 'Enter PiP' | 'Exit PiP' | 'Play' | 'Played' | 'Quality' | 'Reset' | 'Restart' | 'Rewind' | 'Seek' | 'Settings' | 'Speed' | 'Start' | 'Unmute' | 'Volume';
+export type PlyrLayoutTranslations = {
+    [word in PlyrLayoutWord]: string;
+};
+export declare function i18n(translations: ReadSignal<Partial<PlyrLayoutTranslations> | null>, word: string): any;

package/types/components/player.d.ts

@@ -0,0 +1,214 @@
+import { Component } from 'maverick.js';
+import type { MediaFullscreenRequestTarget } from '../core/api/media-request-events';
+import type { FindMediaPlayerEvent, MediaPlayerConnectEvent, MediaPlayerEvents } from '../core/api/player-events';
+import { type MediaPlayerProps, type MediaStateAccessors } from '../core/api/player-props';
+import { type MediaPlayerState } from '../core/api/player-state';
+import type { MediaControls } from '../core/controls';
+import { VideoQualityList } from '../core/quality/video-quality';
+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 { TextTrackList } from '../core/tracks/text/text-tracks';
+import { ScreenOrientationController } from '../foundation/orientation/controller';
+import { RequestQueue } from '../foundation/queue/request-queue';
+import type { AnyMediaProvider } from '../providers/types';
+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 declare class MediaPlayer extends Component<MediaPlayerProps, MediaPlayerState, MediaPlayerEvents> implements MediaStateAccessors {
+    #private;
+    static props: MediaPlayerProps;
+    static state: import("maverick.js").State<import("..").MediaState>;
+    readonly canPlayQueue: RequestQueue;
+    readonly remoteControl: MediaRemoteControl;
+    constructor();
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+    protected onDestroy(): void;
+    /**
+     * The current media provider.
+     */
+    get provider(): AnyMediaProvider | null;
+    /**
+     * Media controls settings.
+     */
+    get controls(): MediaControls;
+    set controls(controls: boolean);
+    /**
+     * Controls the screen orientation of the current browser window and dispatches orientation
+     * change events on the player.
+     */
+    readonly orientation: ScreenOrientationController;
+    /**
+     * The title of the current media.
+     */
+    get title(): string;
+    set title(newTitle: string);
+    /**
+     * A list of all `VideoQuality` objects representing the set of available video renditions.
+     *
+     * @see {@link https://vidstack.io/docs/player/api/video-quality}
+     */
+    get qualities(): VideoQualityList;
+    /**
+     * A list of all `AudioTrack` objects representing the set of available audio tracks.
+     *
+     * @see {@link https://vidstack.io/docs/player/api/audio-tracks}
+     */
+    get audioTracks(): AudioTrackList;
+    /**
+     * A list of all `TextTrack` objects representing the set of available text tracks.
+     *
+     * @see {@link https://vidstack.io/docs/player/api/text-tracks}
+     */
+    get textTracks(): TextTrackList;
+    /**
+     * Contains text renderers which are responsible for loading, parsing, and rendering text
+     * tracks.
+     */
+    get textRenderers(): TextRenderers;
+    get duration(): number;
+    set duration(duration: number);
+    get paused(): boolean;
+    set paused(paused: boolean);
+    get muted(): boolean;
+    set muted(muted: boolean);
+    get currentTime(): number;
+    set currentTime(time: number);
+    get volume(): number;
+    set volume(volume: number);
+    get playbackRate(): number;
+    set playbackRate(rate: number);
+    /**
+     * 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}
+     */
+    play(trigger?: Event): Promise<void>;
+    /**
+     * 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}
+     */
+    pause(trigger?: Event): Promise<void>;
+    /**
+     * 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}
+     */
+    enterFullscreen(target?: MediaFullscreenRequestTarget, trigger?: Event): Promise<void>;
+    /**
+     * 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}
+     */
+    exitFullscreen(target?: MediaFullscreenRequestTarget, trigger?: Event): Promise<void>;
+    /**
+     * 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}
+     */
+    enterPictureInPicture(trigger?: Event): Promise<void | PictureInPictureWindow>;
+    /**
+     * 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}
+     */
+    exitPictureInPicture(trigger?: Event): Promise<void>;
+    /**
+     * 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}
+     */
+    seekToLiveEdge(trigger?: Event): void;
+    /**
+     * 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}
+     */
+    startLoading(trigger?: Event): void;
+    /**
+     * 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}
+     */
+    startLoadingPoster(trigger?: Event): void;
+    /**
+     * Request Apple AirPlay picker to open.
+     */
+    requestAirPlay(trigger?: Event): Promise<void>;
+    /**
+     * Request Google Cast device picker to open. The Google Cast framework will be loaded if it
+     * hasn't yet.
+     */
+    requestGoogleCast(trigger?: Event): Promise<void>;
+    /**
+     * Set the audio gain, amplifying volume and enabling a maximum volume above 100%.
+     *
+     * @see {@link https://vidstack.io/docs/player/api/audio-gain}
+     */
+    setAudioGain(gain: number, trigger?: Event): void;
+    destroy(): void;
+}

package/types/components/provider/provider.d.ts

@@ -0,0 +1,24 @@
+import { Component, State } from 'maverick.js';
+import type { MediaProviderLoader } from '../../providers/types';
+export interface MediaProviderProps {
+    /** @internal */
+    loaders: MediaProviderLoader[];
+}
+export interface MediaProviderState {
+    loader: MediaProviderLoader | null;
+}
+/**
+ * Used to render the current provider.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/media/provider}
+ */
+export declare class MediaProvider extends Component<MediaProviderProps, MediaProviderState> {
+    #private;
+    static props: MediaProviderProps;
+    static state: State<MediaProviderState>;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+    load(target: HTMLElement | null | undefined): void;
+    protected onDestroy(): void;
+}

package/types/components/provider/source-select.d.ts

@@ -0,0 +1,10 @@
+import { type ReadSignal, type WriteSignal } from 'maverick.js';
+import type { MediaContext } from '../../core/api/media-context';
+import { type Src } from '../../core/api/src-types';
+import type { MediaProviderLoader } from '../../providers/types';
+export declare class SourceSelection {
+    #private;
+    constructor(domSources: ReadSignal<Src[]>, media: MediaContext, loader: WriteSignal<MediaProviderLoader | null>, customLoaders?: MediaProviderLoader[]);
+    connect(): void;
+}
+export declare function isSameSrc(a: Src | undefined | null, b: Src | undefined | null): boolean;

package/types/components/provider/tracks.d.ts

@@ -0,0 +1,7 @@
+import { type ReadSignal } from 'maverick.js';
+import type { MediaContext } from '../../core/api/media-context';
+import { type TextTrackInit } from '../../core/tracks/text/text-track';
+export declare class Tracks {
+    #private;
+    constructor(domTracks: ReadSignal<TextTrackInit[]>, media: MediaContext);
+}

package/types/components/ui/buttons/airplay-button.d.ts

@@ -0,0 +1,23 @@
+import { Component } from 'maverick.js';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { type ToggleButtonControllerProps } from './toggle-button-controller';
+export interface AirPlayButtonProps extends ToggleButtonControllerProps {
+}
+export interface AirPlayButtonEvents extends Pick<MediaRequestEvents, 'media-airplay-request'> {
+}
+/**
+ * A button for requesting remote playback via Apple AirPlay.
+ *
+ * @attr data-active - Whether AirPlay is connected.
+ * @attr data-supported - Whether AirPlay is available.
+ * @attr data-state - Current connection state.
+ * @see {@link https://www.apple.com/au/airplay}
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/airplay-button}
+ */
+export declare class AirPlayButton extends Component<AirPlayButtonProps, {}, AirPlayButtonEvents> {
+    #private;
+    static props: AirPlayButtonProps;
+    constructor();
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+}

package/types/components/ui/buttons/caption-button.d.ts

@@ -0,0 +1,21 @@
+import { Component } from 'maverick.js';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import { type ToggleButtonControllerProps } from './toggle-button-controller';
+export interface CaptionButtonProps extends ToggleButtonControllerProps {
+}
+export interface CaptionButtonEvents extends Pick<MediaRequestEvents, 'media-text-track-change-request'> {
+}
+/**
+ * A button for toggling the showing state of the captions.
+ *
+ * @attr data-supported - Whether captions/subtitles are available.
+ * @attr data-active - Whether closed captions or subtitles are on.
+ * @docs {@link https://www.vidstack.io/docs/player/components/buttons/caption-button}
+ */
+export declare class CaptionButton extends Component<CaptionButtonProps, {}, CaptionButtonEvents> {
+    #private;
+    static props: CaptionButtonProps;
+    constructor();
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+}