media-chrome - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/media-chrome.js

@@ -1,1 +0,1 @@
-class e extends HTMLElement{constructor(){super(),this._media=null}static get observedAttributes(){return["media"].concat(super.observedAttributes||[])}attributeChangedCallback(e,n,t){if("media"!=e)"boolean"==typeof this[e]?this[e]=null!==t:this[e]=t;else{if(null===t)return void(this.media=null);let e=document.querySelector(t);if(!e||!e.play)throw new Error("Supplied media attribute does not appear to match a media element.");this.media=e}}set media(e){e!==this._media&&(this._media&&this.mediaUnsetCallback(this._media),this._media=e,this.mediaSetCallback(this._media))}get media(){return this._media}connectedCallback(){}mediaSetCallback(){}mediaUnsetCallback(){}get mediaChrome(){return this.media.closest("media-chrome")}}window.customElements.get("media-chrome-element")||(window.customElements.define("media-chrome-element",e),window.MediaChromeElement=e);const n=document.createElement("template");n.innerHTML='\n<style>\n  :host {\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: transparent;\n\n    /* Default width and height can be overridden externally */\n    height: 44px;\n    width: 44px;\n\n    /* Vertically center any text */\n    font-size: 16px;\n    line-height: 24px;\n\n    /* Min icon size is 24x24 */\n    min-height: 24px;\n    min-width: 24px;\n  }\n\n  :host(:focus, :focus-within) {\n    outline: 2px solid rgba(0,150,255, 0.33);\n    outline-offset: -2px;\n  }\n\n  :host(:hover) {\n    background: rgba(255,255,255, 0.10);\n  }\n\n  button {\n    width: 100%;\n    height: 100%;\n    vertical-align: middle;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-decoration: none;\n    background: transparent;\n    color: #ffffff;\n    font-family: sans-serif;\n    font-size: 16px;\n    line-height: 24px;\n    cursor: pointer;\n    text-align: center;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  button:hover {}\n  button:focus {\n    outline: 0;\n  }\n  button:active {}\n\n  svg {\n    width: var(--media-button-icon-width);\n    height: var(--media-button-icon-height);\n    transform: var(--media-button-icon-transform);\n    transition: var(--media-button-icon-transition);\n  }\n\n  svg .icon {\n    fill: var(--media-icon-color, #eee);\n  }\n</style>\n<button id="icon-container">\n  <slot></slot>\n</button>\n';class t extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(n.content.cloneNode(!0)),this.iconContainer=this.shadowRoot.querySelector("#icon-container"),this.addEventListener("click",e=>{this.onClick(e)})}onClick(){}set icon(e){this.iconContainer.innerHTML=e}}window.customElements.get("media-chrome-button")||(window.customElements.define("media-chrome-button",t),window.MediaChromeButton=t);const i='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';class o extends t{constructor(){super(),this.icon=i,this._playing=!1}static get observedAttributes(){return["playing"].concat(super.observedAttributes||[])}get playing(){return this._playing}set playing(e){this._playing=!!e,this.icon=e?'<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>':i}onClick(e){const n=this.media;if(!n)throw new Error("No media was found and an alternative onClick handler was not set.");n.paused?n.play():n.pause()}mediaSetCallback(){this.media&&(this.media.addEventListener("play",()=>{this.playing=!0}),this.media.addEventListener("pause",()=>{this.playing=!1}))}}window.customElements.get("media-play-button")||(window.customElements.define("media-play-button",o),window.MediaChrome=o);const a='\n<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n  <path d="M0 0h24v24H0z" fill="none"/>\n  <path class="icon" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>\n</svg>\n';class s extends t{constructor(){super(),this.icon=a,this.addEventListener("click",e=>{this.media;this.mediaChrome==document.fullscreenElement?document.exitFullscreen():(document.pictureInPictureElement&&document.exitPictureInPicture(),this.mediaChrome.requestFullscreen())}),document.addEventListener("fullscreenchange",()=>{this.mediaChrome==document.fullscreenElement?this.icon='\n<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n  <path d="M0 0h24v24H0z" fill="none"/>\n  <path class="icon" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>\n</svg>\n':this.icon=a})}}window.customElements.get("media-fullscreen-button")||(window.customElements.define("media-fullscreen-button",s),window.MediaChrome=s);class d extends t{constructor(){super(),this.icon='<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>',this.addEventListener("click",e=>{const n=this.media;document.pictureInPictureElement?document.exitPictureInPicture():(this.mediaChrome==document.fullscreenElement&&document.exitFullscreen(),n.requestPictureInPicture())})}}window.customElements.get("media-pip-button")||(window.customElements.define("media-pip-button",d),window.MediaChrome=d);const r=document.createElement("template"),l="\n  height: var(--thumb-height);\n  width: var(--media-range-thumb-width, 10px);\n  border: var(--media-range-thumb-border, none);\n  border-radius: var(--media-range-thumb-border-radius, 10px);\n  background: var(--media-range-thumb-background, #fff);\n  box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);\n  cursor: pointer;\n",c="\n  width: 100%;\n  min-width: 40px;\n  height: var(--track-height);\n  border: var(--media-range-track-border, none);\n  border-radius: var(--media-range-track-border-radius, 0);\n  background: var(--media-range-track-background-internal, --media-range-track-background, #eee);\n\n  box-shadow: var(--media-range-track-box-shadow, none);\n  transition: var(--media-range-track-transition, none);\n  cursor: pointer;\n";r.innerHTML=`\n  <style>\n    :host {\n      --thumb-height: var(--media-range-thumb-height, 10px);\n      --track-height: var(--media-range-track-height, 4px);\n\n      display: inline-block;\n      vertical-align: middle;\n      box-sizing: border-box;\n      background-color: transparent;\n      height: 44px;\n      width: 100px;\n      min-height: 24px;\n      font-size: 16px;\n      line-height: 24px;\n      padding: 0 10px;\n    }\n\n    :host(:focus, :focus-within) {\n      outline: 2px solid rgba(0,150,255, 0.33);\n      outline-offset: -2px;\n    }\n\n    :host(:hover) {\n      background: rgba(255,255,255, 0.10);\n    }\n\n    input[type=range] {\n      /* Reset */\n      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n      background: transparent; /* Otherwise white in Chrome */\n\n      /* Fill host with the range */\n      height: 100%;\n      width: 100%; /* Specific width is required for Firefox. */\n\n      box-sizing: border-box;\n      padding: 0;\n      margin: 0;\n    }\n\n    /* Special styling for WebKit/Blink */\n    input[type=range]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      ${l}\n      /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */\n      margin-top: calc(calc(0px - var(--thumb-height) + var(--track-height)) / 2);\n      transition: margin .2s ease;\n    }\n    input[type=range]::-moz-range-thumb { ${l} }\n\n    input[type=range]::-webkit-slider-runnable-track { ${c} }\n    input[type=range]::-moz-range-track { ${c} }\n    input[type=range]::-ms-track {\n      /* Reset */\n      width: 100%;\n      cursor: pointer;\n      /* Hides the slider so custom styles can be added */\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n\n      ${c}\n    }\n\n    /* Eventually want to move towards different styles for focus-visible\n       https://github.com/WICG/focus-visible/blob/master/src/focus-visible.js\n       Youtube appears to do this by de-focusing a button after a button click */\n    input[type=range]:focus {\n      outline: 0;\n    }\n    input[type=range]:focus::-webkit-slider-runnable-track {\n      outline: 0;\n    }\n\n    input[type=range]:disabled::-webkit-slider-thumb {\n      background-color: #777;\n    }\n\n    input[type=range]:disabled::-webkit-slider-runnable-track {\n      background-color: #777;\n    }\n\n  </style>\n  <input id="range" type="range" min="0" max="1000" step="1" value="0">\n`;class m extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(r.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this)),this.updateBar()}updateBar(){const e=this.getBarColors();let n="linear-gradient(to right, ",t=0;e.forEach(e=>{e[1]<t||(n+=`${e[0]} ${t}%, ${e[0]} ${e[1]}%,`,t=e[1])}),n=n.slice(0,n.length-1)+")",this.style.setProperty("--media-range-track-background-internal",n)}getBarColors(){this.range;return[["var(--media-range-bar-color, #fff)",this.range.value/1e3*100],["var(--media-range-track-background, #333)",100]]}}window.customElements.get("media-chrome-range")||(window.customElements.define("media-chrome-range",m),window.MediaChromeRange=m);class h extends m{constructor(){super(),this.setMediaTimeWithRange=()=>{const e=this.media,n=this.range;(e.readyState>0||void 0===e.readyState)&&(e.currentTime=Math.round(n.value/1e3*e.duration))},this.range.addEventListener("input",this.setMediaTimeWithRange),this.updateRangeWithMediaTime=()=>{const e=this.media;this.range.value=Math.round(e.currentTime/e.duration*1e3),this.updateBar()},this.playIfNotReady=e=>{this.range.removeEventListener("change",this.playIfNotReady),this.media.play().then(this.setMediaTimeWithRange)}}mediaSetCallback(){const e=this.media;this.range;e.addEventListener("timeupdate",this.updateRangeWithMediaTime),void 0!==e.readyState&&e.readyState,e.addEventListener("progress",this.updateBar.bind(this))}mediaUnsetCallback(){const e=this.media,n=this.range;e.removeEventListener("timeupdate",this.updateRangeWithMediaTime),n.removeEventListener("change",this.playIfNotReady)}getBarColors(){const e=this.media;let n=super.getBarColors();if(!e||!e.buffered||!e.buffered.length||e.duration<=0)return n;const t=e.buffered,i=t.end(t.length-1)/e.duration*100;return n.splice(1,0,["var(--media-progress-buffered-color, #777)",i]),n}}window.customElements.get("media-progress-range")||(window.customElements.define("media-progress-range",h),window.MediaProgressRange=h);class u extends m{constructor(){super();this.media;this.range.addEventListener("input",()=>{const e=this.media,n=this.range.value/1e3;e.volume=n,n>0&&e.muted&&(e.muted=!1)}),this.range.addEventListener("mousedown",()=>{const e=this.media.volume;e>0&&(this.lastNonZeroVolume=e)}),this.range.addEventListener("change",()=>{const e=this.media;0==e.volume&&(e.muted=!0,e.volume=this.lastNonZeroVolume||1);try{window.localStorage.setItem("media-chrome-pref-volume",e.volume.toString())}catch(e){}})}mediaSetCallback(e){e.addEventListener("volumechange",this.update.bind(this));try{const n=window.localStorage.getItem("media-chrome-pref-volume");e.volume=n}catch(e){}this.update()}update(){const e=this.media,n=this.range;e.muted?n.value=0:n.value=Math.round(1e3*e.volume),this.updateBar()}}window.customElements.get("media-volume-range")||(window.customElements.define("media-volume-range",u),window.MediaChrome=u);const p='<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>';class g extends t{constructor(){super(),this.icon=p}onClick(e){const n=this.media;n.muted=!n.muted}update(){const e=this.media;e.muted||0===e.volume?this.icon='<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>':e.volume<.5?this.icon='<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>':this.icon=p}mediaSetCallback(e){e.addEventListener("volumechange",this.update.bind(this)),this.update()}}window.customElements.get("media-mute-button")||(window.customElements.define("media-mute-button",g),window.MediaMuteButton=g);class w extends t{constructor(){super(),this.icon='<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>'}onClick(e){const n=this.media;n.currentTime=n.currentTime+30}}window.customElements.get("media-forward-button")||(window.customElements.define("media-forward-button",w),window.MediaChrome=w);class v extends t{constructor(){super(),this.icon='<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>'}onClick(e){const n=this.media;n.currentTime=n.currentTime-30}}function b(e,n){e=e<0?0:e;let t=Math.floor(e%60),i=Math.floor(e/60%60),o=Math.floor(e/3600);const a=Math.floor(n/60%60),s=Math.floor(n/3600);return(isNaN(e)||e===1/0)&&(o=i=t="-"),o=o>0||s>0?o+":":"",i=((o||a>=10)&&i<10?"0"+i:i)+":",t=t<10?"0"+t:t,o+i+t}window.customElements.get("media-replay-button")||(window.customElements.define("media-replay-button",v),window.MediaChrome=v);const f=document.createElement("template");f.innerHTML='\n  <style>\n    :host {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n\n      background-color: transparent;\n\n      /* Default width and height can be overridden externally */\n      height: 44px;\n\n      box-sizing: border-box;\n      padding: 0 5px;\n\n      /* Min icon size is 24x24 */\n      min-height: 24px;\n      min-width: 24px;\n\n      /* Vertically center any text */\n      font-size: 16px;\n      line-height: 24px;\n      font-family: sans-serif;\n      text-align: center;\n      color: #ffffff;\n    }\n\n    #container {}\n  </style>\n  <div id="container"></div>\n';class x extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(f.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(6e3)}update(e){this.container.innerHTML=b(e)}mediaSetCallback(e){e.addEventListener("timeupdate",n=>{this.update(e.currentTime)}),this.update(e.currentTime)}mediaUnsetCallback(){this.update(0)}}window.customElements.get("media-current-time-display")||(window.customElements.define("media-current-time-display",x),window.MediaChrome=x);const y=document.createElement("template");y.innerHTML='\n  <style>\n    :host {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n\n      background-color: transparent;\n\n      /* Default width and height can be overridden externally */\n      height: 44px;\n\n      box-sizing: border-box;\n      padding: 0 5px;\n\n      /* Min icon size is 24x24 */\n      min-height: 24px;\n      min-width: 24px;\n\n      /* Vertically center any text */\n      font-size: 16px;\n      line-height: 24px;\n      font-family: sans-serif;\n      text-align: center;\n      color: #ffffff;\n    }\n\n    #container {}\n  </style>\n  <div id="container"></div>\n';class k extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(y.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(0)}update(e){this.container.innerHTML=b(e)}mediaSetCallback(e){e.addEventListener("durationchange",n=>{this.update(e.duration)}),this.update(e.duration)}mediaUnsetCallback(){this.update(0)}}window.customElements.get("media-duration-display")||(window.customElements.define("media-duration-display",k),window.MediaChrome=k);const E=document.createElement("template");E.innerHTML='\n<style>\n  :host {\n    position: relative;\n    display: block;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: #333;\n\n    /* Default width and height can be overridden externally */\n    height: 30px;\n\n    /* Vertically center any text */\n    font-size: 14px;\n    line-height: 24px;\n\n    /* Min icon size is 24x24 */\n    min-height: 24px;\n    min-width: 100px;\n\n    padding: 3px 10px 3px 30px;\n  }\n\n  :host(:focus, :focus-within) {\n    outline: 2px solid rgba(0,150,255, 0.33);\n    outline-offset: -2px;\n  }\n\n  :host(:hover) {\n    background: rgba(255,255,255, 0.10);\n  }\n</style>\n\n<div id="labelContainer">\n  <slot></slot>\n</div>\n<div id="contentContainer">\n  <slot name="content"></slot>\n</div>\n';class M extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(E.content.cloneNode(!0)),this.contentConatiner=this.shadowRoot.querySelector("#contentContainer"),this.addEventListener("click",e=>{this.onClick(e)})}onClick(){}}window.customElements.get("media-chrome-menuitem")||(window.customElements.define("media-chrome-menuitem",M),window.MediaChromeButton=M);const C=document.createElement("template");C.innerHTML='\n<style>\n  #menuPositioner {\n    position: absolute;\n    display: flex;\n\n    border: 1px solid #f00;\n\n    /* Align menu top and centered */\n    top: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n  }\n\n  #menuContainer {\n    display: none;\n    position: absolute;\n    bottom: 0;\n    align: center;\n    margin-bottom: 20px;\n\n    border: 1px solid #999;\n    background-color: #111;\n  }\n\n  slot[name=menu] {\n\n  }\n</style>\n\n<div id="menuPositioner">\n  <div id="menuContainer">\n    <slot name="menu"></slot>\n  </div>\n</div>\n';class L extends t{constructor(){super(),this.shadowRoot.prepend(C.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){}}window.customElements.get("media-chrome-menu-button")||(window.customElements.define("media-chrome-menu-button",L),window.MediaChrome=L);const z=document.createElement("template");z.innerHTML='\n<style>\n  :host {\n    background-position: right 9px center;\n    background-repeat: no-repeat;\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJtIDEyLjU5LDIwLjM0IDQuNTgsLTQuNTkgLTQuNTgsLTQuNTkgMS40MSwtMS40MSA2LDYgLTYsNiB6IiBmaWxsPSIjZmZmIiAvPjwvc3ZnPg==)\n  }\n\n  ::slotted([slot=menu]) {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    width: 100%;\n    border: 1px solid #00f;\n  }\n</style>\n\n<div id="menuContainer">\n  <slot name="menu"></slot>\n</div>\n';class H extends M{constructor(){super(),this.shadowRoot.appendChild(z.content.cloneNode(!0)),this.menu=this.querySelector("[slot=menu]"),this.menu.style.display="none"}onClick(){"block"==this.menu.style.display?this.menu.style.display="none":this.menu.style.display="block"}}window.customElements.get("media-chrome-submenu-menuitem")||(window.customElements.define("media-chrome-submenu-menuitem",H),window.MediaChromeButton=H);const S=document.createElement("template");S.innerHTML="\n  <style>\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      border: 1px solid #f00;\n      background-color: #000;\n    }\n  </style>\n  <slot></slot>\n";class T extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(S.content.cloneNode(!0))}mediaSetCallback(e){}}window.customElements.get("media-chrome-menu")||(window.customElements.define("media-chrome-menu",T),window.MediaChromeButton=T);const R=document.createElement("template");R.innerHTML='\n  <style>\n    :host {\n      display: block;\n      position: absolute;\n      width: 300px;\n      height: auto;\n      right: 5px;\n      bottom: 45px;\n      padding: 10px;\n      border: 1px solid #333;\n      color: #ccc;\n      background-color: #000;\n    }\n  </style>\n  <slot></slot>\n\n  \x3c!-- This is too much for a menu... --\x3e\n\n  <media-chrome-panel>\n  <media-chrome-menu>\n    <media-chrome-submenu-menuitem label="Playback speed" value="1.2">\n    </media-chrome-submenu-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n  </media-chrome-menu>\n  <media-chrome-menu slot="menu">\n    <media-chrome-menuitem>Normal</media-chrome-menuitem>\n    <media-chrome-menuitem>1.5</media-chrome-menuitem>\n  </media-chrome-menu>\n';window.customElements.define("media-settings-popup",class extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(R.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}});const N=document.createElement("template");N.innerHTML="\n  <style>\n    :host {\n      display: block;\n      position: absolute;\n      width: 300px;\n      height: 200px;\n      padding: 10px;\n      border: 1px solid #333;\n      color: #fff;\n      background-color: #000;\n    }\n  </style>\n  <slot></slot>\n";window.customElements.define("media-chrome-popup",class extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(N.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}});const B=document.createElement("template");B.innerHTML="\n  <style>\n    :host {\n      /* Need position to display above video for some reason */\n      position: relative;\n      box-sizing: border-box;\n      display: flex;\n\n      /* All putting the progress range at full width on other lines */\n      flex-wrap: wrap;\n\n      width: 100%;\n      color: var(--media-icon-color, #eee);\n\n      background-color: var(--media-control-bar-background, rgba(20,20,30, 0.7));\n    }\n\n    ::slotted(*), :host > * {\n      /* position: relative; */\n    }\n\n    media-progress-range,\n    ::slotted(media-progress-range) {\n      flex-grow: 1;\n    }\n  </style>\n\n  <slot></slot>\n";const P=document.createElement("template");P.innerHTML="\n  <media-play-button>Play</media-play-button>\n  <media-mute-button>Mute</media-mute-button>\n  <media-volume-range>Volume</media-volume-range>\n  <media-progress-range>Progress</media-progress-range>\n  <media-pip-button>PIP</media-pip-button>\n  <media-fullscreen-button>Fullscreen</media-fullscreen-button>\n";class I extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(B.content.cloneNode(!0))}connectedCallback(){this.attributes.defaultControls&&this.shadowRoot.appendChild(P.content.cloneNode(!0))}}window.customElements.get("media-control-bar")||(window.customElements.define("media-control-bar",I),window.MediaChrome=I);const V=document.createElement("template");V.innerHTML='\n  <style>\n    :host {\n      box-sizing: border-box;\n\n      position: relative;\n      display: flex;\n      width: 720px;\n      height: 480px;\n      background-color: #000;\n      flex-direction: column-reverse;\n    }\n\n    ::slotted([slot=media]) {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #000;\n    }\n\n    #container ::slotted(*) {\n      opacity: 1;\n      transition: opacity 0.25s;\n      visibility: visible;\n    }\n\n    /* Hide controls when inactive and not paused */\n    #container.inactive:not(.paused) ::slotted(*) {\n      opacity: 0;\n      transition: opacity 1s;\n    }\n  </style>\n  <slot name="media"></slot>\n  <div id="container">\n    <slot></slot>\n    <slot name="controls"></slot>\n  </div>\n';const A=document.createElement("template");A.innerHTML="\n  <media-control-bar>\n    <media-play-button>Play</media-play-button>\n    <media-mute-button>Mute</media-mute-button>\n    <media-volume-range>Volume</media-volume-range>\n    <media-progress-range>Progress</media-progress-range>\n    <media-pip-button>PIP</media-pip-button>\n    <media-fullscreen-button>Fullscreen</media-fullscreen-button>\n  </media-control-bar>\n";class q extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(V.content.cloneNode(!0)),this.container=this.shadowRoot.getElementById("container"),this._media=null;new MutationObserver((function(n,t){for(let t of n)"childList"===t.type&&(t.removedNodes.forEach(e=>{e.media===this.media&&(e.media=null)}),t.addedNodes.forEach(n=>{n instanceof e&&!n.media&&(n.media=this.media)}))})).observe(this,{childList:!0,subtree:!0})}get media(){return this._media}set media(n){if(this._media=n,n){this.addEventListener("click",e=>{const n=this.media;"media"==e.target.slot&&(n.paused?n.play():n.pause())}),this.container.classList.add("paused"),n.addEventListener("play",()=>{this.container.classList.remove("paused")}),n.addEventListener("pause",()=>{this.container.classList.add("paused")});const e=n.nodeName.toLowerCase();"audio"==e||"video"==e?t.call(this,n):window.customElements.whenDefined(e).then(()=>{t.call(this,n)})}function t(n){this.querySelectorAll("*").forEach(n=>{n instanceof e&&(n.media=this.media)}),this.shadowRoot.querySelectorAll("*").forEach(n=>{n instanceof e&&(n.media=this.media)})}}connectedCallback(){new MutationObserver((e,n)=>{}).observe(this,{childList:!0}),this.attributes.defaultControls&&this.container.appendChild(A.content.cloneNode(!0));let e=this.querySelector("[slot=media]");e&&(this.media=e);const n=()=>{this.container.classList.remove("inactive"),window.clearTimeout(this.inactiveTimeout),this.inactiveTimeout=window.setTimeout(()=>{this.container.classList.add("inactive")},2e3)};this.addEventListener("keyup",e=>{n()}),this.addEventListener("mousemove",e=>{e.target!==this&&(this.container.classList.remove("inactive"),window.clearTimeout(this.inactiveTimeout),e.target===this.media&&n())}),this.addEventListener("mouseout",e=>{this.container.classList.add("inactive")})}}window.customElements.get("media-chrome")||(window.customElements.define("media-chrome",q),window.MediaChrome=q);
+class e extends HTMLElement{constructor(){super(),this._media=null}static get observedAttributes(){return["media"].concat(super.observedAttributes||[])}attributeChangedCallback(e,n,t){if("media"!=e)"boolean"==typeof this[e]?this[e]=null!==t:this[e]=t;else{if(null===t)return void(this.media=null);let e=document.querySelector(t);if(!e||!e.play)throw new Error("Supplied media attribute does not appear to match a media element.");this.media=e}}set media(e){e!==this._media&&(this._media&&this.mediaUnsetCallback(this._media),this._media=e,this.mediaSetCallback(this._media))}get media(){return this._media}connectedCallback(){}mediaSetCallback(){}mediaUnsetCallback(){}get mediaChrome(){return this.media.closest("media-chrome")}}window.customElements.get("media-chrome-element")||(window.customElements.define("media-chrome-element",e),window.MediaChromeElement=e);const n=document.createElement("template");n.innerHTML='\n<style>\n  :host {\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: transparent;\n\n    /* Default width and height can be overridden externally */\n    height: 44px;\n    width: 44px;\n\n    /* Vertically center any text */\n    font-size: 16px;\n    line-height: 24px;\n\n    /* Min icon size is 24x24 */\n    min-height: 24px;\n    min-width: 24px;\n  }\n\n  :host(:focus, :focus-within) {\n    outline: 2px solid rgba(0,150,255, 0.33);\n    outline-offset: -2px;\n  }\n\n  :host(:hover) {\n    background: rgba(255,255,255, 0.10);\n  }\n\n  button {\n    width: 100%;\n    height: 100%;\n    vertical-align: middle;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-decoration: none;\n    background: transparent;\n    color: #ffffff;\n    font-family: sans-serif;\n    font-size: 16px;\n    line-height: 24px;\n    cursor: pointer;\n    text-align: center;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  button:hover {}\n  button:focus {\n    outline: 0;\n  }\n  button:active {}\n\n  svg {\n    width: var(--media-button-icon-width);\n    height: var(--media-button-icon-height);\n    transform: var(--media-button-icon-transform);\n    transition: var(--media-button-icon-transition);\n  }\n\n  svg .icon {\n    fill: var(--media-icon-color, #eee);\n  }\n</style>\n<button id="icon-container">\n  <slot></slot>\n</button>\n';class t extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(n.content.cloneNode(!0)),this.iconContainer=this.shadowRoot.querySelector("#icon-container"),this.addEventListener("click",e=>{this.onClick(e)})}onClick(){}set icon(e){this.iconContainer.innerHTML=e}}window.customElements.get("media-chrome-button")||(window.customElements.define("media-chrome-button",t),window.MediaChromeButton=t);const i='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path class="icon" d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';class o extends t{constructor(){super(),this.icon=i,this._playing=!1}static get observedAttributes(){return["playing"].concat(super.observedAttributes||[])}get playing(){return this._playing}set playing(e){this._playing=!!e,this.icon=e?'<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>':i}onClick(e){const n=this.media;if(!n)throw new Error("No media was found and an alternative onClick handler was not set.");n.paused?n.play():n.pause()}mediaSetCallback(){this.media&&(this.media.addEventListener("play",()=>{this.playing=!0}),this.media.addEventListener("pause",()=>{this.playing=!1}))}}window.customElements.get("media-play-button")||(window.customElements.define("media-play-button",o),window.MediaChrome=o);const a='\n<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n  <path d="M0 0h24v24H0z" fill="none"/>\n  <path class="icon" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>\n</svg>\n';class s extends t{constructor(){super(),this.icon=a,this.addEventListener("click",e=>{this.media;this.mediaChrome==document.fullscreenElement?document.exitFullscreen():(document.pictureInPictureElement&&document.exitPictureInPicture(),this.mediaChrome.requestFullscreen())}),document.addEventListener("fullscreenchange",()=>{this.mediaChrome==document.fullscreenElement?this.icon='\n<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n  <path d="M0 0h24v24H0z" fill="none"/>\n  <path class="icon" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>\n</svg>\n':this.icon=a})}}window.customElements.get("media-fullscreen-button")||(window.customElements.define("media-fullscreen-button",s),window.MediaChrome=s);class d extends t{constructor(){super(),this.icon='<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>',this.addEventListener("click",e=>{const n=this.media;document.pictureInPictureElement?document.exitPictureInPicture():(this.mediaChrome==document.fullscreenElement&&document.exitFullscreen(),n.requestPictureInPicture())})}}window.customElements.get("media-pip-button")||(window.customElements.define("media-pip-button",d),window.MediaChrome=d);const r=document.createElement("template"),l="\n  height: var(--thumb-height);\n  width: var(--media-range-thumb-width, 10px);\n  border: var(--media-range-thumb-border, none);\n  border-radius: var(--media-range-thumb-border-radius, 10px);\n  background: var(--media-range-thumb-background, #fff);\n  box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);\n  cursor: pointer;\n",c="\n  width: 100%;\n  min-width: 40px;\n  height: var(--track-height);\n  border: var(--media-range-track-border, none);\n  border-radius: var(--media-range-track-border-radius, 0);\n  background: var(--media-range-track-background-internal, --media-range-track-background, #eee);\n\n  box-shadow: var(--media-range-track-box-shadow, none);\n  transition: var(--media-range-track-transition, none);\n  cursor: pointer;\n";r.innerHTML=`\n  <style>\n    :host {\n      --thumb-height: var(--media-range-thumb-height, 10px);\n      --track-height: var(--media-range-track-height, 4px);\n\n      display: inline-block;\n      vertical-align: middle;\n      box-sizing: border-box;\n      background-color: transparent;\n      height: 44px;\n      width: 100px;\n      min-height: 24px;\n      font-size: 16px;\n      line-height: 24px;\n      padding: 0 10px;\n    }\n\n    :host(:focus, :focus-within) {\n      outline: 2px solid rgba(0,150,255, 0.33);\n      outline-offset: -2px;\n    }\n\n    :host(:hover) {\n      background: rgba(255,255,255, 0.10);\n    }\n\n    input[type=range] {\n      /* Reset */\n      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n      background: transparent; /* Otherwise white in Chrome */\n\n      /* Fill host with the range */\n      height: 100%;\n      width: 100%; /* Specific width is required for Firefox. */\n\n      box-sizing: border-box;\n      padding: 0;\n      margin: 0;\n    }\n\n    /* Special styling for WebKit/Blink */\n    input[type=range]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      ${l}\n      /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */\n      margin-top: calc(calc(0px - var(--thumb-height) + var(--track-height)) / 2);\n      transition: margin .2s ease;\n    }\n    input[type=range]::-moz-range-thumb { ${l} }\n\n    input[type=range]::-webkit-slider-runnable-track { ${c} }\n    input[type=range]::-moz-range-track { ${c} }\n    input[type=range]::-ms-track {\n      /* Reset */\n      width: 100%;\n      cursor: pointer;\n      /* Hides the slider so custom styles can be added */\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n\n      ${c}\n    }\n\n    /* Eventually want to move towards different styles for focus-visible\n       https://github.com/WICG/focus-visible/blob/master/src/focus-visible.js\n       Youtube appears to do this by de-focusing a button after a button click */\n    input[type=range]:focus {\n      outline: 0;\n    }\n    input[type=range]:focus::-webkit-slider-runnable-track {\n      outline: 0;\n    }\n\n    input[type=range]:disabled::-webkit-slider-thumb {\n      background-color: #777;\n    }\n\n    input[type=range]:disabled::-webkit-slider-runnable-track {\n      background-color: #777;\n    }\n\n  </style>\n  <input id="range" type="range" min="0" max="1000" step="1" value="0">\n`;class m extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(r.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this))}connectedCallback(){this.updateBar()}updateBar(){const e=this.getBarColors();let n="linear-gradient(to right, ",t=0;e.forEach(e=>{e[1]<t||(n+=`${e[0]} ${t}%, ${e[0]} ${e[1]}%,`,t=e[1])}),n=n.slice(0,n.length-1)+")",this.style.setProperty("--media-range-track-background-internal",n)}getBarColors(){this.range;return[["var(--media-range-bar-color, #fff)",this.range.value/1e3*100],["var(--media-range-track-background, #333)",100]]}}window.customElements.get("media-chrome-range")||(window.customElements.define("media-chrome-range",m),window.MediaChromeRange=m);class h extends m{constructor(){super(),this.setMediaTimeWithRange=()=>{const e=this.media,n=this.range;(e.readyState>0||void 0===e.readyState)&&(e.currentTime=Math.round(n.value/1e3*e.duration))},this.range.addEventListener("input",this.setMediaTimeWithRange),this.updateRangeWithMediaTime=()=>{const e=this.media;this.range.value=Math.round(e.currentTime/e.duration*1e3),this.updateBar()},this.playIfNotReady=e=>{this.range.removeEventListener("change",this.playIfNotReady),this.media.play().then(this.setMediaTimeWithRange)}}mediaSetCallback(){const e=this.media;this.range;e.addEventListener("timeupdate",this.updateRangeWithMediaTime),void 0!==e.readyState&&e.readyState,e.addEventListener("progress",this.updateBar.bind(this))}mediaUnsetCallback(){const e=this.media,n=this.range;e.removeEventListener("timeupdate",this.updateRangeWithMediaTime),n.removeEventListener("change",this.playIfNotReady)}getBarColors(){const e=this.media;let n=super.getBarColors();if(!e||!e.buffered||!e.buffered.length||e.duration<=0)return n;const t=e.buffered,i=t.end(t.length-1)/e.duration*100;return n.splice(1,0,["var(--media-progress-buffered-color, #777)",i]),n}}window.customElements.get("media-progress-range")||(window.customElements.define("media-progress-range",h),window.MediaProgressRange=h);class u extends m{constructor(){super();this.media;this.range.addEventListener("input",()=>{const e=this.media,n=this.range.value/1e3;e.volume=n,n>0&&e.muted&&(e.muted=!1)}),this.range.addEventListener("mousedown",()=>{const e=this.media.volume;e>0&&(this.lastNonZeroVolume=e)}),this.range.addEventListener("change",()=>{const e=this.media;0==e.volume&&(e.muted=!0,e.volume=this.lastNonZeroVolume||1);try{window.localStorage.setItem("media-chrome-pref-volume",e.volume.toString())}catch(e){}})}mediaSetCallback(e){e.addEventListener("volumechange",this.update.bind(this));try{const n=window.localStorage.getItem("media-chrome-pref-volume");e.volume=n}catch(e){}this.update()}update(){const e=this.media,n=this.range;e.muted?n.value=0:n.value=Math.round(1e3*e.volume),this.updateBar()}}window.customElements.get("media-volume-range")||(window.customElements.define("media-volume-range",u),window.MediaChrome=u);const p='<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>';class g extends t{constructor(){super(),this.icon=p}onClick(e){const n=this.media;n.muted=!n.muted}update(){const e=this.media;e.muted||0===e.volume?this.icon='<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>':e.volume<.5?this.icon='<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>':this.icon=p}mediaSetCallback(e){e.addEventListener("volumechange",this.update.bind(this)),this.update()}}window.customElements.get("media-mute-button")||(window.customElements.define("media-mute-button",g),window.MediaMuteButton=g);class w extends t{constructor(){super(),this.icon='<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>'}onClick(e){const n=this.media;n.currentTime=n.currentTime+30}}window.customElements.get("media-forward-button")||(window.customElements.define("media-forward-button",w),window.MediaChrome=w);class v extends t{constructor(){super(),this.icon='<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>'}onClick(e){const n=this.media;n.currentTime=n.currentTime-30}}function b(e,n){e=e<0?0:e;let t=Math.floor(e%60),i=Math.floor(e/60%60),o=Math.floor(e/3600);const a=Math.floor(n/60%60),s=Math.floor(n/3600);return(isNaN(e)||e===1/0)&&(o=i=t="-"),o=o>0||s>0?o+":":"",i=((o||a>=10)&&i<10?"0"+i:i)+":",t=t<10?"0"+t:t,o+i+t}window.customElements.get("media-replay-button")||(window.customElements.define("media-replay-button",v),window.MediaChrome=v);const f=document.createElement("template");f.innerHTML='\n  <style>\n    :host {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n\n      background-color: transparent;\n\n      /* Default width and height can be overridden externally */\n      height: 44px;\n\n      box-sizing: border-box;\n      padding: 0 5px;\n\n      /* Min icon size is 24x24 */\n      min-height: 24px;\n      min-width: 24px;\n\n      /* Vertically center any text */\n      font-size: 16px;\n      line-height: 24px;\n      font-family: sans-serif;\n      text-align: center;\n      color: #ffffff;\n    }\n\n    #container {}\n  </style>\n  <div id="container"></div>\n';class x extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(f.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(6e3)}update(e){this.container.innerHTML=b(e)}mediaSetCallback(e){e.addEventListener("timeupdate",n=>{this.update(e.currentTime)}),this.update(e.currentTime)}mediaUnsetCallback(){this.update(0)}}window.customElements.get("media-current-time-display")||(window.customElements.define("media-current-time-display",x),window.MediaChrome=x);const y=document.createElement("template");y.innerHTML='\n  <style>\n    :host {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n\n      background-color: transparent;\n\n      /* Default width and height can be overridden externally */\n      height: 44px;\n\n      box-sizing: border-box;\n      padding: 0 5px;\n\n      /* Min icon size is 24x24 */\n      min-height: 24px;\n      min-width: 24px;\n\n      /* Vertically center any text */\n      font-size: 16px;\n      line-height: 24px;\n      font-family: sans-serif;\n      text-align: center;\n      color: #ffffff;\n    }\n\n    #container {}\n  </style>\n  <div id="container"></div>\n';class k extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(y.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container"),this.update(0)}update(e){this.container.innerHTML=b(e)}mediaSetCallback(e){e.addEventListener("durationchange",n=>{this.update(e.duration)}),this.update(e.duration)}mediaUnsetCallback(){this.update(0)}}window.customElements.get("media-duration-display")||(window.customElements.define("media-duration-display",k),window.MediaChrome=k);const E=document.createElement("template");E.innerHTML='\n<style>\n  :host {\n    position: relative;\n    display: block;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: #333;\n\n    /* Default width and height can be overridden externally */\n    height: 30px;\n\n    /* Vertically center any text */\n    font-size: 14px;\n    line-height: 24px;\n\n    /* Min icon size is 24x24 */\n    min-height: 24px;\n    min-width: 100px;\n\n    padding: 3px 10px 3px 30px;\n  }\n\n  :host(:focus, :focus-within) {\n    outline: 2px solid rgba(0,150,255, 0.33);\n    outline-offset: -2px;\n  }\n\n  :host(:hover) {\n    background: rgba(255,255,255, 0.10);\n  }\n</style>\n\n<div id="labelContainer">\n  <slot></slot>\n</div>\n<div id="contentContainer">\n  <slot name="content"></slot>\n</div>\n';class M extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(E.content.cloneNode(!0)),this.contentConatiner=this.shadowRoot.querySelector("#contentContainer"),this.addEventListener("click",e=>{this.onClick(e)})}onClick(){}}window.customElements.get("media-chrome-menuitem")||(window.customElements.define("media-chrome-menuitem",M),window.MediaChromeButton=M);const C=document.createElement("template");C.innerHTML='\n<style>\n  #menuPositioner {\n    position: absolute;\n    display: flex;\n\n    border: 1px solid #f00;\n\n    /* Align menu top and centered */\n    top: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n  }\n\n  #menuContainer {\n    display: none;\n    position: absolute;\n    bottom: 0;\n    align: center;\n    margin-bottom: 20px;\n\n    border: 1px solid #999;\n    background-color: #111;\n  }\n\n  slot[name=menu] {\n\n  }\n</style>\n\n<div id="menuPositioner">\n  <div id="menuContainer">\n    <slot name="menu"></slot>\n  </div>\n</div>\n';class L extends t{constructor(){super(),this.shadowRoot.prepend(C.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){}}window.customElements.get("media-chrome-menu-button")||(window.customElements.define("media-chrome-menu-button",L),window.MediaChrome=L);const z=document.createElement("template");z.innerHTML='\n<style>\n  :host {\n    background-position: right 9px center;\n    background-repeat: no-repeat;\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJtIDEyLjU5LDIwLjM0IDQuNTgsLTQuNTkgLTQuNTgsLTQuNTkgMS40MSwtMS40MSA2LDYgLTYsNiB6IiBmaWxsPSIjZmZmIiAvPjwvc3ZnPg==)\n  }\n\n  ::slotted([slot=menu]) {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    width: 100%;\n    border: 1px solid #00f;\n  }\n</style>\n\n<div id="menuContainer">\n  <slot name="menu"></slot>\n</div>\n';class H extends M{constructor(){super(),this.shadowRoot.appendChild(z.content.cloneNode(!0)),this.menu=this.querySelector("[slot=menu]"),this.menu.style.display="none"}onClick(){"block"==this.menu.style.display?this.menu.style.display="none":this.menu.style.display="block"}}window.customElements.get("media-chrome-submenu-menuitem")||(window.customElements.define("media-chrome-submenu-menuitem",H),window.MediaChromeButton=H);const S=document.createElement("template");S.innerHTML="\n  <style>\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      border: 1px solid #f00;\n      background-color: #000;\n    }\n  </style>\n  <slot></slot>\n";class T extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(S.content.cloneNode(!0))}mediaSetCallback(e){}}window.customElements.get("media-chrome-menu")||(window.customElements.define("media-chrome-menu",T),window.MediaChromeButton=T);const R=document.createElement("template");R.innerHTML='\n  <style>\n    :host {\n      display: block;\n      position: absolute;\n      width: 300px;\n      height: auto;\n      right: 5px;\n      bottom: 45px;\n      padding: 10px;\n      border: 1px solid #333;\n      color: #ccc;\n      background-color: #000;\n    }\n  </style>\n  <slot></slot>\n\n  \x3c!-- This is too much for a menu... --\x3e\n\n  <media-chrome-panel>\n  <media-chrome-menu>\n    <media-chrome-submenu-menuitem label="Playback speed" value="1.2">\n    </media-chrome-submenu-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n    <media-chrome-menuitem>Hello1</media-chrome-menuitem>\n  </media-chrome-menu>\n  <media-chrome-menu slot="menu">\n    <media-chrome-menuitem>Normal</media-chrome-menuitem>\n    <media-chrome-menuitem>1.5</media-chrome-menuitem>\n  </media-chrome-menu>\n';window.customElements.define("media-settings-popup",class extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(R.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}});const N=document.createElement("template");N.innerHTML="\n  <style>\n    :host {\n      display: block;\n      position: absolute;\n      width: 300px;\n      height: 200px;\n      padding: 10px;\n      border: 1px solid #333;\n      color: #fff;\n      background-color: #000;\n    }\n  </style>\n  <slot></slot>\n";window.customElements.define("media-chrome-popup",class extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(N.content.cloneNode(!0))}mediaSetCallback(e){}mediaUnsetCallback(){}});const B=document.createElement("template");B.innerHTML="\n  <style>\n    :host {\n      /* Need position to display above video for some reason */\n      position: relative;\n      box-sizing: border-box;\n      display: flex;\n\n      /* All putting the progress range at full width on other lines */\n      flex-wrap: wrap;\n\n      width: 100%;\n      color: var(--media-icon-color, #eee);\n\n      background-color: var(--media-control-bar-background, rgba(20,20,30, 0.7));\n    }\n\n    ::slotted(*), :host > * {\n      /* position: relative; */\n    }\n\n    media-progress-range,\n    ::slotted(media-progress-range) {\n      flex-grow: 1;\n    }\n  </style>\n\n  <slot></slot>\n";const P=document.createElement("template");P.innerHTML="\n  <media-play-button>Play</media-play-button>\n  <media-mute-button>Mute</media-mute-button>\n  <media-volume-range>Volume</media-volume-range>\n  <media-progress-range>Progress</media-progress-range>\n  <media-pip-button>PIP</media-pip-button>\n  <media-fullscreen-button>Fullscreen</media-fullscreen-button>\n";class I extends e{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(B.content.cloneNode(!0))}connectedCallback(){this.attributes.defaultControls&&this.shadowRoot.appendChild(P.content.cloneNode(!0))}}window.customElements.get("media-control-bar")||(window.customElements.define("media-control-bar",I),window.MediaChrome=I);const V=document.createElement("template");V.innerHTML='\n  <style>\n    :host {\n      box-sizing: border-box;\n\n      position: relative;\n      display: flex;\n      width: 720px;\n      height: 480px;\n      background-color: #000;\n      flex-direction: column-reverse;\n    }\n\n    ::slotted([slot=media]) {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #000;\n    }\n\n    #container ::slotted(*) {\n      opacity: 1;\n      transition: opacity 0.25s;\n      visibility: visible;\n    }\n\n    /* Hide controls when inactive and not paused */\n    #container.inactive:not(.paused) ::slotted(*) {\n      opacity: 0;\n      transition: opacity 1s;\n    }\n  </style>\n  <slot name="media"></slot>\n  <div id="container">\n    <slot></slot>\n    <slot name="controls"></slot>\n  </div>\n';const A=document.createElement("template");A.innerHTML="\n  <media-control-bar>\n    <media-play-button>Play</media-play-button>\n    <media-mute-button>Mute</media-mute-button>\n    <media-volume-range>Volume</media-volume-range>\n    <media-progress-range>Progress</media-progress-range>\n    <media-pip-button>PIP</media-pip-button>\n    <media-fullscreen-button>Fullscreen</media-fullscreen-button>\n  </media-control-bar>\n";class q extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"});this.shadowRoot.appendChild(V.content.cloneNode(!0)),this.container=this.shadowRoot.getElementById("container"),this._media=null;new MutationObserver((function(n,t){for(let t of n)"childList"===t.type&&(t.removedNodes.forEach(e=>{e.media===this.media&&(e.media=null)}),t.addedNodes.forEach(n=>{n instanceof e&&!n.media&&(n.media=this.media)}))})).observe(this,{childList:!0,subtree:!0})}get media(){return this._media}set media(n){if(this._media=n,n){this.addEventListener("click",e=>{const n=this.media;"media"==e.target.slot&&(n.paused?n.play():n.pause())}),this.container.classList.add("paused"),n.addEventListener("play",()=>{this.container.classList.remove("paused")}),n.addEventListener("pause",()=>{this.container.classList.add("paused")});const e=n.nodeName.toLowerCase();"audio"==e||"video"==e?t.call(this,n):window.customElements.whenDefined(e).then(()=>{t.call(this,n)})}function t(n){this.querySelectorAll("*").forEach(n=>{n instanceof e&&(n.media=this.media)}),this.shadowRoot.querySelectorAll("*").forEach(n=>{n instanceof e&&(n.media=this.media)})}}connectedCallback(){new MutationObserver((e,n)=>{}).observe(this,{childList:!0}),this.attributes.defaultControls&&this.container.appendChild(A.content.cloneNode(!0));let e=this.querySelector("[slot=media]");e&&(this.media=e);const n=()=>{this.container.classList.remove("inactive"),window.clearTimeout(this.inactiveTimeout),this.inactiveTimeout=window.setTimeout(()=>{this.container.classList.add("inactive")},2e3)};this.addEventListener("keyup",e=>{n()}),this.addEventListener("mousemove",e=>{e.target!==this&&(this.container.classList.remove("inactive"),window.clearTimeout(this.inactiveTimeout),e.target===this.media&&n())}),this.addEventListener("mouseout",e=>{this.container.classList.add("inactive")})}}window.customElements.get("media-chrome")||(window.customElements.define("media-chrome",q),window.MediaChrome=q);

package.json

 {
   "name": "media-chrome",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -38,2 +38,4 @@ # `<media-chrome>`
 
+(GIFs still use old name of `<player-chrome>` and need to be updated)
+
 ### Adding controls to a video element
@@ -40,0 +42,0 @@ Just HTML. No javascripting required.

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

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

40709

increased by0.22%

Number of lines in readme file

186

increased by1.09%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes