fix(player): tweak remote playback tw variants

packages/vidstack/player/styles/default/layouts/video.css

@@ -330,8 +330,8 @@
 
 :where(.vds-video-layout .vds-load-container .vds-play-button) {
   --size: var(--video-load-button-size, 56px);
-  --color: var(--audio-load-button-color, rgb(0 0 0 / 0.8));
-  --bg-color: var(--audio-load-button-bg, var(--media-brand));
+  --color: var(--video-load-button-color, rgb(0 0 0 / 0.8));
+  --bg-color: var(--video-load-button-bg, var(--media-brand));
 
   --media-button-hover-transform: 0;
   --media-button-border: var(--video-load-button-border, var(--color));

packages/vidstack/player/styles/plyr/theme.css

@@ -161,11 +161,7 @@
 
 .plyr *:focus-visible,
 .plyr *[data-focus] {
-  outline: 2px dashed
-    var(
-      --plyr-focus-visible-color,
-      var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
-    );
+  outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, hsl(198, 100%, 50%)));
   outline-offset: 2px;
 }
 
@@ -417,7 +413,7 @@ a.plyr__control::before {
 .plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']::before {
   background: var(
     --plyr-control-toggle-checked-background,
-    var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
+    var(--plyr-color-main, hsl(198, 100%, 50%))
   );
 }
 
@@ -459,10 +455,7 @@ a.plyr__control::before {
   border: 0;
   border-radius: calc(var(--plyr-range-thumb-height, 13px) * 2);
   contain: layout style;
-  color: var(
-    --plyr-range-fill-background,
-    var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
-  );
+  color: var(--plyr-range-fill-background, var(--plyr-color-main, hsl(198, 100%, 50%)));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -527,11 +520,7 @@ a.plyr__control::before {
 
 .plyr .plyr__slider:focus-visible .plyr__slider__track,
 .plyr .plyr__slider[data-focus] .plyr__slider__track {
-  outline: 2px dashed
-    var(
-      --plyr-focus-visible-color,
-      var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
-    );
+  outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, hsl(198, 100%, 50%)));
   outline-offset: 2px;
 }
 
@@ -669,11 +658,7 @@ a.plyr__control::before {
 }
 
 .plyr__time:focus-visible {
-  outline: 2px dashed
-    var(
-      --plyr-focus-visible-color,
-      var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
-    );
+  outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, hsl(198, 100%, 50%)));
 }
 
 .plyr__time + .plyr__time::before {
@@ -809,7 +794,7 @@ a.plyr__control::before {
 .plyr--audio .plyr__control[role='button'][aria-expanded='true'] {
   background: var(
     --plyr-audio-control-background-hover,
-    var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
+    var(--plyr-color-main, hsl(198, 100%, 50%))
   );
   color: var(--plyr-audio-control-color-hover, #fff);
 }
@@ -895,15 +880,15 @@ a.plyr__control::before {
 .plyr--video .plyr__control[role='button'][aria-expanded='true'] {
   background: var(
     --plyr-video-control-background-hover,
-    var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
+    var(--plyr-color-main, hsl(198, 100%, 50%))
   );
   color: var(--plyr-video-control-color-hover, #fff);
 }
 
 .plyr__control--overlaid {
   background: var(
     --plyr-video-control-background-hover,
-    var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%)))
+    var(--plyr-color-main, hsl(198, 100%, 50%))
   );
   border: 0;
   border-radius: 100%;
@@ -1034,9 +1019,9 @@ a.plyr__control::before {
 }
 
 .plyr__slider__preview__thumbnail {
-  --aspect-ratio: calc(var(--plyr-progress-thumbnail-aspect-ratio, 16 / 9));
-  --min-width: var(--plyr-progress-thumbnail-min-width, 140px);
-  --max-width: var(--plyr-progress-thumbnail-max-width, 180px);
+  --aspect-ratio: calc(var(--plyr-thumbnail-aspect-ratio, 16 / 9));
+  --min-width: var(--plyr-thumbnail-min-width, 140px);
+  --max-width: var(--plyr-thumbnail-max-width, 180px);
   background: hsl(216, 15%, 79%);
   border-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
   overflow: hidden;
@@ -1047,15 +1032,9 @@ a.plyr__control::before {
   contain: strict;
   z-index: 0;
   min-width: var(--min-width);
-  min-height: var(
-    --plyr-progress-thumbnail-min-height,
-    calc(var(--min-width) / var(--aspect-ratio))
-  );
+  min-height: var(--plyr-thumbnail-min-height, calc(var(--min-width) / var(--aspect-ratio)));
   max-width: var(--max-width);
-  max-height: var(
-    --plyr-progress-thumbnail-max-height,
-    calc(var(--max-width) / var(--aspect-ratio))
-  );
+  max-height: var(--plyr-thumbnail-max-height, calc(var(--max-width) / var(--aspect-ratio)));
 }
 
 .plyr__slider__preview__thumbnail img,
@@ -1178,8 +1157,8 @@ a.plyr__control::before {
   border-radius: var(--plyr-live-button-border-radius, 2px);
   color: var(--plyr-live-button-color, #161616);
   font-family: var(--plyr-font-family, sans-serif);
-  font-size: var(--plyr-live-button-font-size, 12px);
-  font-weight: var(--plyr-live-button-font-weight, 600);
+  font-size: var(--plyr-font-size-live-button, 12px);
+  font-weight: var(--plyr-font-weight-live-button, 600);
   letter-spacing: var(--plyr-live-button-letter-spacing, 1.5px);
   padding: var(--plyr-live-button-padding, 1px 4px);
   transition: color 0.3s ease;

packages/vidstack/src/components/ui/buttons/airplay-button.ts

@@ -14,7 +14,7 @@ export interface AirPlayButtonProps extends ToggleButtonControllerProps {}
 export interface AirPlayButtonEvents extends Pick<MediaRequestEvents, 'media-airplay-request'> {}
 
 /**
- * A button for requesting Apple AirPlay.
+ * A button for requesting remote playback via Apple AirPlay.
  *
  * @attr data-active - Whether AirPlay is connected.
  * @attr data-supported - Whether AirPlay is available.

packages/vidstack/src/components/ui/buttons/google-cast-button.ts

@@ -15,7 +15,7 @@ export interface GoogleCastButtonEvents
   extends Pick<MediaRequestEvents, 'media-google-cast-request'> {}
 
 /**
- * A button for requesting Google Cast.
+ * A button for requesting remote playback via Google Cast.
  *
  * @attr data-active - Whether Google Cast is connected.
  * @attr data-supported - Whether Google Cast is available.

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

@@ -110,7 +110,7 @@ export interface MediaAudioTrackChangeEvent extends MediaEvent<AudioTrack | null
  */
 export interface MediaAutoPlayChangeEvent extends MediaEvent<boolean> {}
 
-export interface MediaAutoplayFailEventDetail {
+export interface MediaAutoPlayFailEventDetail {
   muted: boolean;
   error: Error;
 }
@@ -119,17 +119,17 @@ export interface MediaAutoplayFailEventDetail {
  * 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 {
+export interface MediaAutoPlayEventDetail {
   muted: boolean;
 }
 
 /**
  * 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

packages/vidstack/src/core/state/remote-control.ts

@@ -88,7 +88,7 @@ export class MediaRemoteControl {
   }
 
   /**
-   * Dispatch a request to connect AirPlay.
+   * Dispatch a request to connect to AirPlay.
    *
    * @see {@link https://www.apple.com/au/airplay}
    */
@@ -97,7 +97,7 @@ export class MediaRemoteControl {
   }
 
   /**
-   * Dispatch a request to connect Google Cast.
+   * Dispatch a request to connect to Google Cast.
    *
    * @see {@link https://developers.google.com/cast/docs/overview}
    */

packages/vidstack/src/tailwind.test.ts

@@ -6,13 +6,10 @@ import tailwindcss from 'tailwindcss';
 import vidstackPlugin, { type PluginOptions } from '../tailwind.cjs';
 
 const mediaAttributes = [
-  'airplay',
   'autoplay-error',
   'autoplay',
   'buffering',
-  'can-airplay',
   'can-fullscreen',
-  'can-google-cast',
   'can-load-poster',
   'can-load',
   'can-pip',
@@ -23,7 +20,6 @@ const mediaAttributes = [
   'ended',
   'error',
   'fullscreen',
-  'google-cast',
   'ios-controls',
   'live-edge',
   'live',
@@ -47,15 +43,25 @@ const mediaAttributes = [
   'view-unknown',
   // stream types
   'stream-unknown',
-  'stream-on-demand',
+  'stream-demand',
   'stream-live',
   'stream-dvr',
   'stream-ll',
   'stream-ll-dvr',
+  // remote playback
+  'air',
+  'can-air',
+  'can-cast',
+  'cast',
   // remote playback state
   'remote-connected',
   'remote-connecting',
   'remote-disconnected',
+  // remote playback type + state
+  'air-connecting',
+  'air-disconnected',
+  'cast-connecting',
+  'cast-disconnected',
 ];
 
 async function run(content: string, options?: PluginOptions) {
@@ -97,7 +103,7 @@ it('should create media variants', async () => {
     div[data-stream-type=\\"unknown\\"] .media-stream-unknown\\\\:hidden {
         display: none
     }
-    div[data-stream-type=\\"on-demand\\"] .media-stream-on-demand\\\\:hidden {
+    div[data-stream-type=\\"on-demand\\"] .media-stream-demand\\\\:hidden {
         display: none
     }
     div[data-stream-type=\\"live\\"] .media-stream-live\\\\:hidden {
@@ -121,25 +127,40 @@ it('should create media variants', async () => {
     div[data-remote-state=\\"disconnected\\"] .media-remote-disconnected\\\\:hidden {
         display: none
     }
-    div[data-airplay] .media-airplay\\\\:hidden {
+    div[data-airplay] .media-air\\\\:hidden {
         display: none
     }
-    div[data-autoplay-error] .media-autoplay-error\\\\:hidden {
+    div[data-can-airplay] .media-can-air\\\\:hidden {
         display: none
     }
-    div[data-autoplay] .media-autoplay\\\\:hidden {
+    div[data-google-cast] .media-cast\\\\:hidden {
         display: none
     }
-    div[data-buffering] .media-buffering\\\\:hidden {
+    div[data-can-google-cast] .media-can-cast\\\\:hidden {
         display: none
     }
-    div[data-can-airplay] .media-can-airplay\\\\:hidden {
+    div[data-remote-type=\\"airplay\\"][data-remote-state=\\"connecting\\"] .media-air-connecting\\\\:hidden {
         display: none
     }
-    div[data-can-fullscreen] .media-can-fullscreen\\\\:hidden {
+    div[data-remote-type=\\"airplay\\"][data-remote-state=\\"disconnected\\"] .media-air-disconnected\\\\:hidden {
+        display: none
+    }
+    div[data-remote-type=\\"google-cast\\"][data-remote-state=\\"connecting\\"] .media-cast-connecting\\\\:hidden {
+        display: none
+    }
+    div[data-remote-type=\\"google-cast\\"][data-remote-state=\\"disconnected\\"] .media-cast-disconnected\\\\:hidden {
+        display: none
+    }
+    div[data-autoplay-error] .media-autoplay-error\\\\:hidden {
+        display: none
+    }
+    div[data-autoplay] .media-autoplay\\\\:hidden {
+        display: none
+    }
+    div[data-buffering] .media-buffering\\\\:hidden {
         display: none
     }
-    div[data-can-google-cast] .media-can-google-cast\\\\:hidden {
+    div[data-can-fullscreen] .media-can-fullscreen\\\\:hidden {
         display: none
     }
     div[data-can-load-poster] .media-can-load-poster\\\\:hidden {
@@ -172,9 +193,6 @@ it('should create media variants', async () => {
     div[data-fullscreen] .media-fullscreen\\\\:hidden {
         display: none
     }
-    div[data-google-cast] .media-google-cast\\\\:hidden {
-        display: none
-    }
     div[data-ios-controls] .media-ios-controls\\\\:hidden {
         display: none
     }
@@ -242,7 +260,7 @@ it('should create _not_ media variants', async () => {
     div:not([data-stream-type=\\"unknown\\"]) .not-media-stream-unknown\\\\:hidden {
         display: none
     }
-    div:not([data-stream-type=\\"on-demand\\"]) .not-media-stream-on-demand\\\\:hidden {
+    div:not([data-stream-type=\\"on-demand\\"]) .not-media-stream-demand\\\\:hidden {
         display: none
     }
     div:not([data-stream-type=\\"live\\"]) .not-media-stream-live\\\\:hidden {
@@ -266,25 +284,40 @@ it('should create _not_ media variants', async () => {
     div:not([data-remote-state=\\"disconnected\\"]) .not-media-remote-disconnected\\\\:hidden {
         display: none
     }
-    div:not([data-airplay]) .not-media-airplay\\\\:hidden {
+    div:not([data-airplay]) .not-media-air\\\\:hidden {
         display: none
     }
-    div:not([data-autoplay-error]) .not-media-autoplay-error\\\\:hidden {
+    div:not([data-can-airplay]) .not-media-can-air\\\\:hidden {
         display: none
     }
-    div:not([data-autoplay]) .not-media-autoplay\\\\:hidden {
+    div:not([data-google-cast]) .not-media-cast\\\\:hidden {
         display: none
     }
-    div:not([data-buffering]) .not-media-buffering\\\\:hidden {
+    div:not([data-can-google-cast]) .not-media-can-cast\\\\:hidden {
         display: none
     }
-    div:not([data-can-airplay]) .not-media-can-airplay\\\\:hidden {
+    div:not([data-remote-type=\\"airplay\\"][data-remote-state=\\"connecting\\"]) .not-media-air-connecting\\\\:hidden {
         display: none
     }
-    div:not([data-can-fullscreen]) .not-media-can-fullscreen\\\\:hidden {
+    div:not([data-remote-type=\\"airplay\\"][data-remote-state=\\"disconnected\\"]) .not-media-air-disconnected\\\\:hidden {
+        display: none
+    }
+    div:not([data-remote-type=\\"google-cast\\"][data-remote-state=\\"connecting\\"]) .not-media-cast-connecting\\\\:hidden {
+        display: none
+    }
+    div:not([data-remote-type=\\"google-cast\\"][data-remote-state=\\"disconnected\\"]) .not-media-cast-disconnected\\\\:hidden {
+        display: none
+    }
+    div:not([data-autoplay-error]) .not-media-autoplay-error\\\\:hidden {
+        display: none
+    }
+    div:not([data-autoplay]) .not-media-autoplay\\\\:hidden {
+        display: none
+    }
+    div:not([data-buffering]) .not-media-buffering\\\\:hidden {
         display: none
     }
-    div:not([data-can-google-cast]) .not-media-can-google-cast\\\\:hidden {
+    div:not([data-can-fullscreen]) .not-media-can-fullscreen\\\\:hidden {
         display: none
     }
     div:not([data-can-load-poster]) .not-media-can-load-poster\\\\:hidden {
@@ -317,9 +350,6 @@ it('should create _not_ media variants', async () => {
     div:not([data-fullscreen]) .not-media-fullscreen\\\\:hidden {
         display: none
     }
-    div:not([data-google-cast]) .not-media-google-cast\\\\:hidden {
-        display: none
-    }
     div:not([data-ios-controls]) .not-media-ios-controls\\\\:hidden {
         display: none
     }