@videojs/html 10.3.0 → 10.4.0

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

@@ -29,29 +29,29 @@
   }
 
   .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: color-mix(in oklab, var(--media-foreground) 65%, transparent);
-    --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(125%);
     --media-backdrop-filter-indicator: blur(8px);
@@ -60,8 +60,8 @@
     --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;
@@ -98,16 +98,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))));
     }
   }
 
@@ -157,24 +172,48 @@
     --media-frame-border: var(--media-border-color, #0000001a);
     --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
     --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
-    --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-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)) {
@@ -206,23 +245,7 @@
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
     --media-controls-gradient-height: 40%;
-    --media-controls-bottom-gradient-height: 40%;
-    --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);
+    --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);
   }
@@ -320,7 +343,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;
@@ -328,6 +351,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);
@@ -753,11 +782,12 @@
     isolation: isolate;
     z-index: 20;
     transform-origin: top;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     padding-inline: calc(var(--media-spacing) * 4);
     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);
     transition-property: filter, opacity, translate;
     transition-duration: .15s;
@@ -767,6 +797,7 @@
     transition-timing-function: cubic-bezier(0, 0, .2, 1);
     position: absolute;
     inset: 0;
+    overflow: hidden;
   }
 
   :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible]) {
@@ -791,6 +822,12 @@
     }
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="neutral"]) .media-title {
+      display: none;
+    }
+  }
+
   @container media-root (width >= 28rem) {
     :where(.media-skin[data-theme="neutral"]) .media-title {
       padding-inline: calc(var(--media-spacing) * 6);
@@ -950,6 +987,12 @@
     transition-timing-function: cubic-bezier(.4, 0, 1, 1);
   }
 
+  @container media-root (width < 10rem) {
+    :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator {
+      display: none !important;
+    }
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator:is([data-starting-style], [data-ending-style]) {
     scale: var(--media-hidden-playback-scale) var(--media-hidden-playback-scale);
     opacity: 0;
@@ -1566,8 +1609,15 @@
     color: inherit;
   }
 
+  :where(.media-skin[data-theme="neutral"]) .media-menu-badge {
+    border-radius: var(--media-control-radius);
+    background-color: var(--media-accent);
+    padding-inline: calc(var(--media-spacing) * 1.5);
+    font-size: .7em;
+    font-weight: 600;
+  }
+
   :where(.media-skin[data-theme="neutral"]) .media-menu-content {
-    max-height: inherit;
     overscroll-behavior: none;
     transition-property: translate, filter;
     transition-duration: .15s;
@@ -1589,6 +1639,8 @@
   :where(.media-skin[data-theme="neutral"]) .media-menu-content:not([data-submenu]) {
     inset-inline: var(--media-spacing);
     top: var(--media-spacing);
+    max-height: calc(min(var(--media-menu-available-height, calc(var(--media-spacing) * 56)), calc(var(--media-spacing) * 56)) -
+        (calc(var(--media-spacing) * 2)));
     gap: calc(var(--media-spacing) * .5);
     flex-direction: column;
     display: flex;
@@ -1683,7 +1735,6 @@
   }
 
   :where(.media-skin[data-theme="neutral"]) .media-menu-radio-group {
-    max-height: inherit;
     gap: calc(var(--media-spacing) * .5);
     anchor-scope: --media-menu-item-highlight-anchor;
     flex-direction: column;
@@ -2033,10 +2084,135 @@
     inset: 0;
   }
 
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-backdrop:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-backdrop:not([data-visible]) {
     opacity: 0;
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-backdrop:not([data-started]) {
+      opacity: 0;
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center {
+    pointer-events: none;
+    z-index: 30;
+    align-items: center;
+    gap: calc(var(--media-spacing) * 6);
+    transition-property: filter, opacity, scale;
+    transition-duration: .15s;
+    transition-duration: calc(var(--media-duration-controls) / 2);
+    transition-timing-function: cubic-bezier(0, 0, .2, 1);
+    display: flex;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center:not([data-visible]) {
+    scale: var(--media-hidden-scale) var(--media-hidden-scale);
+    opacity: 0;
+    transition-duration: var(--media-duration-controls);
+  }
+
+  :where(:where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-buffering)[data-visible] .video-controls-center {
+    display: none;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    flex-direction: row-reverse;
+  }
+
+  @media (pointer: fine) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center:not([data-visible]) {
+      filter: blur(var(--media-hidden-blur));
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-buffering {
+    display: contents;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-button {
+    pointer-events: auto;
+    color: var(--media-controls-foreground) !important;
+  }
+
+  :where(:where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center):not([data-visible]) .video-controls-center-button {
+    pointer-events: none;
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+    width: calc(var(--media-spacing) * 14.5) !important;
+    height: calc(var(--media-spacing) * 14.5) !important;
+    background-color: var(--media-backdrop) !important;
+    corner-shape: round !important;
+    border-radius: 50% !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+      background-color: color-mix(in oklab, var(--media-backdrop) 40%, transparent) !important;
+    }
+  }
+
+  @media (hover: hover) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:hover {
+      background-color: var(--media-backdrop) !important;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:hover {
+        background-color: color-mix(in oklab, var(--media-backdrop) 60%, transparent) !important;
+      }
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:focus-visible {
+    background-color: var(--media-backdrop) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play:focus-visible {
+      background-color: color-mix(in oklab, var(--media-backdrop) 60%, transparent) !important;
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play[data-started]:not(:focus-visible) {
+    pointer-events: var(--media-center-play-started-pointer-events, none) !important;
+    opacity: var(--media-center-play-started-opacity, 0) !important;
+  }
+
+  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+      background-color: var(--media-background) !important;
+    }
+  }
+
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 10) !important;
+      height: calc(var(--media-spacing) * 10) !important;
+    }
+  }
+
+  :where(.media-skin[data-theme="neutral"][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="neutral"][data-preset="live-video"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5) !important;
+      height: calc(var(--media-spacing) * 5) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content {
     inset-inline: calc(var(--media-spacing) * .5);
     bottom: calc(var(--media-spacing) * .5);
@@ -2056,6 +2232,10 @@
     position: absolute;
   }
 
+  :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content:not([data-visible]) {
     pointer-events: none;
     translate: 0 var(--media-hidden-offset);
@@ -2088,6 +2268,12 @@
     }
   }
 
+  @container not style(--media-controls-before-start: visible) {
+    :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-content:not([data-started]) {
+      opacity: 0;
+    }
+  }
+
   :where(.media-skin[data-theme="neutral"][data-preset="live-video"]) .video-controls-spacer {
     flex: 1;
   }

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

@@ -32,6 +32,18 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-title class="media-title">
 </media-title>
 <media-controls>
+<media-buffering-indicator class="video-controls-center-buffering">
+<media-controls-group class="video-controls-center">
+<media-play-button class="media-button media-play-button video-controls-center-button video-controls-center-play">
+<media-icon family="neutral" name="restart" class="media-button-icon media-play-button-restart-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="neutral" name="play" class="media-button-icon media-play-button-play-icon video-controls-center-play-icon">
+</media-icon>
+<media-icon family="neutral" name="pause" class="media-button-icon media-play-button-pause-icon video-controls-center-play-icon">
+</media-icon>
+</media-play-button>
+</media-controls-group>
+</media-buffering-indicator>
 <media-controls-backdrop class="video-controls-backdrop">
 </media-controls-backdrop>
 <media-controls-content class="video-controls video-controls-content">
@@ -100,6 +112,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-item-indicator">
 <media-icon family="neutral" name="check" class="media-menu-radio-item-icon">
 </media-icon>

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-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 video-skin\" data-theme=\"neutral\" 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-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\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</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-jbUkCTd_-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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</media-live-button>\n<media-mute-button commandfor=\"vjs-MF4qw3hR-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-jbUkCTd_-0-2-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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=\"right\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-MF4qw3hR-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<div aria-hidden=\"true\" class=\"video-controls-spacer\">\n</div>\n<media-controls-group class=\"video-controls-end\">\n<media-captions-button commandfor=\"vjs-j3vmcnxZ-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-jbUkCTd_-0-3-trigger\">\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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\" boundary=\"viewport\" class=\"media-popup media-popup-surface media-menu-popup\" id=\"vjs-j3vmcnxZ-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-item-indicator\">\n<media-icon family=\"neutral\" name=\"check\" class=\"media-menu-radio-item-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-cast-button class=\"media-button media-cast-button\" id=\"vjs-jbUkCTd_-0-4-trigger\">\n<media-icon family=\"neutral\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-jbUkCTd_-0-5-trigger\">\n<media-icon family=\"neutral\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-jbUkCTd_-0-6-trigger\">\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-jbUkCTd_-0-7-trigger\">\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-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 class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"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<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon family=\"neutral\" name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA8NT"}
+{"version":3,"file":"template.js","names":[],"sources":["../../../../../src/internal/skins/neutral-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 video-skin\" data-theme=\"neutral\" 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-buffering-indicator class=\"media-buffering-indicator\">\n<media-icon family=\"neutral\" name=\"spinner\" class=\"media-buffering-indicator-spinner-icon\">\n</media-icon>\n</media-buffering-indicator>\n<media-error-dialog class=\"media-dialog-root\">\n<media-dialog-backdrop class=\"media-dialog-backdrop\">\n</media-dialog-backdrop>\n<media-dialog-popup class=\"media-dialog-popup\">\n<div class=\"media-dialog-content\">\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</div>\n<div class=\"media-dialog-actions\">\n<media-dialog-close class=\"media-button media-dialog-close\">\n</media-dialog-close>\n</div>\n</media-dialog-popup>\n</media-error-dialog>\n<media-title class=\"media-title\">\n</media-title>\n<media-controls>\n<media-buffering-indicator class=\"video-controls-center-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\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon video-controls-center-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon video-controls-center-play-icon\">\n</media-icon>\n</media-play-button>\n</media-controls-group>\n</media-buffering-indicator>\n<media-controls-backdrop class=\"video-controls-backdrop\">\n</media-controls-backdrop>\n<media-controls-content class=\"video-controls video-controls-content\">\n<media-tooltip-group>\n<media-controls-group class=\"video-controls-start\">\n<media-play-button class=\"media-button media-play-button\" id=\"vjs-jbUkCTd_-0-trigger\">\n<media-icon family=\"neutral\" name=\"restart\" class=\"media-button-icon media-play-button-restart-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"play\" class=\"media-button-icon media-play-button-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-button-icon media-play-button-pause-icon\">\n</media-icon>\n</media-play-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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</media-live-button>\n<media-mute-button commandfor=\"vjs-MF4qw3hR-0-popup\" class=\"media-button media-mute-button\" id=\"vjs-jbUkCTd_-0-2-trigger\">\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"media-button-icon media-mute-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-button-icon media-mute-button-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-button-icon media-mute-button-high-icon\">\n</media-icon>\n</media-mute-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-2-trigger\" delay=\"0\" sticky side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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=\"right\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-volume-popover\" id=\"vjs-MF4qw3hR-0-popup\">\n<media-volume-slider class=\"media-slider media-volume-slider\" thumb-alignment=\"edge\" orientation=\"horizontal\">\n<media-slider-track class=\"media-slider-track\">\n<media-slider-fill class=\"media-slider-fill\">\n</media-slider-fill>\n</media-slider-track>\n<media-slider-thumb class=\"media-slider-thumb media-volume-slider-thumb\">\n</media-slider-thumb>\n</media-volume-slider>\n</media-volume-popover>\n</media-controls-group>\n<div aria-hidden=\"true\" class=\"video-controls-spacer\">\n</div>\n<media-controls-group class=\"video-controls-end\">\n<media-captions-button commandfor=\"vjs-j3vmcnxZ-0-popup\" class=\"media-button media-captions-button\" id=\"vjs-jbUkCTd_-0-3-trigger\">\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-button-icon media-captions-button-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-button-icon media-captions-button-on-icon\">\n</media-icon>\n</media-captions-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-3-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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\" boundary=\"viewport\" class=\"media-popup media-popup-surface media-menu-popup\" id=\"vjs-j3vmcnxZ-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-item-indicator\">\n<media-icon family=\"neutral\" name=\"check\" class=\"media-menu-radio-item-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-cast-button class=\"media-button media-cast-button\" id=\"vjs-jbUkCTd_-0-4-trigger\">\n<media-icon family=\"neutral\" name=\"cast-enter\" class=\"media-button-icon media-cast-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"cast-exit\" class=\"media-button-icon media-cast-button-exit-icon\">\n</media-icon>\n</media-cast-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-4-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-airplay-button class=\"media-button media-airplay-button\" id=\"vjs-jbUkCTd_-0-5-trigger\">\n<media-icon family=\"neutral\" name=\"airplay-enter\" class=\"media-button-icon media-airplay-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"airplay-exit\" class=\"media-button-icon media-airplay-button-exit-icon\">\n</media-icon>\n</media-airplay-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-5-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-jbUkCTd_-0-6-trigger\">\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-button-icon media-pip-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-button-icon media-pip-button-exit-icon\">\n</media-icon>\n</media-pip-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-6-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-jbUkCTd_-0-7-trigger\">\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-button-icon media-fullscreen-button-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-button-icon media-fullscreen-button-exit-icon\">\n</media-icon>\n</media-fullscreen-button>\n<media-tooltip trigger=\"vjs-jbUkCTd_-0-7-trigger\" side=\"top\" class=\"media-popup media-popup-safe-area media-popup-transition media-popup-surface media-tooltip\">\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-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 class=\"video-status-indicators\">\n<media-volume-indicator class=\"media-indicator media-volume-indicator\">\n<media-volume-indicator-fill class=\"media-indicator-content media-volume-indicator-fill\">\n<media-icon family=\"neutral\" name=\"volume-high\" class=\"media-volume-indicator-high-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-low\" class=\"media-volume-indicator-low-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"volume-off\" class=\"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<div class=\"media-indicator-content media-status-indicator-content\">\n<media-icon family=\"neutral\" name=\"captions-on\" class=\"media-status-indicator-captions-on-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"captions-off\" class=\"media-status-indicator-captions-off-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-enter\" class=\"media-status-indicator-fullscreen-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"fullscreen-exit\" class=\"media-status-indicator-fullscreen-exit-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-enter\" class=\"media-status-indicator-pip-enter-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pip-exit\" class=\"media-status-indicator-pip-exit-icon\">\n</media-icon>\n<media-status-indicator-value class=\"media-status-indicator-value\">\n</media-status-indicator-value>\n</div>\n</media-status-indicator>\n<media-status-indicator actions=\"togglePaused\" class=\"media-playback-status-indicator\">\n<media-icon family=\"neutral\" name=\"play\" class=\"media-playback-status-indicator-play-icon\">\n</media-icon>\n<media-icon family=\"neutral\" name=\"pause\" class=\"media-playback-status-indicator-pause-icon\">\n</media-icon>\n</media-status-indicator>\n</div>\n</media-container>`);\n"],"mappings":";;;AAGA,MAAa,WACX,eAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA4OT"}

package/dist/dev/internal/skins/neutral-video/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","names":["airPlayEnterIconNeutral","airPlayExitIconNeutral","captionsOffIconNeutral","captionsOnIconNeutral","castEnterIconNeutral","castExitIconNeutral","checkIconNeutral","chevronIconNeutral","fullscreenEnterIconNeutral","fullscreenExitIconNeutral","gearIconNeutral","pauseIconNeutral","pipEnterIconNeutral","pipExitIconNeutral","playIconNeutral","restartIconNeutral","speechIconNeutral","speedIconNeutral","spinnerIconNeutral","switchesIconNeutral","volumeHighIconNeutral","volumeLowIconNeutral","volumeOffIconNeutral"],"sources":["../../../../../src/internal/skins/neutral-video/register.ts"],"sourcesContent":["import '../../../define/i18n';\nimport '../../../define/ui/container';\nimport '../../../define/ui/poster';\nimport '../../../define/ui/buffering-indicator';\nimport '../../../define/ui/error-dialog';\nimport '../../../define/ui/dialog-backdrop';\nimport '../../../define/ui/dialog-popup';\nimport '../../../define/ui/dialog-title';\nimport '../../../define/ui/dialog-description';\nimport '../../../define/ui/dialog-close';\nimport '../../../define/ui/title';\nimport '../../../define/ui/controls';\nimport '../../../define/ui/controls-backdrop';\nimport '../../../define/ui/controls-content';\nimport '../../../define/ui/tooltip-group';\nimport '../../../define/ui/controls-group';\nimport '../../../define/ui/play-button';\nimport '../../../define/ui/tooltip';\nimport '../../../define/ui/tooltip-label';\nimport '../../../define/ui/tooltip-shortcut';\nimport '../../../define/ui/mute-button';\nimport '../../../define/ui/volume-popover';\nimport '../../../define/ui/volume-slider';\nimport '../../../define/ui/slider-track';\nimport '../../../define/ui/slider-fill';\nimport '../../../define/ui/slider-thumb';\nimport '../../../define/ui/time-group';\nimport '../../../define/ui/time';\nimport '../../../define/ui/time-separator';\nimport '../../../define/ui/time-slider';\nimport '../../../define/ui/time-slider-chapters';\nimport '../../../define/ui/slider-buffer';\nimport '../../../define/ui/slider-preview';\nimport '../../../define/ui/slider-thumbnail';\nimport '../../../define/ui/time-slider-chapter-title';\nimport '../../../define/ui/slider-value';\nimport '../../../define/ui/captions-button';\nimport '../../../define/ui/menu';\nimport '../../../define/ui/menu-content';\nimport '../../../define/ui/menu-item';\nimport '../../../define/ui/menu-separator';\nimport '../../../define/ui/quality-radio-group';\nimport '../../../define/ui/menu-radio-item';\nimport '../../../define/ui/menu-item-indicator';\nimport '../../../define/ui/audio-track-radio-group';\nimport '../../../define/ui/playback-rate-radio-group';\nimport '../../../define/ui/captions-radio-group';\nimport '../../../define/ui/cast-button';\nimport '../../../define/ui/airplay-button';\nimport '../../../define/ui/pip-button';\nimport '../../../define/ui/fullscreen-button';\nimport '../../../define/ui/hotkey';\nimport '../../../define/ui/gesture';\nimport '../../../define/ui/status-announcer';\nimport '../../../define/ui/volume-indicator';\nimport '../../../define/ui/volume-indicator-fill';\nimport '../../../define/ui/volume-indicator-value';\nimport '../../../define/ui/status-indicator';\nimport '../../../define/ui/status-indicator-value';\nimport '../../../define/ui/seek-indicator';\nimport '../../../define/ui/seek-indicator-value';\nimport { registerIcons } from '../../../icons';\nimport {\n  airPlayEnterIcon as airPlayEnterIconNeutral,\n  airPlayExitIcon as airPlayExitIconNeutral,\n  captionsOffIcon as captionsOffIconNeutral,\n  captionsOnIcon as captionsOnIconNeutral,\n  castEnterIcon as castEnterIconNeutral,\n  castExitIcon as castExitIconNeutral,\n  checkIcon as checkIconNeutral,\n  chevronIcon as chevronIconNeutral,\n  fullscreenEnterIcon as fullscreenEnterIconNeutral,\n  fullscreenExitIcon as fullscreenExitIconNeutral,\n  gearIcon as gearIconNeutral,\n  pauseIcon as pauseIconNeutral,\n  pipEnterIcon as pipEnterIconNeutral,\n  pipExitIcon as pipExitIconNeutral,\n  playIcon as playIconNeutral,\n  restartIcon as restartIconNeutral,\n  speechIcon as speechIconNeutral,\n  speedIcon as speedIconNeutral,\n  spinnerIcon as spinnerIconNeutral,\n  switchesIcon as switchesIconNeutral,\n  volumeHighIcon as volumeHighIconNeutral,\n  volumeLowIcon as volumeLowIconNeutral,\n  volumeOffIcon as volumeOffIconNeutral,\n} from '../../../icons/neutral';\n\nregisterIcons('neutral', {\n  'airplay-enter': airPlayEnterIconNeutral,\n  'airplay-exit': airPlayExitIconNeutral,\n  'captions-off': captionsOffIconNeutral,\n  'captions-on': captionsOnIconNeutral,\n  'cast-enter': castEnterIconNeutral,\n  'cast-exit': castExitIconNeutral,\n  check: checkIconNeutral,\n  chevron: chevronIconNeutral,\n  'fullscreen-enter': fullscreenEnterIconNeutral,\n  'fullscreen-exit': fullscreenExitIconNeutral,\n  gear: gearIconNeutral,\n  pause: pauseIconNeutral,\n  'pip-enter': pipEnterIconNeutral,\n  'pip-exit': pipExitIconNeutral,\n  play: playIconNeutral,\n  restart: restartIconNeutral,\n  speech: speechIconNeutral,\n  speed: speedIconNeutral,\n  spinner: spinnerIconNeutral,\n  switches: switchesIconNeutral,\n  'volume-high': volumeHighIconNeutral,\n  'volume-low': volumeLowIconNeutral,\n  'volume-off': volumeOffIconNeutral,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,cAAc,WAAW;CACvB,iBAAiBA;CACjB,gBAAgBC;CAChB,gBAAgBC;CAChB,eAAeC;CACf,cAAcC;CACd,aAAaC;CACb,OAAOC;CACP,SAASC;CACT,oBAAoBC;CACpB,mBAAmBC;CACnB,MAAMC;CACN,OAAOC;CACP,aAAaC;CACb,YAAYC;CACZ,MAAMC;CACN,SAASC;CACT,QAAQC;CACR,OAAOC;CACP,SAASC;CACT,UAAUC;CACV,eAAeC;CACf,cAAcC;CACd,cAAcC;AAChB,CAAC"}
+{"version":3,"file":"register.js","names":["airPlayEnterIconNeutral","airPlayExitIconNeutral","captionsOffIconNeutral","captionsOnIconNeutral","castEnterIconNeutral","castExitIconNeutral","checkIconNeutral","chevronIconNeutral","fullscreenEnterIconNeutral","fullscreenExitIconNeutral","gearIconNeutral","pauseIconNeutral","pipEnterIconNeutral","pipExitIconNeutral","playIconNeutral","restartIconNeutral","speechIconNeutral","speedIconNeutral","spinnerIconNeutral","switchesIconNeutral","volumeHighIconNeutral","volumeLowIconNeutral","volumeOffIconNeutral"],"sources":["../../../../../src/internal/skins/neutral-video/register.ts"],"sourcesContent":["import '../../../define/i18n';\nimport '../../../define/ui/container';\nimport '../../../define/ui/poster';\nimport '../../../define/ui/buffering-indicator';\nimport '../../../define/ui/error-dialog';\nimport '../../../define/ui/dialog-backdrop';\nimport '../../../define/ui/dialog-popup';\nimport '../../../define/ui/dialog-title';\nimport '../../../define/ui/dialog-description';\nimport '../../../define/ui/dialog-close';\nimport '../../../define/ui/title';\nimport '../../../define/ui/controls';\nimport '../../../define/ui/controls-group';\nimport '../../../define/ui/play-button';\nimport '../../../define/ui/controls-backdrop';\nimport '../../../define/ui/controls-content';\nimport '../../../define/ui/tooltip-group';\nimport '../../../define/ui/tooltip';\nimport '../../../define/ui/tooltip-label';\nimport '../../../define/ui/tooltip-shortcut';\nimport '../../../define/ui/mute-button';\nimport '../../../define/ui/volume-popover';\nimport '../../../define/ui/volume-slider';\nimport '../../../define/ui/slider-track';\nimport '../../../define/ui/slider-fill';\nimport '../../../define/ui/slider-thumb';\nimport '../../../define/ui/time-group';\nimport '../../../define/ui/time';\nimport '../../../define/ui/time-separator';\nimport '../../../define/ui/time-slider';\nimport '../../../define/ui/time-slider-chapters';\nimport '../../../define/ui/slider-buffer';\nimport '../../../define/ui/slider-preview';\nimport '../../../define/ui/slider-thumbnail';\nimport '../../../define/ui/time-slider-chapter-title';\nimport '../../../define/ui/slider-value';\nimport '../../../define/ui/captions-button';\nimport '../../../define/ui/menu';\nimport '../../../define/ui/menu-content';\nimport '../../../define/ui/menu-item';\nimport '../../../define/ui/menu-separator';\nimport '../../../define/ui/quality-radio-group';\nimport '../../../define/ui/menu-radio-item';\nimport '../../../define/ui/menu-item-indicator';\nimport '../../../define/ui/audio-track-radio-group';\nimport '../../../define/ui/playback-rate-radio-group';\nimport '../../../define/ui/captions-radio-group';\nimport '../../../define/ui/cast-button';\nimport '../../../define/ui/airplay-button';\nimport '../../../define/ui/pip-button';\nimport '../../../define/ui/fullscreen-button';\nimport '../../../define/ui/hotkey';\nimport '../../../define/ui/gesture';\nimport '../../../define/ui/status-announcer';\nimport '../../../define/ui/volume-indicator';\nimport '../../../define/ui/volume-indicator-fill';\nimport '../../../define/ui/volume-indicator-value';\nimport '../../../define/ui/status-indicator';\nimport '../../../define/ui/status-indicator-value';\nimport '../../../define/ui/seek-indicator';\nimport '../../../define/ui/seek-indicator-value';\nimport { registerIcons } from '../../../icons';\nimport {\n  airPlayEnterIcon as airPlayEnterIconNeutral,\n  airPlayExitIcon as airPlayExitIconNeutral,\n  captionsOffIcon as captionsOffIconNeutral,\n  captionsOnIcon as captionsOnIconNeutral,\n  castEnterIcon as castEnterIconNeutral,\n  castExitIcon as castExitIconNeutral,\n  checkIcon as checkIconNeutral,\n  chevronIcon as chevronIconNeutral,\n  fullscreenEnterIcon as fullscreenEnterIconNeutral,\n  fullscreenExitIcon as fullscreenExitIconNeutral,\n  gearIcon as gearIconNeutral,\n  pauseIcon as pauseIconNeutral,\n  pipEnterIcon as pipEnterIconNeutral,\n  pipExitIcon as pipExitIconNeutral,\n  playIcon as playIconNeutral,\n  restartIcon as restartIconNeutral,\n  speechIcon as speechIconNeutral,\n  speedIcon as speedIconNeutral,\n  spinnerIcon as spinnerIconNeutral,\n  switchesIcon as switchesIconNeutral,\n  volumeHighIcon as volumeHighIconNeutral,\n  volumeLowIcon as volumeLowIconNeutral,\n  volumeOffIcon as volumeOffIconNeutral,\n} from '../../../icons/neutral';\n\nregisterIcons('neutral', {\n  'airplay-enter': airPlayEnterIconNeutral,\n  'airplay-exit': airPlayExitIconNeutral,\n  'captions-off': captionsOffIconNeutral,\n  'captions-on': captionsOnIconNeutral,\n  'cast-enter': castEnterIconNeutral,\n  'cast-exit': castExitIconNeutral,\n  check: checkIconNeutral,\n  chevron: chevronIconNeutral,\n  'fullscreen-enter': fullscreenEnterIconNeutral,\n  'fullscreen-exit': fullscreenExitIconNeutral,\n  gear: gearIconNeutral,\n  pause: pauseIconNeutral,\n  'pip-enter': pipEnterIconNeutral,\n  'pip-exit': pipExitIconNeutral,\n  play: playIconNeutral,\n  restart: restartIconNeutral,\n  speech: speechIconNeutral,\n  speed: speedIconNeutral,\n  spinner: spinnerIconNeutral,\n  switches: switchesIconNeutral,\n  'volume-high': volumeHighIconNeutral,\n  'volume-low': volumeLowIconNeutral,\n  'volume-off': volumeOffIconNeutral,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,cAAc,WAAW;CACvB,iBAAiBA;CACjB,gBAAgBC;CAChB,gBAAgBC;CAChB,eAAeC;CACf,cAAcC;CACd,aAAaC;CACb,OAAOC;CACP,SAASC;CACT,oBAAoBC;CACpB,mBAAmBC;CACnB,MAAMC;CACN,OAAOC;CACP,aAAaC;CACb,YAAYC;CACZ,MAAMC;CACN,SAASC;CACT,QAAQC;CACR,OAAOC;CACP,SAASC;CACT,UAAUC;CACV,eAAeC;CACf,cAAcC;CACd,cAAcC;AAChB,CAAC"}