@videojs/html 10.2.0 → 10.4.0

package/dist/dev/internal/skins/scaffold-live-video/skin.css

@@ -223,6 +223,10 @@
     display: none;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-backdrop[data-scope="document"] {
+    position: fixed;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-close {
     height: calc(var(--media-spacing) * 8);
     width: auto;
@@ -268,6 +272,11 @@
     outline-color: var(--media-ring);
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-popup[data-scope="document"] {
+    max-height: calc(100dvh - var(--media-spacing) * 8);
+    position: fixed;
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-dialog-popup {
       border: 1px solid canvastext;
@@ -394,6 +403,18 @@
     overflow: hidden;
   }
 
+  .media-poster > slot::slotted(img) {
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    display: block;
+    height: 100% !important;
+  }
+
+  .media-poster > slot::slotted(img:not([src]):not([srcset])) {
+    visibility: hidden;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-poster {
     width: 100%;
     height: 100%;
@@ -565,8 +586,13 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-tooltip-shortcut {
+    text-align: center;
+    min-width: 1.5em;
     font-family: inherit;
     font-size: calc(var(--media-spacing) * 2.75);
+    background-color: oklab(100% 0 5.96046e-8 / .1);
+    padding: .1em;
+    line-height: 1.25;
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-button-icon {
@@ -576,6 +602,12 @@
     grid-column-start: 1;
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-captions-button {
+      display: none;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-captions-button-on-icon {
     display: none;
   }
@@ -623,6 +655,10 @@
     outline: 2px solid;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-menu-radio-item[data-custom] {
+    font-style: italic;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-menu-radio-item[data-highlighted] {
     background-color: var(--media-button-highlight);
   }
@@ -641,6 +677,13 @@
     }
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-menu-badge {
+    background-color: var(--media-muted);
+    padding-inline: calc(var(--media-spacing) * 1.5);
+    font-size: calc(var(--media-spacing) * 2.75);
+    border-radius: 0;
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-menu-content {
     overscroll-behavior: none;
     max-height: 100%;
@@ -1192,7 +1235,7 @@
     pointer-events: auto;
     align-items: center;
     gap: calc(var(--media-spacing) * 2);
-    display: none;
+    display: flex;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -1226,25 +1269,47 @@
     }
   }
 
-  @container media-root (width >= 22.5rem) {
-    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center {
-      display: flex;
-    }
-  }
-
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button {
-    background-color: var(--media-background) !important;
+    background-color: var(--media-popover) !important;
     margin: 0 !important;
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button {
+      background-color: color-mix(in oklab, var(--media-popover) 40%, transparent) !important;
+    }
+  }
+
   @media (hover: hover) {
     :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button:hover {
-      background-color: var(--media-button-highlight) !important;
+      background-color: var(--media-popover) !important;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button:hover {
+        background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+      }
     }
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button:focus-visible, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button[aria-expanded="true"] {
-    background-color: var(--media-button-highlight) !important;
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button:focus-visible {
+    background-color: var(--media-popover) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button:focus-visible {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+    }
+  }
+
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button[aria-expanded="true"] {
+    background-color: var(--media-popover) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-button[aria-expanded="true"] {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+    }
   }
 
   @media (forced-colors: active) {
@@ -1284,11 +1349,25 @@
     height: calc(var(--media-spacing) * 14.5) !important;
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 11) !important;
+      height: calc(var(--media-spacing) * 11) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-play-icon {
     width: calc(var(--media-spacing) * 7) !important;
     height: calc(var(--media-spacing) * 7) !important;
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5.5) !important;
+      height: calc(var(--media-spacing) * 5.5) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-content {
     pointer-events: none;
     z-index: 30;
@@ -1333,6 +1412,10 @@
     top: 0;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-top:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-content):not([data-visible]) .video-controls-top {
     pointer-events: none;
     opacity: 0;
@@ -1360,6 +1443,10 @@
     }
   }
 
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-content):not([data-started]) .video-controls-video-bottom {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-video-bottom {
       inset-inline: 0;
@@ -1543,13 +1630,23 @@
     }
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-title {
+      display: none;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-backdrop {
     pointer-events: none;
-    background-color: #0006;
+    background-image: linear-gradient(to top, #00000080, #0000 40% 60%, #0006);
     position: absolute;
     inset: 0;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-backdrop:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .video-controls-backdrop:not([data-visible]) {
     display: none;
   }
@@ -1563,6 +1660,9 @@
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-container, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]).media-container {
     border-radius: var(--media-video-border-radius);
     width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
     font-family: var(--media-font-family, inherit);
     font-size: calc(var(--media-spacing) * 3.25);
     color: var(--media-foreground);
@@ -1582,48 +1682,58 @@
   }
 
   :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]) .media-video, :where(.media-skin[data-theme="scaffold"][data-preset="live-video"]).media-video {
-    aspect-ratio: 16 / 9;
     background-color: #000;
   }
+
+  .media-container > slot::slotted(video), :scope.media-container > slot::slotted(video) {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    display: block;
+    height: 100% !important;
+  }
 }
 
 @layer utilities;
 
 @layer base.theme {
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
-    --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: oklch(100% 0 0 / .65);
-    --media-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
-    --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+    --media-shadow-subtle-current-color: transparent;
     --media-text-shadow-dialog: 0 1px 0 #00000040;
-    --media-backdrop-filter-surface: blur(16px) saturate(110%);
+    --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
-    --media-backdrop-filter-dialog: blur(16px) saturate(110%);
+    --media-backdrop-filter-dialog: blur(16px) saturate(125%);
     --media-control-corner-shape: round;
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -1660,16 +1770,31 @@
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
 
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
+
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
 
@@ -1717,24 +1842,66 @@
 @layer base.preset {
   .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
     --media-frame-border: var(--media-border-color, #0000001a);
-    --media-controls-gradient: linear-gradient(to top,
-      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-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
+    --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
     --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),
-      color-mix(in oklab, var(--media-backdrop) 10%, transparent),
-      transparent);
+  }
+
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
+      --media-controls-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom,
+        color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+        transparent);
+      --media-thumbnail-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 10%, transparent),
+        transparent);
+    }
+
+    .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
+      --media-controls-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+        transparent);
+      --media-indicator-gradient: linear-gradient(to bottom,
+        color-mix(in oklab, var(--media-backdrop) 35%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
+        transparent);
+    }
   }
 
   @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"]) {
       --media-controls-gradient: linear-gradient(to top in oklab,
-        oklch(from var(--media-backdrop) l c h / .4),
-        oklch(from var(--media-backdrop) l c h / .2),
-        oklch(from var(--media-backdrop) l c h / .5));
+        oklch(from var(--media-backdrop) l c h / .6),
+        oklch(from var(--media-backdrop) l c h / .507) 25%,
+        oklch(from var(--media-backdrop) l c h / .3) 50%,
+        oklch(from var(--media-backdrop) l c h / .093) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .55),
+        oklch(from var(--media-backdrop) l c h / .4647) 25%,
+        oklch(from var(--media-backdrop) l c h / .275) 50%,
+        oklch(from var(--media-backdrop) l c h / .0853) 75%,
+        transparent);
     }
   }
 
@@ -1749,18 +1916,14 @@
 
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
-    --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent));
-    --media-indicator-gradient: linear-gradient(to bottom,
-      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-controls-gradient-height: 40%;
+    --media-controls-bottom-gradient-height: max(40%, calc(var(--media-spacing) * 44));
     --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-controls-gradient: linear-gradient(to top, #00000080, transparent 40% 60%, #0006);
     --media-caption-controls-y: calc(var(--media-spacing) * -18);
   }
 
@@ -1772,7 +1935,16 @@
     .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
       --media-controls-gradient: linear-gradient(to top in oklab,
         oklch(from var(--media-backdrop) l c h / .5),
-        oklch(from var(--media-backdrop) l c h / .2));
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom in oklab,
+        oklch(from var(--media-backdrop) l c h / .5),
+        oklch(from var(--media-backdrop) l c h / .422) 25%,
+        oklch(from var(--media-backdrop) l c h / .25) 50%,
+        oklch(from var(--media-backdrop) l c h / .078) 75%,
+        transparent);
     }
   }
 
@@ -1903,7 +2075,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -1911,6 +2083,12 @@
       scrollbar-width: auto;
     }
 
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
+
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);

package/dist/dev/internal/skins/scaffold-live-video/template.js

@@ -167,6 +167,8 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-menu-radio-item class="media-menu-radio-item">
 <span data-part="label">
 </span>
+<span data-part="badge" class="media-menu-badge">
+</span>
 <media-menu-item-indicator force-mount class="media-menu-indicator">
 <media-icon family="scaffold" name="check" class="media-menu-radio-icon">
 </media-icon>

package/dist/dev/internal/skins/scaffold-live-video/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/scaffold-live-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. */\nexport const template =\n  createTemplate(/* html */ `<media-container class=\"media-skin media-container media-video\" data-theme=\"scaffold\" data-preset=\"live-video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\" class=\"media-poster-image\">\n</slot>\n</media-poster>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-group class=\"media-buffering-indicator-controls\">\n<media-buffering-indicator class=\"media-buffering-indicator media-buffering-indicator-backdrop\">\n<media-icon family=\"scaffold\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n</media-controls-group>\n<media-controls-content class=\"video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-top\">\n<media-title class=\"media-title\">\n</media-title>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-edu67hQA-0-trigger\">\n<media-icon family=\"scaffold\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-edu67hQA-0-2-trigger\">\n<media-icon family=\"scaffold\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-edu67hQA-0-3-trigger\">\n<media-icon family=\"scaffold\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-edu67hQA-0-4-trigger\">\n<media-icon family=\"scaffold\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<media-buffering-indicator class=\"video-controls-buffering\">\n<media-controls-group class=\"video-controls-center\">\n<media-play-button class=\"media-button media-play-button video-controls-center-button video-controls-center-play\" id=\"vjs-edu67hQA-0-5-trigger\">\n<media-icon family=\"scaffold\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-5-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-buffering-indicator>\n<div class=\"video-controls-bottom video-controls-video-bottom\">\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-edu67hQA-0-6-trigger\">\n<media-icon family=\"scaffold\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-live-button class=\"media-button media-live-button\">\n<div aria-hidden=\"true\" class=\"media-live-button-dot\">\n</div>\n<media-text token=\"live.badge\">Live</media-text>\n</media-live-button>\n<media-mute-button commandfor=\"vjs-jYkpFTzU-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-edu67hQA-0-7-trigger\">\n<media-icon family=\"scaffold\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-7-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popup media-popup-safe-area media-volume-popover-popup\" id=\"vjs-jYkpFTzU-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button commandfor=\"vjs-SDLjnoCt-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-edu67hQA-0-8-trigger\">\n<media-icon family=\"scaffold\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-safe-area media-menu-popup\" id=\"vjs-SDLjnoCt-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"scaffold\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n</media-controls-group>\n</div>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div aria-hidden=\"true\" class=\"media-indicator-group\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-volume-indicator-fill\">\n<media-icon family=\"scaffold\" name=\"volume-high\" class=\"media-volume-indicator-icon media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"volume-low\" class=\"media-volume-indicator-icon media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"volume-off\" class=\"media-volume-indicator-icon media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<media-icon family=\"scaffold\" name=\"captions-on\" class=\"media-status-indicator-icon media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"captions-off\" class=\"media-status-indicator-icon media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"fullscreen-enter\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"fullscreen-exit\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pip-enter\" class=\"media-status-indicator-icon media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pip-exit\" class=\"media-status-indicator-icon media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value>\n</media-status-indicator-value>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2OT"}
+{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/scaffold-live-video/template.ts"],"sourcesContent":["import { createTemplate } from '@videojs/utils/dom';\n\n/** Static template rendered from the finalized VJSC module graph. */\nexport const template =\n  createTemplate(/* html */ `<media-container class=\"media-skin media-container media-video\" data-theme=\"scaffold\" data-preset=\"live-video\">\n<slot>\n</slot>\n<media-poster class=\"media-poster\">\n<slot name=\"poster\">\n<img alt=\"\" decoding=\"async\" class=\"media-poster-image\">\n</slot>\n</media-poster>\n<media-error-dialog>\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<media-dialog-title class=\"media-dialog-title\">\n</media-dialog-title>\n<media-dialog-description class=\"media-dialog-description\">\n</media-dialog-description>\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</media-dialog-popup>\n</media-error-dialog>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-group class=\"media-buffering-indicator-controls\">\n<media-buffering-indicator class=\"media-buffering-indicator media-buffering-indicator-backdrop\">\n<media-icon family=\"scaffold\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n</media-controls-group>\n<media-controls-content class=\"video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-top\">\n<media-title class=\"media-title\">\n</media-title>\n<media-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-edu67hQA-0-trigger\">\n<media-icon family=\"scaffold\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-cast-button class=\"media-button media-cast-button\" id=\"vjs-edu67hQA-0-2-trigger\">\n<media-icon family=\"scaffold\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-2-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-pip-button class=\"media-button media-pip-button\" id=\"vjs-edu67hQA-0-3-trigger\">\n<media-icon family=\"scaffold\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-fullscreen-button class=\"media-button media-fullscreen-button\" id=\"vjs-edu67hQA-0-4-trigger\">\n<media-icon family=\"scaffold\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup media-tooltip-screen-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n<media-buffering-indicator class=\"video-controls-buffering\">\n<media-controls-group class=\"video-controls-center\">\n<media-play-button class=\"media-button media-play-button video-controls-center-button video-controls-center-play\" id=\"vjs-edu67hQA-0-5-trigger\">\n<media-icon family=\"scaffold\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-5-trigger\" disabled side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n</media-controls-group>\n</media-buffering-indicator>\n<div class=\"video-controls-bottom video-controls-video-bottom\">\n<media-controls-group class=\"video-controls-row\">\n<media-controls-group class=\"video-controls-group video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-edu67hQA-0-6-trigger\">\n<media-icon family=\"scaffold\" name=\"restart\" class=\"media-button-icon-base media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"play\" class=\"media-button-icon-base media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pause\" class=\"media-button-icon-base media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-live-button class=\"media-button media-live-button\">\n<div aria-hidden=\"true\" class=\"media-live-button-dot\">\n</div>\n<media-text token=\"live.badge\">Live</media-text>\n</media-live-button>\n<media-mute-button commandfor=\"vjs-jYkpFTzU-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-edu67hQA-0-7-trigger\">\n<media-icon family=\"scaffold\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-7-trigger\" delay=\"0\" disabled side=\"top\" sticky class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-volume-popover open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-popup media-popup-safe-area media-volume-popover-popup\" id=\"vjs-jYkpFTzU-0-popup\">\n<media-volume-slider class=\"media-volume-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n<media-slider-track class=\"media-volume-slider-track\">\n<media-slider-fill class=\"media-volume-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<media-controls-group class=\"video-controls-group\">\n<media-captions-button commandfor=\"vjs-SDLjnoCt-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-edu67hQA-0-8-trigger\">\n<media-icon family=\"scaffold\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-edu67hQA-0-8-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-tooltip-popup\">\n<media-tooltip-label>\n</media-tooltip-label>\n<media-tooltip-shortcut class=\"media-tooltip-shortcut\">\n</media-tooltip-shortcut>\n</media-tooltip>\n<media-menu side=\"top\" align=\"center\" class=\"media-popup media-popup-safe-area media-menu-popup\" id=\"vjs-SDLjnoCt-0-popup\">\n<media-menu-content class=\"media-menu-content\">\n<media-captions-radio-group class=\"media-menu-radio-group\">\n<template>\n<media-menu-radio-item class=\"media-menu-radio-item\">\n<span data-part=\"label\">\n</span>\n<span data-part=\"badge\" class=\"media-menu-badge\">\n</span>\n<media-menu-item-indicator force-mount class=\"media-menu-indicator\">\n<media-icon family=\"scaffold\" name=\"check\" class=\"media-menu-radio-icon\">\n</media-icon>\n</media-menu-item-indicator>\n</media-menu-radio-item>\n</template>\n</media-captions-radio-group>\n</media-menu-content>\n</media-menu>\n</media-controls-group>\n</media-controls-group>\n</div>\n</media-tooltip-group>\n</media-controls-content>\n</media-controls>\n<media-hotkey keys=\"Space\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"k\" action=\"togglePaused\">\n</media-hotkey>\n<media-hotkey keys=\"m\" action=\"toggleMuted\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowUp\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"ArrowDown\" action=\"volumeStep\">\n</media-hotkey>\n<media-hotkey keys=\"f\" action=\"toggleFullscreen\">\n</media-hotkey>\n<media-hotkey keys=\"c\" action=\"toggleSubtitles\">\n</media-hotkey>\n<media-hotkey keys=\"i\" action=\"togglePictureInPicture\">\n</media-hotkey>\n<media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\">\n</media-gesture>\n<media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\">\n</media-gesture>\n<media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\">\n</media-gesture>\n<media-status-announcer class=\"media-status-announcer\">\n</media-status-announcer>\n<div aria-hidden=\"true\" class=\"media-indicator-group\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-volume-indicator-fill\">\n<media-icon family=\"scaffold\" name=\"volume-high\" class=\"media-volume-indicator-icon media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"volume-low\" class=\"media-volume-indicator-icon media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"volume-off\" class=\"media-volume-indicator-icon media-volume-indicator-off-icon\">\n</media-icon>\n<media-volume-indicator-value class=\"media-volume-indicator-value\">\n</media-volume-indicator-value>\n</media-volume-indicator-fill>\n</media-volume-indicator>\n<media-status-indicator actions=\"toggleSubtitles,toggleFullscreen,togglePictureInPicture\" class=\"media-indicator media-status-indicator\">\n<media-icon family=\"scaffold\" name=\"captions-on\" class=\"media-status-indicator-icon media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"captions-off\" class=\"media-status-indicator-icon media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"fullscreen-enter\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"fullscreen-exit\" class=\"media-status-indicator-icon media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pip-enter\" class=\"media-status-indicator-icon media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"scaffold\" name=\"pip-exit\" class=\"media-status-indicator-icon media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value>\n</media-status-indicator-value>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA6OT"}