@videojs/html 10.0.1 → 10.2.0

package/dist/default/icons/dist/html/scaffold/pip-exit.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/pip-exit.js
+const pipExitIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path stroke=\"currentColor\" d=\"M.5 2.5h17v13H.5z\"/><path fill=\"currentColor\" d=\"M9 9h9v7H9z\"/></svg>";
+//#endregion
+export { pipExitIcon };

package/dist/default/icons/dist/html/scaffold/play.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/play.js
+const playIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path stroke=\"currentColor\" d=\"m4.5 2.5 11 6.5-11 6.5z\"/></svg>";
+//#endregion
+export { playIcon };

package/dist/default/icons/dist/html/scaffold/quality.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/quality.js
+const qualityIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><g stroke=\"currentColor\"><path d=\"M.5 2.5h17v13H.5z\"/><path d=\"M4.5 6v6m0-3h4m0-3v6m2-.5v-5H12c2.6 0 2.6 5 0 5z\"/></g></svg>";
+//#endregion
+export { qualityIcon };

package/dist/default/icons/dist/html/scaffold/restart.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/restart.js
+const restartIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><g stroke=\"currentColor\"><path d=\"M2.5 9a6.5 6.5 0 1 0 1.904-4.596L2.5 6.5\"/><path d=\"M2.5 2.5v4h4m1 0 4 2.5-4 2.5z\"/></g></svg>";
+//#endregion
+export { restartIcon };

package/dist/default/icons/dist/html/scaffold/seek.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/seek.js
+const seekIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><g stroke=\"currentColor\"><path d=\"M4.404 13.596a6.5 6.5 0 0 1 0-9.192 6.5 6.5 0 0 1 9.192 0L15.5 6.5\"/><path d=\"M15.5 2.5v4h-4\"/></g></svg>";
+//#endregion
+export { seekIcon };

package/dist/default/icons/dist/html/scaffold/speech.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/speech.js
+const speechIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><g stroke=\"currentColor\"><circle cx=\"5.5\" cy=\"8\" r=\"2\"/><path d=\"M1.5 15.5a4 4 0 0 1 8 0\"/><circle cx=\"13.5\" cy=\"5\" r=\"3\"/><path d=\"m11 8-1.5 2.5\"/></g></svg>";
+//#endregion
+export { speechIcon };

package/dist/default/icons/dist/html/scaffold/speed.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/speed.js
+const speedIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path stroke=\"currentColor\" d=\"M4.404 14.096a6.5 6.5 0 0 1 0-9.192 6.5 6.5 0 0 1 9.192 0 6.5 6.5 0 0 1 0 9.192M9 9.5 4.5 5\"/><circle cx=\"9\" cy=\"9.5\" r=\"1.5\" fill=\"currentColor\"/></svg>";
+//#endregion
+export { speedIcon };

package/dist/default/icons/dist/html/scaffold/spinner.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/spinner.js
+const spinnerIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><style>@keyframes media-scaffold-spinner-spin{to{transform:rotate(360deg)}}</style><path stroke=\"currentColor\" d=\"M9 2.5A6.5 6.5 0 1 1 2.5 9\" style=\"transform-box:view-box;transform-origin:center;animation:var(--media-spinner-animation, media-scaffold-spinner-spin 0.8s linear infinite)\"/></svg>";
+//#endregion
+export { spinnerIcon };

package/dist/default/icons/dist/html/scaffold/switches.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/switches.js
+const switchesIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><rect width=\"13\" height=\"6\" x=\"2.5\" y=\"1.5\" stroke=\"currentColor\" rx=\"3\"/><circle cx=\"5.5\" cy=\"4.5\" r=\"1\" stroke=\"currentColor\"/><path fill=\"currentColor\" d=\"M12.5 10a3.5 3.5 0 1 1 0 7h-7a3.5 3.5 0 1 1 0-7zm0 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3\"/></svg>";
+//#endregion
+export { switchesIcon };

package/dist/default/icons/dist/html/scaffold/volume-high.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/volume-high.js
+const volumeHighIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><g stroke=\"currentColor\"><path d=\"M1.5 6.5h3l5-4v13l-5-4h-3zm10.928.202a2.997 2.997 0 0 1 0 4.596\"/><path d=\"M13.855 4.026a5.998 5.998 0 0 1 0 9.948\"/></g></svg>";
+//#endregion
+export { volumeHighIcon };

package/dist/default/icons/dist/html/scaffold/volume-low.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/volume-low.js
+const volumeLowIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path stroke=\"currentColor\" d=\"M2.5 6.5h3l5-4v13l-5-4h-3zm10.928.202a2.997 2.997 0 0 1 0 4.596\"/></svg>";
+//#endregion
+export { volumeLowIcon };

package/dist/default/icons/dist/html/scaffold/volume-off.js

@@ -0,0 +1,4 @@
+//#region ../icons/dist/html/scaffold/volume-off.js
+const volumeOffIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"none\" aria-hidden=\"true\" viewBox=\"0 0 18 18\"><path stroke=\"currentColor\" d=\"M1.5 6.5h3l5-4v13l-5-4h-3zm11 0 4 4m0-4-4 4\"/></svg>";
+//#endregion
+export { volumeOffIcon };

package/dist/default/icons/element/scaffold/index.js

@@ -0,0 +1 @@
+import "../../dist/element/scaffold/index.js";

package/dist/default/icons/scaffold/index.js

@@ -0,0 +1,26 @@
+import { airPlayEnterIcon } from "../dist/html/scaffold/airplay-enter.js";
+import { airPlayExitIcon } from "../dist/html/scaffold/airplay-exit.js";
+import { captionsOffIcon } from "../dist/html/scaffold/captions-off.js";
+import { captionsOnIcon } from "../dist/html/scaffold/captions-on.js";
+import { castEnterIcon } from "../dist/html/scaffold/cast-enter.js";
+import { castExitIcon } from "../dist/html/scaffold/cast-exit.js";
+import { checkIcon } from "../dist/html/scaffold/check.js";
+import { chevronIcon } from "../dist/html/scaffold/chevron.js";
+import { fullscreenEnterIcon } from "../dist/html/scaffold/fullscreen-enter.js";
+import { fullscreenExitIcon } from "../dist/html/scaffold/fullscreen-exit.js";
+import { gearIcon } from "../dist/html/scaffold/gear.js";
+import { pauseIcon } from "../dist/html/scaffold/pause.js";
+import { pipEnterIcon } from "../dist/html/scaffold/pip-enter.js";
+import { pipExitIcon } from "../dist/html/scaffold/pip-exit.js";
+import { playIcon } from "../dist/html/scaffold/play.js";
+import { qualityIcon } from "../dist/html/scaffold/quality.js";
+import { restartIcon } from "../dist/html/scaffold/restart.js";
+import { seekIcon } from "../dist/html/scaffold/seek.js";
+import { speechIcon } from "../dist/html/scaffold/speech.js";
+import { speedIcon } from "../dist/html/scaffold/speed.js";
+import { spinnerIcon } from "../dist/html/scaffold/spinner.js";
+import { switchesIcon } from "../dist/html/scaffold/switches.js";
+import { volumeHighIcon } from "../dist/html/scaffold/volume-high.js";
+import { volumeLowIcon } from "../dist/html/scaffold/volume-low.js";
+import { volumeOffIcon } from "../dist/html/scaffold/volume-off.js";
+export { airPlayEnterIcon, airPlayExitIcon, captionsOffIcon, captionsOnIcon, castEnterIcon, castExitIcon, checkIcon, chevronIcon, fullscreenEnterIcon, fullscreenExitIcon, gearIcon, pauseIcon, pipEnterIcon, pipExitIcon, playIcon, qualityIcon, restartIcon, seekIcon, speechIcon, speedIcon, spinnerIcon, switchesIcon, volumeHighIcon, volumeLowIcon, volumeOffIcon };

package/dist/default/internal/skins/compat-audio/register.js

@@ -1,9 +1,5 @@
 import "../../../define/i18n.js";
 import { registerIcons } from "../../../icons/element/register/index.js";
-import { airPlayEnterIcon } from "../../../icons/dist/html/compat/airplay-enter.js";
-import { airPlayExitIcon } from "../../../icons/dist/html/compat/airplay-exit.js";
-import { captionsOffIcon } from "../../../icons/dist/html/compat/captions-off.js";
-import { captionsOnIcon } from "../../../icons/dist/html/compat/captions-on.js";
 import { checkIcon } from "../../../icons/dist/html/compat/check.js";
 import { pauseIcon } from "../../../icons/dist/html/compat/pause.js";
 import { playIcon } from "../../../icons/dist/html/compat/play.js";
@@ -12,6 +8,7 @@ import { seekIcon } from "../../../icons/dist/html/compat/seek.js";
 import { volumeHighIcon } from "../../../icons/dist/html/compat/volume-high.js";
 import { volumeOffIcon } from "../../../icons/dist/html/compat/volume-off.js";
 import "../../../define/ui/container.js";
+import "../../../define/ui/buffering-indicator.js";
 import "../../../define/ui/error-dialog.js";
 import "../../../define/ui/dialog-backdrop.js";
 import "../../../define/ui/dialog-popup.js";
@@ -22,7 +19,6 @@ import "../../../define/ui/controls.js";
 import "../../../define/ui/controls-content.js";
 import "../../../define/ui/tooltip-group.js";
 import "../../../define/ui/controls-group.js";
-import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/tooltip.js";
 import "../../../define/ui/tooltip-label.js";
 import "../../../define/ui/tooltip-shortcut.js";
@@ -44,7 +40,6 @@ import "../../../define/ui/volume-slider.js";
 import "../../../define/ui/time-group.js";
 import "../../../define/ui/time.js";
 import "../../../define/ui/time-separator.js";
-import "../../../define/ui/captions-button.js";
 import "../../../define/ui/menu.js";
 import "../../../define/ui/menu-content.js";
 import "../../../define/ui/menu-radio-item.js";
@@ -55,10 +50,6 @@ import "../../../define/ui/status-announcer.js";
 import "../../../define/ui/playback-rate-button.js";
 //#region src/internal/skins/compat-audio/register.ts
 registerIcons("compat", {
-	"airplay-enter": airPlayEnterIcon,
-	"airplay-exit": airPlayExitIcon,
-	"captions-off": captionsOffIcon,
-	"captions-on": captionsOnIcon,
 	check: checkIcon,
 	pause: pauseIcon,
 	play: playIcon,

package/dist/default/internal/skins/compat-audio/skin.css

@@ -263,6 +263,43 @@
     overflow: hidden;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button {
+    align-items: center;
+    gap: calc(var(--media-spacing) * 1.5);
+    font-size: calc(var(--media-spacing) * 2.75);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    grid-auto-flow: column;
+    font-weight: 600;
+    width: auto !important;
+    padding-inline: calc(var(--media-spacing) * 2.5) !important;
+  }
+
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
+    width: calc(var(--media-spacing) * 2);
+    height: calc(var(--media-spacing) * 2);
+    opacity: .4;
+    transition-property: background-color, opacity;
+    transition-duration: .15s;
+    transition-duration: var(--media-duration);
+    background-color: currentColor;
+    border-radius: 9999px;
+    flex-shrink: 0;
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: inline-block;
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
+    opacity: 1;
+    background-color: #f43f5e;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
+      transition-property: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-popup {
     color: inherit;
     border-style: solid;
@@ -409,66 +446,6 @@
     }
   }
 
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) :where(.media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-enter-icon, :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-airplay-button-exit-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon {
-    width: calc(var(--media-spacing) * 4.5);
-    height: calc(var(--media-spacing) * 4.5);
-    grid-row-start: 1;
-    grid-column-start: 1;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-captions-button-on-icon {
-    display: none;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-captions-button)[data-active] .media-captions-button-on-icon {
-    display: block;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button {
-    align-items: center;
-    gap: calc(var(--media-spacing) * 1.5);
-    font-size: calc(var(--media-spacing) * 2.75);
-    letter-spacing: .05em;
-    text-transform: uppercase;
-    grid-auto-flow: column;
-    font-weight: 600;
-    width: auto !important;
-    padding-inline: calc(var(--media-spacing) * 2.5) !important;
-  }
-
-  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
-    width: calc(var(--media-spacing) * 2);
-    height: calc(var(--media-spacing) * 2);
-    opacity: .4;
-    transition-property: background-color, opacity;
-    transition-duration: .15s;
-    transition-duration: var(--media-duration);
-    background-color: currentColor;
-    border-radius: 9999px;
-    flex-shrink: 0;
-    transition-timing-function: cubic-bezier(0, 0, .2, 1);
-    display: inline-block;
-  }
-
-  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button)[data-live-edge] .media-live-button-dot {
-    opacity: 1;
-    background-color: #f43f5e;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-live-button-dot {
-      transition-property: none;
-    }
-  }
-
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon-base {
     width: calc(var(--media-spacing) * 4.5);
     height: calc(var(--media-spacing) * 4.5);
@@ -781,6 +758,13 @@
     display: block;
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-button-icon {
+    width: calc(var(--media-spacing) * 4.5);
+    height: calc(var(--media-spacing) * 4.5);
+    grid-row-start: 1;
+    grid-column-start: 1;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .media-mute-button-high-icon {
     display: none;
   }
@@ -903,6 +887,24 @@
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-backdrop {
+    pointer-events: none;
+    z-index: 10;
+    background-image: linear-gradient(to top, #000000b3, #0003, #00000080);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-buffering):not([data-visible]) .video-controls-backdrop:not([data-visible]) {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-backdrop {
+      background-image: none;
+    }
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-bottom {
     pointer-events: auto;
     inset-inline: calc(var(--media-spacing) * 2);
@@ -949,6 +951,10 @@
     }
   }
 
+  :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-buffering {
+    display: contents;
+  }
+
   :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-center {
     pointer-events: auto;
     align-items: center;
@@ -970,6 +976,10 @@
     transition-duration: var(--media-duration);
   }
 
+  :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-buffering)[data-visible] .video-controls-center {
+    display: none !important;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     :where(:where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-content):not([data-visible]) .video-controls-center {
       transform: translate(-50%, -50%) scale(.9);
@@ -1145,6 +1155,22 @@
     }
   }
 
+  @container media-root (width < 42rem) {
+    :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-top {
+      inset-inline-end: calc(var(--media-spacing) * 2);
+      top: calc(var(--media-spacing) * 2);
+    }
+
+    @media (forced-colors: active) {
+      :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-top {
+        padding-inline: calc(var(--media-spacing) * 2);
+        padding-block: calc(var(--media-spacing) * 2);
+        inset-inline-end: 0;
+        top: 0;
+      }
+    }
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="compat"][data-preset="audio"]) .video-controls-video-bottom {
       padding-inline: calc(var(--media-spacing) * 2);

package/dist/default/internal/skins/compat-audio/template.js

@@ -17,6 +17,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-dialog-popup>
 </media-error-dialog>
 <media-controls visibility="always">
+<media-buffering-indicator class="video-controls-buffering">
 <media-controls-content class="video-controls-content audio-controls-content">
 <media-tooltip-group>
 <div class="video-controls-bottom audio-controls-bottom">
@@ -53,7 +54,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </div>
 <media-controls-group class="video-controls-row">
 <media-controls-group class="video-controls-group video-controls-start">
-<media-play-button class="media-button media-play-button" id="vjs-EQSPIaSE-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-0wiMTNy2-0-trigger">
 <media-icon family="compat" name="restart" class="media-button-icon-base media-play-button-restart-icon">
 </media-icon>
 <media-icon family="compat" name="play" class="media-button-icon-base media-play-button-play-icon">
@@ -61,46 +62,58 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="compat" name="pause" class="media-button-icon-base media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-EQSPIaSE-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-0wiMTNy2-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-seek-button seconds="-10" class="media-button media-seek-button-audio" id="vjs-EQSPIaSE-0-2-trigger">
+<media-seek-button seconds="-10" class="media-button media-seek-button-audio" id="vjs-0wiMTNy2-0-2-trigger">
 <div class="media-seek-button-content">
 <media-icon family="compat" name="seek" class="media-button-icon media-seek-button-backward-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-backward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-EQSPIaSE-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-0wiMTNy2-0-2-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-seek-button seconds="10" class="media-button media-seek-button-audio" id="vjs-EQSPIaSE-0-3-trigger">
+<media-seek-button seconds="10" class="media-button media-seek-button-audio" id="vjs-0wiMTNy2-0-3-trigger">
 <div class="media-seek-button-content">
 <media-icon family="compat" name="seek" class="media-button-icon">
 </media-icon>
 <span class="media-seek-button-label media-seek-button-forward-label">10</span>
 </div>
 </media-seek-button>
-<media-tooltip trigger="vjs-EQSPIaSE-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-0wiMTNy2-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-playback-rate-button commandfor="vjs-rG6xeIrV-0-popup" class="media-button media-playback-rate-button" id="vjs-EQSPIaSE-0-4-trigger">
+<media-time-group class="media-time-group">
+<media-time class="media-time-toggle" type="current" toggle>
+</media-time>
+<media-time class="media-time-current-value" type="current">
+</media-time>
+<media-time-separator class="media-time-separator">
+</media-time-separator>
+<media-time class="media-time-duration-value" type="duration">
+</media-time>
+</media-time-group>
+</media-controls-group>
+<media-controls-group class="video-controls-group">
+<media-playback-rate-button commandfor="vjs-qLzMuG8D-0-popup" class="media-button media-playback-rate-button" id="vjs-0wiMTNy2-0-4-trigger">
 <span data-part="value">
 </span>
 </media-playback-rate-button>
-<media-tooltip trigger="vjs-EQSPIaSE-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-0wiMTNy2-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-text token="menu.speed">Speed</media-text>
 </media-tooltip>
-<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-safe-area media-menu-popup media-menu-rate-popup" id="vjs-rG6xeIrV-0-popup">
+<media-menu side="top" align="center" boundary="viewport" class="media-popup media-popup-safe-area media-menu-popup media-menu-rate-popup" id="vjs-qLzMuG8D-0-popup">
 <media-menu-content class="media-menu-content">
 <media-playback-rate-radio-group class="media-menu-radio-group">
 <template>
@@ -116,43 +129,19 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-playback-rate-radio-group>
 </media-menu-content>
 </media-menu>
-<media-time-group class="media-time-group">
-<media-time class="media-time-toggle" type="current" toggle>
-</media-time>
-<media-time class="media-time-current-value" type="current">
-</media-time>
-<media-time-separator class="media-time-separator">
-</media-time-separator>
-<media-time class="media-time-duration-value" type="duration">
-</media-time>
-</media-time-group>
-</media-controls-group>
-<media-controls-group class="video-controls-group">
-<media-captions-button class="media-button media-captions-button" id="vjs-EQSPIaSE-0-5-trigger">
-<media-icon family="compat" name="captions-off" class="media-button-icon media-captions-button-off-icon">
-</media-icon>
-<media-icon family="compat" name="captions-on" class="media-button-icon media-captions-button-on-icon">
-</media-icon>
-</media-captions-button>
-<media-tooltip trigger="vjs-EQSPIaSE-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
-<media-tooltip-label>
-</media-tooltip-label>
-<media-tooltip-shortcut class="media-tooltip-shortcut">
-</media-tooltip-shortcut>
-</media-tooltip>
-<media-mute-button commandfor="vjs-vcuvHji9-0-popup" class="media-button media-mute-button" id="vjs-EQSPIaSE-0-6-trigger">
+<media-mute-button commandfor="vjs-DTtRMRFm-0-popup" class="media-button media-mute-button" id="vjs-0wiMTNy2-0-5-trigger">
 <media-icon family="compat" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="compat" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-EQSPIaSE-0-6-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
+<media-tooltip trigger="vjs-0wiMTNy2-0-5-trigger" delay="0" disabled side="top" sticky class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup" id="vjs-vcuvHji9-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="top" class="media-popup media-popup-safe-area media-popup-transition media-volume-popover-popup" id="vjs-DTtRMRFm-0-popup">
 <media-volume-slider class="media-volume-slider" orientation="vertical" thumb-alignment="edge">
 <media-slider-track class="media-volume-slider-track">
 <media-slider-fill class="media-volume-slider-fill">
@@ -162,23 +151,12 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-slider-thumb>
 </media-volume-slider>
 </media-volume-popover>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-EQSPIaSE-0-7-trigger">
-<media-icon family="compat" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
-</media-icon>
-<media-icon family="compat" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
-</media-icon>
-</media-airplay-button>
-<media-tooltip trigger="vjs-EQSPIaSE-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-tooltip-popup">
-<media-tooltip-label>
-</media-tooltip-label>
-<media-tooltip-shortcut class="media-tooltip-shortcut">
-</media-tooltip-shortcut>
-</media-tooltip>
 </media-controls-group>
 </media-controls-group>
 </div>
 </media-tooltip-group>
 </media-controls-content>
+</media-buffering-indicator>
 </media-controls>
 <media-hotkey keys="Space" action="togglePaused">
 </media-hotkey>

package/dist/default/internal/skins/compat-live-audio/register.js

@@ -1,15 +1,12 @@
 import "../../../define/i18n.js";
 import { registerIcons } from "../../../icons/element/register/index.js";
-import { airPlayEnterIcon } from "../../../icons/dist/html/compat/airplay-enter.js";
-import { airPlayExitIcon } from "../../../icons/dist/html/compat/airplay-exit.js";
-import { captionsOffIcon } from "../../../icons/dist/html/compat/captions-off.js";
-import { captionsOnIcon } from "../../../icons/dist/html/compat/captions-on.js";
 import { pauseIcon } from "../../../icons/dist/html/compat/pause.js";
 import { playIcon } from "../../../icons/dist/html/compat/play.js";
 import { restartIcon } from "../../../icons/dist/html/compat/restart.js";
 import { volumeHighIcon } from "../../../icons/dist/html/compat/volume-high.js";
 import { volumeOffIcon } from "../../../icons/dist/html/compat/volume-off.js";
 import "../../../define/ui/container.js";
+import "../../../define/ui/buffering-indicator.js";
 import "../../../define/ui/error-dialog.js";
 import "../../../define/ui/dialog-backdrop.js";
 import "../../../define/ui/dialog-popup.js";
@@ -20,7 +17,6 @@ import "../../../define/ui/controls.js";
 import "../../../define/ui/controls-content.js";
 import "../../../define/ui/tooltip-group.js";
 import "../../../define/ui/controls-group.js";
-import "../../../define/ui/airplay-button.js";
 import "../../../define/ui/tooltip.js";
 import "../../../define/ui/tooltip-label.js";
 import "../../../define/ui/tooltip-shortcut.js";
@@ -31,16 +27,11 @@ import "../../../define/ui/slider-thumb.js";
 import "../../../define/ui/mute-button.js";
 import "../../../define/ui/volume-popover.js";
 import "../../../define/ui/volume-slider.js";
-import "../../../define/ui/captions-button.js";
 import "../../../define/ui/hotkey.js";
 import "../../../define/ui/status-announcer.js";
 import "../../../define/ui/live-button.js";
 //#region src/internal/skins/compat-live-audio/register.ts
 registerIcons("compat", {
-	"airplay-enter": airPlayEnterIcon,
-	"airplay-exit": airPlayExitIcon,
-	"captions-off": captionsOffIcon,
-	"captions-on": captionsOnIcon,
 	pause: pauseIcon,
 	play: playIcon,
 	restart: restartIcon,