@mux/mux-player 1.11.4 → 1.12.0

package/dist/themes/classic/index.mjs

@@ -0,0 +1,1718 @@
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+
+// src/themes/classic/classic.html
+var classic_default = `<!-- prettier-ignore -->
+<template id="media-theme-classic">
+  <style>
+    :host {
+      --_primary-color: var(--media-primary-color, white);
+      --_secondary-color: var(--media-secondary-color, rgb(0 0 0 / .75));
+
+      --media-icon-color: var(--_primary-color);
+      --media-range-thumb-background: var(--_primary-color);
+      --media-range-bar-color: var(--_primary-color);
+      --media-control-background: var(--_secondary-color);
+      --media-control-hover-background: var(--_secondary-color);
+      --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
+      --media-range-track-background:
+        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
+        linear-gradient(rgba(20, 20, 30, 0.7), rgba(20, 20, 30, 0.7));
+      --media-preview-thumbnail-border: 0;
+      --media-preview-thumbnail-border-radius: 2px 2px 0 0;
+      --media-preview-time-border-radius: 0 0 2px 2px;
+      --media-preview-time-margin: 0 0 8px;
+      --media-preview-time-text-shadow: none;
+      --media-listbox-border-radius: 2px;
+      --media-listbox-transform-in: translateY(-8px) scale(1);
+      --media-listbox-transform-out: translateY(-6px) scale(.99);
+      --media-option-hover-background: rgba(255, 255, 255, 0.28);
+
+      color: var(--_primary-color);
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host([audio]) {
+      --media-preview-time-border-radius: 3px;
+      --media-preview-time-margin: 0 0 5px;
+      --media-preview-time-text-shadow: none;
+    }
+
+    :host([audio]) ::slotted([slot='media']) {
+      height: 0px;
+    }
+
+    :host([audio]) media-loading-indicator,
+    :host([audio]) ::slotted([slot=poster]) {
+      display: none;
+    }
+
+    :host([audio]) media-controller {
+      background: transparent;
+    }
+
+    :host([audio]) media-controller::part(vertical-layer) {
+      background: transparent;
+    }
+
+    :host([audio]) media-control-bar {
+      width: 100%;
+    }
+
+    [disabled]:not(media-live-button),
+    [aria-disabled='true']:not(media-live-button) {
+      opacity: 60%;
+      cursor: not-allowed;
+    }
+
+    media-controller:not([mediasubtitleslist]) media-captions-selectmenu {
+      --captions-selectmenu: none;
+    }
+
+    /* 0.433s is the transition duration for VTT Regions.
+     * Borrowed here, so the captions don't move too fast. */
+    media-controller ::slotted([slot='media']) {
+      --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
+    }
+    media-controller:is([mediapaused],:not([userinactive])) ::slotted([slot='media']) {
+      /* 42px is the height of the control bar and progress bar
+       * with an additional 5px as a buffer, to get 47px */
+      --media-webkit-text-track-transform: translateY(-47px);
+      --media-webkit-text-track-transition: transform 0.15s ease;
+    }
+
+    media-volume-range[mediavolumeunavailable] {
+      --volume-range: none;
+    }
+
+    media-airplay-button[mediaairplayunavailable] {
+      --airplay-button: none;
+    }
+
+    media-fullscreen-button[mediafullscreenunavailable] {
+      --fullscreen-button: none;
+    }
+
+    media-cast-button[mediacastunavailable] {
+      --cast-button: none;
+    }
+
+    media-pip-button[mediapipunavailable] {
+      --pip-button: none;
+    }
+
+    :host media-time-range {
+      color: var(--_primary-color);
+      --media-range-thumb-opacity: 0;
+    }
+
+    :host(:not([audio])) media-time-range {
+      --media-range-padding: 0;
+      background: transparent;
+      z-index: 10;
+      height: 10px;
+      bottom: -3px;
+      width: 100%;
+    }
+
+    media-control-bar {
+      --media-control-padding: 4px 3px;
+    }
+
+    [breakpointsm] media-control-bar {
+      --media-control-padding: 9px 5px;
+    }
+
+    [breakpointmd] media-control-bar {
+      --media-control-padding: 9px 7px;
+    }
+
+    media-control-bar :is([role='button'], [role='switch'], button) {
+      line-height: 0;
+    }
+
+    media-control-bar :is(media-text-display, media-time-display):first-child {
+      --media-control-padding: 9px 5px 9px 10px;
+    }
+
+    .spacer {
+      flex-grow: 1;
+      background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
+    }
+
+    /* Add a small space on the right to have the play button and
+     * fullscreen button aligned in relation to the progress bar. */
+    media-control-bar:not([slot])::after {
+      content: '';
+      width: 2px;
+      height: 100%;
+      background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
+    }
+
+    media-control-bar[slot='top-chrome'] {
+      min-height: 42px;
+      pointer-events: none;
+    }
+
+    :host([title]) media-control-bar[slot='top-chrome']::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      padding-bottom: min(160px, 25%);
+      background: linear-gradient(rgb(0 0 0 / 0.4), transparent);
+    }
+
+    media-control-bar[slot='top-chrome'] > * {
+      --media-control-background: transparent;
+      --media-control-hover-background: transparent;
+      position: relative;
+    }
+
+    media-controller::part(vertical-layer) {
+      transition: background-color 1s;
+    }
+
+    media-controller:is([mediapaused], :not([userinactive]))::part(vertical-layer) {
+      background-color: var(--controls-backdrop-color, var(--controls, transparent));
+      transition: background-color 0.25s;
+    }
+
+    .center-controls {
+      --media-button-icon-width: 100%;
+      --media-button-icon-height: auto;
+      pointer-events: none;
+      width: 100%;
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      justify-content: center;
+      filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
+      paint-order: stroke;
+      stroke: rgba(102, 102, 102, 1);
+      stroke-width: 0.3px;
+      text-shadow: 0 0 2px rgb(0 0 0 / 0.25), 0 0 6px rgb(0 0 0 / 0.25);
+    }
+
+    .center-controls media-play-button {
+      --media-control-background: transparent;
+      --media-control-hover-background: transparent;
+      padding: 0;
+      width: max(43px, min(10%, 55px));
+    }
+
+    .center-controls media-seek-backward-button,
+    .center-controls media-seek-forward-button {
+      --media-control-background: transparent;
+      --media-control-hover-background: transparent;
+      padding: 0;
+      margin: 0 2%;
+      width: max(33px, min(8%, 40px));
+    }
+
+    media-control-bar:not([slot]) media-seek-backward-button {
+      padding-right: 5px;
+    }
+
+    media-control-bar:not([slot]) media-seek-forward-button {
+      padding-left: 5px;
+    }
+
+    media-loading-indicator {
+      --media-loading-icon-width: 100%;
+      --media-button-icon-height: auto;
+      display: var(--media-control-display, var(--media-loading-indicator-display, flex));
+      pointer-events: none;
+      position: absolute;
+      width: min(15%, 150px);
+      flex-flow: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Intentionally don't target the div for transition but the children
+     of the div. Prevents messing with media-chrome's autohide feature. */
+    media-loading-indicator + div * {
+      transition: opacity 0.15s;
+      opacity: 1;
+    }
+
+    media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
+      opacity: 0;
+      transition-delay: 400ms;
+    }
+
+    media-volume-range {
+      width: min(100%, 100px);
+    }
+
+    media-time-display {
+      white-space: nowrap;
+    }
+
+    :is(media-time-display, media-text-display, media-playback-rate-button[role='button']) {
+      color: inherit;
+      line-height: 24px;
+    }
+
+    :is(.title-display, media-live-button) {
+      color: inherit;
+      font-size: 16px;
+      text-shadow: 0 0 2px rgb(0 0 0 / 0.6);
+    }
+
+    :host([audio]) .title-display {
+      flex-grow: 1;
+      font-size: 21px;
+    }
+  </style>
+
+  <template partial="TitleDisplay">
+    <template if="title">
+      <media-text-display part="top title display" class="title-display">
+        {{title}}
+      </media-text-display>
+    </template>
+  </template>
+
+  <template partial="PlayButton">
+    <media-play-button
+      part="{{section ?? 'bottom'}} play button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="play">
+        <path d="m6.73 20.93 14.05-8.54a.46.46 0 0 0 0-.78L6.73 3.07a.48.48 0 0 0-.73.39v17.07a.48.48 0 0 0 .73.4Z" />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="pause">
+        <path
+          d="M6 19.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v15ZM14.5 4a.5.5 0 0 0-.5.5v15a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5h-3Z"
+        />
+      </svg>
+    </media-play-button>
+  </template>
+
+  <template partial="SeekBackwardButton">
+    <media-seek-backward-button
+      seekoffset="{{backwardseekoffset}}"
+      part="{{section ?? 'bottom'}} seek-backward button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg aria-hidden="true" viewBox="0 0 22 24" slot="backward">
+        <path d="M11 6V3L5.37 7 11 10.94V8a5.54 5.54 0 0 1 1.9 10.48v2.12A7.5 7.5 0 0 0 11 6Z" />
+        <text class="value" transform="translate(2.5 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
+          {{backwardseekoffset}}
+        </text>
+      </svg>
+    </media-seek-backward-button>
+  </template>
+
+  <template partial="SeekForwardButton">
+    <media-seek-forward-button
+      seekoffset="{{forwardseekoffset}}"
+      part="{{section ?? 'bottom'}} seek-forward button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    >
+      <svg aria-hidden="true" viewBox="0 0 22 24" slot="forward">
+        <path d="M11 6V3l5.61 4L11 10.94V8a5.54 5.54 0 0 0-1.9 10.48v2.12A7.5 7.5 0 0 1 11 6Z" />
+        <text class="value" transform="translate(10 21)" style="font-size: 8px; font-family: 'ArialMT', 'Arial'">
+          {{forwardseekoffset}}
+        </text>
+      </svg>
+    </media-seek-forward-button>
+  </template>
+
+  <template partial="MuteButton">
+    <media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="high">
+        <path
+          d="m11.14 4.86-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.21a.5.5 0 0 0-.86-.35Zm2.74-1.56v1.52A7.52 7.52 0 0 1 19.47 12a7.52 7.52 0 0 1-5.59 7.18v1.52A9 9 0 0 0 21 12a9 9 0 0 0-7.12-8.7Zm3.56 8.7a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="low">
+        <path
+          d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="medium">
+        <path
+          d="m11.14 4.853-4 4a.49.49 0 0 1-.35.14H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.5.5 0 0 0 .85-.36V5.203a.5.5 0 0 0-.86-.35Zm6.3 7.14a5.49 5.49 0 0 0-3.56-5.1v1.66a3.93 3.93 0 0 1 0 6.88v1.66a5.49 5.49 0 0 0 3.56-5.1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="off">
+        <path
+          d="m3 4.05 4.48 4.47-.33.33a.49.49 0 0 1-.36.15H3.25a.25.25 0 0 0-.25.25v5.5a.25.25 0 0 0 .25.25h3.54a.49.49 0 0 1 .36.15l4 4a.48.48 0 0 0 .36.15.5.5 0 0 0 .5-.5v-5.75l4.67 4.66a7.71 7.71 0 0 1-2.79 1.47v1.52a9.32 9.32 0 0 0 3.87-1.91L20 21l1-1L4.06 3 3 4.05Zm5.36 5.36 2.39 2.39V17L8 14.26a1.74 1.74 0 0 0-1.24-.51H4.25v-3.5h2.54A1.74 1.74 0 0 0 8 9.74l.36-.33ZM19.47 12a7.19 7.19 0 0 1-.89 3.47l1.11 1.1A8.64 8.64 0 0 0 21 12a9 9 0 0 0-7.12-8.7v1.52A7.52 7.52 0 0 1 19.47 12ZM12 8.88V5.21a.5.5 0 0 0-.5-.5.48.48 0 0 0-.36.15L9.56 6.44 12 8.88ZM15.91 12a4.284 4.284 0 0 1-.07.72l1.22 1.22a5.2 5.2 0 0 0 .38-1.94 5.49 5.49 0 0 0-3.56-5.1v1.66A4 4 0 0 1 15.91 12Z"
+        />
+      </svg>
+    </media-mute-button>
+  </template>
+
+  <template partial="RenditionSelect">
+    <media-rendition-selectmenu part="bottom rendition selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <media-rendition-button slot="button" part="bottom rendition button">
+        <svg slot="icon" viewBox="0 0 18 24">
+          <path d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
+        </svg>
+      </media-rendition-button>
+      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+        <div slot="header">Quality</div>
+      </media-rendition-listbox>
+    </media-rendition-selectmenu>
+  </template>
+
+  <template partial="CaptionsSelect">
+    <media-captions-selectmenu part="bottom captions selectmenu" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <media-captions-button slot="button" part="bottom captions button">
+        <svg aria-hidden="true" viewBox="0 0 26 24" slot="on">
+          <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-3.62-.24-11.44-.24-15.06 0a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c3.62.24 11.44.24 15.06 0a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-11.41 10.1a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 4 4 0 0 1-1.28-.83 3.67 3.67 0 0 1-.84-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.53 3.53 0 0 1 .84-1.21 3.89 3.89 0 0 1 1.29-.8 4.76 4.76 0 0 1 1.63-.27 4.06 4.06 0 0 1 1.35.24c.225.091.44.205.64.34a2.7 2.7 0 0 1 .55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.35 2.35 0 0 0-.46.77 2.78 2.78 0 0 0-.16 1c-.009.34.046.68.16 1 .104.283.26.545.46.77.188.21.415.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.88 2.88 0 0 1-1.22 1.01Zm7.52 0a3.63 3.63 0 0 1-1.51.32 4.76 4.76 0 0 1-1.63-.27 3.89 3.89 0 0 1-1.28-.83 3.55 3.55 0 0 1-.85-1.26 4.23 4.23 0 0 1-.3-1.63 4.28 4.28 0 0 1 .3-1.64 3.43 3.43 0 0 1 .85-1.25 3.75 3.75 0 0 1 1.28-.8 4.76 4.76 0 0 1 1.63-.27 4 4 0 0 1 1.35.24c.225.091.44.205.64.34.21.144.395.32.55.52l-1.27 1a1.79 1.79 0 0 0-.6-.46 2 2 0 0 0-.83-.16 2 2 0 0 0-1.56.69 2.352 2.352 0 0 0-.46.77 3.01 3.01 0 0 0-.16 1c-.003.34.05.678.16 1 .108.282.263.542.46.77.188.21.416.38.67.5a2 2 0 0 0 .84.18 1.87 1.87 0 0 0 .9-.21 1.78 1.78 0 0 0 .65-.6l1.38 1a2.82 2.82 0 0 1-1.21 1.05Z"/>
+        </svg>
+        <svg aria-hidden="true" viewBox="0 0 26 24" slot="off">
+          <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
+        </svg>
+      </media-captions-button>
+      <media-captions-listbox slot="listbox" part="bottom captions listbox"></media-captions-listbox>
+    </media-captions-selectmenu>
+  </template>
+
+  <template partial="AirplayButton">
+    <media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="airplay">
+        <path
+          d="M13.19 14.22a.25.25 0 0 0-.38 0l-5.46 6.37a.25.25 0 0 0 .19.41h10.92a.25.25 0 0 0 .19-.41l-5.46-6.37Z"
+        />
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h2.94L8 16.75H4.25V4.25h17.5v12.5H18L19.06 18H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
+        />
+      </svg>
+    </media-airplay-button>
+  </template>
+
+  <template partial="CastButton">
+    <media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
+        <path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
+        <path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
+        <path d="M3 15.5V17c2.206 0 4 1.794 4 4h1.5A5.5 5.5 0 0 0 3 15.5Zm0 3V21h2.5A2.5 2.5 0 0 0 3 18.5Z" />
+        <path d="M3 12.5V14c3.86 0 7 3.14 7 7h1.5A8.5 8.5 0 0 0 3 12.5Z" />
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v6.984c.424 0 .84.035 1.25.086V4.25h17.5v15.5h-8.82c.051.41.086.826.086 1.25H22a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Z"
+        />
+        <path d="M20.5 5.5h-15v5.811c3.52.906 6.283 3.67 7.189 7.19H20.5V5.5Z" />
+      </svg>
+    </media-cast-button>
+  </template>
+
+  <template partial="PipButton">
+    <media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="enter">
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 26 24" slot="exit">
+        <path
+          d="M22 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h6.75v-1.25h-6.5V4.25h17.5v6.5H23V4a1 1 0 0 0-1-1Zm0 10h-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1Zm-.5 6.5h-7v-5h7v5Z"
+        />
+      </svg>
+    </media-pip-button>
+  </template>
+
+  <template partial="FullscreenButton">
+    <media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="enter">
+        <path
+          d="M20.25 14.5a.76.76 0 0 0-.75.75v4.25h-4.25a.75.75 0 1 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5a.76.76 0 0 0-.75-.75Zm0-11.5h-5a.76.76 0 0 0-.75.75.76.76 0 0 0 .75.75h4.25v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75ZM8.75 19.5H4.5v-4.25a.76.76 0 0 0-.75-.75.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75h5a.75.75 0 1 0 0-1.5Zm0-16.5h-5a.76.76 0 0 0-.75.75v5a.76.76 0 0 0 .75.75.76.76 0 0 0 .75-.75V4.5h4.25a.76.76 0 0 0 .75-.75.76.76 0 0 0-.75-.75Z"
+        />
+      </svg>
+      <svg aria-hidden="true" viewBox="0 0 24 24" slot="exit">
+        <path
+          d="M20.25 14.5h-5a.76.76 0 0 0-.75.75v5a.75.75 0 1 0 1.5 0V16h4.25a.75.75 0 1 0 0-1.5Zm-5-5h5a.75.75 0 1 0 0-1.5H16V3.75a.75.75 0 1 0-1.5 0v5a.76.76 0 0 0 .75.75Zm-6.5 5h-5a.75.75 0 1 0 0 1.5H8v4.25a.75.75 0 1 0 1.5 0v-5a.76.76 0 0 0-.75-.75Zm0-11.5a.76.76 0 0 0-.75.75V8H3.75a.75.75 0 0 0 0 1.5h5a.76.76 0 0 0 .75-.75v-5A.76.76 0 0 0 8.75 3Z"
+        />
+      </svg>
+    </media-fullscreen-button>
+  </template>
+
+  <template partial="LiveButton">
+    <media-live-button
+      part="{{section ?? 'top'}} live button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-live-button>
+  </template>
+
+  <template partial="PlaybackRateButton">
+    <media-playback-rate-button
+      rates="{{playbackrates}}"
+      part="bottom playback-rate button"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-playback-rate-button>
+  </template>
+
+  <template partial="VolumeRange">
+    <media-volume-range
+      part="bottom volume range"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-volume-range>
+  </template>
+
+  <template partial="TimeDisplay">
+    <media-time-display
+      remaining="{{defaultshowremainingtime}}"
+      showduration="{{!hideduration}}"
+      part="bottom time display"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-time-display>
+  </template>
+
+  <template partial="TimeRange">
+    <media-time-range
+      part="bottom time range"
+      disabled="{{disabled}}"
+      aria-disabled="{{disabled}}"
+    ></media-time-range>
+  </template>
+
+  <media-controller
+    part="controller"
+    defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
+    breakpoints="sm:300 md:700"
+    gesturesdisabled="{{disabled}}"
+    hotkeys="{{hotkeys}}"
+    nohotkeys="{{nohotkeys}}"
+    novolumepref="{{novolumepref}}"
+    audio="{{audio}}"
+    noautoseektolive="{{noautoseektolive}}"
+    defaultsubtitles="{{defaultsubtitles}}"
+    exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
+  >
+    <slot name="media" slot="media"></slot>
+    <slot name="poster" slot="poster"></slot>
+    <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
+
+    <template if="audio">
+
+      <template if="streamtype == 'on-demand'">
+        <template if="title">
+          <media-control-bar>{{>TitleDisplay}}</media-control-bar>
+        </template>
+        <media-control-bar>
+          {{>PlayButton}}
+          {{>SeekBackwardButton}}
+          {{>SeekForwardButton}}
+          {{>TimeDisplay}}
+          {{>TimeRange}}
+          {{>MuteButton}}
+          {{>VolumeRange}}
+          {{>PlaybackRateButton}}
+          {{>AirplayButton}}
+          {{>CastButton}}
+        </media-control-bar>
+      </template>
+
+      <template if="streamtype == 'live'">
+
+        <template if="targetlivewindow > 0">
+          <template if="title">
+            <media-control-bar>{{>TitleDisplay}}</media-control-bar>
+          </template>
+          <media-control-bar>
+            {{>PlayButton}}
+            {{>LiveButton section="bottom"}}
+            {{>SeekBackwardButton}}
+            {{>SeekForwardButton}}
+            {{>TimeDisplay}}
+            {{>TimeRange}}
+            {{>MuteButton}}
+            {{>VolumeRange}}
+            {{>PlaybackRateButton}}
+            {{>AirplayButton}}
+            {{>CastButton}}
+          </media-control-bar>
+        </template>
+
+        <template if="!targetlivewindow">
+          <template if="title">
+            <media-control-bar>{{>TitleDisplay}}</media-control-bar>
+          </template>
+          <media-control-bar>
+            {{>PlayButton}}
+            {{>LiveButton section="bottom"}}
+            {{>MuteButton}}
+            {{>VolumeRange}}
+            <div class="spacer"></div>
+            {{>AirplayButton}}
+            {{>CastButton}}
+          </media-control-bar>
+        </template>
+
+      </template>
+    </template>
+
+    <template if="!audio">
+
+      <template if="streamtype == 'on-demand'">
+
+        <template if="!breakpointsm">
+          {{>TimeRange}}
+          <media-control-bar>
+            {{>PlayButton}}
+            {{>MuteButton}}
+            <div class="spacer"></div>
+            {{>CaptionsSelect}}
+            {{>FullscreenButton}}
+          </media-control-bar>
+        </template>
+
+        <template if="breakpointsm">
+          <template if="!breakpointmd">
+            <media-control-bar slot="top-chrome">
+              {{>TitleDisplay}}
+            </media-control-bar>
+            <div slot="centered-chrome" class="center-controls">
+              {{>SeekBackwardButton section="center"}}
+              {{>PlayButton section="center"}}
+              {{>SeekForwardButton section="center"}}
+            </div>
+            {{>TimeRange}}
+            <media-control-bar>
+              {{>PlayButton}}
+              {{>TimeDisplay}}
+              {{>MuteButton}}
+              {{>VolumeRange}}
+              <div class="spacer"></div>
+              {{>RenditionSelect}}
+              {{>PlaybackRateButton}}
+              {{>CaptionsSelect}}
+              {{>AirplayButton}}
+              {{>CastButton}}
+              {{>PipButton}}
+              {{>FullscreenButton}}
+            </media-control-bar>
+          </template>
+        </template>
+
+        <template if="breakpointmd">
+          <media-control-bar slot="top-chrome">
+            {{>TitleDisplay}}
+          </media-control-bar>
+          <div slot="centered-chrome" class="center-controls">
+            {{>PlayButton section="center"}}
+          </div>
+          {{>TimeRange}}
+          <media-control-bar>
+            {{>PlayButton}}
+            {{>SeekBackwardButton}}
+            {{>SeekForwardButton}}
+            {{>TimeDisplay}}
+            {{>MuteButton}}
+            {{>VolumeRange}}
+            <div class="spacer"></div>
+            {{>RenditionSelect}}
+            {{>PlaybackRateButton}}
+            {{>CaptionsSelect}}
+            {{>AirplayButton}}
+            {{>CastButton}}
+            {{>PipButton}}
+            {{>FullscreenButton}}
+          </media-control-bar>
+        </template>
+
+      </template>
+
+      <template if="streamtype == 'live'">
+
+        <template if="!targetlivewindow">
+
+          <template if="!breakpointsm">
+            <media-control-bar slot="top-chrome">
+              {{>LiveButton}}
+            </media-control-bar>
+            <media-control-bar>
+              {{>PlayButton}}
+              {{>MuteButton}}
+              <div class="spacer"></div>
+              {{>CaptionsSelect}}
+              {{>FullscreenButton}}
+            </media-control-bar>
+          </template>
+
+          <template if="breakpointsm">
+            <template if="!breakpointmd">
+              <media-control-bar slot="top-chrome">
+                {{>LiveButton}}
+                {{>TitleDisplay}}
+              </media-control-bar>
+              <div slot="centered-chrome" class="center-controls">
+                {{>PlayButton section="center"}}
+              </div>
+              <media-control-bar>
+                {{>PlayButton}}
+                {{>MuteButton}}
+                {{>VolumeRange}}
+                <div class="spacer"></div>
+                {{>RenditionSelect}}
+                {{>CaptionsSelect}}
+                {{>AirplayButton}}
+                {{>CastButton}}
+                {{>PipButton}}
+                {{>FullscreenButton}}
+              </media-control-bar>
+            </template>
+          </template>
+
+          <template if="breakpointmd">
+            <media-control-bar slot="top-chrome">
+              {{>LiveButton}}
+              {{>TitleDisplay}}
+            </media-control-bar>
+            <div slot="centered-chrome" class="center-controls">
+              {{>PlayButton section="center"}}
+            </div>
+            <media-control-bar>
+              {{>PlayButton}}
+              {{>MuteButton}}
+              {{>VolumeRange}}
+              <div class="spacer"></div>
+              {{>RenditionSelect}}
+              {{>CaptionsSelect}}
+              {{>AirplayButton}}
+              {{>CastButton}}
+              {{>PipButton}}
+              {{>FullscreenButton}}
+            </media-control-bar>
+          </template>
+        </template>
+
+        <template if="targetlivewindow > 0">
+
+          <template if="!breakpointsm">
+            <media-control-bar slot="top-chrome">
+              {{>LiveButton}}
+            </media-control-bar>
+            {{>TimeRange}}
+            <media-control-bar>
+              {{>PlayButton}}
+              {{>MuteButton}}
+              <div class="spacer"></div>
+              {{>CaptionsSelect}}
+              {{>FullscreenButton}}
+            </media-control-bar>
+          </template>
+
+          <template if="breakpointsm">
+            <template if="!breakpointmd">
+              <media-control-bar slot="top-chrome">
+                {{>LiveButton}}
+                {{>TitleDisplay}}
+              </media-control-bar>
+              <div slot="centered-chrome" class="center-controls">
+                {{>SeekBackwardButton section="center"}}
+                {{>PlayButton section="center"}}
+                {{>SeekForwardButton section="center"}}
+              </div>
+              {{>TimeRange}}
+              <media-control-bar>
+                {{>PlayButton}}
+                {{>MuteButton}}
+                {{>VolumeRange}}
+                <div class="spacer"></div>
+                {{>RenditionSelect}}
+                {{>CaptionsSelect}}
+                {{>AirplayButton}}
+                {{>CastButton}}
+                {{>PipButton}}
+                {{>FullscreenButton}}
+              </media-control-bar>
+            </template>
+          </template>
+
+          <template if="breakpointmd">
+            <media-control-bar slot="top-chrome">
+              {{>LiveButton}}
+              {{>TitleDisplay}}
+            </media-control-bar>
+            <div slot="centered-chrome" class="center-controls">
+              {{>PlayButton section="center"}}
+            </div>
+            {{>TimeRange}}
+            <media-control-bar>
+              {{>PlayButton}}
+              {{>SeekBackwardButton}}
+              {{>SeekForwardButton}}
+              {{>MuteButton}}
+              {{>VolumeRange}}
+              <div class="spacer"></div>
+              {{>RenditionSelect}}
+              {{>CaptionsSelect}}
+              {{>AirplayButton}}
+              {{>CastButton}}
+              {{>PipButton}}
+              {{>FullscreenButton}}
+            </media-control-bar>
+          </template>
+
+        </template>
+
+      </template>
+
+    </template>
+
+    <slot></slot>
+
+  </media-controller>
+</template>
+`;
+
+// src/polyfills/index.ts
+var EventTarget = class {
+  addEventListener() {
+  }
+  removeEventListener() {
+  }
+  dispatchEvent(_event) {
+    return true;
+  }
+};
+if (typeof DocumentFragment === "undefined") {
+  class DocumentFragment3 extends EventTarget {
+  }
+  globalThis.DocumentFragment = DocumentFragment3;
+}
+var HTMLElement = class extends EventTarget {
+};
+var HTMLVideoElement = class extends EventTarget {
+};
+var customElements = {
+  get(_name) {
+    return void 0;
+  },
+  define(_name, _constructor, _options) {
+  },
+  upgrade(_root) {
+  },
+  whenDefined(_name) {
+    return Promise.resolve(HTMLElement);
+  }
+};
+var _detail;
+var CustomEvent = class {
+  constructor(typeArg, eventInitDict = {}) {
+    __privateAdd(this, _detail, void 0);
+    __privateSet(this, _detail, eventInitDict == null ? void 0 : eventInitDict.detail);
+  }
+  get detail() {
+    return __privateGet(this, _detail);
+  }
+  initCustomEvent() {
+  }
+};
+_detail = new WeakMap();
+function createElement(_tagName, _options) {
+  return new HTMLElement();
+}
+var globalThisShim = {
+  document: {
+    createElement
+  },
+  DocumentFragment,
+  customElements,
+  CustomEvent,
+  EventTarget,
+  HTMLElement,
+  HTMLVideoElement
+};
+var isServer = typeof window === "undefined" || typeof globalThis.customElements === "undefined";
+var internalGlobalThis = isServer ? globalThisShim : globalThis;
+var internalDocument = isServer ? globalThisShim.document : globalThis.document;
+
+// ../../node_modules/media-chrome/dist/utils/server-safe-globals.js
+var EventTarget2 = class {
+  addEventListener() {
+  }
+  removeEventListener() {
+  }
+  dispatchEvent() {
+    return true;
+  }
+};
+var ResizeObserver = class {
+  observe() {
+  }
+};
+var documentShim = {
+  createElement: function() {
+    return new globalThisShim2.HTMLElement();
+  },
+  addEventListener() {
+  },
+  removeEventListener() {
+  }
+};
+var globalThisShim2 = {
+  ResizeObserver,
+  document: documentShim,
+  HTMLElement: class HTMLElement2 extends EventTarget2 {
+  },
+  DocumentFragment: class DocumentFragment2 extends EventTarget2 {
+  },
+  customElements: {
+    get: function() {
+    },
+    define: function() {
+    },
+    whenDefined: function() {
+    }
+  },
+  CustomEvent: function CustomEvent2() {
+  },
+  getComputedStyle: function() {
+  }
+};
+var isServer2 = typeof window === "undefined" || typeof window.customElements === "undefined";
+var isShimmed = Object.keys(globalThisShim2).every((key) => key in globalThis);
+var GlobalThis = isServer2 && !isShimmed ? globalThisShim2 : globalThis;
+var Document = isServer2 && !isShimmed ? documentShim : globalThis.document;
+
+// ../../node_modules/media-chrome/dist/utils/template-parts.js
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck2 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet2 = (obj, member, getter) => {
+  __accessCheck2(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd2 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet2 = (obj, member, value, setter) => {
+  __accessCheck2(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _parts;
+var _processor;
+var _items;
+var _value;
+var _element;
+var _attributeName;
+var _namespaceURI;
+var _list;
+var list_get;
+var _parentNode;
+var _nodes;
+var ELEMENT = 1;
+var STRING = 0;
+var PART = 1;
+var defaultProcessor = {
+  processCallback(instance, parts, state) {
+    if (!state)
+      return;
+    for (const [expression, part] of parts) {
+      if (expression in state) {
+        const value = state[expression];
+        if (typeof value === "boolean" && part instanceof AttrPart && typeof part.element[part.attributeName] === "boolean") {
+          part.booleanValue = value;
+        } else if (typeof value === "function" && part instanceof AttrPart) {
+          part.element[part.attributeName] = value;
+        } else {
+          part.value = value;
+        }
+      }
+    }
+  }
+};
+var TemplateInstance = class extends GlobalThis.DocumentFragment {
+  constructor(template2, state, processor2 = defaultProcessor) {
+    var _a2;
+    super();
+    __privateAdd2(this, _parts, void 0);
+    __privateAdd2(this, _processor, void 0);
+    this.append(template2.content.cloneNode(true));
+    __privateSet2(this, _parts, parse(this));
+    __privateSet2(this, _processor, processor2);
+    (_a2 = processor2.createCallback) == null ? void 0 : _a2.call(processor2, this, __privateGet2(this, _parts), state);
+    processor2.processCallback(this, __privateGet2(this, _parts), state);
+  }
+  update(state) {
+    __privateGet2(this, _processor).processCallback(this, __privateGet2(this, _parts), state);
+  }
+};
+_parts = /* @__PURE__ */ new WeakMap();
+_processor = /* @__PURE__ */ new WeakMap();
+var parse = (element, parts = []) => {
+  let type, value;
+  for (let attr of element.attributes || []) {
+    if (attr.value.includes("{{")) {
+      const list = new AttrPartList();
+      for ([type, value] of tokenize(attr.value)) {
+        if (!type)
+          list.append(value);
+        else {
+          const part = new AttrPart(element, attr.name, attr.namespaceURI);
+          list.append(part);
+          parts.push([value, part]);
+        }
+      }
+      attr.value = list.toString();
+    }
+  }
+  for (let node of element.childNodes) {
+    if (node.nodeType === ELEMENT && !(node instanceof HTMLTemplateElement)) {
+      parse(node, parts);
+    } else {
+      if (node.nodeType === ELEMENT || node.data.includes("{{")) {
+        const items = [];
+        if (node.data) {
+          for ([type, value] of tokenize(node.data))
+            if (!type)
+              items.push(new Text(value));
+            else {
+              const part = new ChildNodePart(element);
+              items.push(part);
+              parts.push([value, part]);
+            }
+        } else if (node instanceof HTMLTemplateElement) {
+          const part = new InnerTemplatePart(element, node);
+          items.push(part);
+          parts.push([part.expression, part]);
+        }
+        node.replaceWith(
+          ...items.flatMap((part) => part.replacementNodes || [part])
+        );
+      }
+    }
+  }
+  return parts;
+};
+var mem = {};
+var tokenize = (text) => {
+  let value = "", open = 0, tokens = mem[text], i = 0, c;
+  if (tokens)
+    return tokens;
+  else
+    tokens = [];
+  for (; c = text[i]; i++) {
+    if (c === "{" && text[i + 1] === "{" && text[i - 1] !== "\\" && text[i + 2] && ++open == 1) {
+      if (value)
+        tokens.push([STRING, value]);
+      value = "";
+      i++;
+    } else if (c === "}" && text[i + 1] === "}" && text[i - 1] !== "\\" && !--open) {
+      tokens.push([PART, value.trim()]);
+      value = "";
+      i++;
+    } else
+      value += c || "";
+  }
+  if (value)
+    tokens.push([STRING, (open > 0 ? "{{" : "") + value]);
+  return mem[text] = tokens;
+};
+var FRAGMENT = 11;
+var Part = class {
+  get value() {
+    return "";
+  }
+  set value(val) {
+  }
+  toString() {
+    return this.value;
+  }
+};
+var attrPartToList = /* @__PURE__ */ new WeakMap();
+var AttrPartList = class {
+  constructor() {
+    __privateAdd2(this, _items, []);
+  }
+  [Symbol.iterator]() {
+    return __privateGet2(this, _items).values();
+  }
+  get length() {
+    return __privateGet2(this, _items).length;
+  }
+  item(index) {
+    return __privateGet2(this, _items)[index];
+  }
+  append(...items) {
+    for (const item of items) {
+      if (item instanceof AttrPart) {
+        attrPartToList.set(item, this);
+      }
+      __privateGet2(this, _items).push(item);
+    }
+  }
+  toString() {
+    return __privateGet2(this, _items).join("");
+  }
+};
+_items = /* @__PURE__ */ new WeakMap();
+var AttrPart = class extends Part {
+  constructor(element, attributeName, namespaceURI) {
+    super();
+    __privateAdd2(this, _list);
+    __privateAdd2(this, _value, "");
+    __privateAdd2(this, _element, void 0);
+    __privateAdd2(this, _attributeName, void 0);
+    __privateAdd2(this, _namespaceURI, void 0);
+    __privateSet2(this, _element, element);
+    __privateSet2(this, _attributeName, attributeName);
+    __privateSet2(this, _namespaceURI, namespaceURI);
+  }
+  get attributeName() {
+    return __privateGet2(this, _attributeName);
+  }
+  get attributeNamespace() {
+    return __privateGet2(this, _namespaceURI);
+  }
+  get element() {
+    return __privateGet2(this, _element);
+  }
+  get value() {
+    return __privateGet2(this, _value);
+  }
+  set value(newValue) {
+    if (__privateGet2(this, _value) === newValue)
+      return;
+    __privateSet2(this, _value, newValue);
+    if (!__privateGet2(this, _list, list_get) || __privateGet2(this, _list, list_get).length === 1) {
+      if (newValue == null) {
+        __privateGet2(this, _element).removeAttributeNS(
+          __privateGet2(this, _namespaceURI),
+          __privateGet2(this, _attributeName)
+        );
+      } else {
+        __privateGet2(this, _element).setAttributeNS(
+          __privateGet2(this, _namespaceURI),
+          __privateGet2(this, _attributeName),
+          newValue
+        );
+      }
+    } else {
+      __privateGet2(this, _element).setAttributeNS(
+        __privateGet2(this, _namespaceURI),
+        __privateGet2(this, _attributeName),
+        __privateGet2(this, _list, list_get)
+      );
+    }
+  }
+  get booleanValue() {
+    return __privateGet2(this, _element).hasAttributeNS(
+      __privateGet2(this, _namespaceURI),
+      __privateGet2(this, _attributeName)
+    );
+  }
+  set booleanValue(value) {
+    if (!__privateGet2(this, _list, list_get) || __privateGet2(this, _list, list_get).length === 1)
+      this.value = value ? "" : null;
+    else
+      throw new DOMException("Value is not fully templatized");
+  }
+};
+_value = /* @__PURE__ */ new WeakMap();
+_element = /* @__PURE__ */ new WeakMap();
+_attributeName = /* @__PURE__ */ new WeakMap();
+_namespaceURI = /* @__PURE__ */ new WeakMap();
+_list = /* @__PURE__ */ new WeakSet();
+list_get = function() {
+  return attrPartToList.get(this);
+};
+var ChildNodePart = class extends Part {
+  constructor(parentNode, nodes) {
+    super();
+    __privateAdd2(this, _parentNode, void 0);
+    __privateAdd2(this, _nodes, void 0);
+    __privateSet2(this, _parentNode, parentNode);
+    __privateSet2(this, _nodes, nodes ? [...nodes] : [new Text()]);
+  }
+  get replacementNodes() {
+    return __privateGet2(this, _nodes);
+  }
+  get parentNode() {
+    return __privateGet2(this, _parentNode);
+  }
+  get nextSibling() {
+    return __privateGet2(this, _nodes)[__privateGet2(this, _nodes).length - 1].nextSibling;
+  }
+  get previousSibling() {
+    return __privateGet2(this, _nodes)[0].previousSibling;
+  }
+  get value() {
+    return __privateGet2(this, _nodes).map((node) => node.textContent).join("");
+  }
+  set value(newValue) {
+    this.replace(newValue);
+  }
+  replace(...nodes) {
+    const normalisedNodes = nodes.flat().flatMap(
+      (node) => node == null ? [new Text()] : node.forEach ? [...node] : node.nodeType === FRAGMENT ? [...node.childNodes] : node.nodeType ? [node] : [new Text(node)]
+    );
+    if (!normalisedNodes.length)
+      normalisedNodes.push(new Text());
+    __privateSet2(this, _nodes, swapdom(
+      __privateGet2(this, _nodes)[0].parentNode,
+      __privateGet2(this, _nodes),
+      normalisedNodes,
+      this.nextSibling
+    ));
+  }
+};
+_parentNode = /* @__PURE__ */ new WeakMap();
+_nodes = /* @__PURE__ */ new WeakMap();
+var InnerTemplatePart = class extends ChildNodePart {
+  constructor(parentNode, template2) {
+    let directive = template2.getAttribute("directive") || template2.getAttribute("type");
+    let expression = template2.getAttribute("expression") || template2.getAttribute(directive) || "";
+    if (expression.startsWith("{{"))
+      expression = expression.trim().slice(2, -2).trim();
+    super(parentNode);
+    __publicField(this, "directive");
+    this.expression = expression;
+    this.template = template2;
+    this.directive = directive;
+  }
+};
+function swapdom(parent, a, b, end = null) {
+  let i = 0, cur, next, bi, n = b.length, m = a.length;
+  while (i < n && i < m && a[i] == b[i])
+    i++;
+  while (i < n && i < m && b[n - 1] == a[m - 1])
+    end = b[--m, --n];
+  if (i == m)
+    while (i < n)
+      parent.insertBefore(b[i++], end);
+  if (i == n)
+    while (i < m)
+      parent.removeChild(a[i++]);
+  else {
+    cur = a[i];
+    while (i < n) {
+      bi = b[i++], next = cur ? cur.nextSibling : end;
+      if (cur == bi)
+        cur = next;
+      else if (i < n && b[i] == next)
+        parent.replaceChild(bi, cur), cur = next;
+      else
+        parent.insertBefore(bi, cur);
+    }
+    while (cur != end)
+      next = cur.nextSibling, parent.removeChild(cur), cur = next;
+  }
+  return b;
+}
+
+// ../../node_modules/media-chrome/dist/utils/utils.js
+function camelCase(name) {
+  return name.replace(/[-_]([a-z])/g, ($0, $1) => $1.toUpperCase());
+}
+function isNumericString(str) {
+  if (typeof str != "string")
+    return false;
+  return !isNaN(str) && !isNaN(parseFloat(str));
+}
+
+// ../../node_modules/media-chrome/dist/utils/template-processor.js
+var pipeModifiers = {
+  string: (value) => String(value)
+};
+var PartialTemplate = class {
+  constructor(template2) {
+    this.template = template2;
+    this.state = void 0;
+  }
+};
+var templates = /* @__PURE__ */ new WeakMap();
+var templateInstances = /* @__PURE__ */ new WeakMap();
+var Directives = {
+  partial: (part, state) => {
+    state[part.expression] = new PartialTemplate(part.template);
+  },
+  if: (part, state) => {
+    var _a2;
+    if (evaluateExpression(part.expression, state)) {
+      if (templates.get(part) !== part.template) {
+        templates.set(part, part.template);
+        const tpl = new TemplateInstance(part.template, state, processor);
+        part.replace(tpl);
+        templateInstances.set(part, tpl);
+      } else {
+        (_a2 = templateInstances.get(part)) == null ? void 0 : _a2.update(state);
+      }
+    } else {
+      part.replace("");
+      templates.delete(part);
+      templateInstances.delete(part);
+    }
+  }
+};
+var DirectiveNames = Object.keys(Directives);
+var processor = {
+  processCallback(instance, parts, state) {
+    var _a2, _b2;
+    if (!state)
+      return;
+    for (const [expression, part] of parts) {
+      if (part instanceof InnerTemplatePart) {
+        if (!part.directive) {
+          const directive = DirectiveNames.find((n) => part.template.hasAttribute(n));
+          if (directive) {
+            part.directive = directive;
+            part.expression = part.template.getAttribute(directive);
+          }
+        }
+        (_a2 = Directives[part.directive]) == null ? void 0 : _a2.call(Directives, part, state);
+        continue;
+      }
+      let value = evaluateExpression(expression, state);
+      if (value instanceof PartialTemplate) {
+        if (templates.get(part) !== value.template) {
+          templates.set(part, value.template);
+          value = new TemplateInstance(
+            value.template,
+            value.state,
+            processor
+          );
+          part.value = value;
+          templateInstances.set(part, value);
+        } else {
+          (_b2 = templateInstances.get(part)) == null ? void 0 : _b2.update(value.state);
+        }
+        continue;
+      }
+      if (value) {
+        if (part instanceof AttrPart) {
+          if (part.attributeName.startsWith("aria-")) {
+            value = String(value);
+          }
+        }
+        if (part instanceof AttrPart) {
+          if (typeof value === "boolean") {
+            part.booleanValue = value;
+          } else if (typeof value === "function") {
+            part.element[part.attributeName] = value;
+          } else {
+            part.value = value;
+          }
+        } else {
+          part.value = value;
+          templates.delete(part);
+          templateInstances.delete(part);
+        }
+      } else {
+        if (part instanceof AttrPart) {
+          part.value = void 0;
+        } else {
+          part.value = void 0;
+          templates.delete(part);
+          templateInstances.delete(part);
+        }
+      }
+    }
+  }
+};
+var operators = {
+  "!": (a) => !a,
+  "!!": (a) => !!a,
+  "==": (a, b) => a == b,
+  "!=": (a, b) => a != b,
+  ">": (a, b) => a > b,
+  ">=": (a, b) => a >= b,
+  "<": (a, b) => a < b,
+  "<=": (a, b) => a <= b,
+  "??": (a, b) => a != null ? a : b,
+  "|": (a, b) => {
+    var _a2;
+    return (_a2 = pipeModifiers[b]) == null ? void 0 : _a2.call(pipeModifiers, a);
+  }
+};
+function tokenizeExpression(expr) {
+  return tokenize2(expr, {
+    boolean: /true|false/,
+    number: /-?\d+\.?\d*/,
+    string: /(["'])((?:\\.|[^\\])*?)\1/,
+    operator: /[!=><][=!]?|\?\?|\|/,
+    ws: /\s+/,
+    param: /[$a-z_][$\w]*/i
+  }).filter(({ type }) => type !== "ws");
+}
+function evaluateExpression(expr, state = {}) {
+  var _a2, _b2, _c, _d, _e, _f, _g;
+  const tokens = tokenizeExpression(expr);
+  if (tokens.length === 0 || tokens.some(({ type }) => !type)) {
+    return invalidExpression(expr);
+  }
+  if (((_a2 = tokens[0]) == null ? void 0 : _a2.token) === ">") {
+    const partial = state[(_b2 = tokens[1]) == null ? void 0 : _b2.token];
+    if (!partial) {
+      return invalidExpression(expr);
+    }
+    const partialState = { ...state };
+    partial.state = partialState;
+    const args = tokens.slice(2);
+    for (let i = 0; i < args.length; i += 3) {
+      const name = (_c = args[i]) == null ? void 0 : _c.token;
+      const operator = (_d = args[i + 1]) == null ? void 0 : _d.token;
+      const value = (_e = args[i + 2]) == null ? void 0 : _e.token;
+      if (name && operator === "=") {
+        partialState[name] = getParamValue(value, state);
+      }
+    }
+    return partial;
+  }
+  if (tokens.length === 1) {
+    if (!isValidParam(tokens[0])) {
+      return invalidExpression(expr);
+    }
+    return getParamValue(tokens[0].token, state);
+  }
+  if (tokens.length === 2) {
+    const operator = (_f = tokens[0]) == null ? void 0 : _f.token;
+    const run = operators[operator];
+    if (!run || !isValidParam(tokens[1])) {
+      return invalidExpression(expr);
+    }
+    const a = getParamValue(tokens[1].token, state);
+    return run(a);
+  }
+  if (tokens.length === 3) {
+    const operator = (_g = tokens[1]) == null ? void 0 : _g.token;
+    const run = operators[operator];
+    if (!run || !isValidParam(tokens[0]) || !isValidParam(tokens[2])) {
+      return invalidExpression(expr);
+    }
+    const a = getParamValue(tokens[0].token, state);
+    if (operator === "|") {
+      return run(a, tokens[2].token);
+    }
+    const b = getParamValue(tokens[2].token, state);
+    return run(a, b);
+  }
+}
+function invalidExpression(expr) {
+  console.warn(`Warning: invalid expression \`${expr}\``);
+  return false;
+}
+function isValidParam({ type }) {
+  return ["number", "boolean", "string", "param"].includes(type);
+}
+function getParamValue(raw, state) {
+  const firstChar = raw[0];
+  const lastChar = raw.slice(-1);
+  if (raw === "true" || raw === "false") {
+    return raw === "true";
+  }
+  if (firstChar === lastChar && [`'`, `"`].includes(firstChar)) {
+    return raw.slice(1, -1);
+  }
+  if (isNumericString(raw)) {
+    return parseFloat(raw);
+  }
+  return state[raw];
+}
+function tokenize2(str, parsers) {
+  let len, match, token, tokens = [];
+  while (str) {
+    token = null;
+    len = str.length;
+    for (let key in parsers) {
+      match = parsers[key].exec(str);
+      if (match && match.index < len) {
+        token = {
+          token: match[0],
+          type: key,
+          matches: match.slice(1)
+        };
+        len = match.index;
+      }
+    }
+    if (len) {
+      tokens.push({
+        token: str.substr(0, len),
+        type: void 0
+      });
+    }
+    if (token) {
+      tokens.push(token);
+    }
+    str = str.substr(len + (token ? token.token.length : 0));
+  }
+  return tokens;
+}
+
+// ../../node_modules/media-chrome/dist/media-theme-element.js
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => {
+  __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck3 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet3 = (obj, member, getter) => {
+  __accessCheck3(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd3 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet3 = (obj, member, value, setter) => {
+  __accessCheck3(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateMethod = (obj, member, method) => {
+  __accessCheck3(obj, member, "access private method");
+  return method;
+};
+var _template;
+var _prevTemplate;
+var _prevTemplateId;
+var _upgradeProperty;
+var upgradeProperty_fn;
+var _updateTemplate;
+var updateTemplate_fn;
+var observedMediaAttributes = {
+  mediatargetlivewindow: "targetlivewindow",
+  mediastreamtype: "streamtype"
+};
+var prependTemplate = Document.createElement("template");
+prependTemplate.innerHTML = `
+  <style>
+    :host {
+      display: inline-block;
+      line-height: 0;
+    }
+
+    media-controller {
+      width: 100%;
+      height: 100%;
+    }
+
+    media-controller:not([mediasubtitleslist]) media-captions-selectmenu,
+    media-captions-button:not([mediasubtitleslist]),
+    media-rendition-selectmenu[mediarenditionunavailable],
+    media-volume-range[mediavolumeunavailable],
+    media-airplay-button[mediaairplayunavailable],
+    media-fullscreen-button[mediafullscreenunavailable],
+    media-cast-button[mediacastunavailable],
+    media-pip-button[mediapipunavailable] {
+      display: none;
+    }
+  </style>
+`;
+var MediaThemeElement = class extends GlobalThis.HTMLElement {
+  constructor() {
+    super();
+    __privateAdd3(this, _upgradeProperty);
+    __privateAdd3(this, _updateTemplate);
+    __publicField2(this, "renderRoot");
+    __publicField2(this, "renderer");
+    __privateAdd3(this, _template, void 0);
+    __privateAdd3(this, _prevTemplate, void 0);
+    __privateAdd3(this, _prevTemplateId, void 0);
+    if (this.shadowRoot) {
+      this.renderRoot = this.shadowRoot;
+    } else {
+      this.renderRoot = this.attachShadow({ mode: "open" });
+      this.createRenderer();
+    }
+    const observer = new MutationObserver((mutationList) => {
+      if (mutationList.some((mutation) => {
+        const target = mutation.target;
+        if (target === this)
+          return true;
+        if (target.localName !== "media-controller")
+          return false;
+        if (observedMediaAttributes[mutation.attributeName])
+          return true;
+        if (mutation.attributeName.startsWith("breakpoint"))
+          return true;
+        return false;
+      })) {
+        this.render();
+      }
+    });
+    observer.observe(this, { attributes: true });
+    observer.observe(this.renderRoot, {
+      attributes: true,
+      subtree: true
+    });
+    __privateMethod(this, _upgradeProperty, upgradeProperty_fn).call(this, "template");
+  }
+  get mediaController() {
+    return this.renderRoot.querySelector("media-controller");
+  }
+  get template() {
+    var _a2;
+    return (_a2 = __privateGet3(this, _template)) != null ? _a2 : this.constructor.template;
+  }
+  set template(element) {
+    __privateSet3(this, _prevTemplateId, null);
+    __privateSet3(this, _template, element);
+    this.createRenderer();
+  }
+  get props() {
+    var _a2, _b2, _c;
+    const observedAttributes = [
+      ...Array.from((_b2 = (_a2 = this.mediaController) == null ? void 0 : _a2.attributes) != null ? _b2 : []).filter(({ name }) => {
+        return observedMediaAttributes[name] || name.startsWith("breakpoint");
+      }),
+      ...Array.from(this.attributes)
+    ];
+    const props = {};
+    for (let attr of observedAttributes) {
+      const name = (_c = observedMediaAttributes[attr.name]) != null ? _c : camelCase(attr.name);
+      let { value } = attr;
+      if (value != null) {
+        if (isNumericString(value)) {
+          value = parseFloat(value);
+        }
+        props[name] = value === "" ? true : value;
+      } else {
+        props[name] = false;
+      }
+    }
+    return props;
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (attrName === "template" && oldValue != newValue) {
+      __privateMethod(this, _updateTemplate, updateTemplate_fn).call(this);
+    }
+  }
+  connectedCallback() {
+    __privateMethod(this, _updateTemplate, updateTemplate_fn).call(this);
+  }
+  createRenderer() {
+    if (this.template && this.template !== __privateGet3(this, _prevTemplate)) {
+      __privateSet3(this, _prevTemplate, this.template);
+      this.renderer = new TemplateInstance(
+        this.template,
+        this.props,
+        this.constructor.processor
+      );
+      this.renderRoot.textContent = "";
+      this.renderRoot.append(
+        prependTemplate.content.cloneNode(true),
+        this.renderer
+      );
+    }
+  }
+  render() {
+    var _a2;
+    (_a2 = this.renderer) == null ? void 0 : _a2.update(this.props);
+  }
+};
+_template = /* @__PURE__ */ new WeakMap();
+_prevTemplate = /* @__PURE__ */ new WeakMap();
+_prevTemplateId = /* @__PURE__ */ new WeakMap();
+_upgradeProperty = /* @__PURE__ */ new WeakSet();
+upgradeProperty_fn = function(prop) {
+  if (Object.prototype.hasOwnProperty.call(this, prop)) {
+    const value = this[prop];
+    delete this[prop];
+    this[prop] = value;
+  }
+};
+_updateTemplate = /* @__PURE__ */ new WeakSet();
+updateTemplate_fn = function() {
+  var _a2;
+  const templateId = this.getAttribute("template");
+  if (!templateId || templateId === __privateGet3(this, _prevTemplateId))
+    return;
+  const rootNode = this.getRootNode();
+  const template2 = (_a2 = rootNode == null ? void 0 : rootNode.getElementById) == null ? void 0 : _a2.call(rootNode, templateId);
+  if (template2) {
+    __privateSet3(this, _prevTemplateId, templateId);
+    __privateSet3(this, _template, template2);
+    this.createRenderer();
+    return;
+  }
+  if (isValidUrl(templateId)) {
+    __privateSet3(this, _prevTemplateId, templateId);
+    request(templateId).then((data) => {
+      const template22 = Document.createElement("template");
+      template22.innerHTML = data;
+      __privateSet3(this, _template, template22);
+      this.createRenderer();
+    }).catch(console.error);
+  }
+};
+__publicField2(MediaThemeElement, "template");
+__publicField2(MediaThemeElement, "observedAttributes", ["template"]);
+__publicField2(MediaThemeElement, "processor", processor);
+function isValidUrl(url) {
+  if (!/^(\/|\.\/|https?:\/\/)/.test(url))
+    return false;
+  const base = /^https?:\/\//.test(url) ? void 0 : location.origin;
+  try {
+    new URL(url, base);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+async function request(resource) {
+  const response = await fetch(resource);
+  if (response.status !== 200) {
+    throw new Error(`Failed to load resource: the server responded with a status of ${response.status}`);
+  }
+  return response.text();
+}
+if (!GlobalThis.customElements.get("media-theme")) {
+  GlobalThis.customElements.define("media-theme", MediaThemeElement);
+}
+
+// src/themes/classic/index.ts
+var template = internalDocument.createElement("template");
+if ("innerHTML" in template)
+  template.innerHTML = classic_default;
+var _a, _b;
+var MediaThemeClassic = class extends MediaThemeElement {
+};
+MediaThemeClassic.template = (_b = (_a = template.content) == null ? void 0 : _a.children) == null ? void 0 : _b[0];
+if (!internalGlobalThis.customElements.get("media-theme-classic")) {
+  internalGlobalThis.customElements.define("media-theme-classic", MediaThemeClassic);
+}
+var classic_default2 = MediaThemeClassic;
+export {
+  classic_default2 as default
+};