media-chrome - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/index.js

@@ -1,2 +0,2 @@
-(()=>{var we={HTMLElement:function(){},customElements:{get:function(){},define:function(){},whenDefined:function(){}}},Me={createElement:function(){return{}}},U=typeof window=="undefined"||typeof window.customElements=="undefined",m=U?we:window,r=U?Me:window.document;function a(o,e){m.customElements.get(o)||(m.customElements.define(o,e),m[e.name]=e)}function D(o){return o.split("-").map(function(e,t){return(t?e[0].toUpperCase():e[0].toLowerCase())+e.slice(1).toLowerCase()}).join("")}function M(o,e=!1){return o.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"},E=class extends m.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 m.CustomEvent(e,t),s=(this[`on${e}`]&&this[`on${e}`](i))===!1;s||this.dispatchEvent(i)}attributeChangedCallback(e,t,i){let s=D(e);if(s=="media"){if(i===null){this.media=null;return}let d=r.querySelector(i);if(!d||!d.play)throw new Error("Supplied media attribute does not appear to match a media element.");this.media=d;return}if(s=="mediaController"){this[s]=r.getElementById(i);return}let l=i;typeof this[s]=="boolean"&&(l=!(i===null)),this[s]=l}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)}};a("media-chrome-html-element",E);var p=E,L=r.createElement("template");L.innerHTML=`
+(()=>{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>
@@ -66,4 +66,3 @@ :host {
 
-  svg,
-  ::slotted(*) {
+  svg, img, ::slotted(svg), ::slotted(img) {
     width: var(--media-button-icon-width, 24px);
@@ -78,3 +77,3 @@ height: var(--media-button-icon-height);
 <button></button>
-`;var _=class extends p{constructor(e={}){super();let t=this.attachShadow({mode:"open"}),i=L.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",l=>{this.handleClick(l)})}handleClick(){}};a("media-chrome-button",_);var f=_,H=r.createElement("template");H.innerHTML=`
+`;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>
@@ -86,14 +85,16 @@ :host {
       /* Position controls at the bottom  */
-      display: flex;
+      display: inline-flex;
       flex-direction: column-reverse;
 
-      /* Default dimensions
-       * max out at 100% width for smaller screens (< 720px)
-       * */
-      width: 720px;
+      /* Max out at 100% width for smaller screens (< 720px) */
       max-width: 100%;
-      height: 480px;
       background-color: #000;
     }
 
+    /* Video specific styles */
+    :host(:not([audio])) {
+      height: 480px;
+      width: 720px;
+    }
+
     /* Safari needs this to actually make the element fill the window */
@@ -115,4 +116,4 @@ :host(:-webkit-full-screen) {
 
-    /* Hide controls when inactive and not paused */
-    #container ::slotted(*) {
+    /* Hide controls when inactive and not paused and not audio */
+    slot:not([media]) ::slotted() {
       opacity: 1;
@@ -123,3 +124,3 @@ transition: opacity 0.25s;
 
-    :host([user-inactive]:not([media-paused])) #container ::slotted(*) {
+    :host([user-inactive]:not([media-paused]):not([audio])) slot:not([media]) ::slotted(*) {
       opacity: 0;
@@ -129,3 +130,3 @@ transition: opacity 1s;
 
-    #container ::slotted(media-control-bar)  {
+    slot:not([media]) ::slotted(media-control-bar)  {
       width: 100%;
@@ -135,6 +136,4 @@ }
   <slot name="media"></slot>
-  <div id="container">
-    <slot></slot>
-  </div>
-`;var k=class extends E{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(H.content.cloneNode(!0)),this.container=this.shadowRoot.getElementById("container");let t=(s,l)=>{let d=this.media;for(let c of s)c.type==="childList"&&(c.removedNodes.forEach(h=>{if(h.slot=="media"&&c.target==this){let u=c.previousSibling&&c.previousSibling.previousElementSibling;if(!u||!d)this.mediaUnsetCallback(h);else{let v=u.slot!=="media";for(;(u=u.previousSibling)!==null;)u.slot=="media"&&(v=!1);v&&this.mediaUnsetCallback(h)}}}),d&&c.addedNodes.forEach(h=>{h==d&&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("-")&&!m.customElements.get(t)?(m.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"),m.clearTimeout(this.inactiveTimeout),this.autohide<0)return;this.inactiveTimeout=m.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"),m.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}};a("media-container-temp",k);var N=k,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:ye,MEDIA_PAUSE_REQUEST:xe,MEDIA_MUTE_REQUEST:Ce,MEDIA_UNMUTE_REQUEST:_e,MEDIA_VOLUME_REQUEST:ke,MEDIA_ENTER_FULLSCREEN_REQUEST:Te,MEDIA_EXIT_FULLSCREEN_REQUEST:Se,MEDIA_SEEK_REQUEST:Re,MEDIA_PREVIEW_REQUEST:Ie,MEDIA_ENTER_PIP_REQUEST:je,MEDIA_EXIT_PIP_REQUEST:Ae,MEDIA_PLAYBACK_RATE_REQUEST:Pe}=n,T=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{m.localStorage.setItem("media-chrome-pref-volume",s.toString())}catch(l){}},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 l=Array.prototype.find.call(i.textTracks,c=>c.label=="thumbnails");if(!l)return;if(!l.cues)return;let d=Array.prototype.find.call(l.cues,c=>c.startTime>=s);if(d){let c=new URL(d.text),[h,u,v,C]=c.hash.split("=")[1].split(",");this.propagateMediaState("mediaPreviewImage",c.href),this.propagateMediaState("mediaPreviewCoords",`${h},${u},${v},${C}`)}}}};Object.keys(e).forEach(t=>{let i=`_handle${M(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(l=>{let d=l==g.event?this.getRootNode():e;d.addEventListener(l,s)}),s()});try{let t=m.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(l=>{let d=l==g.event?this.getRootNode():e;d.removeEventListener(l,s)})}),this.propagateMediaState("mediaPaused",!0)}propagateMediaState(e,t){b(this.children,e,t),b(this.associatedElements,e,t)}associateElement(e){this.associatedElements.push(e),Object.keys(n).forEach(t=>{e.addEventListener(n[t],this[`_handle${M(t,!0)}`])}),this.media&&b([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${M(i,!0)}`])})}play(){this.dispatchMediaEvent(ye)}pause(){this.dispatchMediaEvent(xe)}get muted(){return!!(this.media&&this.media.muted)}set muted(e){let t=e?Ce:_e;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(Te)}exitFullscreen(){this.dispatchMediaEvent(Se)}get currentTime(){let e=this.media;return e?e.currentTime:0}set currentTime(e){this.dispatchMediaEvent(Re,{detail:e})}get playbackRate(){let e=this.media;return e?e.currentTime:1}set playbackRate(e){this.dispatchMediaEvent(Pe,{detail:e})}requestPictureInPicture(){this.dispatchMediaEvent(je,{detail:time})}exitPictureInPicture(){this.dispatchMediaEvent(Ae,{detail:time})}requestPreview(e){this.dispatchMediaEvent(Ie,{detail:e})}};function b(o,e,t){Array.from(o).forEach(i=>{if(!i.children)return;let s=i.nodeName.toLowerCase();if(i.slot==="media")return;function l(){typeof i[e]!="undefined"&&(i[e]=t),b(i.children,e,t),i.shadowRoot&&b(i.shadowRoot.childNodes,e,t)}s.includes("-")&&!m.customElements.get(s)?m.customElements.whenDefined(s).then(l):l()})}a("media-controller",T);var S=T,z=r.createElement("template"),V=`
+  <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);
@@ -251,3 +250,3 @@ width: var(--media-range-thumb-width, 10px);
   <input id="range" type="range" min="0" max="1000" step="1" value="0">
-`;var I=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}};a("media-chrome-range",I);var w=I,B=r.createElement("template");B.innerHTML=`
+`;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>
@@ -260,8 +259,6 @@ :host {
 
-      /* All putting the progress range at full width on other lines */
+      /* Allows putting the progress range at full width on other lines */
       flex-wrap: wrap;
 
       color: var(--media-icon-color, #eee);
-
-      /* background-color: var(--media-control-bar-background, rgba(20,20,30, 0.7)); */
     }
@@ -282,3 +279,3 @@
   <slot></slot>
-`;var Q=class extends p{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(B.content.cloneNode(!0))}connectedCallback(){}};a("media-control-bar",Q);function y(o,e){o=o<0?0:o;let t=Math.floor(o%60),i=Math.floor(o/60%60),s=Math.floor(o/3600),l=Math.floor(e/60%60),d=Math.floor(e/3600);return(isNaN(o)||o===Infinity)&&(s=i=t="-"),s=s>0||d>0?s+":":"",i=((s||l>=10)&&i<10?"0"+i:i)+":",t=t<10?"0"+t:t,s+i+t}var F=r.createElement("template");F.innerHTML=`
+`;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>
@@ -313,8 +310,8 @@ :host {
   <div id="container"></div>
-`;var j=class extends p{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(F.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}};a("media-text-display",j);var x=j,$=class extends x{constructor(){super();this.mediaCurrentTimeSet(0)}mediaCurrentTimeSet(e){this.container.innerHTML=y(e)}};a("media-current-time-display",$);var q=class extends x{constructor(){super();this.mediaDurationSet(0)}mediaDurationSet(e){this.container.innerHTML=y(e)}};a("media-duration-display",q);var Ue='<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">${Ue}</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})}};a("media-seek-forward-button",W);var De=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+`;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>`,Le=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+</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"/>
@@ -336,5 +333,5 @@ <path class="icon" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
 
-  <slot name="enter">${De}</slot>
-  <slot name="exit">${Le}</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)}};a("media-fullscreen-button",Y);var He='<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>',Ne='<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=`
+  <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>
@@ -365,7 +362,7 @@ /* Default to High slot/icon. */
 
-  <slot name="off">${He}</slot>
+  <slot name="off">${Ne}</slot>
   <slot name="low">${X}</slot>
   <slot name="medium">${X}</slot>
-  <slot name="high">${Ne}</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)}};a("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=`
+  <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>
@@ -386,3 +383,3 @@ :host([media-is-pip]) slot:not([name=exit]) > *,
   <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)}};a("media-pip-button",te);var ze='<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>',Ve='<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=`
+`;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>
@@ -400,5 +397,5 @@ :host([media-paused]) slot[name=pause] > *,
 
-  <slot name="play">${ze}</slot>
-  <slot name="pause">${Ve}</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)}};a("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`}};a("media-playback-rate-button",oe);var re=r.createElement("template");re.innerHTML=`
+  <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>
@@ -432,3 +429,3 @@ :host {
 <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"}};a("media-poster",ne);var me=r.createElement("template");me.innerHTML=`
+`;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>
@@ -450,3 +447,3 @@ :host {
   <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,l]=this.mediaPreviewCoords,d=this.mediaPreviewImage,c=this.offsetWidth/s,h=()=>{e.style.width=`${c*e.naturalWidth}px`,e.style.height=`${c*e.naturalHeight}px`};e.src!==d&&(e.onload=h,e.src=d,h()),h(),e.style.left=`-${c*t}px`,e.style.top=`-${c*i}px`}};a("media-thumbnail-preview",le);var de=r.createElement("template");de.innerHTML=`
+`;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>
@@ -505,5 +502,5 @@ #thumbnailContainer {
   </div>
-`;var A=class extends w{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=c=>{let h=this.mediaDuration;if(!h)return;let u=this.range.getBoundingClientRect(),v=(c.clientX-u.left)/u.width;v=Math.max(0,Math.min(1,v));let C=u.left-this.getBoundingClientRect().left,be=C+v*u.width;this.thumbnailPreview.style.left=`${be}px`,this.dispatchMediaEvent(n.MEDIA_PREVIEW_REQUEST,{detail:v*h})},m.addEventListener("mousemove",t,!1)},s=()=>{m.removeEventListener("mousemove",t)},l=!1,d=c=>{if(!l&&this.mediaDuration){l=!0,this.thumbnailPreview.style.display="block",i();let h=u=>{u.target!=this&&!this.contains(u.target)&&(this.thumbnailPreview.style.display="none",m.removeEventListener("mousemove",h),l=!1,s())};m.addEventListener("mousemove",h,!1)}this.mediaDuration||(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",d,!1)}};a("media-time-range",A);var P=A,ce=class extends P{constructor(){super();console.warn("MediaChrome: <media-progress-range> is deprecated. Use <media-time-range> instead.")}};a("media-progress-range",ce);var Be='<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">${Be}</slot>
-`;var ue=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})}};a("media-seek-backward-button",ue);var pe=r.createElement("template");pe.innerHTML=`
+`;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>
@@ -516,2 +513,2 @@ :host {
   <slot></slot>
-`;var fe=class extends p{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(pe.content.cloneNode(!0))}};a("media-title-bar",fe);var ge=class extends w{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()}};a("media-volume-range",ge);var ve=class extends S{};m.customElements.get("media-chrome")||m.customElements.define("media-chrome",ve);var Ee=class extends S{constructor(){super();console.warn("MediaChrome: <media-container> is deprecated. Use <media-controller>.")}};m.customElements.get("media-container")||m.customElements.define("media-container",Ee);})();
+`;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);})();

dist/media-chrome-button.js

@@ -66,4 +66,3 @@ 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=`
 
-  svg,
-  ::slotted(*) {
+  svg, img, ::slotted(svg), ::slotted(img) {
     width: var(--media-button-icon-width, 24px);
@@ -70,0 +69,0 @@ height: var(--media-button-icon-height);

dist/media-container.js

@@ -1,2 +0,2 @@
-import{defineCustomElement as u}from"./utils/defineCustomElement.js";import{Window as a,Document as b}from"./utils/server-safe-globals.js";import{MediaChromeHTMLElement as v,mediaUIEvents as d}from"./media-chrome-html-element.js";const h=b.createElement("template");h.innerHTML=`
+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=`
   <style>
@@ -8,14 +8,16 @@ :host {
       /* Position controls at the bottom  */
-      display: flex;
+      display: inline-flex;
       flex-direction: column-reverse;
 
-      /* Default dimensions
-       * max out at 100% width for smaller screens (< 720px)
-       * */
-      width: 720px;
+      /* Max out at 100% width for smaller screens (< 720px) */
       max-width: 100%;
-      height: 480px;
       background-color: #000;
     }
 
+    /* Video specific styles */
+    :host(:not([audio])) {
+      height: 480px;
+      width: 720px;
+    }
+
     /* Safari needs this to actually make the element fill the window */
@@ -37,4 +39,4 @@ :host(:-webkit-full-screen) {
 
-    /* Hide controls when inactive and not paused */
-    #container ::slotted(*) {
+    /* Hide controls when inactive and not paused and not audio */
+    slot:not([media]) ::slotted() {
       opacity: 1;
@@ -45,3 +47,3 @@ transition: opacity 0.25s;
 
-    :host([user-inactive]:not([media-paused])) #container ::slotted(*) {
+    :host([user-inactive]:not([media-paused]):not([audio])) slot:not([media]) ::slotted(*) {
       opacity: 0;
@@ -51,3 +53,3 @@ transition: opacity 1s;
 
-    #container ::slotted(media-control-bar)  {
+    slot:not([media]) ::slotted(media-control-bar)  {
       width: 100%;
@@ -57,5 +59,3 @@ }
   <slot name="media"></slot>
-  <div id="container">
-    <slot></slot>
-  </div>
-`;class m extends v{constructor(){super();const e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(h.content.cloneNode(!0)),this.container=this.shadowRoot.getElementById("container");const t=(c,f)=>{const n=this.media;for(let i of c)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}}u("media-container-temp",m);export default m;
+  <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;

dist/media-control-bar.js

@@ -1,2 +0,2 @@
-import t from"./media-chrome-html-element.js";import{defineCustomElement as r}from"./utils/defineCustomElement.js";import{Document as a}from"./utils/server-safe-globals.js";const e=a.createElement("template");e.innerHTML=`
+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=`
   <style>
@@ -9,8 +9,6 @@ :host {
 
-      /* All putting the progress range at full width on other lines */
+      /* Allows putting the progress range at full width on other lines */
       flex-wrap: wrap;
 
       color: var(--media-icon-color, #eee);
-
-      /* background-color: var(--media-control-bar-background, rgba(20,20,30, 0.7)); */
     }
@@ -31,2 +29,2 @@
   <slot></slot>
-`;class o extends t{constructor(){super();var s=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){}}r("media-control-bar",o);export default o;
+`;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;

dist/media-current-time-display.js

@@ -1,1 +0,1 @@
-import i from"./media-text-display.js";import{defineCustomElement as m}from"./utils/defineCustomElement.js";import{formatTime as r}from"./utils/time.js";import"./utils/server-safe-globals.js";class e extends i{constructor(){super();this.mediaCurrentTimeSet(0)}mediaCurrentTimeSet(t){this.container.innerHTML=r(t)}}m("media-current-time-display",e);export default e;
+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;

dist/media-duration-display.js

@@ -1,1 +0,1 @@
-import i from"./media-text-display.js";import{defineCustomElement as s}from"./utils/defineCustomElement.js";import{formatTime as o}from"./utils/time.js";import"./utils/server-safe-globals.js";class e extends i{constructor(){super();this.mediaDurationSet(0)}mediaDurationSet(t){this.container.innerHTML=o(t)}}s("media-duration-display",e);export default e;
+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;

dist/utils/time.js

@@ -1,1 +0,1 @@
-export function formatTime(t,o){t=t<0?0:t;let f=Math.floor(t%60),r=Math.floor(t/60%60),l=Math.floor(t/3600);const a=Math.floor(o/60%60),h=Math.floor(o/3600);return(isNaN(t)||t===Infinity)&&(l=r=f="-"),l=l>0||h>0?l+":":"",r=((l||a>=10)&&r<10?"0"+r:r)+":",f=f<10?"0"+f:f,l+r+f}
+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}

package.json

 {
   "name": "media-chrome",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -14,2 +14,4 @@ # `<media-chrome>`
 
+## Video Example
+
 ```html
@@ -40,6 +42,28 @@ <script type="module" src="https://unpkg.com/media-chrome@0.2"></script>
 
+## Audio Example
+
+```html
+<script type="module" src="https://unpkg.com/media-chrome@0.2"></script>
+
+<media-controller audio>
+  <audio
+    slot="media"
+    src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
+  ></audio>
+  <media-control-bar>
+    <media-play-button></media-play-button>
+    <media-time-display show-duration></media-time-display>
+    <media-time-range></media-time-range>
+    <media-playback-rate-button></media-playback-rate-button>
+    <media-mute-button></media-mute-button>
+    <media-volume-range></media-volume-range>
+  </media-control-bar>
+</media-controller>
+```
+
+#### Results (<a href="https://codepen.io/heff/pen/wvdyNWd?editors=1000" target="_blank">Try the CodePen example</a>)
+<a href="https://codepen.io/heff/pen/wvdyNWd?editors=1000" target="_blank"><img width="719" alt="Media Chrome Demo" src="https://user-images.githubusercontent.com/166/127259205-b36e237c-a37b-4bd1-9eff-852868e458a6.png"></a>
+
 ## _Quick_ Demo
 
-(GIFs still use old name of `<player-chrome>` and need to be updated)
-
 ### Adding controls to a video element
@@ -128,3 +152,3 @@ Just HTML. No javascripting required.
 | `<media-time-range>`    | See how far the playhead is through the media duration, and seek to new times.                            |
-| `<media-current-time-display>` | Show the time of the playhead                                                                      |
+| `<media-time-display>` | Show the time of the playhead.<br><br>Options: <br>`<media-time-display remaining>` Show as remaining time <br>`<media-time-display show-duration>` Also show the duration after a slash. Ex: `1:00 / 2:00`                                                                    |
 | `<media-duration-display>` | Show the duration of the media                                                                         |
@@ -131,0 +155,0 @@ | `<media-fullscreen-button>` | Toggle fullscreen viewing                                                                             |

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

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

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

Improved metrics

Total package byte prevSize

142749

increased by4.36%

Number of package files

58

increased by5.45%

Number of lines in readme file

227

increased by11.82%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

1244

decreased by-0.24%

No dependency changes