media-chrome - npm Package Compare versions

Comparing version 0.2.2 to 0.4.0

dist/extras/media-clip-selector/index.js

@@ -1,2 +0,2 @@
-import E from"../../media-chrome-html-element.js";import{defineCustomElement as y}from"../../utils/defineCustomElement.js";import{Window as r,Document as C}from"../../utils/server-safe-globals.js";import"../../media-thumbnail-preview-element.js";import{mediaUIEvents as c}from"../../media-chrome-html-element.js";const g=C.createElement("template"),f=8,m={"100":100,"200":200,"300":300};function o(u){return Math.max(0,Math.min(1,u))}g.innerHTML=`
+import{defineCustomElement as w}from"../../utils/defineCustomElement.js";import{Window as s,Document as C}from"../../utils/server-safe-globals.js";import{MediaUIEvents as u,MediaUIAttributes as c}from"../../constants.js";const f=C.createElement("template"),v=8,m={"100":100,"200":200,"300":300};function o(p){return Math.max(0,Math.min(1,p))}f.innerHTML=`
   <style>
@@ -23,3 +23,3 @@ #selectorContainer {
       height: 80%;
-      width: ${f}px;
+      width: ${v}px;
       border-radius: 4px;
@@ -118,2 +118,2 @@ background-color: royalblue;
   </div>
-`;class v extends E{static get observedAttributes(){return["thumbnails"].concat(super.observedAttributes||[])}constructor(){super();const e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(g.content.cloneNode(!0)),this.draggingEl=null,this.wrapper=this.shadowRoot.querySelector("#selectorContainer"),this.selection=this.shadowRoot.querySelector("#selection"),this.playhead=this.shadowRoot.querySelector("#playhead"),this.leftTrim=this.shadowRoot.querySelector("#leftTrim"),this.spacerFirst=this.shadowRoot.querySelector("#spacerFirst"),this.startHandle=this.shadowRoot.querySelector("#startHandle"),this.spacerMiddle=this.shadowRoot.querySelector("#spacerMiddle"),this.endHandle=this.shadowRoot.querySelector("#endHandle"),this.spacerLast=this.shadowRoot.querySelector("#spacerLast"),this._clickHandler=this.handleClick.bind(this),this._dragStart=this.dragStart.bind(this),this._dragEnd=this.dragEnd.bind(this),this._drag=this.drag.bind(this),this.wrapper.addEventListener("click",this._clickHandler,!1),this.wrapper.addEventListener("touchstart",this._dragStart,!1),r.addEventListener("touchend",this._dragEnd,!1),this.wrapper.addEventListener("touchmove",this._drag,!1),this.wrapper.addEventListener("mousedown",this._dragStart,!1),r.addEventListener("mouseup",this._dragEnd,!1),r.addEventListener("mousemove",this._drag,!1),this.enableThumbnails()}getPlayheadBasedOnMouseEvent(e){const t=this.mediaDuration;if(!t)return;const i=o(this.getMousePercent(e));return i*t}getXPositionFromMouse(e){let t;return["touchstart","touchmove"].includes(e.type)&&(t=e.touches[0].clientX),t||e.clientX}getMousePercent(e){const t=this.wrapper.getBoundingClientRect(),i=(this.getXPositionFromMouse(e)-t.left)/t.width;return o(i)}dragStart(e){e.target===this.startHandle&&(this.draggingEl=this.startHandle),e.target===this.endHandle&&(this.draggingEl=this.endHandle),this.initialX=this.getXPositionFromMouse(e)}dragEnd(e){this.initialX=null,this.draggingEl=null}setSelectionWidth(e,t){let i=e;const a=f*3,n=o(a/t);i<n&&(i=n),this.selection.style.width=`${i*100}%`}drag(e){if(!this.draggingEl)return;e.preventDefault();const t=this.wrapper.getBoundingClientRect(),i=t.width,a=this.getXPositionFromMouse(e),n=a-this.initialX,d=this.getMousePercent(e),l=this.selection.getBoundingClientRect().width;if(this.draggingEl===this.startHandle){this.initialX=this.getXPositionFromMouse(e),this.leftTrim.style.width=`${d*100}%`;const s=o((l-n)/i);this.setSelectionWidth(s,i)}if(this.draggingEl===this.endHandle){this.initialX=this.getXPositionFromMouse(e);const s=o((l+n)/i);this.setSelectionWidth(s,i)}this.dispatchUpdate()}dispatchUpdate(){const e=new CustomEvent("update",{detail:this.getCurrentClipBounds()});this.dispatchEvent(e)}getCurrentClipBounds(){const e=this.wrapper.getBoundingClientRect(),t=this.leftTrim.getBoundingClientRect(),i=this.selection.getBoundingClientRect(),a=o(t.width/e.width),n=o((t.width+i.width)/e.width);return{startTime:Math.round(a*this.mediaDuration),endTime:Math.round(n*this.mediaDuration)}}isTimestampInBounds(e){const{startTime:t,endTime:i}=this.getCurrentClipBounds();return t<=e&&i>=e}handleClick(e){const t=this.getMousePercent(e),i=t*this.mediaDuration;this.isTimestampInBounds(i)&&this.dispatchMediaEvent(c.MEDIA_SEEK_REQUEST,{detail:i})}mediaCurrentTimeSet(e){const t=o(this.mediaCurrentTime/this.mediaDuration),i=this.wrapper.getBoundingClientRect().width,a=t*i;if(this.playhead.style.left=`${t*100}%`,this.playhead.style.display="block",!this.mediaPaused){const{startTime:n,endTime:d}=this.getCurrentClipBounds();(this.mediaCurrentTime<n||this.mediaCurrentTime>d)&&this.dispatchMediaEvent(c.MEDIA_SEEK_REQUEST,{detail:n})}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),this.wrapper.removeEventListener("touchstart",this._dragStart),this.wrapper.removeEventListener("touchend",this._dragEnd),this.wrapper.removeEventListener("touchmove",this._drag),this.wrapper.removeEventListener("mousedown",this._dragStart),r.removeEventListener("mouseup",this._dragEnd),r.removeEventListener("mousemove",this._drag)}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview");const e=this.shadowRoot.querySelector("#thumbnailContainer");e.classList.add("enabled");let t;const i=()=>{t=l=>{const s=this.mediaDuration;if(!s)return;const h=this.wrapper.getBoundingClientRect(),p=this.getMousePercent(l),w=h.left-this.getBoundingClientRect().left,b=w+p*h.width;this.thumbnailPreview.style.left=`${b}px`,this.dispatchMediaEvent(c.MEDIA_PREVIEW_REQUEST,{detail:p*s})},r.addEventListener("mousemove",t,!1)},a=()=>{r.removeEventListener("mousemove",t)};let n=!1,d=l=>{if(!n&&this.mediaDuration){n=!0,this.thumbnailPreview.style.display="block",i();let s=h=>{h.target!=this&&!this.contains(h.target)&&(this.thumbnailPreview.style.display="none",r.removeEventListener("mousemove",s),n=!1,a())};r.addEventListener("mousemove",s,!1)}this.mediaDuration||(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",d,!1)}disableThumbnails(){thumbnailContainer.classList.remove("enabled")}}y("media-clip-selector",v);export default v;
+`;class E extends s.HTMLElement{static get observedAttributes(){return["thumbnails",c.MEDIA_DURATION,c.MEDIA_CURRENT_TIME]}constructor(){super();const t=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(f.content.cloneNode(!0)),this.draggingEl=null,this.wrapper=this.shadowRoot.querySelector("#selectorContainer"),this.selection=this.shadowRoot.querySelector("#selection"),this.playhead=this.shadowRoot.querySelector("#playhead"),this.leftTrim=this.shadowRoot.querySelector("#leftTrim"),this.spacerFirst=this.shadowRoot.querySelector("#spacerFirst"),this.startHandle=this.shadowRoot.querySelector("#startHandle"),this.spacerMiddle=this.shadowRoot.querySelector("#spacerMiddle"),this.endHandle=this.shadowRoot.querySelector("#endHandle"),this.spacerLast=this.shadowRoot.querySelector("#spacerLast"),this._clickHandler=this.handleClick.bind(this),this._dragStart=this.dragStart.bind(this),this._dragEnd=this.dragEnd.bind(this),this._drag=this.drag.bind(this),this.wrapper.addEventListener("click",this._clickHandler,!1),this.wrapper.addEventListener("touchstart",this._dragStart,!1),s.addEventListener("touchend",this._dragEnd,!1),this.wrapper.addEventListener("touchmove",this._drag,!1),this.wrapper.addEventListener("mousedown",this._dragStart,!1),s.addEventListener("mouseup",this._dragEnd,!1),s.addEventListener("mousemove",this._drag,!1),this.enableThumbnails()}get mediaDuration(){return+this.getAttribute(c.MEDIA_DURATION)}get mediaCurrentTime(){return+this.getAttribute(c.MEDIA_CURRENT_TIME)}getPlayheadBasedOnMouseEvent(t){const e=this.mediaDuration;return e?o(this.getMousePercent(t))*e:void 0}getXPositionFromMouse(t){let e;return["touchstart","touchmove"].includes(t.type)&&(e=t.touches[0].clientX),e||t.clientX}getMousePercent(t){const e=this.wrapper.getBoundingClientRect(),i=(this.getXPositionFromMouse(t)-e.left)/e.width;return o(i)}dragStart(t){t.target===this.startHandle&&(this.draggingEl=this.startHandle),t.target===this.endHandle&&(this.draggingEl=this.endHandle),this.initialX=this.getXPositionFromMouse(t)}dragEnd(t){this.initialX=null,this.draggingEl=null}setSelectionWidth(t,e){let i=t;const a=v*3,n=o(a/e);i<n&&(i=n),this.selection.style.width=`${i*100}%`}drag(t){if(!this.draggingEl)return;t.preventDefault();const i=this.wrapper.getBoundingClientRect().width,n=this.getXPositionFromMouse(t)-this.initialX,d=this.getMousePercent(t),l=this.selection.getBoundingClientRect().width;if(this.draggingEl===this.startHandle){this.initialX=this.getXPositionFromMouse(t),this.leftTrim.style.width=`${d*100}%`;const r=o((l-n)/i);this.setSelectionWidth(r,i)}if(this.draggingEl===this.endHandle){this.initialX=this.getXPositionFromMouse(t);const r=o((l+n)/i);this.setSelectionWidth(r,i)}this.dispatchUpdate()}dispatchUpdate(){const t=new CustomEvent("update",{detail:this.getCurrentClipBounds()});this.dispatchEvent(t)}getCurrentClipBounds(){const t=this.wrapper.getBoundingClientRect(),e=this.leftTrim.getBoundingClientRect(),i=this.selection.getBoundingClientRect(),a=o(e.width/t.width),n=o((e.width+i.width)/t.width);return{startTime:Math.round(a*this.mediaDuration),endTime:Math.round(n*this.mediaDuration)}}isTimestampInBounds(t){const{startTime:e,endTime:i}=this.getCurrentClipBounds();return e<=t&&i>=t}handleClick(t){const i=this.getMousePercent(t)*this.mediaDuration;this.isTimestampInBounds(i)&&this.dispatchEvent(new s.CustomEvent(u.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:i}))}mediaCurrentTimeSet(t){const e=o(this.mediaCurrentTime/this.mediaDuration),i=this.wrapper.getBoundingClientRect().width,a=e*i;if(this.playhead.style.left=`${e*100}%`,this.playhead.style.display="block",!this.mediaPaused){const{startTime:n,endTime:d}=this.getCurrentClipBounds();(this.mediaCurrentTime<n||this.mediaCurrentTime>d)&&this.dispatchEvent(new s.CustomEvent(u.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:n}))}}mediaUnsetCallback(t){super.mediaUnsetCallback(t),this.wrapper.removeEventListener("touchstart",this._dragStart),this.wrapper.removeEventListener("touchend",this._dragEnd),this.wrapper.removeEventListener("touchmove",this._drag),this.wrapper.removeEventListener("mousedown",this._dragStart),s.removeEventListener("mouseup",this._dragEnd),s.removeEventListener("mousemove",this._drag)}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let e;const i=()=>{e=l=>{const r=this.mediaDuration;if(!r)return;const h=this.wrapper.getBoundingClientRect(),g=this.getMousePercent(l),b=h.left-this.getBoundingClientRect().left+g*h.width;this.thumbnailPreview.style.left=`${b}px`,this.dispatchEvent(new s.CustomEvent(u.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:g*r}))},s.addEventListener("mousemove",e,!1)},a=()=>{s.removeEventListener("mousemove",e)};let n=!1,d=l=>{if(!n&&this.mediaDuration){n=!0,this.thumbnailPreview.style.display="block",i();let r=h=>{h.target!=this&&!this.contains(h.target)&&(this.thumbnailPreview.style.display="none",s.removeEventListener("mousemove",r),n=!1,a())};s.addEventListener("mousemove",r,!1)}this.mediaDuration||(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",d,!1)}disableThumbnails(){thumbnailContainer.classList.remove("enabled")}}w("media-clip-selector",E);export default E;

dist/index.js

@@ -1,495 +0,1 @@
-(()=>{var Me={HTMLElement:function(){},customElements:{get:function(){},define:function(){},whenDefined:function(){}}},ye={createElement:function(){return{}}},D=typeof window=="undefined"||typeof window.customElements=="undefined",l=D?Me:window,r=D?ye:window.document;function o(a,e){l.customElements.get(a)||(l.customElements.define(a,e),l[e.name]=e)}function L(a){return a.split("-").map(function(e,t){return(t?e[0].toUpperCase():e[0].toLowerCase())+e.slice(1).toLowerCase()}).join("")}function x(a,e=!1){return a.split("_").map(function(t,i){return(i||e?t[0].toUpperCase():t[0].toLowerCase())+t.slice(1).toLowerCase()}).join("")}var n={MEDIA_PLAY_REQUEST:"mediaplayrequest",MEDIA_PAUSE_REQUEST:"mediapauserequest",MEDIA_MUTE_REQUEST:"mediamuterequest",MEDIA_UNMUTE_REQUEST:"mediaunmuterequest",MEDIA_VOLUME_REQUEST:"mediavolumerequest",MEDIA_SEEK_REQUEST:"mediaseekrequest",MEDIA_ENTER_FULLSCREEN_REQUEST:"mediaenterfullscreenrequest",MEDIA_EXIT_FULLSCREEN_REQUEST:"mediaexitfullscreenrequest",MEDIA_PREVIEW_REQUEST:"mediapreviewrequest",MEDIA_ENTER_PIP_REQUEST:"mediaenterpiprequest",MEDIA_EXIT_PIP_REQUEST:"mediaexitpiprequest",MEDIA_PLAYBACK_RATE_REQUEST:"mediaplaybackraterequest"},w=class extends l.HTMLElement{constructor(){super();this._mediaPaused=!1,this._mediaMuted=!1,this._mediaVolume=1,this._mediaVolumeLevel="high",this._mediaCurrentTime=0,this._mediaDuration=NaN,this._mediaIsFullscreen=!1,this._mediaIsPip=!1,this._mediaBuffered=null,this._mediaPreviewImage=null,this._mediaPreviewCoords=null,this._mediaPlaybackRate=1}static get observedAttributes(){return["media-controller","media-paused","media-muted","media-volume","media-volume-level","media-is-fullscreen","media-current-time","media-duration","media-buffered","media-preview-image","media-preview-coords","media-is-pip","media-playback-rate"].concat(super.observedAttributes||[])}dispatchMediaEvent(e,t){t=Object.assign({bubbles:!0,composed:!0},t);let i=new l.CustomEvent(e,t),s=(this[`on${e}`]&&this[`on${e}`](i))===!1;s||this.dispatchEvent(i)}attributeChangedCallback(e,t,i){let s=L(e);if(s=="media"){if(i===null){this.media=null;return}let u=r.querySelector(i);if(!u||!u.play)throw new Error("Supplied media attribute does not appear to match a media element.");this.media=u;return}if(s=="mediaController"){this[s]=r.getElementById(i);return}let m=i;typeof this[s]=="boolean"&&(m=!(i===null)),this[s]=m}get mediaController(){return this._mediaController||null}set mediaController(e){if(e===this._mediaController)return;this._mediaController&&this._mediaController.unassociateElement(this),e&&(this._mediaController=e,e.associateElement(this))}get mediaPaused(){return this._mediaPaused}set mediaPaused(e){e=!!e,this._mediaPaused=e;let t=this.getAttribute("media-paused")!==null;e!==t&&(e?this.setAttribute("media-paused","media-paused"):this.removeAttribute("media-paused")),this.mediaPausedSet&&this.mediaPausedSet(e)}get mediaMuted(){return this._mediaMuted}set mediaMuted(e){e=!!e,this._mediaMuted=e;let t=this.getAttribute("media-muted")!==null;e!==t&&(e?this.setAttribute("media-muted","media-muted"):this.removeAttribute("media-muted")),this.mediaMutedSet&&this.mediaMutedSet(e)}get mediaVolume(){return this._mediaVolume}set mediaVolume(e){e=parseFloat(e),this._mediaVolume=e;let t=parseFloat(this.getAttribute("media-volume"));t!==e&&this.setAttribute("media-volume",e),this.mediaVolumeSet&&this.mediaVolumeSet(e)}get mediaVolumeLevel(){return this._mediaVolumeLevel}set mediaVolumeLevel(e){e=e.toLowerCase(),["off","low","medium","high"].indexOf(e)===-1&&(e="high"),this._mediaVolumeLevel=e;let t=this.getAttribute("media-volume-level");e!==t&&this.setAttribute("media-volume-level",e),this.mediaVolumeLevelSet&&this.mediaVolumeLevelSet(e)}get mediaCurrentTime(){return this._mediaCurrentTime}set mediaCurrentTime(e){e=parseFloat(e),e||(e=0),this._mediaCurrentTime=e;let t=parseFloat(this.getAttribute("media-current-time"));t!==e&&this.setAttribute("media-current-time",e),this.mediaCurrentTimeSet&&this.mediaCurrentTimeSet(e)}get mediaDuration(){return this._mediaDuration}set mediaDuration(e){e=parseFloat(e),this._mediaDuration=e;let t=parseFloat(this.getAttribute("media-duration"));isNaN(t)?this.removeAttribute("media-duration"):t!==e&&this.setAttribute("media-duration",e),this.mediaDurationSet&&this.mediaDurationSet(e)}get mediaPlaybackRate(){return this._mediaPlaybackRate}set mediaPlaybackRate(e){e=parseFloat(e),this._mediaPlaybackRate=e;let t=parseFloat(this.getAttribute("media-playback-rate"));isNaN(t)?this.removeAttribute("media-playback-rate"):t!==e&&this.setAttribute("media-playback-rate",e),this.mediaPlaybackRateSet&&this.mediaPlaybackRateSet(e)}get mediaIsFullscreen(){return this._mediaIsFullscreen}set mediaIsFullscreen(e){e=!!e,this._mediaIsFullscreen=e;let t=this.getAttribute("media-is-fullscreen")!==null;e!==t&&(e?this.setAttribute("media-is-fullscreen","media-is-fullscreen"):this.removeAttribute("media-is-fullscreen")),this.mediaIsFullscreenSet&&this.mediaIsFullscreenSet(e)}get mediaIsPip(){return this._mediaIsPip}set mediaIsPip(e){e=!!e,this._mediaIsPip=e;let t=this.getAttribute("media-is-pip")!==null;e!==t&&(e?this.setAttribute("media-is-pip","media-is-pip"):this.removeAttribute("media-is-pip")),this.mediaIsPipSet&&this.mediaIsPipSet(e)}get mediaPreviewImage(){return this._mediaPreviewImage}set mediaPreviewImage(e){this._mediaPreviewImage=e;let t=this.getAttribute("media-preview-image");t!==e&&this.setAttribute("media-preview-image",e),this.mediaPreviewImageSet&&this.mediaPreviewImageSet(e)}get mediaPreviewCoords(){return this._mediaPreviewCoords}set mediaPreviewCoords(e){typeof e=="string"&&(e=e.split(",")),this._mediaPreviewCoords=e;let t=this.getAttribute("media-preview-coords");t!==e.join(",")&&this.setAttribute("media-preview-coords",e.join(",")),this.mediaPreviewCoordsSet&&this.mediaPreviewCoordsSet(e)}};o("media-chrome-html-element",w);var p=w,U=r.createElement("template");U.innerHTML=`
-<style>
-  :host {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    box-sizing: border-box;
-    background-color: var(--media-control-background, rgba(20,20,30, 0.7));
-
-    /* Default width and height can be overridden externally */
-    padding: 10px;
-    
-
-    /* Vertically center any text */
-    font-size: 14px;
-    line-height: 1;
-    font-weight: bold;
-
-    /* Min icon size is 24x24 */
-    min-height: 24px;
-    min-width: 24px;
-
-    transition: background-color 0.15s linear;
-  }
-
-  /*
-    Only show outline when keyboard focusing.
-    https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
-  */
-  :host-context([media-keyboard-control]):host(:focus),
-  :host-context([media-keyboard-control]):host(:focus-within) {
-    box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.9);
-  }
-
-  :host(:hover) {
-    background-color: var(--media-control-hover-background, rgba(50,50,70, 0.7));
-  }
-
-  /* Undo the default button styles and fill the parent element */
-  button {
-    width: 100%;
-    vertical-align: middle;
-    border: none;
-    margin: 0;
-    padding: 0;
-    text-decoration: none;
-    background: transparent;
-    color: #ffffff;
-    font-family: sans-serif;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: bold;
-    font-family: Arial, sans-serif;
-    cursor: pointer;
-    text-align: center;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-
-  button:hover {}
-  button:focus {
-    outline: 0;
-  }
-  button:active {}
-
-  svg, img, ::slotted(svg), ::slotted(img) {
-    width: var(--media-button-icon-width, 24px);
-    height: var(--media-button-icon-height);
-    transform: var(--media-button-icon-transform);
-    transition: var(--media-button-icon-transition);
-    fill: var(--media-icon-color, #eee);
-  }
-</style>
-
-<button></button>
-`;var _=class extends p{constructor(e={}){super();let t=this.attachShadow({mode:"open"}),i=U.content.cloneNode(!0);this.nativeEl=i.querySelector("button");let s=e.slotTemplate;s||(s=r.createElement("template"),s.innerHTML=`<slot>${e.defaultContent||""}</slot>`),this.nativeEl.appendChild(s.content.cloneNode(!0)),t.appendChild(i),this.addEventListener("click",m=>{this.handleClick(m)})}handleClick(){}};o("media-chrome-button",_);var f=_,H=r.createElement("template");H.innerHTML=`
-  <style>
-    :host {
-      box-sizing: border-box;
-      position: relative;
-
-      /* Position controls at the bottom  */
-      display: inline-flex;
-      flex-direction: column-reverse;
-
-      /* Max out at 100% width for smaller screens (< 720px) */
-      max-width: 100%;
-      background-color: #000;
-    }
-
-    /* Video specific styles */
-    :host(:not([audio])) {
-      height: 480px;
-      width: 720px;
-    }
-
-    /* Safari needs this to actually make the element fill the window */
-    :host(:-webkit-full-screen) {
-      /* Needs to use !important otherwise easy to break */
-      width: 100% !important;
-      height: 100% !important;
-    }
-
-    /* Position the media element to fill the container */
-    ::slotted([slot=media]) {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    /* Hide controls when inactive and not paused and not audio */
-    slot:not([media]) ::slotted() {
-      opacity: 1;
-      transition: opacity 0.25s;
-      visibility: visible;
-    }
-
-    :host([user-inactive]:not([media-paused]):not([audio])) slot:not([media]) ::slotted(*) {
-      opacity: 0;
-      transition: opacity 1s;
-    }
-
-    slot:not([media]) ::slotted(media-control-bar)  {
-      width: 100%;
-    }
-  </style>
-  <slot name="media"></slot>
-  <slot></slot>
-`;var T=class extends w{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(H.content.cloneNode(!0));let t=(s,m)=>{let u=this.media;for(let d of s)d.type==="childList"&&(d.removedNodes.forEach(h=>{if(h.slot=="media"&&d.target==this){let c=d.previousSibling&&d.previousSibling.previousElementSibling;if(!c||!u)this.mediaUnsetCallback(h);else{let v=c.slot!=="media";for(;(c=c.previousSibling)!==null;)c.slot=="media"&&(v=!1);v&&this.mediaUnsetCallback(h)}}}),u&&d.addedNodes.forEach(h=>{h==u&&this.mediaSetCallback(h)}))},i=new MutationObserver(t);i.observe(this,{childList:!0,subtree:!0})}static get observedAttributes(){return["autohide"].concat(super.observedAttributes||[])}get media(){return this.querySelector(":scope > [slot=media]")}mediaSetCallback(e){if(!e||!e.play)return console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',e),!1;let t=e.nodeName.toLowerCase();return t.includes("-")&&!l.customElements.get(t)?(l.customElements.whenDefined(t).then(()=>{this.mediaSetCallback(e)}),!1):(this._mediaClickPlayToggle=i=>{e.paused?this.dispatchMediaEvent(n.MEDIA_PLAY_REQUEST):this.dispatchMediaEvent(n.MEDIA_PAUSE_REQUEST)},e.addEventListener("click",this._mediaClickPlayToggle,!1),!0)}mediaUnsetCallback(e){e.removeEventListener("click",this._mediaClickPlayToggle)}connectedCallback(){this.media&&this.mediaSetCallback(this.media);let e=()=>{if(this.removeAttribute("user-inactive"),l.clearTimeout(this.inactiveTimeout),this.autohide<0)return;this.inactiveTimeout=l.setTimeout(()=>{this.setAttribute("user-inactive","user-inactive")},this.autohide*1e3)};this.addEventListener("keyup",t=>{e()}),this.addEventListener("keyup",t=>{this.setAttribute("media-keyboard-control","media-keyboard-control")}),this.addEventListener("mouseup",t=>{this.removeAttribute("media-keyboard-control")}),this.addEventListener("mousemove",t=>{if(t.target===this)return;this.removeAttribute("user-inactive"),l.clearTimeout(this.inactiveTimeout),t.target===this.media&&e()}),this.addEventListener("mouseout",t=>{this.autohide>-1&&this.setAttribute("user-inactive","user-inactive")})}set autohide(e){e=Number(e),this._autohide=isNaN(e)?0:e}get autohide(){return this._autohide===void 0?2:this._autohide}};o("media-container-temp",T);var N=T,g={enter:"requestFullscreen",exit:"exitFullscreen",event:"fullscreenchange",element:"fullscreenElement",error:"fullscreenerror"};r.fullscreenElement===void 0&&(g.enter="webkitRequestFullScreen",g.exit=r.webkitExitFullscreen!=null?"webkitExitFullscreen":"webkitCancelFullScreen",g.event="webkitfullscreenchange",g.element="webkitFullscreenElement",g.error="webkitfullscreenerror");var{MEDIA_PLAY_REQUEST:xe,MEDIA_PAUSE_REQUEST:Ce,MEDIA_MUTE_REQUEST:_e,MEDIA_UNMUTE_REQUEST:Te,MEDIA_VOLUME_REQUEST:ke,MEDIA_ENTER_FULLSCREEN_REQUEST:Se,MEDIA_EXIT_FULLSCREEN_REQUEST:Re,MEDIA_SEEK_REQUEST:je,MEDIA_PREVIEW_REQUEST:Ie,MEDIA_ENTER_PIP_REQUEST:Ae,MEDIA_EXIT_PIP_REQUEST:Pe,MEDIA_PLAYBACK_RATE_REQUEST:De}=n,k=class extends N{constructor(){super();this.associatedElements=[];let e={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{let t=this.media;t.muted=!1,t.volume===0&&(t.volume=.25)},MEDIA_VOLUME_REQUEST:t=>{let i=this.media,s=t.detail;i.volume=s,s>0&&i.muted&&(i.muted=!1);try{l.localStorage.setItem("media-chrome-pref-volume",s.toString())}catch(m){}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{let t=this.getRootNode();t.pictureInPictureElement&&t.exitPictureInPicture(),super[g.enter]()},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{this.getRootNode()[g.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{let t=this.getRootNode(),i=this.media;if(!t.pictureInPictureEnabled)return;t[g.element]&&t[g.exit](),i.requestPictureInPicture()},MEDIA_EXIT_PIP_REQUEST:()=>{let t=this.getRootNode();t.exitPictureInPicture&&t.exitPictureInPicture()},MEDIA_SEEK_REQUEST:t=>{let i=this.media,s=t.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=s)},MEDIA_PLAYBACK_RATE_REQUEST:t=>{this.media.playbackRate=t.detail},MEDIA_PREVIEW_REQUEST:t=>{let i=this.media,s=t.detail;if(i&&i.textTracks&&i.textTracks.length){let m=Array.prototype.find.call(i.textTracks,d=>d.label=="thumbnails");if(!m)return;if(!m.cues)return;let u=Array.prototype.find.call(m.cues,d=>d.startTime>=s);if(u){let d=new URL(u.text),[h,c,v,C]=d.hash.split("=")[1].split(",");this.propagateMediaState("mediaPreviewImage",d.href),this.propagateMediaState("mediaPreviewCoords",`${h},${c},${v},${C}`)}}}};Object.keys(e).forEach(t=>{let i=`_handle${x(t,!0)}`;this[i]=s=>{if(s.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}e[t](s,this.media)},this.addEventListener(n[t],this[i])}),this._mediaStatePropagators={"play,pause":()=>{this.propagateMediaState("mediaPaused",this.media.paused)},volumechange:()=>{let{muted:t,volume:i}=this.media,s="high";i==0||t?s="off":i<.5?s="low":i<.75&&(s="medium"),this.propagateMediaState("mediaMuted",t),this.propagateMediaState("mediaVolume",i),this.propagateMediaState("mediaVolumeLevel",s)},[g.event]:()=>{let t=this.getRootNode()[g.element];this.propagateMediaState("mediaIsFullscreen",t==this)},"enterpictureinpicture,leavepictureinpicture":t=>{let i;t?i=t.type=="enterpictureinpicture":i=this.media==this.getRootNode().pictureInPictureElement,this.propagateMediaState("mediaIsPip",i)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState("mediaCurrentTime",this.media.currentTime)},"durationchange,loadedmetadata":()=>{this.propagateMediaState("mediaDuration",this.media.duration)},ratechange:()=>{this.propagateMediaState("mediaPlaybackRate",this.media.playbackRate)}},this.associateElement(this)}mediaSetCallback(e){if(!super.mediaSetCallback(e))return;Object.keys(this._mediaStatePropagators).forEach(t=>{let i=t.split(","),s=this._mediaStatePropagators[t];i.forEach(m=>{let u=m==g.event?this.getRootNode():e;u.addEventListener(m,s)}),s()});try{let t=l.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){console.debug("Error getting volume pref",t)}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{let{events:i,handler:s}=this.mediaStatePropagators[t];i.forEach(m=>{let u=m==g.event?this.getRootNode():e;u.removeEventListener(m,s)})}),this.propagateMediaState("mediaPaused",!0)}propagateMediaState(e,t){M(this.children,e,t),M(this.associatedElements,e,t)}associateElement(e){this.associatedElements.push(e),Object.keys(n).forEach(t=>{e.addEventListener(n[t],this[`_handle${x(t,!0)}`])}),this.media&&M([e],"mediaPaused",this.media.paused)}unassociateElement(e){els=this.associatedElements;let t=els.indexOf(e);t>-1&&els.splice(t,1),Object.keys(n).forEach(i=>{e.addEventListener(n[i],this[`_handle${x(i,!0)}`])})}play(){this.dispatchMediaEvent(xe)}pause(){this.dispatchMediaEvent(Ce)}get muted(){return!!(this.media&&this.media.muted)}set muted(e){let t=e?_e:Te;this.dispatchMediaEvent(t)}get volume(){let e=this.media;return e?e.volume:1}set volume(e){this.dispatchMediaEvent(ke,{detail:e})}requestFullscreen(){this.dispatchMediaEvent(Se)}exitFullscreen(){this.dispatchMediaEvent(Re)}get currentTime(){let e=this.media;return e?e.currentTime:0}set currentTime(e){this.dispatchMediaEvent(je,{detail:e})}get playbackRate(){let e=this.media;return e?e.currentTime:1}set playbackRate(e){this.dispatchMediaEvent(De,{detail:e})}requestPictureInPicture(){this.dispatchMediaEvent(Ae,{detail:time})}exitPictureInPicture(){this.dispatchMediaEvent(Pe,{detail:time})}requestPreview(e){this.dispatchMediaEvent(Ie,{detail:e})}};function M(a,e,t){Array.from(a).forEach(i=>{if(!i.children)return;let s=i.nodeName.toLowerCase();if(i.slot==="media")return;function m(){typeof i[e]!="undefined"&&(i[e]=t),M(i.children,e,t),i.shadowRoot&&M(i.shadowRoot.childNodes,e,t)}s.includes("-")&&!l.customElements.get(s)?l.customElements.whenDefined(s).then(m):m()})}o("media-controller",k);var S=k,z=r.createElement("template"),V=`
-  height: var(--thumb-height);
-  width: var(--media-range-thumb-width, 10px);
-  border: var(--media-range-thumb-border, none);
-  border-radius: var(--media-range-thumb-border-radius, 10px);
-  background: var(--media-range-thumb-background, #fff);
-  box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
-  cursor: pointer;
-  transition: var(--media-range-thumb-transition, none);
-  transform: var(--media-range-thumb-transform, none);
-  opacity: var(--media-range-thumb-opacity, 1);
-`,R=`
-  width: var(--media-range-track-width, 100%);
-  min-width: 40px;
-  height: var(--track-height);
-  border: var(--media-range-track-border, none);
-  border-radius: var(--media-range-track-border-radius, 0);
-  background: var(--media-range-track-background-internal, --media-range-track-background, #eee);
-
-  box-shadow: var(--media-range-track-box-shadow, none);
-  transition: var(--media-range-track-transition, none);
-  cursor: pointer;
-`;z.innerHTML=`
-  <style>
-    :host {
-      --thumb-height: var(--media-range-thumb-height, 10px);
-      --track-height: var(--media-range-track-height, 4px);
-
-      position: relative;
-      display: inline-block;
-      vertical-align: middle;
-      box-sizing: border-box;
-      background-color: var(--media-control-background, rgba(20,20,30, 0.7));
-      transition: background-color 0.15s linear;
-      height: 44px;
-      width: 100px;
-      min-height: 24px;
-      font-size: 16px;
-      line-height: 24px;
-      padding: 0 10px;
-    }
-
-    /*
-      Only show outline when keyboard focusing.
-      https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
-    */
-    :host-context([media-keyboard-control]):host(:focus),
-    :host-context([media-keyboard-control]):host(:focus-within) {
-      box-shadow: inset 0 0 0 2px rgba(27, 127, 204, 0.9);
-    }
-
-    :host(:hover) {
-      background-color: var(--media-control-hover-background, rgba(50,50,60, 0.7));
-    }
-
-    input[type=range] {
-      /* Reset */
-      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-      background: transparent; /* Otherwise white in Chrome */
-
-      /* Fill host with the range */
-      height: 100%;
-      width: var(--media-range-track-width, 100%); /* Specific width is required for Firefox. */
-
-      box-sizing: border-box;
-      padding: 0;
-      margin: 0;
-    }
-
-    /* Special styling for WebKit/Blink */
-    input[type=range]::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      ${V}
-      /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
-      margin-top: calc(calc(0px - var(--thumb-height) + var(--track-height)) / 2);
-    }
-    input[type=range]::-moz-range-thumb { ${V} }
-
-    input[type=range]::-webkit-slider-runnable-track { ${R} }
-    input[type=range]::-moz-range-track { ${R} }
-    input[type=range]::-ms-track {
-      /* Reset */
-      width: 100%;
-      cursor: pointer;
-      /* Hides the slider so custom styles can be added */
-      background: transparent;
-      border-color: transparent;
-      color: transparent;
-
-      ${R}
-    }
-
-    /* Eventually want to move towards different styles for focus-visible
-       https://github.com/WICG/focus-visible/blob/master/src/focus-visible.js
-       Youtube appears to do this by de-focusing a button after a button click */
-    input[type=range]:focus {
-      outline: 0;
-    }
-    input[type=range]:focus::-webkit-slider-runnable-track {
-      outline: 0;
-    }
-
-    input[type=range]:disabled::-webkit-slider-thumb {
-      background-color: #777;
-    }
-
-    input[type=range]:disabled::-webkit-slider-runnable-track {
-      background-color: #777;
-    }
-
-  </style>
-  <input id="range" type="range" min="0" max="1000" step="1" value="0">
-`;var j=class extends p{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(z.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this))}connectedCallback(){this.updateBar()}updateBar(){let e=this.getBarColors(),t="linear-gradient(to right, ",i=0;e.forEach(s=>{if(s[1]<i)return;t=t+`${s[0]} ${i}%, ${s[0]} ${s[1]}%,`,i=s[1]}),t=t.slice(0,t.length-1)+")",this.style.setProperty("--media-range-track-background-internal",t)}getBarColors(){let e=this.range,t=this.range.value/1e3*100,i=[["var(--media-range-bar-color, #fff)",t],["var(--media-range-track-background, #333)",100]];return i}};o("media-chrome-range",j);var y=j,B=r.createElement("template");B.innerHTML=`
-  <style>
-    :host {
-      /* Need position to display above video for some reason */
-      position: relative;
-      box-sizing: border-box;
-      display: inline-flex;
-
-      /* Allows putting the progress range at full width on other lines */
-      flex-wrap: wrap;
-
-      color: var(--media-icon-color, #eee);
-    }
-
-    ::slotted(*), :host > * {
-      /* position: relative; */
-    }
-
-    media-time-range,
-    ::slotted(media-time-range),
-    ::slotted(media-progress-range),
-    ::slotted(media-clip-selector) {
-      flex-grow: 1;
-    }
-  </style>
-
-  <slot></slot>
-`;var Q=class extends p{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(B.content.cloneNode(!0))}connectedCallback(){}};o("media-control-bar",Q);function E(a,e){let t=!1;a<0&&(t=!0,a=0-a),a=a<0?0:a;let i=Math.floor(a%60),s=Math.floor(a/60%60),m=Math.floor(a/3600),u=Math.floor(e/60%60),d=Math.floor(e/3600);return(isNaN(a)||a===Infinity)&&(m=s=i="-"),m=m>0||d>0?m+":":"",s=((m||u>=10)&&s<10?"0"+s:s)+":",i=i<10?"0"+i:i,(t?"-":"")+m+s+i}var F=r.createElement("template");F.innerHTML=`
-  <style>
-    :host {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-
-      background-color: var(--media-control-background, rgba(20,20,30, 0.7));
-
-      /* Default width and height can be overridden externally */
-      height: 44px;
-
-      box-sizing: border-box;
-      padding: 0 5px;
-
-      /* Min icon size is 24x24 */
-      min-height: 24px;
-      min-width: 24px;
-
-      /* Vertically center any text */
-      font-size: 16px;
-      line-height: 24px;
-      font-family: sans-serif;
-      text-align: center;
-      color: #ffffff;
-    }
-
-    #container {}
-  </style>
-  <div id="container"></div>
-`;var I=class extends p{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(F.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}};o("media-text-display",I);var b=I,$=class extends b{connectedCallback(){this._update()}mediaCurrentTimeSet(){this._update()}_update(){this.container.innerHTML=E(this.mediaCurrentTime)}};o("media-current-time-display",$);var q=class extends b{connectedCallback(){this._update()}mediaDurationSet(){this._update()}_update(){this.container.innerHTML=E(this.mediaDuration)}};o("media-duration-display",q);var Le='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path class="icon" id="a" d="M24 24H0V0h24v24z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path class="icon" d="M9.6 13.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.9-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5zM4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8z" clip-path="url(#b)"/></svg>',O=r.createElement("template");O.innerHTML=`  
-  <slot name="forward">${Le}</slot>
-`;var W=class extends f{constructor(e={}){e=Object.assign({slotTemplate:O},e),super(e)}handleClick(){this.dispatchMediaEvent(n.MEDIA_SEEK_REQUEST,{detail:this.mediaCurrentTime+30})}};o("media-seek-forward-button",W);var Ue=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <path d="M0 0h24v24H0z" fill="none"/>
-  <path class="icon" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
-</svg>`,He=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <path d="M0 0h24v24H0z" fill="none"/>
-  <path class="icon" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
-</svg>`,K=r.createElement("template");K.innerHTML=`
-  <style>
-  :host([media-is-fullscreen]) slot:not([name=exit]) > *, 
-  :host([media-is-fullscreen]) ::slotted(:not([slot=exit])) {
-    display: none;
-  }
-
-  /* Double negative, but safer if display doesn't equal 'block' */
-  :host(:not([media-is-fullscreen])) slot:not([name=enter]) > *, 
-  :host(:not([media-is-fullscreen])) ::slotted(:not([slot=enter])) {
-    display: none;
-  }
-  </style>
-
-  <slot name="enter">${Ue}</slot>
-  <slot name="exit">${He}</slot>
-`;var Y=class extends f{constructor(e={}){e=Object.assign({slotTemplate:K},e),super(e)}handleClick(e){let t=this.mediaIsFullscreen?n.MEDIA_EXIT_FULLSCREEN_REQUEST:n.MEDIA_ENTER_FULLSCREEN_REQUEST;this.dispatchMediaEvent(t)}static get observedAttributes(){return["fullscreen-element"].concat(super.observedAttributes||[])}get fullscreenElement(){return this._fullscreenElement||this.media&&this.media.closest("media-container, media-chrome")||this.media}set fullscreenElement(e){this._fullscreenElement=r.querySelector(e)}};o("media-fullscreen-button",Y);var Ne='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',X='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',ze='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',G=r.createElement("template");G.innerHTML=`
-  <style>
-  /* Default to High slot/icon. */
-  :host(:not([media-volume-level])) slot:not([name=high]) > *, 
-  :host(:not([media-volume-level])) ::slotted(:not([slot=high])),
-  :host([media-volume-level=high]) slot:not([name=high]) > *, 
-  :host([media-volume-level=high]) ::slotted(:not([slot=high])) {
-    display: none;
-  }
-
-  :host([media-volume-level=off]) slot:not([name=off]) > *, 
-  :host([media-volume-level=off]) ::slotted(:not([slot=off])) {
-    display: none;
-  }
-
-  :host([media-volume-level=low]) slot:not([name=low]) > *, 
-  :host([media-volume-level=low]) ::slotted(:not([slot=low])) {
-    display: none;
-  }
-
-  :host([media-volume-level=medium]) slot:not([name=medium]) > *, 
-  :host([media-volume-level=medium]) ::slotted(:not([slot=medium])) {
-    display: none;
-  }
-  </style>
-
-  <slot name="off">${Ne}</slot>
-  <slot name="low">${X}</slot>
-  <slot name="medium">${X}</slot>
-  <slot name="high">${ze}</slot>
-`;var J=class extends f{constructor(e={}){e=Object.assign({slotTemplate:G},e),super(e)}handleClick(e){let t=this.mediaMuted?n.MEDIA_UNMUTE_REQUEST:n.MEDIA_MUTE_REQUEST;this.dispatchMediaEvent(t)}};o("media-mute-button",J);var Z='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',ee=r.createElement("template");ee.innerHTML=`
-  <style>
-  :host([media-is-pip]) slot:not([name=exit]) > *, 
-  :host([media-is-pip]) ::slotted(:not([slot=exit])) {
-    display: none;
-  }
-
-  /* Double negative, but safer if display doesn't equal 'block' */
-  :host(:not([media-is-pip])) slot:not([name=enter]) > *, 
-  :host(:not([media-is-pip])) ::slotted(:not([slot=enter])) {
-    display: none;
-  }
-  </style>
-
-  <slot name="enter">${Z}</slot>
-  <slot name="exit">${Z}</slot>
-`;var te=class extends f{constructor(e={}){e=Object.assign({slotTemplate:ee},e),super(e)}handleClick(e){let t=this.mediaIsPip?n.MEDIA_EXIT_PIP_REQUEST:n.MEDIA_ENTER_PIP_REQUEST;this.dispatchMediaEvent(t)}};o("media-pip-button",te);var Ve='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',Be='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',ie=r.createElement("template");ie.innerHTML=`
-  <style>
-  :host([media-paused]) slot[name=pause] > *, 
-  :host([media-paused]) ::slotted([slot=pause]) {
-    display: none;
-  }
-
-  :host(:not([media-paused])) slot[name=play] > *, 
-  :host(:not([media-paused])) ::slotted([slot=play]) {
-    display: none;
-  }
-  </style>
-
-  <slot name="play">${Ve}</slot>
-  <slot name="pause">${Be}</slot>
-`;var se=class extends f{constructor(e={}){e=Object.assign({slotTemplate:ie},e),super(e)}handleClick(e){let t=this.mediaPaused?n.MEDIA_PLAY_REQUEST:n.MEDIA_PAUSE_REQUEST;this.dispatchMediaEvent(t)}};o("media-play-button",se);var ae=[1,1.25,1.5,1.75,2],oe=class extends f{constructor(){super();this._rates=ae,this.mediaPlaybackRateSet(1)}static get observedAttributes(){return["rates"].concat(super.observedAttributes||[])}set rates(e){e?(typeof e=="string"&&(e=e.split(/,\s?/)),this._rates=e):this._rates=ae}get rates(){return this._rates}handleClick(e){let t=this.mediaPlaybackRate,i=this.rates.find(s=>s>t);i||(i=this.rates[0]),this.dispatchMediaEvent(n.MEDIA_PLAYBACK_RATE_REQUEST,{detail:i})}mediaPlaybackRateSet(e){this.nativeEl.innerHTML=`${e}x`}};o("media-playback-rate-button",oe);var re=r.createElement("template");re.innerHTML=`
-<style>
-  :host {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  #poster {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-
-    background-color: #000;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    transition: opacity 0.2s ease;
-    opacity: 1;
-  }
-
-  #poster.hidden {
-    display: none;
-    opacity: 0;
-  }
-</style>
-<div id="poster"></div>
-`;var ne=class extends p{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(re.content.cloneNode(!0)),this.addEventListener("click",t=>{this.onClick(t)})}mediaSetCallback(e){e.addEventListener("play",()=>{this.hide()})}onClick(){let e=this.media;e&&e.play()}set src(e){this.shadowRoot.querySelector("#poster").style.backgroundImage=`url(${e})`}get src(){let e=this.shadowRoot.querySelector("#poster").style.backgroundImage;return!e||e==="none"?null:e.substr(4,e.length-5)}show(){this.shadowRoot.querySelector("#poster").className=""}hide(){this.shadowRoot.querySelector("#poster").className="hidden"}};o("media-poster",ne);var me=r.createElement("template");me.innerHTML=`
-  <style>
-    :host {
-      box-sizing: border-box;
-      background-color: #000;
-      width: 284px;
-      height: 160px;
-      overflow: hidden;
-    }
-
-    img {
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-  </style>
-  <img crossorigin loading="eager" decoding="async" />
-`;var le=class extends p{static get observedAttributes(){return["time"].concat(super.observedAttributes||[])}constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(me.content.cloneNode(!0))}mediaPreviewImageSet(e){this.update()}mediaPreviewCoordsSet(e){this.update()}update(){if(!this.mediaPreviewCoords||!this.mediaPreviewImage)return;let e=this.shadowRoot.querySelector("img"),[t,i,s,m]=this.mediaPreviewCoords,u=this.mediaPreviewImage,d=this.offsetWidth/s,h=()=>{e.style.width=`${d*e.naturalWidth}px`,e.style.height=`${d*e.naturalHeight}px`};e.src!==u&&(e.onload=h,e.src=u,h()),h(),e.style.left=`-${d*t}px`,e.style.top=`-${d*i}px`}};o("media-thumbnail-preview",le);var de=r.createElement("template");de.innerHTML=`
-  <style>
-    #thumbnailContainer {
-      display: none;
-      position: absolute;
-      top: 0;
-    }
-
-    media-thumbnail-preview {
-      position: absolute;
-      bottom: 10px;
-      border: 2px solid #fff;
-      border-radius: 2px;
-      background-color: #000;
-      width: 160px;
-      height: 90px;
-
-      /* Negative offset of half to center on the handle */
-      margin-left: -80px;
-    }
-
-    /* Can't get this working. Trying a downward triangle. */
-    /* media-thumbnail-preview::after {
-      content: "";
-      display: block;
-      width: 300px;
-      height: 300px;
-      margin: 100px;
-      background-color: #ff0;
-    } */
-
-    :host([media-preview-image]:hover) #thumbnailContainer {
-      display: block;
-      animation: fadeIn ease 0.5s;
-    }
-
-    @keyframes fadeIn {
-      0% {
-        /* transform-origin: bottom center; */
-        /* transform: scale(0.7); */
-        margin-top: 10px;
-        opacity: 0;
-      }
-      100% {
-        /* transform-origin: bottom center; */
-        /* transform: scale(1); */
-        margin-top: 0;
-        opacity: 1;
-      }
-    }
-  </style>
-  <div id="thumbnailContainer">
-    <media-thumbnail-preview></media-thumbnail-preview>
-  </div>
-`;var A=class extends y{static get observedAttributes(){return["thumbnails"].concat(super.observedAttributes||[])}constructor(){super();this.shadowRoot.appendChild(de.content.cloneNode(!0)),this.setMediaTimeWithRange=()=>{let e=Math.round(this.range.value/1e3*this.mediaDuration);this.dispatchMediaEvent(n.MEDIA_SEEK_REQUEST,{detail:e})},this.range.addEventListener("input",this.setMediaTimeWithRange),this.updateRangeWithMediaTime=()=>{this.range.value=Math.round(this.mediaCurrentTime/this.mediaDuration*1e3),this.updateBar()},this.enableThumbnails()}mediaCurrentTimeSet(e){this.updateRangeWithMediaTime()}mediaDurationSet(e){this.updateRangeWithMediaTime()}mediaBufferedSet(e){this.updateBar()}getBarColors(){let e=super.getBarColors();if(!this.mediaBuffered||!this.mediaBuffered.length||this.mediaDuration<=0)return e;let t=this.mediaBuffered,i=t[t.length-1][1]/this.mediaDuration*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",i]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview");let e=this.shadowRoot.querySelector("#thumbnailContainer");e.classList.add("enabled");let t,i=()=>{t=d=>{let h=this.mediaDuration;if(!h)return;let c=this.range.getBoundingClientRect(),v=(d.clientX-c.left)/c.width;v=Math.max(0,Math.min(1,v));let C=c.left-this.getBoundingClientRect().left,we=C+v*c.width;this.thumbnailPreview.style.left=`${we}px`,this.dispatchMediaEvent(n.MEDIA_PREVIEW_REQUEST,{detail:v*h})},l.addEventListener("mousemove",t,!1)},s=()=>{l.removeEventListener("mousemove",t)},m=!1,u=d=>{if(!m&&this.mediaDuration){m=!0,this.thumbnailPreview.style.display="block",i();let h=c=>{c.target!=this&&!this.contains(c.target)&&(this.thumbnailPreview.style.display="none",l.removeEventListener("mousemove",h),m=!1,s())};l.addEventListener("mousemove",h,!1)}this.mediaDuration||(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",u,!1)}};o("media-time-range",A);var P=A,ue=class extends P{constructor(){super();console.warn("MediaChrome: <media-progress-range> is deprecated. Use <media-time-range> instead.")}};o("media-progress-range",ue);var Qe='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path class="icon" id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path class="icon" d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-2.4 8.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5c0-.1-.1-.2-.1-.3s-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z" clip-path="url(#b)"/></svg>',he=r.createElement("template");he.innerHTML=`  
-  <slot name="backward">${Qe}</slot>
-`;var ce=class extends f{constructor(e={}){e=Object.assign({slotTemplate:he},e),super(e)}handleClick(){let e=Math.max(this.mediaCurrentTime-30,0);this.dispatchMediaEvent(n.MEDIA_SEEK_REQUEST,{detail:e})}};o("media-seek-backward-button",ce);var pe=class extends b{connectedCallback(){this._update()}mediaCurrentTimeSet(){this._update()}mediaDurationSet(){this._update()}_update(){this.getAttribute("remaining")!==null?this.container.innerHTML=E(0-(this.mediaDuration-this.mediaCurrentTime)):this.container.innerHTML=E(this.mediaCurrentTime),this.getAttribute("show-duration")!==null&&(this.container.innerHTML+=" / "+E(this.mediaDuration))}};o("media-time-display",pe);var fe=r.createElement("template");fe.innerHTML=`
-  <style>
-    :host {
-
-    }
-  </style>
-
-  <slot></slot>
-`;var ge=class extends p{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(fe.content.cloneNode(!0))}};o("media-title-bar",ge);var ve=class extends y{constructor(){super();this.range.addEventListener("input",()=>{let e=this.range.value/1e3;this.dispatchMediaEvent(n.MEDIA_VOLUME_REQUEST,{detail:e})})}connectedCallback(){this._updateRange()}mediaVolumeSet(e){this._updateRange()}mediaMutedSet(e){this._updateRange()}_updateRange(){let e=this.range,t=this.mediaMuted,i=this.mediaVolume;t?e.value=0:e.value=Math.round(i*1e3),this.updateBar()}};o("media-volume-range",ve);var Ee=class extends S{};l.customElements.get("media-chrome")||l.customElements.define("media-chrome",Ee);var be=class extends S{constructor(){super();console.warn("MediaChrome: <media-container> is deprecated. Use <media-controller>.")}};l.customElements.get("media-container")||l.customElements.define("media-container",be);})();
+import m from"./media-chrome-button.js";import i from"./media-controller.js";import r from"./media-chrome-range.js";import d from"./media-control-bar.js";import n from"./media-current-time-display.js";import s from"./media-duration-display.js";import l from"./media-time-display.js";import p from"./media-captions-button.js";import u from"./media-seek-forward-button.js";import c from"./media-fullscreen-button.js";import f from"./media-mute-button.js";import M from"./media-pip-button.js";import j from"./media-play-button.js";import b from"./media-playback-rate-button.js";import g from"./media-progress-range.js";import h from"./media-seek-backward-button.js";import o from"./media-thumbnail-preview.js";import w from"./media-time-range.js";import B from"./media-title-element.js";import y from"./media-volume-range.js";import{Window as e}from"./utils/server-safe-globals.js";class C extends i{}e.customElements.get("media-chrome")||e.customElements.define("media-chrome",C);class t extends i{constructor(){super();console.warn("MediaChrome: <media-container> is deprecated. Use <media-controller>.")}}e.customElements.get("media-container")||e.customElements.define("media-container",t);export{m as MediaChromeButton,t as MediaContainer,i as MediaController,r as MediaChromeRange,d as MediaControlBar,n as MediaCurrentTimeDisplay,s as MediaDurationDisplay,l as MediaTimeDisplay,p as MediaCaptionsButton,u as MediaSeekForwardButton,c as MediaFullscreenButton,f as MediaMuteButton,M as MediaPipButton,j as MediaPlayButton,b as MediaPlaybackRateButton,g as MediaProgressRange,h as MediaSeekBackwardButton,o as MediaThumbnailPreview,o as MediaThumbnailPreviewElement,w as MediaTimeRange,B as MediaTitleElement,y as MediaVolumeRange};

dist/media-chrome-button.js

@@ -1,6 +0,7 @@
-import s from"./media-chrome-html-element.js";import{defineCustomElement as d}from"./utils/defineCustomElement.js";import{Document as n}from"./utils/server-safe-globals.js";const i=n.createElement("template");i.innerHTML=`
+import{MediaUIAttributes as r}from"./constants.js";import{defineCustomElement as b}from"./utils/defineCustomElement.js";import{Window as g,Document as a}from"./utils/server-safe-globals.js";const d=a.createElement("template");d.innerHTML=`
 <style>
   :host {
-    position: relative;
     display: inline-block;
+    width: auto;
+    height: auto;
     vertical-align: middle;
@@ -10,16 +11,16 @@ box-sizing: border-box;
 
-    /* Default width and height can be overridden externally */
     padding: 10px;
-    
 
     /* Vertically center any text */
     font-size: 14px;
-    line-height: 1;
     font-weight: bold;
+    color: #ffffff;
+    text-align: center;
 
-    /* Min icon size is 24x24 */
-    min-height: 24px;
-    min-width: 24px;
+    transition: background-color 0.15s linear;
 
-    transition: background-color 0.15s linear;
+    pointer-events: auto;
+    cursor: pointer;
+    font-family: Arial, sans-serif;
+    vertical-align: middle;
   }
@@ -40,29 +41,2 @@
 
-  /* Undo the default button styles and fill the parent element */
-  button {
-    width: 100%;
-    vertical-align: middle;
-    border: none;
-    margin: 0;
-    padding: 0;
-    text-decoration: none;
-    background: transparent;
-    color: #ffffff;
-    font-family: sans-serif;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: bold;
-    font-family: Arial, sans-serif;
-    cursor: pointer;
-    text-align: center;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-
-  button:hover {}
-  button:focus {
-    outline: 0;
-  }
-  button:active {}
-
   svg, img, ::slotted(svg), ::slotted(img) {
@@ -74,6 +48,13 @@ width: var(--media-button-icon-width, 24px);
     fill: var(--media-icon-color, #eee);
+    vertical-align: middle;
+    max-width: 100%;
+    max-height: 100%;
+    min-width: 100%;
+    min-height: 100%;
   }
+
+  ::slotted(div), ::slotted(span) {
+    height: 24px;
+  }
 </style>
-
-<button></button>
-`;class a extends s{constructor(e={}){super();const r=this.attachShadow({mode:"open"}),o=i.content.cloneNode(!0);this.nativeEl=o.querySelector("button");let t=e.slotTemplate;t||(t=n.createElement("template"),t.innerHTML=`<slot>${e.defaultContent||""}</slot>`),this.nativeEl.appendChild(t.content.cloneNode(!0)),r.appendChild(o),this.addEventListener("click",l=>{this.handleClick(l)})}handleClick(){}}d("media-chrome-button",a);export default a;
+`;const l=["Enter"," "];class h extends g.HTMLElement{static get observedAttributes(){return[r.MEDIA_CONTROLLER]}constructor(i={}){super();const n=this.attachShadow({mode:"open"}),e=d.content.cloneNode(!0);this.nativeEl=e;let o=i.slotTemplate;o||(o=a.createElement("template"),o.innerHTML=`<slot>${i.defaultContent||""}</slot>`),this.nativeEl.appendChild(o.content.cloneNode(!0)),n.appendChild(e),this.addEventListener("click",t=>{this.handleClick(t)});const s=t=>{const{key:c}=t;if(!l.includes(c)){this.removeEventListener("keyup",s);return}this.handleClick(t)};this.addEventListener("keydown",t=>{const{metaKey:c,altKey:u,key:m}=t;if(c||u||!l.includes(m)){this.removeEventListener("keyup",s);return}this.addEventListener("keyup",s)})}attributeChangedCallback(i,n,e){var o,s;if(i===r.MEDIA_CONTROLLER){if(n){const t=a.getElementById(n);(o=t==null?void 0:t.unassociateElement)==null||o.call(t,this)}if(e){const t=a.getElementById(e);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}}connectedCallback(){var n;this.setAttribute("role","button"),this.setAttribute("tabindex",0);const i=this.getAttribute(r.MEDIA_CONTROLLER);if(i){const e=a.getElementById(i);(n=e==null?void 0:e.associateElement)==null||n.call(e,this)}}disconnectedCallback(){var n;if(this.getAttribute(r.MEDIA_CONTROLLER)){const e=a.getElementById(mediaControllerId);(n=e==null?void 0:e.unassociateElement)==null||n.call(e,this)}}handleClick(){}}b("media-chrome-button",h);export default h;

dist/media-chrome-range.js

@@ -1,2 +0,2 @@
-import d from"./media-chrome-html-element.js";import{defineCustomElement as c}from"./utils/defineCustomElement.js";import{Document as h}from"./utils/server-safe-globals.js";const i=h.createElement("template"),o=`
+import{MediaUIAttributes as o}from"./constants.js";import{defineCustomElement as g}from"./utils/defineCustomElement.js";import{Window as b,Document as i}from"./utils/server-safe-globals.js";const c=i.createElement("template"),h=`
   height: var(--thumb-height);
@@ -12,3 +12,3 @@ width: var(--media-range-thumb-width, 10px);
   opacity: var(--media-range-thumb-opacity, 1);
-`,n=`
+`,s=`
   width: var(--media-range-track-width, 100%);
@@ -24,3 +24,3 @@ min-width: 40px;
   cursor: pointer;
-`;i.innerHTML=`
+`;c.innerHTML=`
   <style>
@@ -39,6 +39,5 @@ :host {
       width: 100px;
-      min-height: 24px;
-      font-size: 16px;
-      line-height: 24px;
       padding: 0 10px;
+
+      pointer-events: auto;
     }
@@ -65,3 +64,3 @@
       /* Fill host with the range */
-      height: 100%;
+      min-height: 100%;
       width: var(--media-range-track-width, 100%); /* Specific width is required for Firefox. */
@@ -77,10 +76,10 @@
       -webkit-appearance: none;
-      ${o}
+      ${h}
       /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
       margin-top: calc(calc(0px - var(--thumb-height) + var(--track-height)) / 2);
     }
-    input[type=range]::-moz-range-thumb { ${o} }
+    input[type=range]::-moz-range-thumb { ${h} }
 
-    input[type=range]::-webkit-slider-runnable-track { ${n} }
-    input[type=range]::-moz-range-track { ${n} }
+    input[type=range]::-webkit-slider-runnable-track { ${s} }
+    input[type=range]::-moz-range-track { ${s} }
     input[type=range]::-ms-track {
@@ -95,3 +94,3 @@ /* Reset */
 
-      ${n}
+      ${s}
     }
@@ -119,2 +118,2 @@
   <input id="range" type="range" min="0" max="1000" step="1" value="0">
-`;class s extends d{constructor(){super();var a=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(i.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this))}connectedCallback(){this.updateBar()}updateBar(){const a=this.getBarColors();let e="linear-gradient(to right, ",r=0;a.forEach(t=>{if(t[1]<r)return;e=e+`${t[0]} ${r}%, ${t[0]} ${t[1]}%,`,r=t[1]}),e=e.slice(0,e.length-1)+")",this.style.setProperty("--media-range-track-background-internal",e)}getBarColors(){const a=this.range,e=this.range.value/1e3*100;let r=[["var(--media-range-bar-color, #fff)",e],["var(--media-range-track-background, #333)",100]];return r}}c("media-chrome-range",s);export default s;
+`;class u extends b.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(c.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.setAttribute("aria-live","polite"),this.range.addEventListener("input",this.updateBar.bind(this))}attributeChangedCallback(a,t,e){var n,d;if(a===o.MEDIA_CONTROLLER){if(t){const r=i.getElementById(t);(n=r==null?void 0:r.unassociateElement)==null||n.call(r,this)}if(e){const r=i.getElementById(e);(d=r==null?void 0:r.associateElement)==null||d.call(r,this)}}}connectedCallback(){var t;const a=this.getAttribute(o.MEDIA_CONTROLLER);if(a){const e=i.getElementById(a);(t=e==null?void 0:e.associateElement)==null||t.call(e,this)}this.updateBar()}disconnectedCallback(){var t;if(this.getAttribute(o.MEDIA_CONTROLLER)){const e=i.getElementById(mediaControllerId);(t=e==null?void 0:e.unassociateElement)==null||t.call(e,this)}}updateBar(){const a=this.getBarColors();let t="linear-gradient(to right, ",e=0;a.forEach(n=>{n[1]<e||(t=t+`${n[0]} ${e}%, ${n[0]} ${n[1]}%,`,e=n[1])}),t=t.slice(0,t.length-1)+")",this.style.setProperty("--media-range-track-background-internal",t)}getBarColors(){const a=this.range,t=a.value/a.max*100;return[["var(--media-range-bar-color, #fff)",t],["var(--media-range-track-background, #333)",100]]}}g("media-chrome-range",u);export default u;

dist/media-container.js

@@ -1,2 +0,2 @@
-import{defineCustomElement as c}from"./utils/defineCustomElement.js";import{Window as a,Document as b}from"./utils/server-safe-globals.js";import{MediaChromeHTMLElement as p,mediaUIEvents as d}from"./media-chrome-html-element.js";const h=b.createElement("template");h.innerHTML=`
+import{defineCustomElement as b}from"./utils/defineCustomElement.js";import{Window as o,Document as f}from"./utils/server-safe-globals.js";import{MediaUIEvents as u,MediaUIAttributes as c}from"./constants.js";import{nouns as m}from"./labels/labels.js";const h=f.createElement("template");h.innerHTML=`
   <style>
@@ -6,18 +6,55 @@ :host {
       position: relative;
+      display: inline-block;
+      background-color: #000;
+    }
 
-      /* Position controls at the bottom  */
-      display: inline-flex;
-      flex-direction: column-reverse;
+    :host(:not([audio])) *[part~=layer] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: start;
+      pointer-events: none;
+      background: none;
+    }
 
-      /* Max out at 100% width for smaller screens (< 720px) */
-      max-width: 100%;
-      background-color: #000;
+    :host(:not([audio])) :is([part~=gestures-layer],[part~=media-layer]) {
+      pointer-events: auto;
     }
+    
+    :host(:not([audio])) *[part~=layer][part~=centered-layer] {
+      align-items: center;
+      justify-content: center;
+    }
 
+    .spacer {
+      pointer-events: none;
+      background: none;
+    }
+
+    /* Position the media element to fill the container */
+    ::slotted([slot=media]) {
+      width: 100%;
+      height: 100%;
+    }
+
     /* Video specific styles */
     :host(:not([audio])) {
-      height: 480px;
+      aspect-ratio: var(--media-aspect-ratio, auto 3 / 2);
       width: 720px;
     }
 
+    :host(:not([audio])) .spacer {
+      flex-grow: 1;
+    }
+
+    @supports not (aspect-ratio: 1 / 1) {
+      :host(:not([audio])) {
+        height: 480px;
+      }
+    }
+
     /* Safari needs this to actually make the element fill the window */
@@ -30,29 +67,35 @@ :host(:-webkit-full-screen) {
 
-    /* Position the media element to fill the container */
-    ::slotted([slot=media]) {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
     /* Hide controls when inactive and not paused and not audio */
-    slot:not([media]) ::slotted() {
+    ::slotted(:not([slot=media])) {
       opacity: 1;
       transition: opacity 0.25s;
       visibility: visible;
+      pointer-events: auto;
     }
 
-    :host([user-inactive]:not([media-paused]):not([audio])) slot:not([media]) ::slotted(*) {
+    ::slotted(media-control-bar)  {
+      align-self: stretch;
+    }
+
+    :host([user-inactive]:not([${c.MEDIA_PAUSED}]):not([audio])) ::slotted(:not([slot=media])) {
       opacity: 0;
       transition: opacity 1s;
     }
+  </style>
 
-    slot:not([media]) ::slotted(media-control-bar)  {
-      width: 100%;
-    }
-  </style>
-  <slot name="media"></slot>
-  <slot></slot>
-`;class m extends p{constructor(){super();const e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(h.content.cloneNode(!0));const t=(u,f)=>{const n=this.media;for(let i of u)i.type==="childList"&&(i.removedNodes.forEach(s=>{if(s.slot=="media"&&i.target==this){let o=i.previousSibling&&i.previousSibling.previousElementSibling;if(!o||!n)this.mediaUnsetCallback(s);else{let l=o.slot!=="media";for(;(o=o.previousSibling)!==null;)o.slot=="media"&&(l=!1);l&&this.mediaUnsetCallback(s)}}}),n&&i.addedNodes.forEach(s=>{s==n&&this.mediaSetCallback(s)}))},r=new MutationObserver(t);r.observe(this,{childList:!0,subtree:!0})}static get observedAttributes(){return["autohide"].concat(super.observedAttributes||[])}get media(){return this.querySelector(":scope > [slot=media]")}mediaSetCallback(e){if(!e||!e.play)return console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',e),!1;const t=e.nodeName.toLowerCase();return t.includes("-")&&!a.customElements.get(t)?(a.customElements.whenDefined(t).then(()=>{this.mediaSetCallback(e)}),!1):(this._mediaClickPlayToggle=r=>{e.paused?this.dispatchMediaEvent(d.MEDIA_PLAY_REQUEST):this.dispatchMediaEvent(d.MEDIA_PAUSE_REQUEST)},e.addEventListener("click",this._mediaClickPlayToggle,!1),!0)}mediaUnsetCallback(e){e.removeEventListener("click",this._mediaClickPlayToggle)}connectedCallback(){this.media&&this.mediaSetCallback(this.media);const e=()=>{if(this.removeAttribute("user-inactive"),a.clearTimeout(this.inactiveTimeout),this.autohide<0)return;this.inactiveTimeout=a.setTimeout(()=>{this.setAttribute("user-inactive","user-inactive")},this.autohide*1e3)};this.addEventListener("keyup",t=>{e()}),this.addEventListener("keyup",t=>{this.setAttribute("media-keyboard-control","media-keyboard-control")}),this.addEventListener("mouseup",t=>{this.removeAttribute("media-keyboard-control")}),this.addEventListener("mousemove",t=>{if(t.target===this)return;this.removeAttribute("user-inactive"),a.clearTimeout(this.inactiveTimeout),t.target===this.media&&e()}),this.addEventListener("mouseout",t=>{this.autohide>-1&&this.setAttribute("user-inactive","user-inactive")})}set autohide(e){e=Number(e),this._autohide=isNaN(e)?0:e}get autohide(){return this._autohide===void 0?2:this._autohide}}c("media-container-temp",m);export default m;
+  <span part="layer media-layer">
+    <slot name="media"></slot>
+  </span>
+  <span part="layer gesture-layer">
+    <slot name="gestures-chrome"></slot>
+  </span>
+  <span part="layer vertical-layer">
+    <slot name="top-chrome"></slot>
+    <span class="spacer"><slot name="middle-chrome"></slot></span>
+    <!-- default, effectively "bottom-chrome" -->
+    <slot></slot>
+  </span>
+  <span part="layer centered-layer">
+    <slot name="centered-chrome"></slot>
+  </span>
+`;const v=Object.values(c);class p extends o.HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(h.content.cloneNode(!0));const i=(t,g)=>{const l=this.media;for(let a of t)a.type==="childList"&&(a.removedNodes.forEach(n=>{if(n.slot=="media"&&a.target==this){let r=a.previousSibling&&a.previousSibling.previousElementSibling;if(!r||!l)this.mediaUnsetCallback(n);else{let d=r.slot!=="media";for(;(r=r.previousSibling)!==null;)r.slot=="media"&&(d=!1);d&&this.mediaUnsetCallback(n)}}}),l&&a.addedNodes.forEach(n=>{n==l&&this.mediaSetCallback(n)}))};new MutationObserver(i).observe(this,{childList:!0,subtree:!0})}static get observedAttributes(){return["autohide"].concat(v)}attributeChangedCallback(e,i,s){e.toLowerCase()=="autohide"&&(this.autohide=s)}get media(){let e=this.querySelector(":scope > [slot=media]");return(e==null?void 0:e.nodeName)=="SLOT"&&(e=e.assignedElements({flatten:!0})[0]),e}mediaSetCallback(e){if(!e)return console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',e),!1;const i=e.nodeName.toLowerCase();return i.includes("-")&&!o.customElements.get(i)?(o.customElements.whenDefined(i).then(()=>{this.mediaSetCallback(e)}),!1):(this._mediaClickPlayToggle=s=>{const t=e.paused?u.MEDIA_PLAY_REQUEST:u.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new o.CustomEvent(t,{composed:!0,bubbles:!0}))},!0)}mediaUnsetCallback(e){}connectedCallback(){const i=this.getAttribute("audio")!=null?m.AUDIO_PLAYER():m.VIDEO_PLAYER();this.setAttribute("role","region"),this.setAttribute("aria-label",i),this.media&&this.mediaSetCallback(this.media);const s=()=>{this.removeAttribute("user-inactive"),o.clearTimeout(this.inactiveTimeout),!(this.autohide<0)&&(this.inactiveTimeout=o.setTimeout(()=>{this.setAttribute("user-inactive","user-inactive")},this.autohide*1e3))};this.addEventListener("keyup",t=>{s()}),this.addEventListener("keyup",t=>{this.setAttribute("media-keyboard-control","media-keyboard-control")}),this.addEventListener("mouseup",t=>{this.removeAttribute("media-keyboard-control")}),this.addEventListener("mousemove",t=>{t.target!==this&&(this.removeAttribute("user-inactive"),o.clearTimeout(this.inactiveTimeout),t.target===this.media&&s())}),this.addEventListener("mouseout",t=>{this.autohide>-1&&this.setAttribute("user-inactive","user-inactive")})}set autohide(e){e=Number(e),this._autohide=isNaN(e)?0:e}get autohide(){return this._autohide===void 0?2:this._autohide}}b("media-container-temp",p);export default p;

dist/media-control-bar.js

@@ -1,19 +0,11 @@
-import t from"./media-chrome-html-element.js";import{defineCustomElement as s}from"./utils/defineCustomElement.js";import{Document as l}from"./utils/server-safe-globals.js";const e=l.createElement("template");e.innerHTML=`
+import{MediaUIAttributes as n}from"./constants.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{Window as l,Document as i}from"./utils/server-safe-globals.js";const d=i.createElement("template");d.innerHTML=`
   <style>
     :host {
       /* Need position to display above video for some reason */
-      position: relative;
       box-sizing: border-box;
       display: inline-flex;
 
-      /* Allows putting the progress range at full width on other lines */
-      flex-wrap: wrap;
-
       color: var(--media-icon-color, #eee);
     }
 
-    ::slotted(*), :host > * {
-      /* position: relative; */
-    }
-
     media-time-range,
@@ -28,2 +20,2 @@ ::slotted(media-time-range),
   <slot></slot>
-`;class o extends t{constructor(){super();var a=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){}}s("media-control-bar",o);export default o;
+`;class r extends l.HTMLElement{static get observedAttributes(){return[n.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(d.content.cloneNode(!0))}attributeChangedCallback(o,s,t){var a,c;if(o===n.MEDIA_CONTROLLER){if(s){const e=i.getElementById(s);(a=e==null?void 0:e.unassociateElement)==null||a.call(e,this)}if(t){const e=i.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var s;const o=this.getAttribute(n.MEDIA_CONTROLLER);if(o){const t=i.getElementById(o);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}disconnectedCallback(){var s;if(this.getAttribute(n.MEDIA_CONTROLLER)){const t=i.getElementById(mediaControllerId);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}}}m("media-control-bar",r);export default r;

dist/media-controller.js

@@ -1,1 +0,1 @@
-import M from"./media-container.js";import{defineCustomElement as S}from"./utils/defineCustomElement.js";import{Window as c}from"./utils/server-safe-globals.js";import{fullscreenApi as r}from"./utils/fullscreenApi.js";import{constToCamel as m}from"./utils/stringUtils.js";import{mediaUIEvents as n}from"./media-chrome-html-element.js";const{MEDIA_PLAY_REQUEST:R,MEDIA_PAUSE_REQUEST:g,MEDIA_MUTE_REQUEST:I,MEDIA_UNMUTE_REQUEST:T,MEDIA_VOLUME_REQUEST:P,MEDIA_ENTER_FULLSCREEN_REQUEST:U,MEDIA_EXIT_FULLSCREEN_REQUEST:v,MEDIA_SEEK_REQUEST:A,MEDIA_PREVIEW_REQUEST:D,MEDIA_ENTER_PIP_REQUEST:Q,MEDIA_EXIT_PIP_REQUEST:L,MEDIA_PLAYBACK_RATE_REQUEST:b}=n;class u extends M{constructor(){super();this.associatedElements=[];const t={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const e=this.media;e.muted=!1,e.volume===0&&(e.volume=.25)},MEDIA_VOLUME_REQUEST:e=>{const i=this.media,a=e.detail;i.volume=a,a>0&&i.muted&&(i.muted=!1);try{c.localStorage.setItem("media-chrome-pref-volume",a.toString())}catch(s){}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const e=this.getRootNode();e.pictureInPictureElement&&e.exitPictureInPicture(),super[r.enter]()},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{this.getRootNode()[r.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const e=this.getRootNode(),i=this.media;if(!e.pictureInPictureEnabled)return;e[r.element]&&e[r.exit](),i.requestPictureInPicture()},MEDIA_EXIT_PIP_REQUEST:()=>{const e=this.getRootNode();e.exitPictureInPicture&&e.exitPictureInPicture()},MEDIA_SEEK_REQUEST:e=>{const i=this.media,a=e.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=a)},MEDIA_PLAYBACK_RATE_REQUEST:e=>{this.media.playbackRate=e.detail},MEDIA_PREVIEW_REQUEST:e=>{const i=this.media,a=e.detail;if(i&&i.textTracks&&i.textTracks.length){let s=Array.prototype.find.call(i.textTracks,d=>d.label=="thumbnails");if(!s)return;if(!s.cues)return;let o=Array.prototype.find.call(s.cues,d=>d.startTime>=a);if(o){const d=new URL(o.text),[h,p,f,_]=d.hash.split("=")[1].split(",");this.propagateMediaState("mediaPreviewImage",d.href),this.propagateMediaState("mediaPreviewCoords",`${h},${p},${f},${_}`)}}}};Object.keys(t).forEach(e=>{const i=`_handle${m(e,!0)}`;this[i]=a=>{if(a.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}t[e](a,this.media)},this.addEventListener(n[e],this[i])}),this._mediaStatePropagators={"play,pause":()=>{this.propagateMediaState("mediaPaused",this.media.paused)},volumechange:()=>{const{muted:e,volume:i}=this.media;let a="high";i==0||e?a="off":i<.5?a="low":i<.75&&(a="medium"),this.propagateMediaState("mediaMuted",e),this.propagateMediaState("mediaVolume",i),this.propagateMediaState("mediaVolumeLevel",a)},[r.event]:()=>{const e=this.getRootNode()[r.element];this.propagateMediaState("mediaIsFullscreen",e==this)},"enterpictureinpicture,leavepictureinpicture":e=>{let i;e?i=e.type=="enterpictureinpicture":i=this.media==this.getRootNode().pictureInPictureElement,this.propagateMediaState("mediaIsPip",i)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState("mediaCurrentTime",this.media.currentTime)},"durationchange,loadedmetadata":()=>{this.propagateMediaState("mediaDuration",this.media.duration)},ratechange:()=>{this.propagateMediaState("mediaPlaybackRate",this.media.playbackRate)}},this.associateElement(this)}mediaSetCallback(t){if(!super.mediaSetCallback(t))return;Object.keys(this._mediaStatePropagators).forEach(e=>{const i=e.split(","),a=this._mediaStatePropagators[e];i.forEach(s=>{const o=s==r.event?this.getRootNode():t;o.addEventListener(s,a)}),a()});try{const e=c.localStorage.getItem("media-chrome-pref-volume");e!==null&&(t.volume=e)}catch(e){console.debug("Error getting volume pref",e)}}mediaUnsetCallback(t){super.mediaUnsetCallback(t),Object.keys(this._mediaStatePropagators).forEach(e=>{const{events:i,handler:a}=this.mediaStatePropagators[e];i.forEach(s=>{const o=s==r.event?this.getRootNode():t;o.removeEventListener(s,a)})}),this.propagateMediaState("mediaPaused",!0)}propagateMediaState(t,e){E(this.children,t,e),E(this.associatedElements,t,e)}associateElement(t){this.associatedElements.push(t),Object.keys(n).forEach(e=>{t.addEventListener(n[e],this[`_handle${m(e,!0)}`])}),this.media&&E([t],"mediaPaused",this.media.paused)}unassociateElement(t){els=this.associatedElements;const e=els.indexOf(t);e>-1&&els.splice(e,1),Object.keys(n).forEach(i=>{t.addEventListener(n[i],this[`_handle${m(i,!0)}`])})}play(){this.dispatchMediaEvent(R)}pause(){this.dispatchMediaEvent(g)}get muted(){return!!(this.media&&this.media.muted)}set muted(t){const e=t?I:T;this.dispatchMediaEvent(e)}get volume(){const t=this.media;return t?t.volume:1}set volume(t){this.dispatchMediaEvent(P,{detail:t})}requestFullscreen(){this.dispatchMediaEvent(U)}exitFullscreen(){this.dispatchMediaEvent(v)}get currentTime(){const t=this.media;return t?t.currentTime:0}set currentTime(t){this.dispatchMediaEvent(A,{detail:t})}get playbackRate(){const t=this.media;return t?t.currentTime:1}set playbackRate(t){this.dispatchMediaEvent(b,{detail:t})}requestPictureInPicture(){this.dispatchMediaEvent(Q,{detail:time})}exitPictureInPicture(){this.dispatchMediaEvent(L,{detail:time})}requestPreview(t){this.dispatchMediaEvent(D,{detail:t})}}function E(l,t,e){Array.from(l).forEach(i=>{if(!i.children)return;const a=i.nodeName.toLowerCase();if(i.slot==="media")return;function s(){typeof i[t]!="undefined"&&(i[t]=e),E(i.children,t,e),i.shadowRoot&&E(i.shadowRoot.childNodes,t,e)}a.includes("-")&&!c.customElements.get(a)?c.customElements.whenDefined(a).then(s):s()})}S("media-controller",u);export default u;
+import k from"./media-container.js";import{defineCustomElement as O}from"./utils/defineCustomElement.js";import{Window as o,Document as w}from"./utils/server-safe-globals.js";import{fullscreenApi as T}from"./utils/fullscreenApi.js";import{constToCamel as g}from"./utils/stringUtils.js";import{MediaUIEvents as h,MediaUIAttributes as r,TextTrackKinds as p,TextTrackModes as _}from"./constants.js";import{stringifyTextTrackList as m,getTextTracksList as l,updateTracksModeTo as M}from"./utils/captions.js";const{MEDIA_PLAY_REQUEST:Q,MEDIA_PAUSE_REQUEST:y,MEDIA_MUTE_REQUEST:x,MEDIA_UNMUTE_REQUEST:N,MEDIA_VOLUME_REQUEST:B,MEDIA_ENTER_FULLSCREEN_REQUEST:H,MEDIA_EXIT_FULLSCREEN_REQUEST:W,MEDIA_SEEK_REQUEST:j,MEDIA_PREVIEW_REQUEST:G,MEDIA_ENTER_PIP_REQUEST:F,MEDIA_EXIT_PIP_REQUEST:V,MEDIA_PLAYBACK_RATE_REQUEST:K}=h;class b extends k{constructor(){super();this.mediaStateReceivers=[],this.associatedElementSubscriptions=new Map,this.associatedElements=[],this.associateElement(this);const e={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const t=this.media;t.muted=!1,t.volume===0&&(t.volume=.25)},MEDIA_VOLUME_REQUEST:t=>{const i=this.media,s=t.detail;i.volume=s,s>0&&i.muted&&(i.muted=!1);try{o.localStorage.setItem("media-chrome-pref-volume",s.toString())}catch(n){}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const t=this.getRootNode();t.pictureInPictureElement&&t.exitPictureInPicture(),super[T.enter]()},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{w[T.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const t=this.getRootNode(),i=this.media;!t.pictureInPictureEnabled||(t[T.element]&&t[T.exit](),i.requestPictureInPicture())},MEDIA_EXIT_PIP_REQUEST:()=>{const t=this.getRootNode();t.exitPictureInPicture&&t.exitPictureInPicture()},MEDIA_SEEK_REQUEST:t=>{const i=this.media,s=t.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=s)},MEDIA_PLAYBACK_RATE_REQUEST:t=>{this.media.playbackRate=t.detail},MEDIA_PREVIEW_REQUEST:t=>{const i=this.media;if(!i)return;const[s]=l(i,{kind:p.METADATA,label:"thumbnails"});if(!(s&&s.cues))return;const n=t.detail,E=Array.prototype.find.call(s.cues,S=>S.startTime>=n);if(!E)return;const I=new URL(E.text),c=new URLSearchParams(I.hash).get("#xywh");this.propagateMediaState(r.MEDIA_PREVIEW_IMAGE,I.href),this.propagateMediaState(r.MEDIA_PREVIEW_COORDS,c.split(",").join(" "))},MEDIA_SHOW_CAPTIONS_REQUEST:t=>{const i=this.captionTracks,{detail:s=[]}=t;M(_.SHOWING,i,s)},MEDIA_DISABLE_CAPTIONS_REQUEST:t=>{const i=this.captionTracks,{detail:s=[]}=t;M(_.DISABLED,i,s)},MEDIA_SHOW_SUBTITLES_REQUEST:t=>{const i=this.subtitleTracks,{detail:s=[]}=t;M(_.SHOWING,i,s)},MEDIA_DISABLE_SUBTITLES_REQUEST:t=>{const i=this.subtitleTracks,{detail:s=[]}=t;M(_.DISABLED,i,s)}};Object.keys(e).forEach(t=>{const i=`_handle${g(t,!0)}`;this[i]=s=>{if(s.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}e[t](s,this.media)},this.addEventListener(h[t],this[i])}),this._mediaStatePropagators={"play,pause":()=>{this.propagateMediaState(r.MEDIA_PAUSED,this.media.paused)},volumechange:()=>{const{muted:t,volume:i}=this.media;let s="high";i==0||t?s="off":i<.5?s="low":i<.75&&(s="medium"),this.propagateMediaState(r.MEDIA_MUTED,t),this.propagateMediaState(r.MEDIA_VOLUME,i),this.propagateMediaState(r.MEDIA_VOLUME_LEVEL,s)},[T.event]:()=>{const t=this.getRootNode()[T.element];this.propagateMediaState(r.MEDIA_IS_FULLSCREEN,t===this)},"enterpictureinpicture,leavepictureinpicture":t=>{let i;t?i=t.type=="enterpictureinpicture":i=this.media==this.getRootNode().pictureInPictureElement,this.propagateMediaState(r.MEDIA_IS_PIP,i)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_CURRENT_TIME,this.media.currentTime)},"durationchange,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_DURATION,this.media.duration)},ratechange:()=>{this.propagateMediaState(r.MEDIA_PLAYBACK_RATE,this.media.playbackRate)}},this._textTrackMediaStatePropagators={"addtrack,removetrack":()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_LIST,m(this.captionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_LIST,m(this.subtitleTracks)||void 0),this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,m(this.showingCaptionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,m(this.showingSubtitleTracks)||void 0)},change:()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,m(this.showingCaptionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,m(this.showingSubtitleTracks)||void 0)}}}mediaSetCallback(e){if(!!super.mediaSetCallback(e)){Object.keys(this._mediaStatePropagators).forEach(t=>{const i=t.split(","),s=this._mediaStatePropagators[t];i.forEach(n=>{(n==T.event?this.getRootNode():e).addEventListener(n,s)}),s()}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks.addEventListener(n,i)}),i()});try{const t=o.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){console.debug("Error getting volume pref",t)}}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const{events:i,handler:s}=this.mediaStatePropagators[t];i.forEach(n=>{(n==T.event?this.getRootNode():e).removeEventListener(n,s)})}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks.removeEventListener(n,i)}),i()}),this.propagateMediaState(r.MEDIA_PAUSED,!0)}propagateMediaState(e,t){d(this.mediaStateReceivers,e,t)}associateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(t.has(e))return;const i=this.registerMediaStateReceiver.bind(this),s=this.unregisterMediaStateReceiver.bind(this),n=$(e,i,s);Object.keys(h).forEach(E=>{e.addEventListener(h[E],this[`_handle${g(E,!0)}`])}),t.set(e,n)}unassociateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(!t.has(e))return;t.get(e)(),t.delete(e),Object.keys(h).forEach(s=>{e.removeEventListener(h[s],this[`_handle${g(s,!0)}`])})}registerMediaStateReceiver(e){if(!e)return;const t=this.mediaStateReceivers;t.indexOf(e)>-1||(t.push(e),this.media&&(d([e],r.MEDIA_CAPTIONS_LIST,m(this.captionTracks)||void 0),d([e],r.MEDIA_SUBTITLES_LIST,m(this.subtitleTracks)||void 0),d([e],r.MEDIA_CAPTIONS_SHOWING,m(this.showingCaptionTracks)||void 0),d([e],r.MEDIA_SUBTITLES_SHOWING,m(this.showingSubtitleTracks)||void 0),d([e],r.MEDIA_PAUSED,this.media.paused),d([e],r.MEDIA_MUTED,this.media.muted),d([e],r.MEDIA_VOLUME,this.media.volume),d([e],r.MEDIA_CURRENT_TIME,this.media.currentTime),d([e],r.MEDIA_DURATION,this.media.duration),d([e],r.MEDIA_PLAYBACK_RATE,this.media.playbackRate)))}unregisterMediaStateReceiver(e){const t=this.mediaStateReceivers,i=t.indexOf(e);i<0||t.splice(i,1)}play(){this.dispatchEvent(new o.CustomEvent(Q))}pause(){this.dispatchEvent(new o.CustomEvent(y))}get muted(){return!!(this.media&&this.media.muted)}set muted(e){const t=e?x:N;this.dispatchEvent(new o.CustomEvent(t))}get volume(){const e=this.media;return e?e.volume:1}set volume(e){this.dispatchEvent(new o.CustomEvent(B,{detail:e}))}requestFullscreen(){this.dispatchEvent(new o.CustomEvent(H))}exitFullscreen(){this.dispatchEvent(new o.CustomEvent(W))}get currentTime(){const e=this.media;return e?e.currentTime:0}set currentTime(e){this.dispatchEvent(new o.CustomEvent(j,{detail:e}))}get playbackRate(){const e=this.media;return e?e.playbackRate:1}set playbackRate(e){this.dispatchEvent(new o.CustomEvent(K,{detail:e}))}get subtitleTracks(){return l(this.media,{kind:p.SUBTITLES})}get captionTracks(){return l(this.media,{kind:p.CAPTIONS})}get showingSubtitleTracks(){return l(this.media,{kind:p.SUBTITLES,mode:_.SHOWING})}get showingCaptionTracks(){return l(this.media,{kind:p.CAPTIONS,mode:_.SHOWING})}requestPictureInPicture(){this.dispatchEvent(new o.CustomEvent(F))}exitPictureInPicture(){this.dispatchEvent(new o.CustomEvent(V))}requestPreview(e){this.dispatchEvent(new o.CustomEvent(G,{detail:e}))}}const Y=Object.values(r),P=a=>{var i,s,n;const{constructor:{observedAttributes:e}}=a,t=(n=(s=(i=a==null?void 0:a.getAttribute)==null?void 0:i.call(a,r.MEDIA_CHROME_ATTRIBUTES))==null?void 0:s.split)==null?void 0:n.call(s,/\s+/);return Array.isArray(e||t)?(e||t).filter(E=>Y.includes(E)):[]},v=a=>!!P(a).length,q=(a,e,t)=>t==null?a.removeAttribute(e):typeof t=="boolean"?t?a.setAttribute(e,""):a.removeAttribute(e):Number.isNaN(t)?a.removeAttribute(e):a.setAttribute(e,t),X=a=>{var e;return!!((e=a.closest)==null?void 0:e.call(a,'*[slot="media"]'))},A=(a,e)=>{if(X(a))return;const t=(s,n)=>{var S,u;v(s)&&n(s);const{children:E=[]}=s!=null?s:{},I=(u=(S=s==null?void 0:s.shadowRoot)==null?void 0:S.children)!=null?u:[];[...E,...I].forEach(R=>A(R,n))},i=a==null?void 0:a.nodeName.toLowerCase();if(i.includes("-")&&!v(a)){o.customElements.whenDefined(i).then(()=>{t(a,e)});return}t(a,e)},d=(a,e,t)=>{a.forEach(i=>{!P(i).includes(e)||q(i,e,t)})},$=(a,e,t)=>{A(a,e);const i=c=>{var u;const S=(u=c==null?void 0:c.composedPath()[0])!=null?u:c.target;e(S)},s=c=>{var u;const S=(u=c==null?void 0:c.composedPath()[0])!=null?u:c.target;t(S)};a.addEventListener(h.REGISTER_MEDIA_STATE_RECEIVER,i),a.addEventListener(h.UNREGISTER_MEDIA_STATE_RECEIVER,s);const n=(c,S)=>{c.forEach(u=>{const{addedNodes:R=[],removedNodes:L=[],type:D,target:f,attributeName:C}=u;D==="childList"?(Array.prototype.forEach.call(R,U=>A(U,e)),Array.prototype.forEach.call(L,U=>A(U,t))):D==="attributes"&&C===r.MEDIA_CHROME_ATTRIBUTES&&(v(f)?e(f):t(f))})},E=new MutationObserver(n);return E.observe(a,{childList:!0,attributes:!0,subtree:!0}),()=>{A(a,t),E.disconnect(),a.removeEventListener(h.REGISTER_MEDIA_STATE_RECEIVER,i),a.removeEventListener(h.UNREGISTER_MEDIA_STATE_RECEIVER,s)}};O("media-controller",b);export default b;

dist/media-current-time-display.js

@@ -1,1 +0,1 @@
-import t from"./media-text-display.js";import{defineCustomElement as i}from"./utils/defineCustomElement.js";import{formatTime as m}from"./utils/time.js";import"./utils/server-safe-globals.js";class e extends t{connectedCallback(){this._update()}mediaCurrentTimeSet(){this._update()}_update(){this.container.innerHTML=m(this.mediaCurrentTime)}}i("media-current-time-display",e);export default e;
+import a from"./media-text-display.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{formatTime as o}from"./utils/time.js";import{MediaUIAttributes as i}from"./constants.js";class r extends a{static get observedAttributes(){return[...super.observedAttributes,i.MEDIA_CURRENT_TIME]}attributeChangedCallback(t,s,e){t===i.MEDIA_CURRENT_TIME&&(this.container.innerHTML=o(e)),super.attributeChangedCallback(t,s,e)}}m("media-current-time-display",r);export default r;

dist/media-duration-display.js

@@ -1,1 +0,1 @@
-import t from"./media-text-display.js";import{defineCustomElement as i}from"./utils/defineCustomElement.js";import{formatTime as a}from"./utils/time.js";import"./utils/server-safe-globals.js";class e extends t{connectedCallback(){this._update()}mediaDurationSet(){this._update()}_update(){this.container.innerHTML=a(this.mediaDuration)}}i("media-duration-display",e);export default e;
+import a from"./media-text-display.js";import{defineCustomElement as o}from"./utils/defineCustomElement.js";import{formatTime as d}from"./utils/time.js";import{MediaUIAttributes as i}from"./constants.js";class s extends a{static get observedAttributes(){return[...super.observedAttributes,i.MEDIA_DURATION]}attributeChangedCallback(t,r,e){t===i.MEDIA_DURATION&&(this.container.innerHTML=d(e)),super.attributeChangedCallback(t,r,e)}}o("media-duration-display",s);export default s;

dist/media-fullscreen-button.js

@@ -1,11 +0,11 @@
-import i from"./media-chrome-button.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{Document as t}from"./utils/server-safe-globals.js";import{mediaUIEvents as s}from"./media-chrome-html-element.js";const r=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+import u from"./media-chrome-button.js";import{defineCustomElement as h}from"./utils/defineCustomElement.js";import{Window as c,Document as d}from"./utils/server-safe-globals.js";import{MediaUIEvents as o,MediaUIAttributes as t}from"./constants.js";import{verbs as l}from"./labels/labels.js";const v=`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M0 0h24v24H0z" fill="none"/>
   <path class="icon" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
-</svg>`,h=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+</svg>`,m=`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M0 0h24v24H0z" fill="none"/>
   <path class="icon" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
-</svg>`,l=t.createElement("template");l.innerHTML=`
+</svg>`,a=d.createElement("template");a.innerHTML=`
   <style>
-  :host([media-is-fullscreen]) slot:not([name=exit]) > *, 
-  :host([media-is-fullscreen]) ::slotted(:not([slot=exit])) {
+  :host([${t.MEDIA_IS_FULLSCREEN}]) slot:not([name=exit]) > *, 
+  :host([${t.MEDIA_IS_FULLSCREEN}]) ::slotted(:not([slot=exit])) {
     display: none;
@@ -15,4 +15,4 @@ }
   /* Double negative, but safer if display doesn't equal 'block' */
-  :host(:not([media-is-fullscreen])) slot:not([name=enter]) > *, 
-  :host(:not([media-is-fullscreen])) ::slotted(:not([slot=enter])) {
+  :host(:not([${t.MEDIA_IS_FULLSCREEN}])) slot:not([name=enter]) > *, 
+  :host(:not([${t.MEDIA_IS_FULLSCREEN}])) ::slotted(:not([slot=enter])) {
     display: none;
@@ -22,4 +22,4 @@ }
 
-  <slot name="enter">${r}</slot>
-  <slot name="exit">${h}</slot>
-`;class n extends i{constructor(e={}){e=Object.assign({slotTemplate:l},e),super(e)}handleClick(e){const o=this.mediaIsFullscreen?s.MEDIA_EXIT_FULLSCREEN_REQUEST:s.MEDIA_ENTER_FULLSCREEN_REQUEST;this.dispatchMediaEvent(o)}static get observedAttributes(){return["fullscreen-element"].concat(super.observedAttributes||[])}get fullscreenElement(){return this._fullscreenElement||this.media&&this.media.closest("media-container, media-chrome")||this.media}set fullscreenElement(e){this._fullscreenElement=t.querySelector(e)}}m("media-fullscreen-button",n);export default n;
+  <slot name="enter">${v}</slot>
+  <slot name="exit">${m}</slot>
+`;const i=n=>{const s=n.getAttribute(t.MEDIA_IS_FULLSCREEN)!=null?l.EXIT_FULLSCREEN():l.ENTER_FULLSCREEN();n.setAttribute("aria-label",s)};class r extends u{static get observedAttributes(){return[...super.observedAttributes,t.MEDIA_IS_FULLSCREEN]}constructor(e={}){super({slotTemplate:a,...e})}connectedCallback(){i(this),super.connectedCallback()}attributeChangedCallback(e,s,E){e===t.MEDIA_IS_FULLSCREEN&&i(this),super.attributeChangedCallback(e,s,E)}handleClick(e){const s=this.getAttribute(t.MEDIA_IS_FULLSCREEN)!=null?o.MEDIA_EXIT_FULLSCREEN_REQUEST:o.MEDIA_ENTER_FULLSCREEN_REQUEST;this.dispatchEvent(new c.CustomEvent(s,{composed:!0,bubbles:!0}))}}h("media-fullscreen-button",r);export default r;

dist/media-mute-button.js

@@ -1,23 +0,23 @@
-import n from"./media-chrome-button.js";import{defineCustomElement as i}from"./utils/defineCustomElement.js";import{Document as h}from"./utils/server-safe-globals.js";import{mediaUIEvents as t}from"./media-chrome-html-element.js";const a='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',o='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',v='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',l=h.createElement("template");l.innerHTML=`
+import c from"./media-chrome-button.js";import{defineCustomElement as d}from"./utils/defineCustomElement.js";import{Window as L,Document as M}from"./utils/server-safe-globals.js";import{MediaUIEvents as n,MediaUIAttributes as t}from"./constants.js";import{verbs as l}from"./labels/labels.js";const r='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="icon" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',E='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="icon" d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',u='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="icon" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',i=M.createElement("template");i.innerHTML=`
   <style>
   /* Default to High slot/icon. */
-  :host(:not([media-volume-level])) slot:not([name=high]) > *, 
-  :host(:not([media-volume-level])) ::slotted(:not([slot=high])),
-  :host([media-volume-level=high]) slot:not([name=high]) > *, 
-  :host([media-volume-level=high]) ::slotted(:not([slot=high])) {
+  :host(:not([${t.MEDIA_VOLUME_LEVEL}])) slot:not([name=high]) > *, 
+  :host(:not([${t.MEDIA_VOLUME_LEVEL}])) ::slotted(:not([slot=high])),
+  :host([${t.MEDIA_VOLUME_LEVEL}=high]) slot:not([name=high]) > *, 
+  :host([${t.MEDIA_VOLUME_LEVEL}=high]) ::slotted(:not([slot=high])) {
     display: none;
   }
 
-  :host([media-volume-level=off]) slot:not([name=off]) > *, 
-  :host([media-volume-level=off]) ::slotted(:not([slot=off])) {
+  :host([${t.MEDIA_VOLUME_LEVEL}=off]) slot:not([name=off]) > *, 
+  :host([${t.MEDIA_VOLUME_LEVEL}=off]) ::slotted(:not([slot=off])) {
     display: none;
   }
 
-  :host([media-volume-level=low]) slot:not([name=low]) > *, 
-  :host([media-volume-level=low]) ::slotted(:not([slot=low])) {
+  :host([${t.MEDIA_VOLUME_LEVEL}=low]) slot:not([name=low]) > *, 
+  :host([${t.MEDIA_VOLUME_LEVEL}=low]) ::slotted(:not([slot=low])) {
     display: none;
   }
 
-  :host([media-volume-level=medium]) slot:not([name=medium]) > *, 
-  :host([media-volume-level=medium]) ::slotted(:not([slot=medium])) {
+  :host([${t.MEDIA_VOLUME_LEVEL}=medium]) slot:not([name=medium]) > *, 
+  :host([${t.MEDIA_VOLUME_LEVEL}=medium]) ::slotted(:not([slot=medium])) {
     display: none;
@@ -27,6 +27,6 @@ }
 
-  <slot name="off">${a}</slot>
-  <slot name="low">${o}</slot>
-  <slot name="medium">${o}</slot>
-  <slot name="high">${v}</slot>
-`;class s extends n{constructor(e={}){e=Object.assign({slotTemplate:l},e),super(e)}handleClick(e){const m=this.mediaMuted?t.MEDIA_UNMUTE_REQUEST:t.MEDIA_MUTE_REQUEST;this.dispatchMediaEvent(m)}}i("media-mute-button",s);export default s;
+  <slot name="off">${r}</slot>
+  <slot name="low">${E}</slot>
+  <slot name="medium">${E}</slot>
+  <slot name="high">${u}</slot>
+`;const a=s=>{const e=s.getAttribute(t.MEDIA_VOLUME_LEVEL)==="off"?l.UNMUTE():l.MUTE();s.setAttribute("aria-label",e)};class h extends c{static get observedAttributes(){return[...super.observedAttributes,t.MEDIA_VOLUME_LEVEL]}constructor(o={}){super({slotTemplate:i,...o})}connectedCallback(){a(this),super.connectedCallback()}attributeChangedCallback(o,e,m){o===t.MEDIA_VOLUME_LEVEL&&a(this),super.attributeChangedCallback(o,e,m)}handleClick(o){const e=this.getAttribute(t.MEDIA_VOLUME_LEVEL)==="off"?n.MEDIA_UNMUTE_REQUEST:n.MEDIA_MUTE_REQUEST;this.dispatchEvent(new L.CustomEvent(e,{composed:!0,bubbles:!0}))}}d("media-mute-button",h);export default h;

dist/media-pip-button.js

@@ -1,5 +0,5 @@
-import l from"./media-chrome-button.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{Document as a}from"./utils/server-safe-globals.js";import{mediaUIEvents as t}from"./media-chrome-html-element.js";const s='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',o=a.createElement("template");o.innerHTML=`
+import c from"./media-chrome-button.js";import{defineCustomElement as d}from"./utils/defineCustomElement.js";import{Window as m,Document as b}from"./utils/server-safe-globals.js";import{MediaUIEvents as n,MediaUIAttributes as t}from"./constants.js";import{verbs as l}from"./labels/labels.js";const i='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="icon" d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',a=b.createElement("template");a.innerHTML=`
   <style>
-  :host([media-is-pip]) slot:not([name=exit]) > *, 
-  :host([media-is-pip]) ::slotted(:not([slot=exit])) {
+  :host([${t.MEDIA_IS_PIP}]) slot:not([name=exit]) > *, 
+  :host([${t.MEDIA_IS_PIP}]) ::slotted(:not([slot=exit])) {
     display: none;
@@ -9,4 +9,4 @@ }
   /* Double negative, but safer if display doesn't equal 'block' */
-  :host(:not([media-is-pip])) slot:not([name=enter]) > *, 
-  :host(:not([media-is-pip])) ::slotted(:not([slot=enter])) {
+  :host(:not([${t.MEDIA_IS_PIP}])) slot:not([name=enter]) > *, 
+  :host(:not([${t.MEDIA_IS_PIP}])) ::slotted(:not([slot=enter])) {
     display: none;
@@ -16,4 +16,4 @@ }
 
-  <slot name="enter">${s}</slot>
-  <slot name="exit">${s}</slot>
-`;class i extends l{constructor(e={}){e=Object.assign({slotTemplate:o},e),super(e)}handleClick(e){const n=this.mediaIsPip?t.MEDIA_EXIT_PIP_REQUEST:t.MEDIA_ENTER_PIP_REQUEST;this.dispatchMediaEvent(n)}}m("media-pip-button",i);export default i;
+  <slot name="enter">${i}</slot>
+  <slot name="exit">${i}</slot>
+`;const r=o=>{const s=o.getAttribute(t.MEDIA_IS_PIP)!=null?l.EXIT_PIP():l.ENTER_PIP();o.setAttribute("aria-label",s)};class u extends c{static get observedAttributes(){return[...super.observedAttributes,t.MEDIA_IS_PIP]}constructor(e={}){super({slotTemplate:a,...e})}connectedCallback(){r(this),super.connectedCallback()}attributeChangedCallback(e,s,I){e===t.MEDIA_IS_PIP&&r(this),super.attributeChangedCallback(e,s,I)}handleClick(e){const s=this.getAttribute(t.MEDIA_IS_PIP)!=null?n.MEDIA_EXIT_PIP_REQUEST:n.MEDIA_ENTER_PIP_REQUEST;this.dispatchEvent(new m.CustomEvent(s,{composed:!0,bubbles:!0}))}}d("media-pip-button",u);export default u;

dist/media-play-button.js

@@ -1,10 +0,10 @@
-import l from"./media-chrome-button.js";import{Document as n}from"./utils/server-safe-globals.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{mediaUIEvents as t}from"./media-chrome-html-element.js";const i='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',d='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',s=n.createElement("template");s.innerHTML=`
+import d from"./media-chrome-button.js";import{Window as p,Document as c}from"./utils/server-safe-globals.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{MediaUIEvents as a,MediaUIAttributes as t}from"./constants.js";import{verbs as l}from"./labels/labels.js";const E='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="icon" d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',A='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="icon" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',n=c.createElement("template");n.innerHTML=`
   <style>
-  :host([media-paused]) slot[name=pause] > *, 
-  :host([media-paused]) ::slotted([slot=pause]) {
+  :host([${t.MEDIA_PAUSED}]) slot[name=pause] > *, 
+  :host([${t.MEDIA_PAUSED}]) ::slotted([slot=pause]) {
     display: none;
   }
 
-  :host(:not([media-paused])) slot[name=play] > *, 
-  :host(:not([media-paused])) ::slotted([slot=play]) {
+  :host(:not([${t.MEDIA_PAUSED}])) slot[name=play] > *, 
+  :host(:not([${t.MEDIA_PAUSED}])) ::slotted([slot=play]) {
     display: none;
@@ -14,4 +14,4 @@ }
 
-  <slot name="play">${i}</slot>
-  <slot name="pause">${d}</slot>
-`;class o extends l{constructor(e={}){e=Object.assign({slotTemplate:s},e),super(e)}handleClick(e){const a=this.mediaPaused?t.MEDIA_PLAY_REQUEST:t.MEDIA_PAUSE_REQUEST;this.dispatchMediaEvent(a)}}m("media-play-button",o);export default o;
+  <slot name="play">${E}</slot>
+  <slot name="pause">${A}</slot>
+`;const i=o=>{const s=o.getAttribute(t.MEDIA_PAUSED)!=null?l.PLAY():l.PAUSE();o.setAttribute("aria-label",s)};class r extends d{static get observedAttributes(){return[...super.observedAttributes,t.MEDIA_PAUSED]}constructor(e={}){super({slotTemplate:n,...e})}connectedCallback(){i(this),super.connectedCallback()}attributeChangedCallback(e,s,u){e===t.MEDIA_PAUSED&&i(this),super.attributeChangedCallback(e,s,u)}handleClick(e){const s=this.getAttribute(t.MEDIA_PAUSED)!=null?a.MEDIA_PLAY_REQUEST:a.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new p.CustomEvent(s,{composed:!0,bubbles:!0}))}}m("media-play-button",r);export default r;

dist/media-playback-rate-button.js

@@ -1,1 +0,15 @@
-import n from"./media-chrome-button.js";import{defineCustomElement as o}from"./utils/defineCustomElement.js";import{mediaUIEvents as m}from"./media-chrome-html-element.js";const s=[1,1.25,1.5,1.75,2];class a extends n{constructor(){super();this._rates=s,this.mediaPlaybackRateSet(1)}static get observedAttributes(){return["rates"].concat(super.observedAttributes||[])}set rates(t){t?(typeof t=="string"&&(t=t.split(/,\s?/)),this._rates=t):this._rates=s}get rates(){return this._rates}handleClick(t){const i=this.mediaPlaybackRate;let e=this.rates.find(r=>r>i);e||(e=this.rates[0]),this.dispatchMediaEvent(m.MEDIA_PLAYBACK_RATE_REQUEST,{detail:e})}mediaPlaybackRateSet(t){this.nativeEl.innerHTML=`${t}x`}}o("media-playback-rate-button",a);export default a;
+import u from"./media-chrome-button.js";import{defineCustomElement as A}from"./utils/defineCustomElement.js";import{Window as h,Document as d}from"./utils/server-safe-globals.js";import{MediaUIEvents as p,MediaUIAttributes as o}from"./constants.js";import{nouns as E}from"./labels/labels.js";const c=[1,1.25,1.5,1.75,2],r=1,l=d.createElement("template");l.innerHTML=`
+  <style>
+  :host {
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: bold;
+  }
+
+  #container {
+    height: var(--media-text-content-height, 24px);
+  }
+  </style>
+
+  <span id="container"></span>
+`;class b extends u{static get observedAttributes(){return[...super.observedAttributes,o.MEDIA_PLAYBACK_RATE,"rates"]}constructor(i={}){super({slotTemplate:l,...i});this._rates=c,this.container=this.shadowRoot.querySelector("#container"),this.container.innerHTML=`${r}x`}attributeChangedCallback(i,n,e){if(i==="rates"){const s=(e!=null?e:"").split(/,\s?/).map(t=>t?+t:Number.NaN).filter(t=>!Number.isNaN(t)).sort();this._rates=s.length?s:c;return}if(i===o.MEDIA_PLAYBACK_RATE){const s=e?+e:Number.NaN,t=Number.isNaN(s)?r:s;this.container.innerHTML=`${t}x`,this.setAttribute("aria-label",E.PLAYBACK_RATE({playbackRate:t}));return}super.attributeChangedCallback(i,n,e)}handleClick(i){var t,a;const n=+this.getAttribute(o.MEDIA_PLAYBACK_RATE)||r,e=(a=(t=this._rates.find(m=>m>n))!=null?t:this._rates[0])!=null?a:r,s=new h.CustomEvent(p.MEDIA_PLAYBACK_RATE_REQUEST,{composed:!0,bubbles:!0,detail:e});this.dispatchEvent(s)}}A("media-playback-rate-button",b);export default b;

dist/media-seek-backward-button.js

@@ -1,3 +0,3 @@
-import a from"./media-chrome-button.js";import{defineCustomElement as l}from"./utils/defineCustomElement.js";import{mediaUIEvents as i}from"./media-chrome-html-element.js";import{Document as c}from"./utils/server-safe-globals.js";const m='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path class="icon" id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path class="icon" d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-2.4 8.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5c0-.1-.1-.2-.1-.3s-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z" clip-path="url(#b)"/></svg>',s=c.createElement("template");s.innerHTML=`  
-  <slot name="backward">${m}</slot>
-`;class t extends a{constructor(e={}){e=Object.assign({slotTemplate:s},e),super(e)}handleClick(){const e=Math.max(this.mediaCurrentTime-30,0);this.dispatchMediaEvent(i.MEDIA_SEEK_REQUEST,{detail:e})}}l("media-seek-backward-button",t);export default t;
+import l from"./media-chrome-button.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{Window as d,Document as u}from"./utils/server-safe-globals.js";import{MediaUIEvents as b,MediaUIAttributes as a}from"./constants.js";import{verbs as v}from"./labels/labels.js";const E='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><defs><path class="icon" id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path class="icon" d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-2.4 8.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5c0-.1-.1-.2-.1-.3s-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z" clip-path="url(#b)"/></svg>',o=u.createElement("template");o.innerHTML=`  
+  <slot name="backward">${E}</slot>
+`;const h=0,c=-30,p=s=>{const t=Math.abs(c),e=v.SEEK_BACK_N_SECS({seekOffset:t});s.setAttribute("aria-label",e)};class r extends l{static get observedAttributes(){return[...super.observedAttributes,a.MEDIA_CURRENT_TIME]}constructor(t={}){super({slotTemplate:o,...t})}connectedCallback(){p(this),super.connectedCallback()}handleClick(){const t=this.getAttribute(a.MEDIA_CURRENT_TIME),e=t&&!Number.isNaN(+t)?+t:h,n=Math.max(e+c,0),i=new d.CustomEvent(b.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:n});this.dispatchEvent(i)}}m("media-seek-backward-button",r);export default r;

dist/media-seek-forward-button.js

@@ -1,3 +0,3 @@
-import l from"./media-chrome-button.js";import{defineCustomElement as i}from"./utils/defineCustomElement.js";import{Document as o}from"./utils/server-safe-globals.js";import{mediaUIEvents as a}from"./media-chrome-html-element.js";const m='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path class="icon" id="a" d="M24 24H0V0h24v24z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path class="icon" d="M9.6 13.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.9-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5zM4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8z" clip-path="url(#b)"/></svg>',s=o.createElement("template");s.innerHTML=`  
-  <slot name="forward">${m}</slot>
-`;class t extends l{constructor(e={}){e=Object.assign({slotTemplate:s},e),super(e)}handleClick(){this.dispatchMediaEvent(a.MEDIA_SEEK_REQUEST,{detail:this.mediaCurrentTime+30})}}i("media-seek-forward-button",t);export default t;
+import l from"./media-chrome-button.js";import{defineCustomElement as d}from"./utils/defineCustomElement.js";import{Window as m,Document as u}from"./utils/server-safe-globals.js";import{MediaUIEvents as v,MediaUIAttributes as o}from"./constants.js";import{verbs as b}from"./labels/labels.js";const E='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><defs><path class="icon" id="a" d="M24 24H0V0h24v24z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path class="icon" d="M9.6 13.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.9-.8v-.5s-.1-.2-.1-.3-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5zM4 13c0 4.4 3.6 8 8 8s8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6v4l5-5-5-5v4c-4.4 0-8 3.6-8 8z" clip-path="url(#b)"/></svg>',r=u.createElement("template");r.innerHTML=`  
+  <slot name="forward">${E}</slot>
+`;const h=0,n=30,p=e=>{const t=Math.abs(n),s=b.SEEK_FORWARD_N_SECS({seekOffset:t});e.setAttribute("aria-label",s)};class a extends l{static get observedAttributes(){return[...super.observedAttributes,o.MEDIA_CURRENT_TIME]}constructor(t={}){super({slotTemplate:r,...t})}connectedCallback(){p(this),super.connectedCallback()}handleClick(){const t=this.getAttribute(o.MEDIA_CURRENT_TIME),c=(t&&!Number.isNaN(+t)?+t:h)+n,i=new m.CustomEvent(v.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:c});this.dispatchEvent(i)}}d("media-seek-forward-button",a);export default a;

dist/media-settings-popup.js

@@ -1,2 +0,2 @@
-import o from"./media-chrome-html-element.js";import{defineCustomElement as t}from"./utils/defineCustomElement.js";import{Document as i}from"./utils/server-safe-globals.js";const e=i.createElement("template");e.innerHTML=`
+import{defineCustomElement as o}from"./utils/defineCustomElement.js";import{Document as t,Window as i}from"./utils/server-safe-globals.js";const e=t.createElement("template");e.innerHTML=`
   <style>
@@ -33,2 +33,2 @@ :host {
   </media-chrome-menu>
-`;class m extends o{constructor(){super();const n=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(e.content.cloneNode(!0))}}t("media-settings-popup",m);export default m;
+`;class m extends i.HTMLElement{constructor(){super();const a=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(e.content.cloneNode(!0))}}o("media-settings-popup",m);export default m;

dist/media-text-display.js

@@ -1,2 +0,2 @@
-import i from"./media-chrome-html-element.js";import{defineCustomElement as n}from"./utils/defineCustomElement.js";import"./utils/time.js";import{Document as o}from"./utils/server-safe-globals.js";const e=o.createElement("template");e.innerHTML=`
+import{MediaUIAttributes as o}from"./constants.js";import{defineCustomElement as f}from"./utils/defineCustomElement.js";import{Window as h,Document as i}from"./utils/server-safe-globals.js";const r=i.createElement("template");r.innerHTML=`
   <style>
@@ -7,26 +7,23 @@ :host {
       align-items: center;
-
+      box-sizing: border-box;
       background-color: var(--media-control-background, rgba(20,20,30, 0.7));
+  
+      padding: 10px;
 
-      /* Default width and height can be overridden externally */
-      height: 44px;
-
-      box-sizing: border-box;
-      padding: 0 5px;
-
-      /* Min icon size is 24x24 */
-      min-height: 24px;
-      min-width: 24px;
-
-      /* Vertically center any text */
-      font-size: 16px;
+      font-size: 14px;
       line-height: 24px;
-      font-family: sans-serif;
+      font-family: Arial, sans-serif;
       text-align: center;
       color: #ffffff;
+      pointer-events: auto;
     }
 
-    #container {}
+    #container {
+      /* NOTE: We don't currently have more generic sizing vars */
+      height: var(--media-text-content-height, auto);
+    }
   </style>
-  <div id="container"></div>
-`;class t extends i{constructor(){super();const a=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}}n("media-text-display",t);export default t;
+  <span id="container">
+  <slot></slot>
+  </span>
+`;class d extends h.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(r.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}attributeChangedCallback(s,n,t){var a,c;if(s===o.MEDIA_CONTROLLER){if(n){const e=i.getElementById(n);(a=e==null?void 0:e.unassociateElement)==null||a.call(e,this)}if(t){const e=i.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var n;const s=this.getAttribute(o.MEDIA_CONTROLLER);if(s){const t=i.getElementById(s);(n=t==null?void 0:t.associateElement)==null||n.call(t,this)}}disconnectedCallback(){var n;if(this.getAttribute(o.MEDIA_CONTROLLER)){const t=i.getElementById(mediaControllerId);(n=t==null?void 0:t.unassociateElement)==null||n.call(t,this)}}}f("media-text-display",d);export default d;

dist/media-time-display.js

@@ -1,1 +0,1 @@
-import i from"./media-text-display.js";import{defineCustomElement as a}from"./utils/defineCustomElement.js";import{formatTime as e}from"./utils/time.js";import"./utils/server-safe-globals.js";class t extends i{connectedCallback(){this._update()}mediaCurrentTimeSet(){this._update()}mediaDurationSet(){this._update()}_update(){this.getAttribute("remaining")!==null?this.container.innerHTML=e(0-(this.mediaDuration-this.mediaCurrentTime)):this.container.innerHTML=e(this.mediaCurrentTime),this.getAttribute("show-duration")!==null&&(this.container.innerHTML+=" / "+e(this.mediaDuration))}}a("media-time-display",t);export default t;
+import b from"./media-text-display.js";import{defineCustomElement as l}from"./utils/defineCustomElement.js";import{formatAsTimePhrase as u,formatTime as A}from"./utils/time.js";import{MediaUIAttributes as e}from"./constants.js";const T=" / ",d=(t,{timesSep:r=T}={})=>{const n=t.getAttribute("remaining")!=null,s=t.getAttribute("show-duration")!=null,i=+t.getAttribute(e.MEDIA_CURRENT_TIME),a=+t.getAttribute(e.MEDIA_DURATION),o=n?A(0-(a-i)):A(i);return s?`${o}${r}${A(a)}`:o},E="video not loaded, unknown time.",I=t=>{if(!(t.hasAttribute(e.MEDIA_CURRENT_TIME)&&t.hasAttribute(e.MEDIA_DURATION))){t.setAttribute("aria-valuetext",E);return}const r=t.getAttribute("remaining")!=null,n=t.getAttribute("show-duration")!=null,s=+t.getAttribute(e.MEDIA_CURRENT_TIME),i=+t.getAttribute(e.MEDIA_DURATION),a=r?u(0-(i-s)):u(s);if(!n){t.setAttribute("aria-valuetext",a);return}const o=u(i),c=`${a} of ${o}`;t.setAttribute("aria-valuetext",c)};class m extends b{static get observedAttributes(){return[...super.observedAttributes,e.MEDIA_CURRENT_TIME,e.MEDIA_DURATION,"remaining","show-duration"]}connectedCallback(){this.setAttribute("role","progressbar"),this.setAttribute("aria-live","polite"),this.setAttribute("tabindex",0),super.connectedCallback()}attributeChangedCallback(r,n,s){if([e.MEDIA_CURRENT_TIME,e.MEDIA_DURATION,"remaining","show-duration"].includes(r)){const i=d(this);I(this),this.container.innerHTML=i}super.attributeChangedCallback(r,n,s)}}l("media-time-display",m);export default m;

dist/media-time-range.js

@@ -1,2 +0,2 @@
-import g from"./media-chrome-range.js";import{defineCustomElement as b}from"./utils/defineCustomElement.js";import{Window as r,Document as v}from"./utils/server-safe-globals.js";import"./media-thumbnail-preview-element.js";import{mediaUIEvents as d}from"./media-chrome-html-element.js";const l=v.createElement("template");l.innerHTML=`
+import I from"./media-chrome-range.js";import{defineCustomElement as M}from"./utils/defineCustomElement.js";import{Window as s,Document as C}from"./utils/server-safe-globals.js";import{MediaUIEvents as h,MediaUIAttributes as n}from"./constants.js";import{nouns as w}from"./labels/labels.js";import{formatAsTimePhrase as c}from"./utils/time.js";const T="video not loaded, unknown time.",f=d=>{const e=d.range,t=c(+e.value),i=c(+e.max),l=t&&i?`${t} of ${i}`:T;e.setAttribute("aria-valuetext",l)},b=C.createElement("template");b.innerHTML=`
   <style>
@@ -32,3 +32,3 @@ #thumbnailContainer {
 
-    :host([media-preview-image]:hover) #thumbnailContainer {
+    :host([${n.MEDIA_PREVIEW_IMAGE}]:hover) #thumbnailContainer {
       display: block;
@@ -56,2 +56,2 @@ animation: fadeIn ease 0.5s;
   </div>
-`;class h extends g{static get observedAttributes(){return["thumbnails"].concat(super.observedAttributes||[])}constructor(){super();this.shadowRoot.appendChild(l.content.cloneNode(!0)),this.setMediaTimeWithRange=()=>{const e=Math.round(this.range.value/1e3*this.mediaDuration);this.dispatchMediaEvent(d.MEDIA_SEEK_REQUEST,{detail:e})},this.range.addEventListener("input",this.setMediaTimeWithRange),this.updateRangeWithMediaTime=()=>{this.range.value=Math.round(this.mediaCurrentTime/this.mediaDuration*1e3),this.updateBar()},this.enableThumbnails()}mediaCurrentTimeSet(e){this.updateRangeWithMediaTime()}mediaDurationSet(e){this.updateRangeWithMediaTime()}mediaBufferedSet(e){this.updateBar()}getBarColors(){let e=super.getBarColors();if(!this.mediaBuffered||!this.mediaBuffered.length||this.mediaDuration<=0)return e;const i=this.mediaBuffered,o=i[i.length-1][1]/this.mediaDuration*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",o]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview");const e=this.shadowRoot.querySelector("#thumbnailContainer");e.classList.add("enabled");let i;const o=()=>{i=m=>{const a=this.mediaDuration;if(!a)return;const t=this.range.getBoundingClientRect();let n=(m.clientX-t.left)/t.width;n=Math.max(0,Math.min(1,n));const c=t.left-this.getBoundingClientRect().left,p=c+n*t.width;this.thumbnailPreview.style.left=`${p}px`,this.dispatchMediaEvent(d.MEDIA_PREVIEW_REQUEST,{detail:n*a})},r.addEventListener("mousemove",i,!1)},u=()=>{r.removeEventListener("mousemove",i)};let s=!1,f=m=>{if(!s&&this.mediaDuration){s=!0,this.thumbnailPreview.style.display="block",o();let a=t=>{t.target!=this&&!this.contains(t.target)&&(this.thumbnailPreview.style.display="none",r.removeEventListener("mousemove",a),s=!1,u())};r.addEventListener("mousemove",a,!1)}this.mediaDuration||(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",f,!1)}}b("media-time-range",h);export default h;
+`;class p extends I{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",n.MEDIA_DURATION,n.MEDIA_CURRENT_TIME,n.MEDIA_PREVIEW_IMAGE]}constructor(){super();this.shadowRoot.appendChild(b.content.cloneNode(!0)),this.range.addEventListener("input",()=>{const t=this.range.value,i=new s.CustomEvent(h.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(i)}),this.enableThumbnails()}connectedCallback(){this.range.setAttribute("aria-label",w.SEEK()),super.connectedCallback()}attributeChangedCallback(e,t,i){e===n.MEDIA_CURRENT_TIME&&(this.range.value=+i,f(this),this.updateBar()),e===n.MEDIA_DURATION&&(this.range.max=+i,f(this),this.updateBar()),super.attributeChangedCallback(e,t,i)}getBarColors(){let e=super.getBarColors();if(!this.mediaBuffered||!this.mediaBuffered.length||this.mediaDuration<=0)return e;const t=this.mediaBuffered,i=t[t.length-1][1]/this.mediaDuration*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",i]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let t;const i=()=>{t=u=>{const r=+this.getAttribute(n.MEDIA_DURATION);if(!r)return;const a=this.range.getBoundingClientRect();let o=(u.clientX-a.left)/a.width;o=Math.max(0,Math.min(1,o));const E=a.left-this.getBoundingClientRect().left+o*a.width;this.thumbnailPreview.style.left=`${E}px`;const v=o*r,A=new s.CustomEvent(h.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:v});this.dispatchEvent(A)},s.addEventListener("mousemove",t,!1)},l=()=>{s.removeEventListener("mousemove",t)};let m=!1,g=u=>{const r=this.getAttribute(n.MEDIA_DURATION);if(!m&&r){m=!0,i();let a=o=>{o.target!=this&&!this.contains(o.target)&&(s.removeEventListener("mousemove",a),m=!1,l())};s.addEventListener("mousemove",a,!1)}};this.addEventListener("mousemove",g,!1)}}M("media-time-range",p);export default p;

dist/media-title-element.js

@@ -1,2 +0,2 @@
-import o from"./media-chrome-html-element.js";import{defineCustomElement as s}from"./utils/defineCustomElement.js";import{Document as m}from"./utils/server-safe-globals.js";const e=m.createElement("template");e.innerHTML=`
+import{defineCustomElement as o}from"./utils/defineCustomElement.js";import{Window as s,Document as l}from"./utils/server-safe-globals.js";const e=l.createElement("template");e.innerHTML=`
   <style>
@@ -9,2 +9,2 @@ :host {
   <slot></slot>
-`;class t extends o{constructor(){super();var a=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(e.content.cloneNode(!0))}}s("media-title-bar",t);export default t;
+`;class t extends s.HTMLElement{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.content.cloneNode(!0))}}o("media-title-bar",t);export default t;

dist/media-volume-range.js

@@ -1,1 +0,1 @@
-import s from"./media-chrome-range.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import"./utils/server-safe-globals.js";import{mediaUIEvents as n}from"./media-chrome-html-element.js";class t extends s{constructor(){super();this.range.addEventListener("input",()=>{const e=this.range.value/1e3;this.dispatchMediaEvent(n.MEDIA_VOLUME_REQUEST,{detail:e})})}connectedCallback(){this._updateRange()}mediaVolumeSet(e){this._updateRange()}mediaMutedSet(e){this._updateRange()}_updateRange(){const e=this.range,a=this.mediaMuted,i=this.mediaVolume;a?e.value=0:e.value=Math.round(i*1e3),this.updateBar()}}m("media-volume-range",t);export default t;
+import{Window as i}from"./utils/server-safe-globals.js";import u from"./media-chrome-range.js";import{defineCustomElement as l}from"./utils/defineCustomElement.js";import{MediaUIAttributes as n,MediaUIEvents as m}from"./constants.js";import{nouns as d}from"./labels/labels.js";const c=100,E=t=>{var s;if(t.getAttribute(n.MEDIA_MUTED)!=null)return 0;const r=+((s=t.getAttribute(n.MEDIA_VOLUME))!=null?s:1);return Math.round(r*t.range.max)},M=({value:t,max:e})=>`${Math.round(t/e*100)}%`;class a extends u{static get observedAttributes(){return[...super.observedAttributes,n.MEDIA_VOLUME,n.MEDIA_MUTED]}constructor(){super();this.range.max=c,this.range.addEventListener("input",()=>{const r=this.range.value/this.range.max,s=new i.CustomEvent(m.MEDIA_VOLUME_REQUEST,{composed:!0,bubbles:!0,detail:r});this.dispatchEvent(s)})}connectedCallback(){this.range.setAttribute("aria-label",d.VOLUME()),super.connectedCallback()}attributeChangedCallback(e,r,s){if(e===n.MEDIA_VOLUME||e===n.MEDIA_MUTED){const o=E(this);this.range.value=o,this.range.setAttribute("aria-valuetext",M(this.range)),this.updateBar()}super.attributeChangedCallback(e,r,s)}}l("media-volume-range",a);export default a;

dist/utils/server-safe-globals.js

@@ -1,1 +0,1 @@
-const n={HTMLElement:function(){},customElements:{get:function(){},define:function(){},whenDefined:function(){}}},e={createElement:function(){return{}}};export const isServer=typeof window=="undefined"||typeof window.customElements=="undefined",Window=isServer?n:window,Document=isServer?e:window.document;
+const n={HTMLElement:function(){this.addEventListener=()=>{},this.removeEventListener=()=>{},this.dispatchEvent=()=>{}},customElements:{get:function(){},define:function(){},whenDefined:function(){}},CustomEvent:function(){}},t={createElement:function(){return new n.HTMLElement}};export const isServer=typeof window=="undefined"||typeof window.customElements=="undefined",Window=isServer?n:window,Document=isServer?t:window.document;

dist/utils/time.js

@@ -1,1 +0,1 @@
-export function formatTime(t,a){let h=!1;t<0&&(h=!0,t=0-t),t=t<0?0:t;let f=Math.floor(t%60),l=Math.floor(t/60%60),r=Math.floor(t/3600);const i=Math.floor(a/60%60),o=Math.floor(a/3600);return(isNaN(t)||t===Infinity)&&(r=l=f="-"),r=r>0||o>0?r+":":"",l=((r||i>=10)&&l<10?"0"+l:l)+":",f=f<10?"0"+f:f,(h?"-":"")+r+l+f}
+const m=t=>typeof t=="number"&&!Number.isNaN(t)&&Number.isFinite(t),u=[{singular:"hour",plural:"hours"},{singular:"minute",plural:"minutes"},{singular:"second",plural:"seconds"}],s=(t,i)=>{const n=t===1?u[i].singular:u[i].plural;return`${t} ${n}`};export const formatAsTimePhrase=t=>{if(!m(t))return"";const i=Math.abs(t),n=i!==t,r=new Date(0,0,0,0,0,i,0);return`${[r.getHours(),r.getMinutes(),r.getSeconds()].map((o,f)=>o&&s(o,f)).filter(o=>o).join(", ")}${n?" remaining":""}`};export function formatTime(t,i){let n=!1;t<0&&(n=!0,t=0-t),t=t<0?0:t;let r=Math.floor(t%60),e=Math.floor(t/60%60),a=Math.floor(t/3600);const l=Math.floor(i/60%60),o=Math.floor(i/3600);return(isNaN(t)||t===Infinity)&&(a=e=r="-"),a=a>0||o>0?a+":":"",e=((a||l>=10)&&e<10?"0"+e:e)+":",r=r<10?"0"+r:r,(n?"-":"")+a+e+r}

package.json

 {
   "name": "media-chrome",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
@@ -13,5 +13,6 @@ "main": "dist/index.js",
     "clean": "rimraf dist",
-    "build": "npm run clean && node build.js",
-    "dev": "npm run clean && node build.js --dev",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "snowpack build --config snowpack.prod.config.js",
+    "dev": "snowpack dev --config snowpack.dev.config.js",
+    "start": "yarn dev",
+    "test": "web-test-runner --coverage",
     "publish-patch": "yarn run build && np patch --no-tests --any-branch"
@@ -39,21 +40,9 @@ },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "babel": "^6.23.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^8.1.0",
-    "babel-preset-es2015": "^6.24.1",
-    "chokidar": "^3.4.3",
-    "esbuild": "^0.8.26",
-    "lodash": "^4.17.20",
+    "@open-wc/testing": "^3.0.1",
+    "@web/test-runner": "^0.13.20",
     "rimraf": "^3.0.2",
-    "serve-handler": "^6.1.3",
-    "ssr-window": "^3.0.0",
-    "tiny-glob": "^0.2.8"
+    "sinon": "^11.1.2",
+    "snowpack": "^3.8.3"
   },
-  "dependencies": {},
-  "babel": {
-    "presets": [
-      "es2015"
-    ]
-  }
+  "dependencies": {}
 }

README.md

@@ -65,2 +65,6 @@ # `<media-chrome>`
 
+## Advanced Usage
+
+For a more in depth discussion of working with `<media-controller/>`, including more complex controls layouts, check out [the docs](./docs/media-controller.md).
+
 ## _Quick_ Demo
@@ -145,3 +149,3 @@
 |------------------------------|------------------------------------------------------------------------------------------------------|
-| `<media-controller>`       | Wraps controls and the media element, and handles communication between them.                          |
+| `<media-controller>`       | Wraps controls and the media element, and handles communication between them. ([docs](./docs/media-controller.md))                          |
 | `<media-control-bar>`       | Optional controls container to help align the controls in the standard fashion.                       |
@@ -159,2 +163,3 @@ | `<media-play-button>`       | Toggle media playback                                                                                 |
 | `<media-seek-forward-button>` | Jump ahead 30 seconds in the media                                                                  |
+| `<media-captions-button>` | Show/disable captions (if no captions are available, will fallback to subtitles by default unless `no-subtitles-fallback` attribute is set)                                                                      |
 | More to come                 | Requests and contributions welcome                                                                   |
@@ -161,0 +166,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

377350

increased by164.35%

Dev dependency count

5

decreased by-58.33%

Number of package files

71

increased by22.41%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

232

increased by2.2%

Worsened metrics

Lines of code

995

decreased by-20.02%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes