fix(player): rename autoplay prop to autoPlay

packages/vidstack/src/components/player.ts

@@ -323,12 +323,13 @@ export class MediaPlayer
         return !!error();
       },
       'data-autoplay-error': function (this: MediaPlayer) {
-        const { autoplayError } = this.$state;
-        return !!autoplayError();
+        const { autoPlayError } = this.$state;
+        return !!autoPlayError();
       },
     };
 
     const alias: Partial<Record<keyof MediaPlayerState, string>> = {
+      autoPlay: 'autoplay',
       canAirPlay: 'can-airplay',
       canPictureInPicture: 'can-pip',
       pictureInPicture: 'pip',
@@ -351,11 +352,6 @@ export class MediaPlayer
     this.setAttributes($attrs);
   }
 
-  private _isRemotePlaybackTypeConnected(type: RemotePlaybackType) {
-    const { remotePlaybackType, remotePlaybackState } = this.$state;
-    return remotePlaybackType() === type && remotePlaybackState() === 'connected';
-  }
-
   private _onFindPlayer(event: FindMediaPlayerEvent) {
     event.detail(this);
   }

packages/vidstack/src/core/api/media-attrs.ts

@@ -3,7 +3,7 @@ import type { MediaState } from './player-state';
 export const MEDIA_ATTRIBUTES = Symbol(__DEV__ ? 'MEDIA_ATTRIBUTES' : 0);
 
 export const mediaAttributes: (keyof MediaState)[] = [
-  'autoplay',
+  'autoPlay',
   'canAirPlay',
   'canFullscreen',
   'canGoogleCast',

packages/vidstack/src/core/api/media-events.ts

@@ -18,8 +18,8 @@ import type {
 export interface MediaEvents {
   'audio-tracks-change': MediaAudioTracksChangeEvent;
   'audio-track-change': MediaAudioTrackChangeEvent;
-  'autoplay-change': MediaAutoplayChangeEvent;
-  'autoplay-fail': MediaAutoplayFailEvent;
+  'auto-play-change': MediaAutoPlayChangeEvent;
+  'auto-play-fail': MediaAutoPlayFailEvent;
   'can-load': MediaCanLoadEvent;
   'can-load-poster': MediaCanLoadPosterEvent;
   'can-play-through': MediaCanPlayThroughEvent;
@@ -58,7 +58,7 @@ export interface MediaEvents {
   'view-type-change': MediaViewTypeChangeEvent;
   'volume-change': MediaVolumeChangeEvent;
   abort: MediaAbortEvent;
-  autoplay: MediaAutoplayEvent;
+  'auto-play': MediaAutoPlayEvent;
   destroy: MediaDestroyEvent;
   emptied: MediaEmptiedEvent;
   end: MediaEndEvent;
@@ -104,32 +104,32 @@ export interface MediaAudioTracksChangeEvent extends MediaEvent<AudioTrack[]> {}
 export interface MediaAudioTrackChangeEvent extends MediaEvent<AudioTrack | null> {}
 
 /**
- * Fired when the `autoplay` property has changed value.
+ * Fired when the `autoPlay` property has changed value.
  *
- * @detail isAutoplay
+ * @detail shouldAutoPlay
  */
-export interface MediaAutoplayChangeEvent extends MediaEvent<boolean> {}
+export interface MediaAutoPlayChangeEvent extends MediaEvent<boolean> {}
 
 export interface MediaAutoplayFailEventDetail {
   muted: boolean;
   error: Error;
 }
 
 /**
- * Fired when an autoplay attempt has failed. The event detail contains the error that
- * had occurred on the last autoplay attempt which caused it to fail.
+ * Fired when an auto-play attempt has failed. The event detail contains the error that
+ * had occurred on the last auto-play attempt which caused it to fail.
  */
-export interface MediaAutoplayFailEvent extends MediaEvent<MediaAutoplayFailEventDetail> {}
+export interface MediaAutoPlayFailEvent extends MediaEvent<MediaAutoplayFailEventDetail> {}
 
 export interface MediaAutoplayEventDetail {
   muted: boolean;
 }
 
 /**
- * Fired when an autoplay attempt has successfully been made (ie: media playback has automatically
+ * Fired when an auto-play attempt has successfully been made (ie: media playback has automatically
  * started). The event detail whether media is `muted` before any attempts are made.
  */
-export interface MediaAutoplayEvent extends MediaEvent<MediaAutoplayEventDetail> {}
+export interface MediaAutoPlayEvent extends MediaEvent<MediaAutoplayEventDetail> {}
 
 /**
  * Fired when the player can begin loading the current provider and media. This depends on the
@@ -337,12 +337,12 @@ export interface MediaPauseEvent extends MediaEvent<void> {}
 
 /**
  * Fired when the `paused` property is changed from `true` to `false`, as a result of the `play()`
- * method, or the `autoplay` attribute.
+ * method, or the `autoPlay` property.
  *
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event}
  */
 export interface MediaPlayEvent extends MediaEvent<void> {
-  autoplay?: boolean;
+  autoPlay?: boolean;
 }
 
 /**
@@ -351,7 +351,7 @@ export interface MediaPlayEvent extends MediaEvent<void> {
  * @detail error
  */
 export interface MediaPlayFailEvent extends MediaEvent<Error> {
-  autoplay?: boolean;
+  autoPlay?: boolean;
 }
 
 /**

packages/vidstack/src/core/api/player-props.ts

@@ -10,6 +10,7 @@ import type { MediaLoadingStrategy, MediaPosterLoadingStrategy, MediaResource }
 export const mediaPlayerProps: MediaPlayerProps = {
   artist: '',
   autoplay: false,
+  autoPlay: false,
   clipStartTime: 0,
   clipEndTime: 0,
   controls: false,
@@ -58,7 +59,7 @@ export interface MediaPlayerProps
   extends Pick<
     MediaState,
     | 'artist'
-    | 'autoplay'
+    | 'autoPlay'
     | 'clipStartTime'
     | 'clipEndTime'
     | 'controls'
@@ -78,9 +79,9 @@ export interface MediaPlayerProps
     | 'liveEdgeTolerance'
     | 'minLiveDVRWindow'
   > {
-  /**
-   * @deprecated - Use `crossOrigin`
-   */
+  /** @deprecated - Use `autoPlay` */
+  autoplay: boolean;
+  /** @deprecated - Use `crossOrigin` */
   crossorigin: string | true | null;
   /**
    * Defines how the media element handles cross-origin requests, thereby enabling the

packages/vidstack/src/core/api/player-state.ts

@@ -24,8 +24,8 @@ export const mediaState = new State<MediaState>({
   artist: '',
   audioTrack: null,
   audioTracks: [],
-  autoplay: false,
-  autoplayError: null,
+  autoPlay: false,
+  autoPlayError: null,
   buffered: new TimeRange(),
   canLoad: false,
   canLoadPoster: false,
@@ -193,7 +193,7 @@ export const mediaState = new State<MediaState>({
 const RESET_ON_SRC_CHANGE = new Set<keyof MediaState>([
   'audioTrack',
   'audioTracks',
-  'autoplayError',
+  'autoPlayError',
   'autoPlaying',
   'autoQuality',
   'buffered',
@@ -220,7 +220,7 @@ const RESET_ON_SRC_CHANGE = new Set<keyof MediaState>([
 ]);
 
 /**
- * Resets all media state and leaves general player state intact (i.e., `autoplay`, `volume`, etc.).
+ * Resets all media state and leaves general player state intact.
  */
 export function softResetMediaState($media: MediaStore) {
   mediaState.reset($media, (prop) => RESET_ON_SRC_CHANGE.has(prop));
@@ -237,23 +237,23 @@ export interface MediaState {
    * without interruption.
    *
    * Sites which automatically play audio (or videos with an audio track) can be an unpleasant
-   * experience for users, so it should be avoided when possible. If you must offer autoplay
+   * experience for users, so it should be avoided when possible. If you must offer auto-play
    * functionality, you should make it opt-in (requiring a user to specifically enable it).
    *
-   * However, autoplay can be useful when creating media elements whose source will be set at a
+   * However, auto-play can be useful when creating media elements whose source will be set at a
    * later time, under user control.
    *
    * @defaultValue false
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay}
    */
-  autoplay: boolean;
+  autoPlay: boolean;
   /**
-   * Set to an error when autoplay has failed to begin playback. This can be used to determine
-   * when to show a recovery UI in the event autoplay fails.
+   * Set to an error when auto-play has failed to begin playback. This can be used to determine
+   * when to show a recovery UI in the event auto-play fails.
    *
    * @defaultValue null
    */
-  autoplayError: { muted: boolean; error: Error } | null;
+  autoPlayError: { muted: boolean; error: Error } | null;
   /**
    * Returns a `TimeRanges` object that indicates the ranges of the media source that the
    * browser has buffered (if any) at the moment the buffered property is accessed. This is usually

packages/vidstack/src/core/controls.ts

@@ -87,7 +87,7 @@ export class MediaControls extends MediaPlayerController {
     this.listen('play', onPlay);
 
     this.listen('pause', onPause);
-    this.listen('autoplay-fail', onPause);
+    this.listen('auto-play-fail', onPause);
   }
 
   private _watchMouse() {
@@ -109,8 +109,8 @@ export class MediaControls extends MediaPlayerController {
   }
 
   private _watchPaused() {
-    const { paused, started, autoplayError } = this.$state;
-    if (paused() || (autoplayError() && !started())) return;
+    const { paused, started, autoPlayError } = this.$state;
+    if (paused() || (autoPlayError() && !started())) return;
 
     const onStopIdle = this._onStopIdle.bind(this);
 

packages/vidstack/src/core/state/media-player-delegate.ts

@@ -40,7 +40,7 @@ export class MediaPlayerDelegate {
     return untrack(async () => {
       const { logger } = this._media,
         {
-          autoplay,
+          autoPlay,
           canPlay,
           started,
           duration,
@@ -78,7 +78,7 @@ export class MediaPlayerDelegate {
       const remotePlaybackTime = remotePlaybackInfo()?.savedState?.currentTime,
         wasRemotePlaying = remotePlaybackInfo()?.savedState?.paused === false,
         startTime = remotePlaybackTime ?? (await storage?.getTime()) ?? clipStartTime(),
-        shouldAutoPlay = wasRemotePlaying || autoplay();
+        shouldAutoPlay = wasRemotePlaying || autoPlay();
 
       if (provider) {
         provider.setVolume((await storage?.getVolume()) ?? volume());
@@ -103,7 +103,7 @@ export class MediaPlayerDelegate {
 
     autoPlaying.set(true);
 
-    const attemptEvent = new DOMEvent<void>('autoplay-attempt', { trigger });
+    const attemptEvent = new DOMEvent<void>('auto-play-attempt', { trigger });
 
     try {
       await player.play(attemptEvent);
@@ -114,7 +114,7 @@ export class MediaPlayerDelegate {
           : '';
 
         this._media.logger
-          ?.errorGroup('[vidstack] autoplay request failed')
+          ?.errorGroup('[vidstack] auto-play request failed')
           .labelledLog(
             'Message',
             `Autoplay was requested but failed most likely due to browser autoplay policies.${muteMsg}`,

packages/vidstack/src/core/state/media-request-manager.ts

@@ -143,7 +143,7 @@ export class MediaRequestManager extends MediaPlayerController implements MediaR
         trigger,
       });
 
-      errorEvent.autoplay = autoPlaying();
+      errorEvent.autoPlay = autoPlaying();
 
       this._stateMgr._handle(errorEvent);
       throw error;

packages/vidstack/src/core/state/media-state-manager.ts

@@ -241,12 +241,12 @@ export class MediaStateManager extends MediaPlayerController {
     }
   }
 
-  ['autoplay'](event: ME.MediaAutoplayEvent) {
-    this.$state.autoplayError.set(null);
+  ['auto-play'](event: ME.MediaAutoPlayEvent) {
+    this.$state.autoPlayError.set(null);
   }
 
-  ['autoplay-fail'](event: ME.MediaAutoplayFailEvent) {
-    this.$state.autoplayError.set(event.detail);
+  ['auto-play-fail'](event: ME.MediaAutoPlayFailEvent) {
+    this.$state.autoPlayError.set(event.detail);
     this._resetTracking();
   }
 
@@ -434,7 +434,7 @@ export class MediaStateManager extends MediaPlayerController {
   }
 
   ['play'](event: ME.MediaPlayEvent) {
-    const { paused, autoplayError, ended, autoPlaying, playsInline, pointer, muted, viewType } =
+    const { paused, autoPlayError, ended, autoPlaying, playsInline, pointer, muted, viewType } =
       this.$state;
 
     this._resetPlaybackIfNeeded();
@@ -444,7 +444,7 @@ export class MediaStateManager extends MediaPlayerController {
       return;
     }
 
-    event.autoplay = autoPlaying();
+    event.autoPlay = autoPlaying();
 
     const waitingEvent = this._trackedEvents.get('waiting');
     if (waitingEvent) event.triggers.add(waitingEvent);
@@ -453,11 +453,11 @@ export class MediaStateManager extends MediaPlayerController {
     this._trackedEvents.set('play', event);
 
     paused.set(false);
-    autoplayError.set(null);
+    autoPlayError.set(null);
 
-    if (event.autoplay) {
+    if (event.autoPlay) {
       this._handle(
-        this.createEvent('autoplay', {
+        this.createEvent('auto-play', {
           detail: { muted: muted() },
           trigger: event,
         }),
@@ -519,9 +519,9 @@ export class MediaStateManager extends MediaPlayerController {
     this._resetTracking();
     this._trackedEvents.set('play-fail', event);
 
-    if (event.autoplay) {
+    if (event.autoPlay) {
       this._handle(
-        this.createEvent('autoplay-fail', {
+        this.createEvent('auto-play-fail', {
           detail: {
             muted: muted(),
             error: event.detail,

packages/vidstack/src/core/state/media-state-sync.ts

@@ -77,9 +77,10 @@ export class MediaStateSync extends MediaPlayerController {
   }
 
   private _watchAutoplay() {
-    const autoplay = this.$props.autoplay();
-    this.$state.autoplay.set(autoplay);
-    this.dispatch('autoplay-change', { detail: autoplay });
+    // 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 });
   }
 
   private _watchLoop() {

packages/vidstack/src/core/state/tracked-media-events.ts

@@ -1,8 +1,8 @@
 import type { MediaEvents } from '../api/media-events';
 
 export const TRACKED_EVENT = new Set<keyof MediaEvents>([
-  'autoplay',
-  'autoplay-fail',
+  'auto-play',
+  'auto-play-fail',
   'can-load',
   'sources-change',
   'source-change',

packages/vidstack/src/elements/define/player-element.ts

@@ -18,6 +18,7 @@ export class MediaPlayerElement extends Host(HTMLElement, MediaPlayer) {
   static tagName = 'media-player';
 
   static override attrs: Attributes<MediaPlayerProps> = {
+    autoPlay: 'autoplay',
     crossOrigin: 'crossorigin',
     playsInline: 'playsinline',
     preferNativeHLS: 'prefer-native-hls',