@videojs/html 10.0.0-beta.11 → 10.0.0-beta.12

package/dist/dev/define/video/skin.css

@@ -27,12 +27,12 @@
    ========================================================================== */
 
 .media-default-skin {
+  container: media-root / inline-size;
   position: relative;
   isolation: isolate;
   display: block;
   height: 100%;
   width: 100%;
-  container: media-root / inline-size;
   border-radius: var(--media-border-radius, 2rem);
   font-family:
     Inter Variable,
@@ -40,11 +40,20 @@
     ui-sans-serif,
     system-ui,
     sans-serif;
-  font-size: 0.8125rem;
   line-height: 1.5;
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
+
+  & > * {
+    font-size: 0.75rem; /* 12px at 100% font size */
+  }
+
+  @container media-root (width > 48rem) {
+    & > * {
+      font-size: 0.875rem; /* 14px at 100% font size */
+    }
+  }
 }
 
 /* ==========================================================================
@@ -69,14 +78,6 @@
     box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
     pointer-events: none;
   }
-
-  @media (prefers-reduced-transparency: reduce) {
-    background-color: oklch(from var(--media-surface-background-color) l c h / 0.7);
-  }
-
-  @media (prefers-contrast: more) {
-    background-color: oklch(from var(--media-surface-background-color) l c h / 0.9);
-  }
 }
 
 /* ==========================================================================
@@ -112,12 +113,11 @@
   inset: 0;
   border-radius: inherit;
   background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
-  backdrop-filter: blur(0) saturate(1.5);
+  backdrop-filter: blur(0) saturate(1);
   opacity: 0;
   pointer-events: none;
   transition-property: opacity, backdrop-filter;
   transition-duration: var(--media-controls-transition-duration);
-  transition-delay: var(--media-controls-transition-delay);
   transition-timing-function: ease-out;
 }
 
@@ -166,6 +166,10 @@
   outline: none;
 }
 
+.media-default-skin .media-error:not([data-open]) {
+  display: none;
+}
+
 .media-default-skin .media-error__title {
   font-weight: 600;
   line-height: 1.25;
@@ -197,44 +201,31 @@
   container: media-controls / inline-size;
   display: flex;
   align-items: center;
-  gap: 0.075rem;
-  padding: 0.175rem;
-  border-radius: calc(infinity * 1px);
+  column-gap: 0.075rem;
+  padding: 0.375rem;
+  border-radius: 1.5rem;
   --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
   --media-controls-current-shadow-color-subtle: oklch(
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
   text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
-
-  @container media-root (width > 40rem) {
-    gap: 0.125rem;
-    padding: 0.25rem;
-  }
 }
 
 /* ==========================================================================
    Time Display
    ========================================================================== */
 
-.media-default-skin .media-time {
-  container: media-time / inline-size;
+.media-default-skin .media-time-controls {
+  container: media-time-controls / inline-size;
   display: flex;
   align-items: center;
   flex: 1;
   gap: 0.75rem;
   padding-inline: 0.5rem;
-
-  & .media-time__value:first-child {
-    display: none;
-
-    @container media-time (width > 18rem) {
-      display: block;
-    }
-  }
 }
 
-.media-default-skin .media-time__value {
+.media-default-skin .media-time {
   font-variant-numeric: tabular-nums;
 }
 
@@ -254,6 +245,8 @@
   outline: 2px solid transparent;
   outline-offset: -2px;
   transition-property: background-color, outline-offset, scale;
+  /* Fix weird jumping when clicking on the buttons in Safari. */
+  will-change: scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -306,7 +299,7 @@
 /* Icon button variant */
 .media-default-skin .media-button--icon {
   display: grid;
-  width: 2.125rem;
+  width: 2.25rem;
   padding: 0;
   aspect-ratio: 1;
 
@@ -334,10 +327,6 @@
     right: unset;
     left: -1px;
   }
-
-  @container media-controls (width < 28rem) {
-    display: none;
-  }
 }
 
 /* Playback rate button */
@@ -351,6 +340,20 @@
   }
 }
 
+/* ==========================================================================
+   Button Groups
+   ========================================================================== */
+
+.media-default-skin .media-button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.075rem;
+
+  @container media-root (width > 42rem) {
+    gap: 0.125rem;
+  }
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -416,6 +419,7 @@
 .media-default-skin .media-preview {
   background-color: oklch(0 0 0 / 0.9);
   border-radius: 0.75rem;
+  pointer-events: none;
 
   & .media-preview__thumbnail {
     display: block;
@@ -432,12 +436,11 @@
     }
   }
 
-  & .media-preview__timestamp {
+  & .media-preview__time {
     position: absolute;
     bottom: 0.5rem;
     inset-inline: 0;
     text-align: center;
-    font-variant-numeric: tabular-nums;
   }
 
   & .media-overlay {
@@ -484,11 +487,11 @@
   &[data-orientation="horizontal"] {
     min-width: 5rem;
     width: 100%;
-    height: 1.25rem;
+    height: 2rem;
   }
 
   &[data-orientation="vertical"] {
-    width: 1.25rem;
+    width: 2rem;
     height: 5rem;
   }
 }
@@ -699,8 +702,6 @@
 }
 
 .media-default-skin .media-popover {
-  --media-popover-side-offset: 0.5rem;
-
   &[data-side="top"]::before,
   &[data-side="bottom"]::before {
     height: var(--media-popover-side-offset);
@@ -711,7 +712,7 @@
   }
 }
 .media-default-skin .media-popover--volume {
-  padding: 0.625rem 0.25rem;
+  padding: 0.75rem 0;
   border-radius: calc(infinity * 1px);
 
   &:has(media-volume-slider[data-availability="unsupported"]) {
@@ -724,7 +725,6 @@
   border-radius: calc(infinity * 1px);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.75rem;
 
   &[data-side="top"]::before,
   &[data-side="bottom"]::before {
@@ -742,11 +742,17 @@
 
 .media-default-skin {
   --media-caption-track-duration: var(--media-controls-transition-duration);
-  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
+  --media-caption-track-delay: 25ms;
   --media-caption-track-y: -0.5rem;
 
   &:has(.media-controls[data-visible]) {
-    --media-caption-track-y: -3.5rem;
+    --media-caption-track-y: -5.5rem;
+  }
+
+  @container media-root (width > 42rem) {
+    &:has(.media-controls[data-visible]) > * {
+      --media-caption-track-y: -3.5rem;
+    }
   }
 }
 
@@ -885,13 +891,14 @@
   --media-surface-backdrop-filter: blur(16px) saturate(1.5);
   --media-video-border-radius: var(--media-border-radius, 2rem);
   --media-controls-transition-duration: 100ms;
-  --media-controls-transition-delay: 0ms;
   --media-controls-transition-timing-function: ease-out;
   --media-error-dialog-transition-duration: 350ms;
   --media-error-dialog-transition-delay: 100ms;
   --media-error-dialog-transition-timing-function: var(--media-spring-transition);
   --media-popup-transition-duration: 100ms;
   --media-popup-transition-timing-function: ease-out;
+  --media-tooltip-side-offset: 0.75rem;
+  --media-popover-side-offset: 0.5rem;
 
   @media (prefers-reduced-motion: reduce) {
     --media-error-dialog-transition-duration: 50ms;
@@ -904,10 +911,15 @@
     --media-border-color: oklch(1 0 0 / 0.15);
   }
 
+  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
+    --media-surface-background-color: oklch(0 0 0);
+    --media-surface-inner-border-color: oklch(1 0 0 / 0.25);
+    --media-surface-outer-border-color: transparent;
+  }
+
   &:has(.media-controls:not([data-visible])) {
     /* Slight delay to hide controls on non-touch devices after interaction */
     @media (pointer: fine) {
-      --media-controls-transition-delay: 500ms;
       --media-controls-transition-duration: 300ms;
     }
     @media (pointer: coarse) {
@@ -988,13 +1000,13 @@
    ========================================================================== */
 
 .media-default-skin--video .media-controls {
+  flex-wrap: wrap;
   position: absolute;
-  bottom: 0.75rem;
-  inset-inline: 0.75rem;
+  bottom: 0.5rem;
+  inset-inline: 0.5rem;
   z-index: 10;
   color: var(--media-color-primary, oklch(1 0 0));
   transition-duration: var(--media-controls-transition-duration);
-  transition-delay: var(--media-controls-transition-delay);
   transition-timing-function: var(--media-controls-transition-timing-function);
   transform-origin: bottom;
 
@@ -1021,17 +1033,49 @@
       scale: 1;
     }
   }
+
+  & .media-time-controls {
+    order: -1;
+    flex: 0 0 100%;
+    padding-inline: 0.625rem;
+  }
+
+  & .media-button-group:first-child {
+    flex: 1;
+    text-align: left;
+  }
+
+  & .media-button-group:last-child {
+    flex: 1;
+    justify-content: end;
+  }
+
+  @container media-root (width > 42rem) {
+    bottom: 0.75rem;
+    inset-inline: 0.75rem;
+    flex-wrap: nowrap;
+    column-gap: 0.125rem;
+    padding: 0.25rem;
+
+    & .media-time-controls {
+      order: unset;
+      flex: 1;
+    }
+
+    & .media-button-group:first-child,
+    & .media-button-group:last-child {
+      flex: 0 0 auto;
+    }
+  }
 }
 
 .media-default-skin--video .media-error[data-open] ~ .media-controls {
   display: none;
 }
 
-/* Hide cursor when controls are hidden in fullscreen */
-@media (pointer: fine) {
-  .media-default-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
-    cursor: none;
-  }
+/* Hide cursor when controls are hidden */
+.media-default-skin--video:has(.media-controls:not([data-visible])) {
+  cursor: none;
 }
 
 /* ==========================================================================
@@ -1044,8 +1088,20 @@
 }
 
 .media-default-skin--video .media-slider__preview {
+  --media-preview-max-width: 11rem;
+  --media-preview-padding: -1.125rem;
+  /**
+    Inset is the difference between the container width and the slider (100%) width.
+    Divided by 2 as we render the time on both sides.
+  */
+  --media-preview-inset: calc((100cqi - 100%) / 2);
+
   position: absolute;
-  left: var(--media-slider-pointer);
+  left: clamp(
+    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding) - var(--media-preview-inset)),
+    var(--media-slider-pointer),
+    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))
+  );
   bottom: calc(100% + 1.2rem);
   translate: -50%;
   opacity: 0;
@@ -1058,7 +1114,7 @@
   pointer-events: none;
 
   & .media-preview__thumbnail {
-    max-width: 11rem;
+    max-width: var(--media-preview-max-width);
   }
 
   &:has(.media-preview__thumbnail[data-loading]) {

package/dist/dev/define/video/skin.d.ts

@@ -4,11 +4,11 @@ import { ReactiveElement } from "@videojs/element";
 declare function getTemplateHTML(): string;
 declare const VideoSkinElement_base: typeof ReactiveElement & {
   shadowRootOptions: ShadowRootInit;
-  styles?: CSSStyleSheet;
+  styles?: string | CSSStyleSheet;
 };
 declare class VideoSkinElement extends VideoSkinElement_base {
   static readonly tagName = "video-skin";
-  static styles: CSSStyleSheet;
+  static styles: string | CSSStyleSheet;
   static getTemplateHTML: typeof getTemplateHTML;
 }
 declare global {

package/dist/dev/define/video/skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;iBA0BS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cA0HX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,EAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}
+{"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/define/video/skin.ts"],"mappings":";;;iBA4BS,eAAA,CAAA;AAAA,cAAe,qBAAA;;;;cA0IX,gBAAA,SAAyB,qBAAA;EAAA,gBACpB,OAAA;EAAA,OACT,MAAA,WAAM,aAAA;EAAA,OACN,eAAA,SAAe,eAAA;AAAA;AAAA,QAKhB,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,gBAAA,CAAiB,OAAA,GAAU,gBAAA;EAAA;AAAA"}

package/dist/dev/define/video/skin.js

@@ -1,8 +1,10 @@
+import { safeDefine } from "../safe-define.js";
 import { SkinMixin, createStyles } from "../skin-mixin.js";
 import "../media/container.js";
 import "../ui/buffering-indicator.js";
 import "../ui/captions-button.js";
 import "../ui/controls.js";
+import "../ui/error-dialog.js";
 import "../ui/fullscreen-button.js";
 import "../ui/mute-button.js";
 import "../ui/pip-button.js";
@@ -19,7 +21,6 @@ import "../ui/volume-slider.js";
 import { renderIcon } from "../../icons/dist/render/default/index.js";
 import skin_default from "../../_virtual/inline-css_src/define/video/skin.js";
 import { ReactiveElement } from "@videojs/element";
-
 //#region src/define/video/skin.ts
 const SEEK_TIME = 10;
 function getTemplateHTML() {
@@ -39,41 +40,55 @@ function getTemplateHTML() {
         </div>
       </media-buffering-indicator>
 
+      <media-error-dialog class="media-error">
+        <div class="media-error__dialog media-surface">
+          <div class="media-error__content">
+            <media-alert-dialog-title class="media-error__title">Something went wrong.</media-alert-dialog-title>
+            <media-alert-dialog-description class="media-error__description"></media-alert-dialog-description>
+          </div>
+          <div class="media-error__actions">
+            <media-alert-dialog-close class="media-button media-button--primary">OK</media-alert-dialog-close>
+          </div>
+        </div>
+      </media-error-dialog>
+
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
-            ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
-            ${renderIcon("play", { class: "media-icon media-icon--play" })}
-            ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
-          </media-play-button>
-          <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-          </media-tooltip>
-
-          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
-            Seek backward ${SEEK_TIME} seconds
-          </media-tooltip>
-
-          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
-            <span class="media-icon__container">
-              ${renderIcon("seek", { class: "media-icon" })}
-              <span class="media-icon__label">${SEEK_TIME}</span>
-            </span>
-          </media-seek-button>
-          <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
-            Seek forward ${SEEK_TIME} seconds
-          </media-tooltip>
-
-          <media-time-group class="media-time">
-            <media-time type="current" class="media-time__value"></media-time>
+          <div class="media-button-group">
+            <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
+              ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
+              ${renderIcon("play", { class: "media-icon media-icon--play" })}
+              ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+              <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+              <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+            </media-tooltip>
+
+            <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
+              <span class="media-icon__container">
+                ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
+                <span class="media-icon__label">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
+              Seek backward ${SEEK_TIME} seconds
+            </media-tooltip>
+
+            <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--subtle media-button--icon media-button--seek">
+              <span class="media-icon__container">
+                ${renderIcon("seek", { class: "media-icon" })}
+                <span class="media-icon__label">${SEEK_TIME}</span>
+              </span>
+            </media-seek-button>
+            <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
+              Seek forward ${SEEK_TIME} seconds
+            </media-tooltip>
+          </div>
+
+          <div class="media-time-controls">
+            <media-time type="current" class="media-time"></media-time>
             <media-time-slider class="media-slider">
               <media-slider-track class="media-slider__track">
                 <media-slider-fill class="media-slider__fill"></media-slider-fill>
@@ -83,59 +98,61 @@ function getTemplateHTML() {
 
               <div class="media-surface media-preview media-slider__preview">
                 <media-slider-thumbnail class="media-preview__thumbnail"></media-slider-thumbnail>
-                <media-slider-value type="pointer" class="media-preview__timestamp"></media-slider-value>
+                <media-slider-value type="pointer" class="media-time media-preview__time"></media-slider-value>
                 ${renderIcon("spinner", { class: "media-preview__spinner media-icon" })}
               </div>
             </media-time-slider>
-            <media-time type="duration" class="media-time__value"></media-time>
-          </media-time-group>
-
-          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
-          <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
-            Toggle playback rate
-          </media-tooltip>
-
-          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
-            ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
-            ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
-            ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
-          </media-mute-button>
-
-          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
-            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
-              <media-slider-track class="media-slider__track">
-                <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              </media-slider-track>
-              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-            </media-volume-slider>
-          </media-popover>
-
-          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
-            ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
-            ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
-          </media-captions-button>
-          <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
-            <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
-          </media-tooltip>
-
-          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
-            ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })}
-            ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })}
-          </media-pip-button>
-          <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-            <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-          </media-tooltip>
-
-          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
-            ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
-            ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
-          </media-fullscreen-button>
-          <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
-            <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-            <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-          </media-tooltip>
+            <media-time type="duration" class="media-time"></media-time>
+          </div>
+
+          <div class="media-button-group">
+            <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
+            <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
+              Toggle playback rate
+            </media-tooltip>
+
+            <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
+              ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
+              ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
+              ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
+            </media-mute-button>
+
+            <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+              <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+                <media-slider-track class="media-slider__track">
+                  <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                </media-slider-track>
+                <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+              </media-volume-slider>
+            </media-popover>
+
+            <media-captions-button commandfor="captions-tooltip" class="media-button media-button--subtle media-button--icon media-button--captions">
+              ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
+              ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
+            </media-captions-button>
+            <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
+              <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
+            </media-tooltip>
+
+            <media-pip-button commandfor="pip-tooltip" class="media-button media-button--subtle media-button--icon media-button--pip">
+              ${renderIcon("pip-enter", { class: "media-icon media-icon--pip-enter" })}
+              ${renderIcon("pip-exit", { class: "media-icon media-icon--pip-exit" })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
+              <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
+            </media-tooltip>
+
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--subtle media-button--icon media-button--fullscreen">
+              ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
+              ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
+              <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
+              <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
+            </media-tooltip>
+          </div>
         </media-tooltip-group>
       </media-controls>
 
@@ -154,8 +171,8 @@ var VideoSkinElement = class extends SkinMixin(ReactiveElement) {
 		this.getTemplateHTML = getTemplateHTML;
 	}
 };
-customElements.define(VideoSkinElement.tagName, VideoSkinElement);
-
+safeDefine(VideoSkinElement);
 //#endregion
 export { VideoSkinElement };
+
 //# sourceMappingURL=skin.js.map