refactor(core): prefix media state exports with Media (#475)

packages/core/src/core/media/state.ts

@@ -1,4 +1,4 @@
-export interface PlaybackState {
+export interface MediaPlaybackState {
   /**
    * Whether playback is paused.
    *
@@ -36,9 +36,9 @@ export interface PlaybackState {
 }
 
 /** Indicates whether a feature can be programmatically controlled on this platform. */
-export type FeatureAvailability = 'available' | 'unavailable' | 'unsupported';
+export type MediaFeatureAvailability = 'available' | 'unavailable' | 'unsupported';
 
-export interface VolumeState {
+export interface MediaVolumeState {
   /**
    * Volume level from 0 (silent) to 1 (max).
    *
@@ -56,7 +56,7 @@ export interface VolumeState {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume
    */
-  volumeAvailability: FeatureAvailability;
+  volumeAvailability: MediaFeatureAvailability;
   /**
    * Set volume (clamped 0-1). Returns the clamped value.
    *
@@ -71,7 +71,7 @@ export interface VolumeState {
   toggleMute(): boolean;
 }
 
-export interface TimeState {
+export interface MediaTimeState {
   /**
    * Current playback position in seconds.
    *
@@ -98,7 +98,7 @@ export interface TimeState {
   seek(time: number): Promise<number>;
 }
 
-export interface SourceState {
+export interface MediaSourceState {
   /**
    * Current media source URL (null if none).
    *
@@ -121,7 +121,7 @@ export interface SourceState {
   loadSource(src: string): string;
 }
 
-export interface BufferState {
+export interface MediaBufferState {
   /**
    * Buffered time ranges as [start, end] tuples.
    *
@@ -136,7 +136,7 @@ export interface BufferState {
   seekable: [number, number][];
 }
 
-export interface FullscreenState {
+export interface MediaFullscreenState {
   /**
    * Whether fullscreen mode is currently active.
    *
@@ -148,7 +148,7 @@ export interface FullscreenState {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled
    */
-  fullscreenAvailability: FeatureAvailability;
+  fullscreenAvailability: MediaFeatureAvailability;
   /**
    * Enter fullscreen mode. Tries container first, falls back to media element.
    *
@@ -163,7 +163,7 @@ export interface FullscreenState {
   exitFullscreen(): Promise<void>;
 }
 
-export interface PictureInPictureState {
+export interface MediaPictureInPictureState {
   /**
    * Whether picture-in-picture mode is currently active.
    *
@@ -175,7 +175,7 @@ export interface PictureInPictureState {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/pictureInPictureEnabled
    */
-  pipAvailability: FeatureAvailability;
+  pipAvailability: MediaFeatureAvailability;
   /**
    * Enter picture-in-picture mode.
    *

packages/core/src/core/ui/fullscreen-button/fullscreen-button-core.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import type { FullscreenState } from '../../media/state';
+import type { MediaFullscreenState } from '../../media/state';
 import { FullscreenButtonCore } from './fullscreen-button-core';
 
-function createMockFullscreen(overrides: Partial<FullscreenState> = {}): FullscreenState {
+function createMockFullscreen(overrides: Partial<MediaFullscreenState> = {}): MediaFullscreenState {
   return {
     fullscreen: false,
     fullscreenAvailability: 'available',

packages/core/src/core/ui/fullscreen-button/fullscreen-button-core.ts

@@ -3,7 +3,7 @@ import { isFunction } from '@videojs/utils/predicate';
 import type { NonNullableObject } from '@videojs/utils/types';
 
 import type { ElementProps } from '../../element';
-import type { FullscreenState } from '../../media/state';
+import type { MediaFullscreenState } from '../../media/state';
 
 export interface FullscreenButtonProps {
   /** Custom label for the button. */
@@ -12,9 +12,9 @@ export interface FullscreenButtonProps {
   disabled?: boolean | undefined;
 }
 
-export interface FullscreenButtonState extends Pick<FullscreenState, 'fullscreen'> {
+export interface FullscreenButtonState extends Pick<MediaFullscreenState, 'fullscreen'> {
   /** Whether fullscreen can be requested on this platform. */
-  availability: FullscreenState['fullscreenAvailability'];
+  availability: MediaFullscreenState['fullscreenAvailability'];
 }
 
 export class FullscreenButtonCore {
@@ -33,7 +33,7 @@ export class FullscreenButtonCore {
     this.#props = defaults(props, FullscreenButtonCore.defaultProps);
   }
 
-  getLabel(state: FullscreenState): string {
+  getLabel(state: MediaFullscreenState): string {
     const buttonState = this.getState(state);
     const { label } = this.#props;
 
@@ -47,21 +47,21 @@ export class FullscreenButtonCore {
     return buttonState.fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
   }
 
-  getAttrs(state: FullscreenState): ElementProps {
+  getAttrs(state: MediaFullscreenState): ElementProps {
     return {
       'aria-label': this.getLabel(state),
       'aria-disabled': this.#props.disabled ? 'true' : undefined,
     };
   }
 
-  getState(state: FullscreenState): FullscreenButtonState {
+  getState(state: MediaFullscreenState): FullscreenButtonState {
     return {
       fullscreen: state.fullscreen,
       availability: state.fullscreenAvailability,
     };
   }
 
-  async toggle(state: FullscreenState): Promise<void> {
+  async toggle(state: MediaFullscreenState): Promise<void> {
     if (this.#props.disabled) return;
     if (state.fullscreenAvailability !== 'available') return;
 

packages/core/src/core/ui/mute-button/mute-button-core.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import type { VolumeState } from '../../media/state';
+import type { MediaVolumeState } from '../../media/state';
 import { MuteButtonCore } from './mute-button-core';
 
-function createMockVolume(overrides: Partial<VolumeState> = {}): VolumeState {
+function createMockVolume(overrides: Partial<MediaVolumeState> = {}): MediaVolumeState {
   return {
     volume: 1,
     muted: false,

packages/core/src/core/ui/mute-button/mute-button-core.ts

@@ -3,7 +3,7 @@ import { isFunction } from '@videojs/utils/predicate';
 import type { NonNullableObject } from '@videojs/utils/types';
 
 import type { ElementProps } from '../../element';
-import type { VolumeState } from '../../media/state';
+import type { MediaVolumeState } from '../../media/state';
 
 export type VolumeLevel = 'off' | 'low' | 'medium' | 'high';
 
@@ -43,7 +43,7 @@ export class MuteButtonCore {
     this.#props = defaults(props, MuteButtonCore.defaultProps);
   }
 
-  getLabel(volume: VolumeState): string {
+  getLabel(volume: MediaVolumeState): string {
     const state = this.getState(volume);
     const { label } = this.#props;
 
@@ -57,21 +57,21 @@ export class MuteButtonCore {
     return state.muted ? 'Unmute' : 'Mute';
   }
 
-  getAttrs(volume: VolumeState): ElementProps {
+  getAttrs(volume: MediaVolumeState): ElementProps {
     return {
       'aria-label': this.getLabel(volume),
       'aria-disabled': this.#props.disabled ? 'true' : undefined,
     };
   }
 
-  getState(volume: VolumeState): MuteButtonState {
+  getState(volume: MediaVolumeState): MuteButtonState {
     return {
       muted: volume.muted,
       volumeLevel: getVolumeLevel(volume),
     };
   }
 
-  toggle(volume: VolumeState): void {
+  toggle(volume: MediaVolumeState): void {
     if (this.#props.disabled) return;
     volume.toggleMute();
   }
@@ -82,7 +82,7 @@ export namespace MuteButtonCore {
   export type State = MuteButtonState;
 }
 
-function getVolumeLevel(volume: VolumeState): VolumeLevel {
+function getVolumeLevel(volume: MediaVolumeState): VolumeLevel {
   if (volume.muted || volume.volume === 0) return 'off';
   if (volume.volume < 0.5) return 'low';
   if (volume.volume < 0.75) return 'medium';

packages/core/src/core/ui/play-button/play-button-core.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import type { PlaybackState } from '../../media/state';
+import type { MediaPlaybackState } from '../../media/state';
 import { PlayButtonCore } from './play-button-core';
 
-function createMockPlayback(overrides: Partial<PlaybackState> = {}): PlaybackState {
+function createMockPlayback(overrides: Partial<MediaPlaybackState> = {}): MediaPlaybackState {
   return {
     paused: true,
     ended: false,

packages/core/src/core/ui/play-button/play-button-core.ts

@@ -3,7 +3,7 @@ import { isFunction } from '@videojs/utils/predicate';
 import type { NonNullableObject } from '@videojs/utils/types';
 
 import type { ElementProps } from '../../element';
-import type { PlaybackState } from '../../media/state';
+import type { MediaPlaybackState } from '../../media/state';
 
 export interface PlayButtonProps {
   /** Custom label for the button. */
@@ -12,7 +12,7 @@ export interface PlayButtonProps {
   disabled?: boolean | undefined;
 }
 
-export interface PlayButtonState extends Pick<PlaybackState, 'paused' | 'ended' | 'started'> {}
+export interface PlayButtonState extends Pick<MediaPlaybackState, 'paused' | 'ended' | 'started'> {}
 
 export class PlayButtonCore {
   static readonly defaultProps: NonNullableObject<PlayButtonProps> = {
@@ -30,7 +30,7 @@ export class PlayButtonCore {
     this.#props = defaults(props, PlayButtonCore.defaultProps);
   }
 
-  getLabel(playback: PlaybackState): string {
+  getLabel(playback: MediaPlaybackState): string {
     const state = this.getState(playback);
     const { label } = this.#props;
 
@@ -45,14 +45,14 @@ export class PlayButtonCore {
     return state.paused ? 'Play' : 'Pause';
   }
 
-  getAttrs(playback: PlaybackState): ElementProps {
+  getAttrs(playback: MediaPlaybackState): ElementProps {
     return {
       'aria-label': this.getLabel(playback),
       'aria-disabled': this.#props.disabled ? 'true' : undefined,
     };
   }
 
-  getState(playback: PlaybackState): PlayButtonState {
+  getState(playback: MediaPlaybackState): PlayButtonState {
     return {
       paused: playback.paused,
       ended: playback.ended,
@@ -60,7 +60,7 @@ export class PlayButtonCore {
     };
   }
 
-  async toggle(playback: PlaybackState): Promise<void> {
+  async toggle(playback: MediaPlaybackState): Promise<void> {
     if (this.#props.disabled) return;
 
     if (playback.paused || playback.ended) {

packages/core/src/core/ui/time/tests/time-core.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import type { TimeState } from '../../../media/state';
+import type { MediaTimeState } from '../../../media/state';
 import { TimeCore } from '../time-core';
 
-function createTimeState(overrides: Partial<TimeState> = {}): TimeState {
+function createTimeState(overrides: Partial<MediaTimeState> = {}): MediaTimeState {
   return {
     currentTime: 90,
     duration: 300,

packages/core/src/core/ui/time/time-core.ts

@@ -3,7 +3,7 @@ import { isFunction } from '@videojs/utils/predicate';
 import { formatTime, formatTimeAsPhrase, secondsToIsoDuration } from '@videojs/utils/time';
 import type { NonNullableObject } from '@videojs/utils/types';
 
-import type { TimeState as MediaTimeState } from '../../media/state';
+import type { MediaTimeState } from '../../media/state';
 
 /** Time display type. */
 export type TimeType = 'current' | 'duration' | 'remaining';

packages/core/src/dom/media/types.ts

@@ -9,7 +9,7 @@ export interface PlayerTarget {
   container: MediaContainer | null;
 }
 
-export type { FeatureAvailability } from '../../core/media/state';
+export type { MediaFeatureAvailability } from '../../core/media/state';
 
 export type PlayerFeature<State> = Slice<PlayerTarget, State>;
 

packages/core/src/dom/store/features/buffer.ts

@@ -1,10 +1,10 @@
 import { listen, serializeTimeRanges } from '@videojs/utils/dom';
 
-import type { BufferState } from '../../../core/media/state';
+import type { MediaBufferState } from '../../../core/media/state';
 import { definePlayerFeature } from '../../feature';
 
 export const bufferFeature = definePlayerFeature({
-  state: (): BufferState => ({
+  state: (): MediaBufferState => ({
     buffered: [],
     seekable: [],
   }),

packages/core/src/dom/store/features/fullscreen.ts

@@ -1,6 +1,6 @@
 import { listen } from '@videojs/utils/dom';
 
-import type { FullscreenState } from '../../../core/media/state';
+import type { MediaFullscreenState } from '../../../core/media/state';
 import { definePlayerFeature } from '../../feature';
 import {
   enterFullscreen,
@@ -12,7 +12,7 @@ import { exitPiP, isPiPActive } from '../../presentation/pip';
 import type { WebKitVideoElement } from '../../presentation/types';
 
 export const fullscreenFeature = definePlayerFeature({
-  state: ({ target }): FullscreenState => ({
+  state: ({ target }): MediaFullscreenState => ({
     fullscreen: false,
     fullscreenAvailability: 'unavailable',
 

packages/core/src/dom/store/features/pip.ts

@@ -1,13 +1,13 @@
 import { listen } from '@videojs/utils/dom';
 
-import type { PictureInPictureState } from '../../../core/media/state';
+import type { MediaPictureInPictureState } from '../../../core/media/state';
 import { definePlayerFeature } from '../../feature';
 import { exitFullscreen, isElementFullscreen } from '../../presentation/fullscreen';
 import { enterPiP, exitPiP, isPiPActive, isPiPSupported } from '../../presentation/pip';
 import type { WebKitVideoElement } from '../../presentation/types';
 
 export const pipFeature = definePlayerFeature({
-  state: ({ target }): PictureInPictureState => ({
+  state: ({ target }): MediaPictureInPictureState => ({
     pip: false,
     pipAvailability: 'unavailable',
 

packages/core/src/dom/store/features/playback.ts

@@ -1,10 +1,10 @@
 import { listen } from '@videojs/utils/dom';
 
-import type { PlaybackState } from '../../../core/media/state';
+import type { MediaPlaybackState } from '../../../core/media/state';
 import { definePlayerFeature } from '../../feature';
 
 export const playbackFeature = definePlayerFeature({
-  state: ({ target }): PlaybackState => ({
+  state: ({ target }): MediaPlaybackState => ({
     paused: true,
     ended: false,
     started: false,

packages/core/src/dom/store/features/source.ts

@@ -1,10 +1,10 @@
 import { listen } from '@videojs/utils/dom';
 
-import type { SourceState } from '../../../core/media/state';
+import type { MediaSourceState } from '../../../core/media/state';
 import { definePlayerFeature } from '../../feature';
 
 export const sourceFeature = definePlayerFeature({
-  state: ({ target, signals }): SourceState => ({
+  state: ({ target, signals }): MediaSourceState => ({
     source: null,
     canPlay: false,
     loadSource(src: string) {

packages/core/src/dom/store/features/time.ts

@@ -1,12 +1,12 @@
 import { listen, onEvent } from '@videojs/utils/dom';
 import { noop } from '@videojs/utils/function';
-import type { TimeState } from '../../../core/media/state';
+import type { MediaTimeState } from '../../../core/media/state';
 import { definePlayerFeature } from '../../feature';
 import { hasMetadata } from '../../media/predicate';
 import { signalKeys } from '../signal-keys';
 
 export const timeFeature = definePlayerFeature({
-  state: ({ target, signals }): TimeState => ({
+  state: ({ target, signals }): MediaTimeState => ({
     currentTime: 0,
     duration: 0,
     seeking: false,

packages/core/src/dom/store/features/volume.ts

@@ -1,10 +1,10 @@
 import { listen } from '@videojs/utils/dom';
 
-import type { FeatureAvailability, VolumeState } from '../../../core/media/state';
+import type { MediaFeatureAvailability, MediaVolumeState } from '../../../core/media/state';
 import { definePlayerFeature } from '../../feature';
 
 export const volumeFeature = definePlayerFeature({
-  state: ({ target }): VolumeState => ({
+  state: ({ target }): MediaVolumeState => ({
     volume: 1,
     muted: false,
     volumeAvailability: 'unavailable',
@@ -35,7 +35,7 @@ export const volumeFeature = definePlayerFeature({
 });
 
 /** Check if volume can be programmatically set (fails on iOS Safari). */
-function canSetVolume(): FeatureAvailability {
+function canSetVolume(): MediaFeatureAvailability {
   const video = document.createElement('video');
   try {
     video.volume = 0.5;