@videojs/html 10.0.0 → 10.1.0

package/dist/default/internal/skins/neutral-video/skin.css

@@ -157,7 +157,7 @@
       color-mix(in oklab, var(--media-backdrop) 40%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent),
       color-mix(in oklab, var(--media-backdrop) 50%, transparent));
-    --media-caption-controls-y: calc(var(--media-spacing) * -14);
+    --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
     --media-thumbnail-gradient: linear-gradient(to top,
       color-mix(in oklab, var(--media-backdrop) 50%, transparent),
@@ -192,10 +192,18 @@
       color-mix(in oklab, var(--media-backdrop) 35%, transparent),
       color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
       transparent);
-    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+    --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
 
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -18);
+  }
+
+  .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="scaffold"] {
+    --media-caption-controls-y: calc(var(--media-spacing) * -20);
+  }
+
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
@@ -384,7 +392,7 @@
   :where(.media-skin) {
     --media-caption-track-duration: var(--media-duration-controls);
     --media-caption-track-delay: 25ms;
-    --media-caption-track-y: calc(var(--media-spacing) * -2);
+    --media-caption-track-y: calc(var(--media-spacing) * -3);
   }
 
   :where(.media-skin) video::-webkit-media-text-track-container {
@@ -407,9 +415,13 @@
     transition-property: transform;
   }
 
-  @container media-root (width >= 42rem) {
+  @container media-root (width < 42rem) {
+    :where(.media-skin)[data-theme="default"][data-controls-visible] video {
+      --media-caption-track-y: calc(var(--media-spacing) * -14);
+    }
+
     :where(.media-skin)[data-theme="neutral"][data-controls-visible] video {
-      --media-caption-track-y: calc(var(--media-spacing) * -12);
+      --media-caption-track-y: calc(var(--media-spacing) * -17);
     }
   }
 
@@ -691,8 +703,8 @@
     z-index: 20;
     transform-origin: top;
     padding-inline: calc(var(--media-spacing) * 4);
-    padding-top: calc(var(--media-spacing) * 2.5);
-    font-size: calc(var(--media-spacing) * 3.25);
+    padding-top: calc(var(--media-spacing) * 3.5);
+    font-size: calc(var(--media-spacing) * 4);
     letter-spacing: -.0125em;
     overflow-wrap: anywhere;
     color: var(--media-controls-foreground);
@@ -722,8 +734,7 @@
   @container media-root (width >= 28rem) {
     :where(.media-skin[data-theme="neutral"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
-      padding-top: calc(var(--media-spacing) * 4);
-      font-size: calc(var(--media-spacing) * 4.25);
+      padding-top: calc(var(--media-spacing) * 5);
     }
   }
 
@@ -1812,6 +1823,12 @@
     opacity: 1;
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-time-slider[data-playing] {
+    transition-property: --media-slider-buffer;
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter {
     --media-chapter-inset-end: .5;
     --media-chapter-inset-start: .5;

package/dist/default/internal/skins/neutral-video/template.js

@@ -37,7 +37,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-controls-content class="video-controls video-controls-content video-controls-wrap">
 <media-tooltip-group>
 <media-controls-group class="video-controls-start">
-<media-play-button class="media-button media-play-button" id="vjs-TIskxJHd-0-trigger">
+<media-play-button class="media-button media-play-button" id="vjs-_OARb-OU-0-trigger">
 <media-icon family="neutral" name="restart" class="media-button-icon media-play-button-restart-icon">
 </media-icon>
 <media-icon family="neutral" name="play" class="media-button-icon media-play-button-play-icon">
@@ -45,13 +45,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="neutral" name="pause" class="media-button-icon media-play-button-pause-icon">
 </media-icon>
 </media-play-button>
-<media-tooltip trigger="vjs-TIskxJHd-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-mute-button commandfor="vjs-wZFXwba8-0-popup" class="media-button media-mute-button" id="vjs-TIskxJHd-0-2-trigger">
+<media-mute-button commandfor="vjs-j0SgKLtw-0-popup" class="media-button media-mute-button" id="vjs-_OARb-OU-0-2-trigger">
 <media-icon family="neutral" name="volume-off" class="media-button-icon media-mute-button-off-icon">
 </media-icon>
 <media-icon family="neutral" name="volume-low" class="media-button-icon media-mute-button-low-icon">
@@ -59,13 +59,13 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-icon family="neutral" name="volume-high" class="media-button-icon media-mute-button-high-icon">
 </media-icon>
 </media-mute-button>
-<media-tooltip trigger="vjs-TIskxJHd-0-2-trigger" delay="0" sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-2-trigger" delay="0" sticky side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <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="right" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-wZFXwba8-0-popup">
+<media-volume-popover open-on-hover delay="200" close-delay="100" side="right" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover" id="vjs-j0SgKLtw-0-popup">
 <media-volume-slider class="media-slider media-volume-slider" thumb-alignment="edge" orientation="horizontal">
 <media-slider-track class="media-slider-track">
 <media-slider-fill class="media-slider-fill">
@@ -118,29 +118,29 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-time-slider>
 </media-controls-group>
 <media-controls-group class="video-controls-end">
-<media-captions-button class="media-button media-captions-button video-controls-captions-button" id="vjs-TIskxJHd-0-3-trigger">
+<media-captions-button class="media-button media-captions-button video-controls-captions-button" id="vjs-_OARb-OU-0-3-trigger">
 <media-icon family="neutral" name="captions-off" class="media-button-icon media-captions-button-off-icon">
 </media-icon>
 <media-icon family="neutral" name="captions-on" class="media-button-icon media-captions-button-on-icon">
 </media-icon>
 </media-captions-button>
-<media-tooltip trigger="vjs-TIskxJHd-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-3-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<button commandfor="vjs-WpQqFM2J-0-popup" class="media-button media-settings-menu-trigger" id="vjs-TIskxJHd-0-4-trigger">
+<button commandfor="vjs--eDG6u6W-0-popup" class="media-button media-settings-menu-trigger" id="vjs-_OARb-OU-0-4-trigger">
 <media-icon family="neutral" name="gear" class="media-button-icon-base media-settings-menu-trigger-icon">
 </media-icon>
 <media-text class="media-settings-menu-trigger-label" token="menu.settings">Settings</media-text>
 </button>
-<media-tooltip trigger="vjs-TIskxJHd-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-4-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-text token="menu.settings">Settings</media-text>
 </media-tooltip>
-<media-menu side="top" align="center" class="media-popup media-popup-surface media-menu-popup media-menu-resizable-popup" id="vjs-WpQqFM2J-0-popup">
+<media-menu side="top" align="center" class="media-popup media-popup-surface media-menu-popup media-menu-resizable-popup" id="vjs--eDG6u6W-0-popup">
 <media-menu-content class="media-menu-content">
-<media-menu-item commandfor="vjs-1Oi3whcx-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-fDSdeoi6-0-content" class="media-menu-trigger-item">
 <media-icon family="neutral" name="switches" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.quality">Quality</media-text>
@@ -151,7 +151,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-1Oi3whcx-0-content">
+<media-menu-content class="media-menu-content" id="vjs-fDSdeoi6-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -178,7 +178,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-quality-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-6DDbyaB8-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-Anz3L5fU-0-content" class="media-menu-trigger-item">
 <media-icon family="neutral" name="speech" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.audio">Audio</media-text>
@@ -189,7 +189,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-6DDbyaB8-0-content">
+<media-menu-content class="media-menu-content" id="vjs-Anz3L5fU-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -210,7 +210,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-audio-track-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-A3zWz_yK-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-Ms-0xzm8-0-content" class="media-menu-trigger-item">
 <media-icon family="neutral" name="speed" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.speed">Speed</media-text>
@@ -221,7 +221,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-A3zWz_yK-0-content">
+<media-menu-content class="media-menu-content" id="vjs-Ms-0xzm8-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -242,7 +242,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </template>
 </media-playback-rate-radio-group>
 </media-menu-content>
-<media-menu-item commandfor="vjs-d4E9Ev1b-0-content" class="media-menu-trigger-item">
+<media-menu-item commandfor="vjs-Q-rFPHiH-0-content" class="media-menu-trigger-item">
 <media-icon family="neutral" name="captions-off" class="media-menu-trigger-item-icon">
 </media-icon>
 <media-text token="menu.captions">Captions</media-text>
@@ -253,7 +253,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-icon>
 </span>
 </media-menu-item>
-<media-menu-content class="media-menu-content" id="vjs-d4E9Ev1b-0-content">
+<media-menu-content class="media-menu-content" id="vjs-Q-rFPHiH-0-content">
 <media-menu-item class="media-menu-back-item">
 <media-icon family="neutral" name="chevron" class="media-menu-back-chevron">
 </media-icon>
@@ -277,49 +277,49 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 </media-menu-content>
 </media-menu>
 <media-controls-group class="video-controls-trailing">
-<media-cast-button class="media-button media-cast-button" id="vjs-TIskxJHd-0-5-trigger">
+<media-cast-button class="media-button media-cast-button" id="vjs-_OARb-OU-0-5-trigger">
 <media-icon family="neutral" name="cast-enter" class="media-button-icon media-cast-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="cast-exit" class="media-button-icon media-cast-button-exit-icon">
 </media-icon>
 </media-cast-button>
-<media-tooltip trigger="vjs-TIskxJHd-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-5-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-airplay-button class="media-button media-airplay-button" id="vjs-TIskxJHd-0-6-trigger">
+<media-airplay-button class="media-button media-airplay-button" id="vjs-_OARb-OU-0-6-trigger">
 <media-icon family="neutral" name="airplay-enter" class="media-button-icon media-airplay-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="airplay-exit" class="media-button-icon media-airplay-button-exit-icon">
 </media-icon>
 </media-airplay-button>
-<media-tooltip trigger="vjs-TIskxJHd-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-6-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-pip-button class="media-button media-pip-button" id="vjs-TIskxJHd-0-7-trigger">
+<media-pip-button class="media-button media-pip-button" id="vjs-_OARb-OU-0-7-trigger">
 <media-icon family="neutral" name="pip-enter" class="media-button-icon media-pip-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="pip-exit" class="media-button-icon media-pip-button-exit-icon">
 </media-icon>
 </media-pip-button>
-<media-tooltip trigger="vjs-TIskxJHd-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-7-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-TIskxJHd-0-8-trigger">
+<media-fullscreen-button class="media-button media-fullscreen-button" id="vjs-_OARb-OU-0-8-trigger">
 <media-icon family="neutral" name="fullscreen-enter" class="media-button-icon media-fullscreen-button-enter-icon">
 </media-icon>
 <media-icon family="neutral" name="fullscreen-exit" class="media-button-icon media-fullscreen-button-exit-icon">
 </media-icon>
 </media-fullscreen-button>
-<media-tooltip trigger="vjs-TIskxJHd-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
+<media-tooltip trigger="vjs-_OARb-OU-0-8-trigger" side="top" class="media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip">
 <media-tooltip-label>
 </media-tooltip-label>
 <media-tooltip-shortcut class="media-tooltip-shortcut">

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

@@ -0,0 +1,73 @@
+import "../../../define/i18n.js";
+import { registerIcons } from "../../../icons/element/register/index.js";
+import { airPlayEnterIcon } from "../../../icons/dist/html/scaffold/airplay-enter.js";
+import { airPlayExitIcon } from "../../../icons/dist/html/scaffold/airplay-exit.js";
+import { captionsOffIcon } from "../../../icons/dist/html/scaffold/captions-off.js";
+import { captionsOnIcon } from "../../../icons/dist/html/scaffold/captions-on.js";
+import { checkIcon } from "../../../icons/dist/html/scaffold/check.js";
+import { pauseIcon } from "../../../icons/dist/html/scaffold/pause.js";
+import { playIcon } from "../../../icons/dist/html/scaffold/play.js";
+import { restartIcon } from "../../../icons/dist/html/scaffold/restart.js";
+import { seekIcon } from "../../../icons/dist/html/scaffold/seek.js";
+import { spinnerIcon } from "../../../icons/dist/html/scaffold/spinner.js";
+import { volumeHighIcon } from "../../../icons/dist/html/scaffold/volume-high.js";
+import { volumeOffIcon } from "../../../icons/dist/html/scaffold/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";
+import "../../../define/ui/dialog-title.js";
+import "../../../define/ui/dialog-description.js";
+import "../../../define/ui/dialog-close.js";
+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";
+import "../../../define/ui/seek-button.js";
+import "../../../define/ui/play-button.js";
+import "../../../define/ui/time-slider.js";
+import "../../../define/ui/time-slider-chapters.js";
+import "../../../define/ui/slider-track.js";
+import "../../../define/ui/slider-buffer.js";
+import "../../../define/ui/slider-fill.js";
+import "../../../define/ui/slider-thumb.js";
+import "../../../define/ui/slider-preview.js";
+import "../../../define/ui/slider-thumbnail.js";
+import "../../../define/ui/slider-value.js";
+import "../../../define/ui/time-slider-chapter-title.js";
+import "../../../define/ui/mute-button.js";
+import "../../../define/ui/volume-popover.js";
+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";
+import "../../../define/ui/menu-item-indicator.js";
+import "../../../define/ui/playback-rate-radio-group.js";
+import "../../../define/ui/hotkey.js";
+import "../../../define/ui/status-announcer.js";
+import "../../../define/ui/playback-rate-button.js";
+//#region src/internal/skins/scaffold-audio/register.ts
+registerIcons("scaffold", {
+	"airplay-enter": airPlayEnterIcon,
+	"airplay-exit": airPlayExitIcon,
+	"captions-off": captionsOffIcon,
+	"captions-on": captionsOnIcon,
+	check: checkIcon,
+	pause: pauseIcon,
+	play: playIcon,
+	restart: restartIcon,
+	seek: seekIcon,
+	spinner: spinnerIcon,
+	"volume-high": volumeHighIcon,
+	"volume-off": volumeOffIcon
+});
+//#endregion