media-chrome - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

dist/index.js

@@ -1,2 +0,2 @@
-(()=>{function o(i,e){window.customElements.get(i)||(window.customElements.define(i,e),window[e.name]=e)}function H(i){return i.split("-").map(function(e,t){return(t?e[0].toUpperCase():e[0].toLowerCase())+e.slice(1).toLowerCase()}).join("")}var w=class extends HTMLElement{constructor(){super();this._media=null}static get observedAttributes(){return["media"].concat(super.observedAttributes||[])}attributeChangedCallback(e,t,s){let n=H(e);if(n=="media"){if(s===null){this.media=null;return}let d=document.querySelector(s);if(!d||!d.play)throw new Error("Supplied media attribute does not appear to match a media element.");this.media=d;return}typeof this[n]=="boolean"?s===null?this[n]=!1:this[n]=!0:this[n]=s}set media(e){if(e===this._media)return;if(this._media&&this.mediaUnsetCallback(this._media),this._media=e,f(this,e),f(this.shadowRoot,e),e){let t=e.nodeName.toLowerCase();t.includes("-")?window.customElements.whenDefined(t).then(()=>{this.mediaSetCallback(e)}):this.mediaSetCallback(e)}}get media(){return this._media}connectedCallback(){}disconnectedCallback(){}mediaSetCallback(){}mediaUnsetCallback(){}};function x(i,e){let t=i.nodeName.toLowerCase();if(t=="media-chrome")return;t.includes("-")?window.customElements.whenDefined(t).then(()=>{i instanceof w?i.media=e:f(i,e)}):i.slot!=="media"&&f(i,e)}function f(i,e){Array.prototype.forEach.call(i.children,t=>{x(t,e)})}o("media-chrome-html-element",w);var a=w,S=document.createElement("template");S.innerHTML=`
+(()=>{var Me={HTMLElement:function(){},customElements:{get:function(){},define:function(){},whenDefined:function(){}}},Le={createElement:function(){return{}}},z=typeof window=="undefined",r=z?Me:window,a=z?Le:window.document;function o(s,e){r.customElements.get(s)||(r.customElements.define(s,e),r[e.name]=e)}function B(s){return s.split("-").map(function(e,t){return(t?e[0].toUpperCase():e[0].toLowerCase())+e.slice(1).toLowerCase()}).join("")}var C=class extends r.HTMLElement{constructor(){super();this._media=null}static get observedAttributes(){return["media"].concat(super.observedAttributes||[])}attributeChangedCallback(e,t,i){let n=B(e);if(n=="media"){if(i===null){this.media=null;return}let l=a.querySelector(i);if(!l||!l.play)throw new Error("Supplied media attribute does not appear to match a media element.");this.media=l;return}typeof this[n]=="boolean"?i===null?this[n]=!1:this[n]=!0:this[n]=i}set media(e){if(e===this._media)return;if(this._media&&this.mediaUnsetCallback(this._media),this._media=e,x(this,e),x(this.shadowRoot,e),e){let t=e.nodeName.toLowerCase();t.includes("-")?r.customElements.whenDefined(t).then(()=>{this.mediaSetCallback(e)}):this.mediaSetCallback(e)}}get media(){return this._media}connectedCallback(){}disconnectedCallback(){}mediaSetCallback(){}mediaUnsetCallback(){}};function k(s,e){let t=s.nodeName.toLowerCase();if(t=="media-chrome")return;t.includes("-")?r.customElements.whenDefined(t).then(()=>{s instanceof C?s.media=e:x(s,e)}):s.slot!=="media"&&x(s,e)}function x(s,e){Array.prototype.forEach.call(s.children,t=>{k(t,e)})}o("media-chrome-html-element",C);var m=C,_=a.createElement("template");_.innerHTML=`
 <style>
@@ -79,3 +79,3 @@ :host {
 </button>
-`;var C=class extends a{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(S.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.addEventListener("click",t=>{this.onClick(t)})}onClick(){}set icon(e){this.container.innerHTML=e}};o("media-chrome-button",C);var l=C,z=document.createElement("template");z.innerHTML=`
+`;var M=class extends m{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(_.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.addEventListener("click",t=>{this.onClick(t)})}onClick(){}set icon(e){this.container.innerHTML=e}};o("media-chrome-button",M);var p=M,N=a.createElement("template");N.innerHTML=`
   <style>
@@ -91,3 +91,4 @@ :host {
       /* Default dimensions */
-      width: 720px;
+      width: 100%;
+      max-width: 720px;
       height: 480px;
@@ -129,3 +130,3 @@ background-color: #000;
   </div>
-`;var k=class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(z.content.cloneNode(!0)),this.container=this.shadowRoot.getElementById("container");let t=(n,d)=>{let c=this.media;for(let h of n)h.type==="childList"&&(h.removedNodes.forEach(m=>{if(m.slot=="media"&&h.target==this){let r=h.previousSibling&&h.previousSibling.previousElementSibling;if(!r||!c)this.mediaUnsetCallback(m);else{let u=r.slot!=="media";for(;(r=r.previousSibling)!==null;)r.slot=="media"&&(u=!1);u&&this.mediaUnsetCallback(m)}c&&this.mediaSetCallback(this,c)}else x(m,null)}),c&&h.addedNodes.forEach(m=>{m==c?this.mediaSetCallback(m):x(m,c)}))},s=new MutationObserver(t);s.observe(this,{childList:!0,subtree:!0})}get media(){return this.querySelector(":scope > [slot=media]")}mediaSetCallback(e){if(!e||!e.play){console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',e);return}let t=e.nodeName.toLowerCase();if(t.includes("-")&&!window.customElements.get(t)){window.customElements.whenDefined(t).then(()=>{this.mediaSetCallback(e)});return}f(this,e),e.paused&&this.container.classList.add("paused"),this._mediaPlayHandler=s=>{this.container.classList.remove("paused")},e.addEventListener("play",this._mediaPlayHandler),this._mediaPauseHandler=s=>{this.container.classList.add("paused")},e.addEventListener("pause",this._mediaPauseHandler),this._mediaClickHandler=s=>{e.paused?e.play():e.pause()},e.addEventListener("click",this._mediaClickHandler,!1)}mediaUnsetCallback(e){e.removeEventListener("click",this._mediaClickHandler),e.removeEventListener("play",this._mediaPlayHandler),e.removeEventListener("pause",this._mediaPauseHandler),f(this,null),this.container.classList.add("paused")}connectedCallback(){this.media&&this.mediaSetCallback(this.media);let e=()=>{this.container.classList.remove("inactive"),window.clearTimeout(this.inactiveTimeout),this.inactiveTimeout=window.setTimeout(()=>{this.container.classList.add("inactive")},2e3)};this.addEventListener("keyup",t=>{e()}),this.addEventListener("keyup",t=>{this.container.classList.add("media-focus-visible")}),this.addEventListener("mouseup",t=>{this.container.classList.remove("media-focus-visible")}),this.addEventListener("mousemove",t=>{if(t.target===this)return;this.container.classList.remove("inactive"),window.clearTimeout(this.inactiveTimeout),t.target===this.media&&e()}),this.addEventListener("mouseout",t=>{this.container.classList.add("inactive")})}autoHide(e){}};o("media-container",k);var R=k,P=document.createElement("template");P.innerHTML=`
+`;var L=class extends r.HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(N.content.cloneNode(!0)),this.container=this.shadowRoot.getElementById("container");let t=(n,l)=>{let h=this.media;for(let u of n)u.type==="childList"&&(u.removedNodes.forEach(c=>{if(c.slot=="media"&&u.target==this){let d=u.previousSibling&&u.previousSibling.previousElementSibling;if(!d||!h)this.mediaUnsetCallback(c);else{let f=d.slot!=="media";for(;(d=d.previousSibling)!==null;)d.slot=="media"&&(f=!1);f&&this.mediaUnsetCallback(c)}h&&this.mediaSetCallback(this,h)}else k(c,null)}),h&&u.addedNodes.forEach(c=>{c==h?this.mediaSetCallback(c):k(c,h)}))},i=new MutationObserver(t);i.observe(this,{childList:!0,subtree:!0})}get media(){return this.querySelector(":scope > [slot=media]")}mediaSetCallback(e){if(!e||!e.play){console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',e);return}let t=e.nodeName.toLowerCase();if(t.includes("-")&&!r.customElements.get(t)){r.customElements.whenDefined(t).then(()=>{this.mediaSetCallback(e)});return}x(this,e),e.paused&&this.container.classList.add("paused"),this._mediaPlayHandler=i=>{this.container.classList.remove("paused")},e.addEventListener("play",this._mediaPlayHandler),this._mediaPauseHandler=i=>{this.container.classList.add("paused")},e.addEventListener("pause",this._mediaPauseHandler),this._mediaClickHandler=i=>{e.paused?e.play():e.pause()},e.addEventListener("click",this._mediaClickHandler,!1)}mediaUnsetCallback(e){e.removeEventListener("click",this._mediaClickHandler),e.removeEventListener("play",this._mediaPlayHandler),e.removeEventListener("pause",this._mediaPauseHandler),x(this,null),this.container.classList.add("paused")}connectedCallback(){this.media&&this.mediaSetCallback(this.media);let e=()=>{this.container.classList.remove("inactive"),r.clearTimeout(this.inactiveTimeout),this.inactiveTimeout=r.setTimeout(()=>{this.container.classList.add("inactive")},2e3)};this.addEventListener("keyup",t=>{e()}),this.addEventListener("keyup",t=>{this.container.classList.add("media-focus-visible")}),this.addEventListener("mouseup",t=>{this.container.classList.remove("media-focus-visible")}),this.addEventListener("mousemove",t=>{if(t.target===this)return;this.container.classList.remove("inactive"),r.clearTimeout(this.inactiveTimeout),t.target===this.media&&e()}),this.addEventListener("mouseout",t=>{this.container.classList.add("inactive")})}autoHide(e){}};o("media-container",L);var I=L,D=a.createElement("template");D.innerHTML=`
 <style>
@@ -169,3 +170,3 @@ :host {
 </div>
-`;var E=class extends a{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(P.content.cloneNode(!0)),this.contentConatiner=this.shadowRoot.querySelector("#contentContainer"),this.addEventListener("click",t=>{this.onClick(t)})}onClick(){}};o("media-chrome-menuitem",E);var M=E,B=document.createElement("template");B.innerHTML=`
+`;var j=class extends m{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(D.content.cloneNode(!0)),this.contentConatiner=this.shadowRoot.querySelector("#contentContainer"),this.addEventListener("click",t=>{this.onClick(t)})}onClick(){}};o("media-chrome-menuitem",j);var T=j,A=a.createElement("template");A.innerHTML=`
 <style>
@@ -206,3 +207,3 @@ #menuPositioner {
 </div>
-`;var N=class extends l{constructor(){super();this.shadowRoot.prepend(B.content.cloneNode(!0)),this.menuContainer=this.shadowRoot.querySelector("#menuContainer"),this.attributes.expanded&&(this.menuContainer.style.display="flex")}onClick(e){this.attributes.expanded?(this.removeAttribute("expanded"),this.menuContainer.style.display="none"):(this.setAttribute("expanded","expanded"),this.menuContainer.style.display="flex")}mediaSetCallback(e){}};o("media-chrome-menu-button",N);var I=document.createElement("template");I.innerHTML=`
+`;var q=class extends p{constructor(){super();this.shadowRoot.prepend(A.content.cloneNode(!0)),this.menuContainer=this.shadowRoot.querySelector("#menuContainer"),this.attributes.expanded&&(this.menuContainer.style.display="flex")}onClick(e){this.attributes.expanded?(this.removeAttribute("expanded"),this.menuContainer.style.display="none"):(this.setAttribute("expanded","expanded"),this.menuContainer.style.display="flex")}mediaSetCallback(e){}};o("media-chrome-menu-button",q);var je=a.createElement("template");je.innerHTML=`
 <style>
@@ -228,3 +229,3 @@ :host {
 </div>
-`;var _=class extends M{constructor(){super();this.shadowRoot.appendChild(I.content.cloneNode(!0)),this.menu=this.querySelector("[slot=menu]"),this.menu.style.display="none"}onClick(){this.menu.style.display=="block"?this.menu.style.display="none":this.menu.style.display="block"}};o("media-chrome-submenu-menuitem",_);var A=document.createElement("template");A.innerHTML=`
+`;var F=class extends T{constructor(){super();this.shadowRoot.appendChild(addTemplate.content.cloneNode(!0)),this.menu=this.querySelector("[slot=menu]"),this.menu.style.display="none"}onClick(){this.menu.style.display=="block"?this.menu.style.display="none":this.menu.style.display="block"}};o("media-chrome-submenu-menuitem",F);var W=a.createElement("template");W.innerHTML=`
   <style>
@@ -240,3 +241,3 @@ :host {
   <slot></slot>
-`;var V=class extends a{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(A.content.cloneNode(!0))}mediaSetCallback(e){}};o("media-chrome-menu",V);var F=document.createElement("template");F.innerHTML=`
+`;var U=class extends m{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(W.content.cloneNode(!0))}mediaSetCallback(e){}};o("media-chrome-menu",U);var V=a.createElement("template");V.innerHTML=`
   <style>
@@ -255,3 +256,3 @@ :host {
   <slot></slot>
-`;var q=class extends a{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(F.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}};o("media-chrome-popup",q);var D=document.createElement("template"),U=`
+`;var $=class extends m{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(V.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}};o("media-chrome-popup",$);var X=a.createElement("template"),Z=`
   height: var(--thumb-height);
@@ -267,3 +268,3 @@ width: var(--media-range-thumb-width, 10px);
   opacity: var(--media-range-thumb-opacity, 1);
-`,L=`
+`,S=`
   width: var(--media-range-track-width, 100%);
@@ -279,3 +280,3 @@ min-width: 40px;
   cursor: pointer;
-`;D.innerHTML=`
+`;X.innerHTML=`
   <style>
@@ -329,10 +330,10 @@ :host {
       -webkit-appearance: none;
-      ${U}
+      ${Z}
       /* 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 { ${U} }
+    input[type=range]::-moz-range-thumb { ${Z} }
 
-    input[type=range]::-webkit-slider-runnable-track { ${L} }
-    input[type=range]::-moz-range-track { ${L} }
+    input[type=range]::-webkit-slider-runnable-track { ${S} }
+    input[type=range]::-moz-range-track { ${S} }
     input[type=range]::-ms-track {
@@ -347,3 +348,3 @@ /* Reset */
 
-      ${L}
+      ${S}
     }
@@ -371,3 +372,3 @@
   <input id="range" type="range" min="0" max="1000" step="1" value="0">
-`;var j=class extends a{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(D.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, ",s=0;e.forEach(n=>{if(n[1]<s)return;t=t+`${n[0]} ${s}%, ${n[0]} ${n[1]}%,`,s=n[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,s=[["var(--media-range-bar-color, #fff)",t],["var(--media-range-track-background, #333)",100]];return s}};o("media-chrome-range",j);var v=j,$=document.createElement("template");$.innerHTML=`
+`;var H=class extends m{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(X.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(n=>{if(n[1]<i)return;t=t+`${n[0]} ${i}%, ${n[0]} ${n[1]}%,`,i=n[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",H);var y=H,O=a.createElement("template");O.innerHTML=`
   <style>
@@ -394,3 +395,4 @@ :host {
     media-progress-range,
-    ::slotted(media-progress-range) {
+    ::slotted(media-progress-range),
+    ::slotted(media-clip-selector) {
       flex-grow: 1;
@@ -401,3 +403,3 @@ }
   <slot></slot>
-`;var W=class extends a{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild($.content.cloneNode(!0))}connectedCallback(){}};o("media-control-bar",W);function y(i,e){i=i<0?0:i;let t=Math.floor(i%60),s=Math.floor(i/60%60),n=Math.floor(i/3600),d=Math.floor(e/60%60),c=Math.floor(e/3600);return(isNaN(i)||i===Infinity)&&(n=s=t="-"),n=n>0||c>0?n+":":"",s=((n||d>=10)&&s<10?"0"+s:s)+":",t=t<10?"0"+t:t,n+s+t}var Z=document.createElement("template");Z.innerHTML=`
+`;var Q=class extends m{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(O.content.cloneNode(!0))}connectedCallback(){}};o("media-control-bar",Q);function E(s,e){s=s<0?0:s;let t=Math.floor(s%60),i=Math.floor(s/60%60),n=Math.floor(s/3600),l=Math.floor(e/60%60),h=Math.floor(e/3600);return(isNaN(s)||s===Infinity)&&(n=i=t="-"),n=n>0||h>0?n+":":"",i=((n||l>=10)&&i<10?"0"+i:i)+":",t=t<10?"0"+t:t,n+i+t}var Y=a.createElement("template");Y.innerHTML=`
   <style>
@@ -432,3 +434,3 @@ :host {
   <div id="container"></div>
-`;var O=class extends a{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(Z.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(6e3)}update(e){this.container.innerHTML=y(e)}mediaSetCallback(e){e.addEventListener("timeupdate",t=>{this.update(e.currentTime)}),this.update(e.currentTime)}mediaUnsetCallback(){this.update(0)}};o("media-current-time-display",O);var Q=document.createElement("template");Q.innerHTML=`
+`;var G=class extends m{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(Y.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(6e3)}update(e){this.container.innerHTML=E(e)}mediaSetCallback(e){e.addEventListener("timeupdate",t=>{this.update(e.currentTime)}),this.update(e.currentTime)}mediaUnsetCallback(){this.update(0)}};o("media-current-time-display",G);var J=a.createElement("template");J.innerHTML=`
   <style>
@@ -463,9 +465,9 @@ :host {
   <div id="container"></div>
-`;var Y=class extends a{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(Q.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(0)}update(e){this.container.innerHTML=y(e)}mediaSetCallback(e){e.addEventListener("durationchange",t=>{this.update(e.duration)}),this.update(e.duration)}mediaUnsetCallback(){this.update(0)}};o("media-duration-display",Y);var ve='<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>',G=class extends l{constructor(){super();this.icon=ve}onClick(e){let t=this.media;t.currentTime=t.currentTime+30}};o("media-forward-button",G);var J=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+`;var K=class extends m{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(J.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(0)}update(e){this.container.innerHTML=E(e)}mediaSetCallback(e){e.addEventListener("durationchange",t=>{this.update(e.duration)}),this.update(e.duration)}mediaUnsetCallback(){this.update(0)}};o("media-duration-display",K);var Te='<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>',ee=class extends p{constructor(){super();this.icon=Te}onClick(e){let t=this.media;t.currentTime=t.currentTime+30}};o("media-forward-button",ee);var te=`<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>`,we=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+</svg>`,Se=`<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>`,p={enter:"requestFullscreen",exit:"exitFullscreen",event:"fullscreenchange",element:"fullscreenElement",error:"fullscreenerror"};document.fullscreenElement===void 0&&(p.enter="webkitRequestFullScreen",p.exit=document.webkitExitFullscreen!=null?"webkitExitFullscreen":"webkitCancelFullScreen",p.event="webkitfullscreenchange",p.element="webkitFullscreenElement",p.error="webkitfullscreenerror");var K=class extends l{constructor(){super();this.icon=J,document.addEventListener(p.event,()=>{this.isFullscreen?this.icon=we:this.icon=J})}static get observedAttributes(){return["fullscreen-element"].concat(super.observedAttributes||[])}get isFullscreen(){let e=this.fullscreenElement;return e?e.getRootNode()[p.element]==e:!1}get fullscreenElement(){return this._fullscreenElement||this.media&&this.media.closest("media-container, media-chrome")||this.media}set fullscreenElement(e){this._fullscreenElement=document.querySelector(e)}onClick(){this.isFullscreen?document[p.exit]():(document.pictureInPictureElement&&document.exitPictureInPicture(),this.fullscreenElement&&this.fullscreenElement[p.enter]())}};o("media-fullscreen-button",K);var X='<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>',xe='<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>',ye='<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>',ee=class extends l{constructor(){super();this.icon=X}onClick(e){let t=this.media;t.muted=!t.muted,!t.muted&&t.volume===0&&(t.volume=.25)}update(){let e=this.media;e.muted||e.volume===0?this.icon=xe:e.volume<.5?this.icon=ye:this.icon=X}mediaSetCallback(e){e.addEventListener("volumechange",this.update.bind(this)),this.update()}};o("media-mute-button",ee);var Ce='<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>',te=class extends l{constructor(){super();this.icon=Ce,this.addEventListener("click",e=>{let t=this.media;document.pictureInPictureElement?document.exitPictureInPicture():(document.fullscreenElement?document.exitFullscreen():document.webkitFullscreenElement&&document.webkitExitFullscreen(),t.requestPictureInPicture())})}};o("media-pip-button",te);var ie='<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>',ke='<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>',oe=class extends l{constructor(){super();this.icon=ie,this._playing=!1}static get observedAttributes(){return["playing"].concat(super.observedAttributes||[])}get playing(){return this._playing}set playing(e){this._playing=!!e,e?this.icon=ke:this.icon=ie}onClick(e){let t=this.media;if(!t){console.warn("<media-play-button>: No media was found and an alternative onClick handler was not set.");return}t.paused?t.play():t.pause()}mediaSetCallback(e){e.addEventListener("play",()=>{this.playing=!0}),e.addEventListener("pause",()=>{this.playing=!1})}};o("media-play-button",oe);var ne=[1,1.25,1.5,1.75,2],se=class extends l{constructor(){super();this._rates=ne}static get observedAttributes(){return["rates"].concat(super.observedAttributes||[])}set rates(e){e?(typeof e=="string"&&(e=e.split(/,\s?/)),this._rates=e):this._rates=ne}get rates(){return this._rates}onClick(e){let t=this.media;if(!t)return;let s=t.playbackRate,n=this.rates.find(d=>d>s);n||(n=this.rates[0]),t.playbackRate=n}mediaSetCallback(e){this._rateChangeHandler=()=>{let t=e.playbackRate.toString().substring(0,4);this.shadowRoot.querySelector("button").innerHTML=`${t}x`},e.addEventListener("ratechange",this._rateChangeHandler),this._rateChangeHandler()}mediaUnsetCallback(e){if(!e)return;e.removeEventListener("ratechange",this._rateChangeHandler)}};o("media-playback-rate-button",se);var ae=document.createElement("template");ae.innerHTML=`
+</svg>`,g={enter:"requestFullscreen",exit:"exitFullscreen",event:"fullscreenchange",element:"fullscreenElement",error:"fullscreenerror"};a.fullscreenElement===void 0&&(g.enter="webkitRequestFullScreen",g.exit=a.webkitExitFullscreen!=null?"webkitExitFullscreen":"webkitCancelFullScreen",g.event="webkitfullscreenchange",g.element="webkitFullscreenElement",g.error="webkitfullscreenerror");var ie=class extends p{constructor(){super();this.icon=te,a.addEventListener(g.event,()=>{this.isFullscreen?this.icon=Se:this.icon=te})}static get observedAttributes(){return["fullscreen-element"].concat(super.observedAttributes||[])}get isFullscreen(){let e=this.fullscreenElement;return e?e.getRootNode()[g.element]==e:!1}get fullscreenElement(){return this._fullscreenElement||this.media&&this.media.closest("media-container, media-chrome")||this.media}set fullscreenElement(e){this._fullscreenElement=a.querySelector(e)}onClick(){this.isFullscreen?a[g.exit]():(a.pictureInPictureElement&&a.exitPictureInPicture(),this.fullscreenElement&&this.fullscreenElement[g.enter]())}};o("media-fullscreen-button",ie);var se='<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>',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>',Re='<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=class extends p{constructor(){super();this.icon=se}onClick(e){let t=this.media;t.muted=!t.muted,!t.muted&&t.volume===0&&(t.volume=.25)}update(){let e=this.media;e.muted||e.volume===0?this.icon=He:e.volume<.5?this.icon=Re:this.icon=se}mediaSetCallback(e){e.addEventListener("volumechange",this.update.bind(this)),this.update()}};o("media-mute-button",ne);var Pe='<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>',oe=class extends p{constructor(){super();this.icon=Pe,this.addEventListener("click",e=>{let t=this.media;a.pictureInPictureElement?a.exitPictureInPicture():(a.fullscreenElement?a.exitFullscreen():a.webkitFullscreenElement&&a.webkitExitFullscreen(),t.requestPictureInPicture())})}};o("media-pip-button",oe);var ae='<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>',ze='<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>',re=class extends p{constructor(){super();this.icon=ae,this._playing=!1}static get observedAttributes(){return["playing"].concat(super.observedAttributes||[])}get playing(){return this._playing}set playing(e){this._playing=!!e,e?this.icon=ze:this.icon=ae}onClick(e){let t=this.media;if(!t){console.warn("<media-play-button>: No media was found and an alternative onClick handler was not set.");return}t.paused?t.play():t.pause()}mediaSetCallback(e){e.addEventListener("play",()=>{this.playing=!0}),e.addEventListener("pause",()=>{this.playing=!1})}};o("media-play-button",re);var le=[1,1.25,1.5,1.75,2],de=class extends p{constructor(){super();this._rates=le}static get observedAttributes(){return["rates"].concat(super.observedAttributes||[])}set rates(e){e?(typeof e=="string"&&(e=e.split(/,\s?/)),this._rates=e):this._rates=le}get rates(){return this._rates}onClick(e){let t=this.media;if(!t)return;let i=t.playbackRate,n=this.rates.find(l=>l>i);n||(n=this.rates[0]),t.playbackRate=n}mediaSetCallback(e){this._rateChangeHandler=()=>{let t=e.playbackRate.toString().substring(0,4);this.shadowRoot.querySelector("button").innerHTML=`${t}x`},e.addEventListener("ratechange",this._rateChangeHandler),this._rateChangeHandler()}mediaUnsetCallback(e){if(!e)return;e.removeEventListener("ratechange",this._rateChangeHandler)}};o("media-playback-rate-button",de);var me=a.createElement("template");me.innerHTML=`
 <style>
@@ -499,3 +501,3 @@ :host {
 <div id="poster"></div>
-`;var re=class extends a{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(ae.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",re);var le=document.createElement("template");le.innerHTML=`
+`;var ce=class extends m{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(me.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",ce);var he=a.createElement("template");he.innerHTML=`
   <style>
@@ -517,3 +519,3 @@ :host {
   <img crossorigin loading="eager" decoding="async" />
-`;var T=class extends a{static get observedAttributes(){return["time"].concat(super.observedAttributes||[])}constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(le.content.cloneNode(!0))}set time(e){if(this.media&&this.media.textTracks&&this.media.textTracks.length){let t=Array.prototype.find.call(this.media.textTracks,n=>n.label=="thumbnails");if(!t)return;let s=Array.prototype.find.call(t.cues,n=>n.startTime>=e);if(s){let n=new URL(s.text),[d,c,h,m]=n.hash.split("=")[1].split(","),r=this.shadowRoot.querySelector("img"),u=n.origin+n.pathname,g=this.offsetWidth/h,b=()=>{r.style.width=`${g*r.naturalWidth}px`,r.style.height=`${g*r.naturalHeight}px`};r.src!==u&&(r.onload=b,r.src=u,b()),b(),r.style.left=`-${g*d}px`,r.style.top=`-${g*c}px`}}}get time(){return parseFloat(this.getAttribute("time"))}mediaSetCallback(e){let t=e&&e.textTracks;if(!t||!t.addEventListener)return;this._trackChangeHandler=s=>{for(let n=0;n<t.length;n++){let d=t[n];d.label==="thumbnails"&&(this.time||(this.time=0))}},t.addEventListener("addtrack",this._trackChangeHandler,!1),this._trackChangeHandler()}mediaUnsetCallback(e){let t=e&&e.textTracks;t&&t.removeEventListener&&t.removeEventListener("addtrack",this._trackChangeHandler)}};window.customElements.get("media-thumbnail-preview")||(window.customElements.define("media-thumbnail-preview",T),window.MediaThumbnailPreviewElement=T);var de=document.createElement("template");de.innerHTML=`
+`;var R=class extends m{static get observedAttributes(){return["time"].concat(super.observedAttributes||[])}constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(he.content.cloneNode(!0))}set time(e){if(this.media&&this.media.textTracks&&this.media.textTracks.length){let t=Array.prototype.find.call(this.media.textTracks,n=>n.label=="thumbnails");if(!t)return;if(!t.cues)return;let i=Array.prototype.find.call(t.cues,n=>n.startTime>=e);if(i){let n=new URL(i.text),[l,h,u,c]=n.hash.split("=")[1].split(","),d=this.shadowRoot.querySelector("img"),f=n.origin+n.pathname,b=this.offsetWidth/u,w=()=>{d.style.width=`${b*d.naturalWidth}px`,d.style.height=`${b*d.naturalHeight}px`};d.src!==f&&(d.onload=w,d.src=f,w()),w(),d.style.left=`-${b*l}px`,d.style.top=`-${b*h}px`}}}get time(){return parseFloat(this.getAttribute("time"))}mediaSetCallback(e){let t=e&&e.textTracks;if(!t||!t.addEventListener)return;this._trackChangeHandler=i=>{for(let n=0;n<t.length;n++){let l=t[n];l.label==="thumbnails"&&(this.time||(this.time=0))}},t.addEventListener("addtrack",this._trackChangeHandler,!1),this._trackChangeHandler()}mediaUnsetCallback(e){let t=e&&e.textTracks;t&&t.removeEventListener&&t.removeEventListener("addtrack",this._trackChangeHandler)}};r.customElements.get("media-thumbnail-preview")||(r.customElements.define("media-thumbnail-preview",R),r.MediaThumbnailPreviewElement=R);var ue=a.createElement("template");ue.innerHTML=`
   <style>
@@ -572,4 +574,120 @@ #thumbnailContainer {
   </div>
-`;var me=class extends v{static get observedAttributes(){return["thumbnails"].concat(super.observedAttributes||[])}constructor(){super();this.shadowRoot.appendChild(de.content.cloneNode(!0)),this.setMediaTimeWithRange=()=>{let e=this.media,t=this.range;(e.readyState>0||e.readyState===void 0)&&(e.currentTime=Math.round(t.value/1e3*e.duration))},this.range.addEventListener("input",this.setMediaTimeWithRange),this.updateRangeWithMediaTime=()=>{let e=this.media;this.range.value=Math.round(e.currentTime/e.duration*1e3),this.updateBar()},this.playIfNotReady=e=>{this.range.removeEventListener("change",this.playIfNotReady);let t=this.media;t.play().then(this.setMediaTimeWithRange)}}mediaSetCallback(e){super.mediaSetCallback(e);let t=this.range;if(e.addEventListener("timeupdate",this.updateRangeWithMediaTime),e.readyState!==void 0&&e.readyState==0,e.addEventListener("progress",this.updateBar.bind(this)),e.textTracks&&e.textTracks.length){let s=Array.prototype.find.call(e.textTracks,n=>n.label=="thumbnails");s?this.enableThumbnails():this.thumbnailPreview.style.display="none"}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),e.removeEventListener("timeupdate",this.updateRangeWithMediaTime),this.range.removeEventListener("change",this.playIfNotReady)}getBarColors(){let e=this.media,t=super.getBarColors();if(!e||!e.buffered||!e.buffered.length||e.duration<=0)return t;let s=e.buffered,n=s.end(s.length-1)/e.duration*100;return t.splice(1,0,["var(--media-progress-buffered-color, #777)",n]),t}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview");let e=this.shadowRoot.querySelector("#thumbnailContainer");e.classList.add("enabled");let t,s=()=>{t=h=>{let m=this.media&&this.media.duration;if(!m)return;let r=this.range.getBoundingClientRect(),u=(h.clientX-r.left)/r.width;u=Math.max(0,Math.min(1,u));let g=r.left-this.getBoundingClientRect().left,b=g+u*r.width;this.thumbnailPreview.style.left=`${b}px`,this.thumbnailPreview.time=u*this.media.duration},window.addEventListener("mousemove",t,!1)},n=()=>{window.removeEventListener("mousemove",t)},d=!1,c=h=>{if(!d&&this.media&&this.media.duration){d=!0,this.thumbnailPreview.style.display="block",s();let m=r=>{r.target!=this&&!this.contains(r.target)&&(this.thumbnailPreview.style.display="none",window.removeEventListener("mousemove",m),d=!1,n())};window.addEventListener("mousemove",m,!1)}(!this.media||!this.media.duration)&&(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",c,!1)}disableThumbnails(){thumbnailContainer.classList.remove("enabled")}};o("media-progress-range",me);var Ee='<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>',ce=class extends l{constructor(){super();this.icon=Ee}onClick(e){let t=this.media;t.currentTime=t.currentTime-30}};o("media-replay-button",ce);var he=document.createElement("template");he.innerHTML=`
+`;var pe=class extends y{static get observedAttributes(){return["thumbnails"].concat(super.observedAttributes||[])}constructor(){super();this.shadowRoot.appendChild(ue.content.cloneNode(!0)),this.setMediaTimeWithRange=()=>{let e=this.media,t=this.range;(e.readyState>0||e.readyState===void 0)&&(e.currentTime=Math.round(t.value/1e3*e.duration))},this.range.addEventListener("input",this.setMediaTimeWithRange),this.updateRangeWithMediaTime=()=>{let e=this.media;this.range.value=Math.round(e.currentTime/e.duration*1e3),this.updateBar()},this.playIfNotReady=e=>{this.range.removeEventListener("change",this.playIfNotReady);let t=this.media;t.play().then(this.setMediaTimeWithRange)}}mediaSetCallback(e){super.mediaSetCallback(e);let t=this.range;if(e.addEventListener("timeupdate",this.updateRangeWithMediaTime),e.readyState!==void 0&&e.readyState==0,e.addEventListener("progress",this.updateBar.bind(this)),e.textTracks&&e.textTracks.length){let i=Array.prototype.find.call(e.textTracks,n=>n.label=="thumbnails");i?this.enableThumbnails():this.thumbnailPreview.style.display="none"}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),e.removeEventListener("timeupdate",this.updateRangeWithMediaTime),this.range.removeEventListener("change",this.playIfNotReady)}getBarColors(){let e=this.media,t=super.getBarColors();if(!e||!e.buffered||!e.buffered.length||e.duration<=0)return t;let i=e.buffered,n=i.end(i.length-1)/e.duration*100;return t.splice(1,0,["var(--media-progress-buffered-color, #777)",n]),t}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview");let e=this.shadowRoot.querySelector("#thumbnailContainer");e.classList.add("enabled");let t,i=()=>{t=u=>{let c=this.media&&this.media.duration;if(!c)return;let d=this.range.getBoundingClientRect(),f=(u.clientX-d.left)/d.width;f=Math.max(0,Math.min(1,f));let b=d.left-this.getBoundingClientRect().left,w=b+f*d.width;this.thumbnailPreview.style.left=`${w}px`,this.thumbnailPreview.time=f*this.media.duration},r.addEventListener("mousemove",t,!1)},n=()=>{r.removeEventListener("mousemove",t)},l=!1,h=u=>{if(!l&&this.media&&this.media.duration){l=!0,this.thumbnailPreview.style.display="block",i();let c=d=>{d.target!=this&&!this.contains(d.target)&&(this.thumbnailPreview.style.display="none",r.removeEventListener("mousemove",c),l=!1,n())};r.addEventListener("mousemove",c,!1)}(!this.media||!this.media.duration)&&(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",h,!1)}disableThumbnails(){thumbnailContainer.classList.remove("enabled")}};o("media-progress-range",pe);var fe=document.createElement("template"),ge=8,P={"100":100,"200":200,"300":300};function v(s){return Math.max(0,Math.min(1,s))}fe.innerHTML=`
   <style>
+    #selectorContainer {
+      background-color: transparent;
+      height: 44px;
+      width: 100%;
+      display: flex;
+      position: relative;
+    }
+
+    #timeline {
+      width: 100%;
+      height: 10px;
+      background: #ccc;
+      position: absolute;
+      top: 16px;
+      z-index: ${P["100"]};
+    }
+
+    #startHandle, #endHandle {
+      cursor: pointer;
+      height: 80%;
+      width: ${ge}px;
+      border-radius: 4px;
+      background-color: royalblue;
+    }
+
+    #playhead {
+      height: 100%;
+      width: 3px;
+      background-color: #aaa;
+      position: absolute;
+      display: none;
+      z-index: ${P["300"]};
+    }
+
+    #selection {
+      display: flex;
+      z-index: ${P["200"]};
+      width: 25%;
+      height: 100%;
+      align-items: center;
+    }
+
+    #leftTrim {
+      width: 25%;
+    }
+
+    #spacer {
+      flex: 1;
+      background-color: cornflowerblue;
+      height: 40%;
+    }
+
+    #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(:hover) #thumbnailContainer.enabled {
+      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>
+  <div id="selectorContainer">
+    <div id="timeline"></div>
+    <div id="playhead"></div>
+    <div id="leftTrim"></div>
+    <div id="selection">
+      <div id="startHandle"></div>
+      <div id="spacer"></div>
+      <div id="endHandle"></div>
+    </div>
+  </div>
+`;var be=class extends m{static get observedAttributes(){return["thumbnails"].concat(super.observedAttributes||[])}constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(fe.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)}getPlayheadBasedOnMouseEvent(e){let t=this.media&&this.media.duration;if(!t)return;let i=v(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){let t=this.wrapper.getBoundingClientRect(),i=(this.getXPositionFromMouse(e)-t.left)/t.width;return v(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,n=ge*3,l=v(n/t);i<l&&(i=l),this.selection.style.width=`${i*100}%`}drag(e){if(!this.draggingEl)return;e.preventDefault();let t=this.wrapper.getBoundingClientRect(),i=t.width,n=this.getXPositionFromMouse(e),l=n-this.initialX,h=this.getMousePercent(e),u=this.selection.getBoundingClientRect().width;if(this.draggingEl===this.startHandle){this.initialX=this.getXPositionFromMouse(e),this.leftTrim.style.width=`${h*100}%`;let c=v((u-l)/i);this.setSelectionWidth(c,i)}if(this.draggingEl===this.endHandle){this.initialX=this.getXPositionFromMouse(e);let c=v((u+l)/i);this.setSelectionWidth(c,i)}this.dispatchUpdate()}dispatchUpdate(){let e=new CustomEvent("update",{detail:this.getCurrentClipBounds()});this.dispatchEvent(e)}getCurrentClipBounds(){let e=this.wrapper.getBoundingClientRect(),t=this.leftTrim.getBoundingClientRect(),i=this.selection.getBoundingClientRect(),n=v(t.width/e.width),l=v((t.width+i.width)/e.width);return{startTime:Math.round(n*this.media.duration),endTime:Math.round(l*this.media.duration)}}isTimestampInBounds(e){let{startTime:t,endTime:i}=this.getCurrentClipBounds();return t<=e&&i>=e}handleClick(e){let t=this.getMousePercent(e),i=t*this.media.duration;this.media&&this.isTimestampInBounds(i)&&(this.media.currentTime=i)}mediaSetCallback(e){if(super.mediaSetCallback(e),this._timeUpdate=this.timeUpdate.bind(this),e.addEventListener("timeupdate",this._timeUpdate),e.textTracks&&e.textTracks.length){let t=Array.prototype.find.call(e.textTracks,i=>i.label=="thumbnails");t?this.enableThumbnails():this.thumbnailPreview.style.display="none"}}timeUpdate(e){let t=v(this.media.currentTime/this.media.duration),i=this.wrapper.getBoundingClientRect().width,n=t*i;if(this.playhead.style.left=`${t*100}%`,this.playhead.style.display="block",!this.media.paused){let{startTime:l,endTime:h}=this.getCurrentClipBounds();this.media.currentTime<l&&(this.media.currentTime=l),this.media.currentTime>h&&(this.media.currentTime=l)}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),e.removeEventListener("timeupdate",this._timeUpdate),this.wrapper.removeEventListener("click",this._clickHandler),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");let e=this.shadowRoot.querySelector("#thumbnailContainer");e.classList.add("enabled");let t,i=()=>{t=u=>{let c=this.media&&this.media.duration;if(!c)return;let d=this.wrapper.getBoundingClientRect(),f=this.getMousePercent(u),b=d.left-this.getBoundingClientRect().left,w=b+f*d.width;this.thumbnailPreview.style.left=`${w}px`,this.thumbnailPreview.time=f*this.media.duration},r.addEventListener("mousemove",t,!1)},n=()=>{r.removeEventListener("mousemove",t)},l=!1,h=u=>{if(!l&&this.media&&this.media.duration){l=!0,this.thumbnailPreview.style.display="block",i();let c=d=>{d.target!=this&&!this.contains(d.target)&&(this.thumbnailPreview.style.display="none",r.removeEventListener("mousemove",c),l=!1,n())};r.addEventListener("mousemove",c,!1)}(!this.media||!this.media.duration)&&(this.thumbnailPreview.style.display="none")};this.addEventListener("mousemove",h,!1)}disableThumbnails(){thumbnailContainer.classList.remove("enabled")}};o("media-clip-selector",be);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>',ve=class extends p{constructor(){super();this.icon=Be}onClick(e){let t=this.media;t.currentTime=t.currentTime-30}};o("media-replay-button",ve);var we=a.createElement("template");we.innerHTML=`
+  <style>
     :host {
@@ -605,3 +723,3 @@ display: block;
   </media-chrome-menu>
-`;var ue=class extends a{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(he.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}};o("media-settings-popup",ue);var pe=document.createElement("template");pe.innerHTML=`
+`;var xe=class extends m{constructor(){super();let e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(we.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}};o("media-settings-popup",xe);var ye=a.createElement("template");ye.innerHTML=`
   <style>
@@ -614,2 +732,2 @@ :host {
   <slot></slot>
-`;var fe=class extends a{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(pe.content.cloneNode(!0))}};o("media-title-bar",fe);var ge=class extends v{constructor(){super();this.range.addEventListener("input",()=>{let e=this.media;if(!e)return;let t=this.range.value/1e3;e.volume=t,t>0&&e.muted&&(e.muted=!1)}),this.range.addEventListener("mousedown",()=>{let e=this.media&&this.media.volume;e>0&&(this._lastNonZeroVolume=e)}),this.range.addEventListener("change",()=>{let e=this.media;if(!e)return;e.volume==0&&(e.muted=!0,e.volume=this._lastNonZeroVolume||1);try{window.localStorage.setItem("media-chrome-pref-volume",e.volume.toString())}catch(t){}})}mediaSetCallback(e){this._handleVolumeChange=this._updateRange.bind(this),e.addEventListener("volumechange",this._handleVolumeChange);try{let t=window.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){}this._updateRange()}mediaUnsetCallback(e){e.removeEventListener("volumechange",this._handleVolumeChange)}_updateRange(){let e=this.media,t=this.range;e.muted?t.value=0:t.value=Math.round(e.volume*1e3),this.updateBar()}};o("media-volume-range",ge);var be=class extends R{};window&&!window.customElements.get("media-chrome")&&window.customElements.define("media-chrome",be);})();
+`;var Ce=class extends m{constructor(){super();var e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(ye.content.cloneNode(!0))}};o("media-title-bar",Ce);var ke=class extends y{constructor(){super();this.range.addEventListener("input",()=>{let e=this.media;if(!e)return;let t=this.range.value/1e3;e.volume=t,t>0&&e.muted&&(e.muted=!1)}),this.range.addEventListener("mousedown",()=>{let e=this.media&&this.media.volume;e>0&&(this._lastNonZeroVolume=e)}),this.range.addEventListener("change",()=>{let e=this.media;if(!e)return;e.volume==0&&(e.muted=!0,e.volume=this._lastNonZeroVolume||1);try{r.localStorage.setItem("media-chrome-pref-volume",e.volume.toString())}catch(t){}})}mediaSetCallback(e){this._handleVolumeChange=this._updateRange.bind(this),e.addEventListener("volumechange",this._handleVolumeChange);try{let t=r.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){}this._updateRange()}mediaUnsetCallback(e){e.removeEventListener("volumechange",this._handleVolumeChange)}_updateRange(){let e=this.media,t=this.range;e.muted?t.value=0:t.value=Math.round(e.volume*1e3),this.updateBar()}};o("media-volume-range",ke);var Ee=class extends I{};r.customElements.get("media-chrome")||r.customElements.define("media-chrome",Ee);})();

package.json

 {
   "name": "media-chrome",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "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

@@ -53,2 +53,11 @@ # `<media-chrome>`
 
+### Use `media-clip-selector` to select segments of a video
+
+`media-clip-selector` is a built-in component that can build a UI for selecting portions of your media.
+
+Listen for the `update` event on the element to get the selected start and end timestamps. Full example in examples/clip-selector.html.
+
+![media range selector example](/screenshots/media-clip-selector.gif?raw=true)
+
+
 ## Usage
@@ -148,2 +157,3 @@
 | `<media-playback-rate-button>` | Change the speed of playback                                                           |
+| `<media-clip-selector>` | Create selector handles that allow a user to select a sub-section of the media element. |
 | More to come                 | Requests and contributions welcome                                                                    |
@@ -150,0 +160,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

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

Improved metrics

Total package byte prevSize

56501

increased by17.67%

Lines of code

719

increased by21.04%

Number of lines in readme file

200

increased by5.26%

No dependency changes