media-chrome - npm Package Compare versions

Comparing version 0.6.10-canary.4-cec3aaa to 0.6.10-canary.5-2aa7223

dist/cjs/constants.js

@@ -1,2 +0,2 @@
-var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var S=e=>t(e,"__esModule",{value:!0});var D=(e,E)=>{for(var a in E)t(e,a,{get:E[a],enumerable:!0})},n=(e,E,a,i)=>{if(E&&typeof E=="object"||typeof E=="function")for(let A of T(E))!d.call(e,A)&&(a||A!=="default")&&t(e,A,{get:()=>E[A],enumerable:!(i=s(E,A))||i.enumerable});return e};var M=(e=>(E,a)=>e&&e.get(E)||(a=n(S({}),E,1),e&&e.set(E,a),a))(typeof WeakMap!="undefined"?new WeakMap:0);var o={};D(o,{AttributeToStateChangeEventMap:()=>c,AvailabilityStates:()=>L,MediaStateChangeEvents:()=>_,MediaUIAttributes:()=>I,MediaUIEvents:()=>r,PointerTypes:()=>l,ReadyStates:()=>R,StateChangeEventToAttributeMap:()=>m,TextTrackKinds:()=>u,TextTrackModes:()=>U});const r={MEDIA_PLAY_REQUEST:"mediaplayrequest",MEDIA_PAUSE_REQUEST:"mediapauserequest",MEDIA_MUTE_REQUEST:"mediamuterequest",MEDIA_UNMUTE_REQUEST:"mediaunmuterequest",MEDIA_VOLUME_REQUEST:"mediavolumerequest",MEDIA_SEEK_REQUEST:"mediaseekrequest",MEDIA_AIRPLAY_REQUEST:"mediaairplayrequest",MEDIA_ENTER_FULLSCREEN_REQUEST:"mediaenterfullscreenrequest",MEDIA_EXIT_FULLSCREEN_REQUEST:"mediaexitfullscreenrequest",MEDIA_PREVIEW_REQUEST:"mediapreviewrequest",MEDIA_ENTER_PIP_REQUEST:"mediaenterpiprequest",MEDIA_EXIT_PIP_REQUEST:"mediaexitpiprequest",MEDIA_ENTER_CAST_REQUEST:"mediaentercastrequest",MEDIA_EXIT_CAST_REQUEST:"mediaexitcastrequest",MEDIA_SHOW_TEXT_TRACKS_REQUEST:"mediashowtexttracksrequest",MEDIA_HIDE_TEXT_TRACKS_REQUEST:"mediahidetexttracksrequest",MEDIA_SHOW_CAPTIONS_REQUEST:"mediashowcaptionsrequest",MEDIA_SHOW_SUBTITLES_REQUEST:"mediashowsubtitlesrequest",MEDIA_DISABLE_CAPTIONS_REQUEST:"mediadisablecaptionsrequest",MEDIA_DISABLE_SUBTITLES_REQUEST:"mediadisablesubtitlesrequest",MEDIA_PLAYBACK_RATE_REQUEST:"mediaplaybackraterequest",REGISTER_MEDIA_STATE_RECEIVER:"registermediastatereceiver",UNREGISTER_MEDIA_STATE_RECEIVER:"unregistermediastatereceiver"},_={MEDIA_AIRPLAY_UNAVAILABLE:"mediaairplayunavailablechange",MEDIA_PIP_UNAVAILABLE:"mediapipunavailablechange",MEDIA_PAUSED:"mediapausedchange",MEDIA_HAS_PLAYED:"mediahasplayedchange",MEDIA_MUTED:"mediamutedchange",MEDIA_VOLUME_LEVEL:"mediavolumelevelchange",MEDIA_VOLUME:"mediavolumechange",MEDIA_VOLUME_UNAVAILABLE:"mediavolumeunavailablechange",MEDIA_IS_PIP:"mediaispipchange",MEDIA_IS_CASTING:"mediaiscastingchange",MEDIA_CAPTIONS_LIST:"mediacaptionslistchange",MEDIA_SUBTITLES_LIST:"mediasubtitleslistchange",MEDIA_CAPTIONS_SHOWING:"mediacaptionsshowingchange",MEDIA_SUBTITLES_SHOWING:"mediasubtitlesshowingchange",MEDIA_IS_FULLSCREEN:"mediaisfullscreenchange",MEDIA_PLAYBACK_RATE:"mediaplaybackratechange",MEDIA_CURRENT_TIME:"mediacurrenttimechange",MEDIA_DURATION:"mediadurationchange",MEDIA_SEEKABLE:"mediaseekablechange",MEDIA_PREVIEW_IMAGE:"mediapreviewimagechange",MEDIA_PREVIEW_COORDS:"mediapreviewcoordschange",MEDIA_LOADING:"medialoadingchange",USER_INACTIVE:"userinactivechange"},I={MEDIA_AIRPLAY_UNAVAILABLE:"media-airplay-unavailable",MEDIA_PIP_UNAVAILABLE:"media-pip-unavailable",MEDIA_CAST_UNAVAILABLE:"media-cast-unavailable",MEDIA_PAUSED:"media-paused",MEDIA_HAS_PLAYED:"media-has-played",MEDIA_MUTED:"media-muted",MEDIA_VOLUME_LEVEL:"media-volume-level",MEDIA_VOLUME:"media-volume",MEDIA_VOLUME_UNAVAILABLE:"media-volume-unavailable",MEDIA_IS_PIP:"media-is-pip",MEDIA_IS_CASTING:"media-is-casting",MEDIA_CAPTIONS_LIST:"media-captions-list",MEDIA_SUBTITLES_LIST:"media-subtitles-list",MEDIA_CAPTIONS_SHOWING:"media-captions-showing",MEDIA_SUBTITLES_SHOWING:"media-subtitles-showing",MEDIA_IS_FULLSCREEN:"media-is-fullscreen",MEDIA_PLAYBACK_RATE:"media-playback-rate",MEDIA_CURRENT_TIME:"media-current-time",MEDIA_DURATION:"media-duration",MEDIA_SEEKABLE:"media-seekable",MEDIA_PREVIEW_IMAGE:"media-preview-image",MEDIA_PREVIEW_COORDS:"media-preview-coords",MEDIA_CHROME_ATTRIBUTES:"media-chrome-attributes",MEDIA_CONTROLLER:"media-controller",MEDIA_LOADING:"media-loading",MEDIA_BUFFERED:"media-buffered"},m=Object.entries(_).reduce((e,[E,a])=>{const i=I[E];return i&&(e[a]=i),e},{userinactivechange:"user-inactive"}),c=Object.entries(I).reduce((e,[E,a])=>{const i=_[E];return i&&(e[a]=i),e},{"user-inactive":"userinactivechange"}),u={SUBTITLES:"subtitles",CAPTIONS:"captions",DESCRIPTIONS:"descriptions",CHAPTERS:"chapters",METADATA:"metadata"},U={DISABLED:"disabled",HIDDEN:"hidden",SHOWING:"showing"},R={HAVE_NOTHING:0,HAVE_METADATA:1,HAVE_CURRENT_DATA:2,HAVE_FUTURE_DATA:3,HAVE_ENOUGH_DATA:4},l={MOUSE:"mouse",PEN:"pen",TOUCH:"touch"},L={UNAVAILABLE:"unavailable",UNSUPPORTED:"unsupported"};module.exports=M(o);
+var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var S=e=>t(e,"__esModule",{value:!0});var D=(e,E)=>{for(var a in E)t(e,a,{get:E[a],enumerable:!0})},M=(e,E,a,i)=>{if(E&&typeof E=="object"||typeof E=="function")for(let A of T(E))!d.call(e,A)&&(a||A!=="default")&&t(e,A,{get:()=>E[A],enumerable:!(i=s(E,A))||i.enumerable});return e};var n=(e=>(E,a)=>e&&e.get(E)||(a=M(S({}),E,1),e&&e.set(E,a),a))(typeof WeakMap!="undefined"?new WeakMap:0);var o={};D(o,{AttributeToStateChangeEventMap:()=>c,AvailabilityStates:()=>L,MediaStateChangeEvents:()=>_,MediaUIAttributes:()=>I,MediaUIEvents:()=>r,PointerTypes:()=>l,ReadyStates:()=>R,StateChangeEventToAttributeMap:()=>m,TextTrackKinds:()=>u,TextTrackModes:()=>U});const r={MEDIA_PLAY_REQUEST:"mediaplayrequest",MEDIA_PAUSE_REQUEST:"mediapauserequest",MEDIA_MUTE_REQUEST:"mediamuterequest",MEDIA_UNMUTE_REQUEST:"mediaunmuterequest",MEDIA_VOLUME_REQUEST:"mediavolumerequest",MEDIA_SEEK_REQUEST:"mediaseekrequest",MEDIA_AIRPLAY_REQUEST:"mediaairplayrequest",MEDIA_ENTER_FULLSCREEN_REQUEST:"mediaenterfullscreenrequest",MEDIA_EXIT_FULLSCREEN_REQUEST:"mediaexitfullscreenrequest",MEDIA_PREVIEW_REQUEST:"mediapreviewrequest",MEDIA_ENTER_PIP_REQUEST:"mediaenterpiprequest",MEDIA_EXIT_PIP_REQUEST:"mediaexitpiprequest",MEDIA_ENTER_CAST_REQUEST:"mediaentercastrequest",MEDIA_EXIT_CAST_REQUEST:"mediaexitcastrequest",MEDIA_SHOW_TEXT_TRACKS_REQUEST:"mediashowtexttracksrequest",MEDIA_HIDE_TEXT_TRACKS_REQUEST:"mediahidetexttracksrequest",MEDIA_SHOW_CAPTIONS_REQUEST:"mediashowcaptionsrequest",MEDIA_SHOW_SUBTITLES_REQUEST:"mediashowsubtitlesrequest",MEDIA_DISABLE_CAPTIONS_REQUEST:"mediadisablecaptionsrequest",MEDIA_DISABLE_SUBTITLES_REQUEST:"mediadisablesubtitlesrequest",MEDIA_PLAYBACK_RATE_REQUEST:"mediaplaybackraterequest",REGISTER_MEDIA_STATE_RECEIVER:"registermediastatereceiver",UNREGISTER_MEDIA_STATE_RECEIVER:"unregistermediastatereceiver"},_={MEDIA_AIRPLAY_UNAVAILABLE:"mediaairplayunavailablechange",MEDIA_PIP_UNAVAILABLE:"mediapipunavailablechange",MEDIA_PAUSED:"mediapausedchange",MEDIA_HAS_PLAYED:"mediahasplayedchange",MEDIA_MUTED:"mediamutedchange",MEDIA_VOLUME_LEVEL:"mediavolumelevelchange",MEDIA_VOLUME:"mediavolumechange",MEDIA_VOLUME_UNAVAILABLE:"mediavolumeunavailablechange",MEDIA_IS_PIP:"mediaispipchange",MEDIA_IS_CASTING:"mediaiscastingchange",MEDIA_CAPTIONS_LIST:"mediacaptionslistchange",MEDIA_SUBTITLES_LIST:"mediasubtitleslistchange",MEDIA_CAPTIONS_SHOWING:"mediacaptionsshowingchange",MEDIA_SUBTITLES_SHOWING:"mediasubtitlesshowingchange",MEDIA_IS_FULLSCREEN:"mediaisfullscreenchange",MEDIA_PLAYBACK_RATE:"mediaplaybackratechange",MEDIA_CURRENT_TIME:"mediacurrenttimechange",MEDIA_DURATION:"mediadurationchange",MEDIA_SEEKABLE:"mediaseekablechange",MEDIA_PREVIEW_IMAGE:"mediapreviewimagechange",MEDIA_PREVIEW_COORDS:"mediapreviewcoordschange",MEDIA_LOADING:"medialoadingchange",USER_INACTIVE:"userinactivechange"},I={MEDIA_AIRPLAY_UNAVAILABLE:"media-airplay-unavailable",MEDIA_PIP_UNAVAILABLE:"media-pip-unavailable",MEDIA_CAST_UNAVAILABLE:"media-cast-unavailable",MEDIA_PAUSED:"media-paused",MEDIA_HAS_PLAYED:"media-has-played",MEDIA_MUTED:"media-muted",MEDIA_VOLUME_LEVEL:"media-volume-level",MEDIA_VOLUME:"media-volume",MEDIA_VOLUME_UNAVAILABLE:"media-volume-unavailable",MEDIA_IS_PIP:"media-is-pip",MEDIA_IS_CASTING:"media-is-casting",MEDIA_CAPTIONS_LIST:"media-captions-list",MEDIA_SUBTITLES_LIST:"media-subtitles-list",MEDIA_CAPTIONS_SHOWING:"media-captions-showing",MEDIA_SUBTITLES_SHOWING:"media-subtitles-showing",MEDIA_IS_FULLSCREEN:"media-is-fullscreen",MEDIA_PLAYBACK_RATE:"media-playback-rate",MEDIA_CURRENT_TIME:"media-current-time",MEDIA_DURATION:"media-duration",MEDIA_SEEKABLE:"media-seekable",MEDIA_PREVIEW_TIME:"media-preview-time",MEDIA_PREVIEW_IMAGE:"media-preview-image",MEDIA_PREVIEW_COORDS:"media-preview-coords",MEDIA_CHROME_ATTRIBUTES:"media-chrome-attributes",MEDIA_CONTROLLER:"media-controller",MEDIA_LOADING:"media-loading",MEDIA_BUFFERED:"media-buffered"},m=Object.entries(_).reduce((e,[E,a])=>{const i=I[E];return i&&(e[a]=i),e},{userinactivechange:"user-inactive"}),c=Object.entries(I).reduce((e,[E,a])=>{const i=_[E];return i&&(e[a]=i),e},{"user-inactive":"userinactivechange"}),u={SUBTITLES:"subtitles",CAPTIONS:"captions",DESCRIPTIONS:"descriptions",CHAPTERS:"chapters",METADATA:"metadata"},U={DISABLED:"disabled",HIDDEN:"hidden",SHOWING:"showing"},R={HAVE_NOTHING:0,HAVE_METADATA:1,HAVE_CURRENT_DATA:2,HAVE_FUTURE_DATA:3,HAVE_ENOUGH_DATA:4},l={MOUSE:"mouse",PEN:"pen",TOUCH:"touch"},L={UNAVAILABLE:"unavailable",UNSUPPORTED:"unsupported"};module.exports=n(o);
 //# sourceMappingURL=constants.js.map

dist/cjs/index.js

@@ -1,2 +0,2 @@
-var W=Object.create;var n=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var U=o=>n(o,"__esModule",{value:!0});var J=(o,r)=>{for(var i in r)n(o,i,{get:r[i],enumerable:!0})},A=(o,r,i,S)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of q(r))!H.call(o,t)&&(i||t!=="default")&&n(o,t,{get:()=>r[t],enumerable:!(S=j(r,t))||S.enumerable});return o},e=(o,r)=>A(U(n(o!=null?W(z(o)):{},"default",!r&&o&&o.__esModule?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o),K=(o=>(r,i)=>o&&o.get(r)||(i=A(U({}),r,1),o&&o.set(r,i),i))(typeof WeakMap!="undefined"?new WeakMap:0);var O={};J(O,{MediaAirplayButton:()=>s.default,MediaCaptionsButton:()=>g.default,MediaChromeButton:()=>f.default,MediaChromeRange:()=>l.default,MediaContainer:()=>p,MediaControlBar:()=>u.default,MediaController:()=>a.default,MediaCurrentTimeDisplay:()=>c.default,MediaDurationDisplay:()=>B.default,MediaFullscreenButton:()=>w.default,MediaGestureReceiver:()=>M.default,MediaLoadingIndicator:()=>D.default,MediaMuteButton:()=>P.default,MediaPipButton:()=>T.default,MediaPlayButton:()=>x.default,MediaPlaybackRateButton:()=>y.default,MediaPosterImage:()=>E.default,MediaProgressRange:()=>R.default,MediaSeekBackwardButton:()=>b.default,MediaSeekForwardButton:()=>h.default,MediaTheme:()=>I.default,MediaThumbnailPreview:()=>d.default,MediaThumbnailPreviewElement:()=>d.default,MediaTimeDisplay:()=>C.default,MediaTimeRange:()=>k.default,MediaTitleElement:()=>v.default,MediaVolumeRange:()=>F.default,constants:()=>G,labels:()=>L.default,timeUtils:()=>V});var G=e(require("./constants.js"),1),L=e(require("./labels/labels.js"),1),V=e(require("./utils/time.js"),1),s=e(require("./media-airplay-button.js"),1),X=require("./media-cast-button.js"),f=e(require("./media-chrome-button.js"),1),M=e(require("./media-gesture-receiver.js"),1),a=e(require("./media-controller.js"),1),l=e(require("./media-chrome-range.js"),1),u=e(require("./media-control-bar.js"),1),c=e(require("./media-current-time-display.js"),1),B=e(require("./media-duration-display.js"),1),C=e(require("./media-time-display.js"),1),g=e(require("./media-captions-button.js"),1),h=e(require("./media-seek-forward-button.js"),1),w=e(require("./media-fullscreen-button.js"),1),P=e(require("./media-mute-button.js"),1),T=e(require("./media-pip-button.js"),1),x=e(require("./media-play-button.js"),1),y=e(require("./media-playback-rate-button.js"),1),E=e(require("./media-poster-image.js"),1),R=e(require("./media-progress-range.js"),1),b=e(require("./media-seek-backward-button.js"),1),d=e(require("./media-thumbnail-preview.js"),1),k=e(require("./media-time-range.js"),1),D=e(require("./media-loading-indicator.js"),1),v=e(require("./media-title-element.js"),1),F=e(require("./media-volume-range.js"),1),I=e(require("./themes/media-theme.js"),1),m=require("./utils/server-safe-globals.js");class N extends a.default{}m.Window.customElements.get("media-chrome")||m.Window.customElements.define("media-chrome",N);class p extends a.default{constructor(){super();console.warn("MediaChrome: <media-container> is deprecated. Use <media-controller>.")}}m.Window.customElements.get("media-container")||m.Window.customElements.define("media-container",p);module.exports=K(O);
+var q=Object.create;var d=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var G=o=>d(o,"__esModule",{value:!0});var N=(o,r)=>{for(var i in r)d(o,i,{get:r[i],enumerable:!0})},L=(o,r,i,A)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of H(r))!K.call(o,t)&&(i||t!=="default")&&d(o,t,{get:()=>r[t],enumerable:!(A=z(r,t))||A.enumerable});return o},e=(o,r)=>L(G(d(o!=null?q(J(o)):{},"default",!r&&o&&o.__esModule?{get:()=>o.default,enumerable:!0}:{value:o,enumerable:!0})),o),O=(o=>(r,i)=>o&&o.get(r)||(i=L(G({}),r,1),o&&o.set(r,i),i))(typeof WeakMap!="undefined"?new WeakMap:0);var X={};N(X,{MediaAirplayButton:()=>p.default,MediaCaptionsButton:()=>g.default,MediaCastButton:()=>s.default,MediaChromeButton:()=>f.default,MediaChromeRange:()=>l.default,MediaContainer:()=>n,MediaControlBar:()=>u.default,MediaController:()=>a.default,MediaCurrentTimeDisplay:()=>c.default,MediaDurationDisplay:()=>B.default,MediaFullscreenButton:()=>w.default,MediaGestureReceiver:()=>M.default,MediaLoadingIndicator:()=>F.default,MediaMuteButton:()=>y.default,MediaPipButton:()=>P.default,MediaPlayButton:()=>T.default,MediaPlaybackRateButton:()=>x.default,MediaPosterImage:()=>R.default,MediaPreviewThumbnail:()=>b.default,MediaPreviewTimeDisplay:()=>k.default,MediaProgressRange:()=>D.default,MediaSeekBackwardButton:()=>E.default,MediaSeekForwardButton:()=>h.default,MediaTheme:()=>U.default,MediaTimeDisplay:()=>C.default,MediaTimeRange:()=>v.default,MediaTitleElement:()=>I.default,MediaVolumeRange:()=>S.default,constants:()=>V,labels:()=>W.default,timeUtils:()=>j});var V=e(require("./constants.js"),1),W=e(require("./labels/labels.js"),1),j=e(require("./utils/time.js"),1),p=e(require("./media-airplay-button.js"),1),s=e(require("./media-cast-button.js"),1),f=e(require("./media-chrome-button.js"),1),M=e(require("./media-gesture-receiver.js"),1),a=e(require("./media-controller.js"),1),l=e(require("./media-chrome-range.js"),1),u=e(require("./media-control-bar.js"),1),c=e(require("./media-current-time-display.js"),1),B=e(require("./media-duration-display.js"),1),C=e(require("./media-time-display.js"),1),g=e(require("./media-captions-button.js"),1),h=e(require("./media-seek-forward-button.js"),1),w=e(require("./media-fullscreen-button.js"),1),y=e(require("./media-mute-button.js"),1),P=e(require("./media-pip-button.js"),1),T=e(require("./media-play-button.js"),1),x=e(require("./media-playback-rate-button.js"),1),R=e(require("./media-poster-image.js"),1),D=e(require("./media-progress-range.js"),1),E=e(require("./media-seek-backward-button.js"),1),k=e(require("./media-preview-time-display.js"),1),b=e(require("./media-preview-thumbnail.js"),1),v=e(require("./media-time-range.js"),1),F=e(require("./media-loading-indicator.js"),1),I=e(require("./media-title-element.js"),1),S=e(require("./media-volume-range.js"),1),U=e(require("./themes/media-theme.js"),1),m=require("./utils/server-safe-globals.js");class Q extends a.default{}m.Window.customElements.get("media-chrome")||m.Window.customElements.define("media-chrome",Q);class n extends a.default{constructor(){super();console.warn("MediaChrome: <media-container> is deprecated. Use <media-controller>.")}}m.Window.customElements.get("media-container")||m.Window.customElements.define("media-container",n);module.exports=O(X);
 //# sourceMappingURL=index.js.map

dist/cjs/media-chrome-button.js

@@ -1,2 +0,2 @@
-var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var k=s=>h(s,"__esModule",{value:!0});var w=(s,t)=>{for(var n in t)h(s,n,{get:t[n],enumerable:!0})},L=(s,t,n,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!y.call(s,o)&&(n||o!=="default")&&h(s,o,{get:()=>t[o],enumerable:!(e=p(t,o))||e.enumerable});return s};var x=(s=>(t,n)=>s&&s.get(t)||(n=L(k({}),t,1),s&&s.set(t,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var A={};w(A,{default:()=>E});var c=require("./constants.js"),g=require("./utils/defineCustomElement.js"),a=require("./utils/server-safe-globals.js");const l=a.Document.createElement("template");l.innerHTML=`
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var k=s=>h(s,"__esModule",{value:!0});var w=(s,t)=>{for(var n in t)h(s,n,{get:t[n],enumerable:!0})},L=(s,t,n,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!y.call(s,o)&&(n||o!=="default")&&h(s,o,{get:()=>t[o],enumerable:!(e=p(t,o))||e.enumerable});return s};var x=(s=>(t,n)=>s&&s.get(t)||(n=L(k({}),t,1),s&&s.set(t,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var A={};w(A,{default:()=>E});var d=require("./constants.js"),g=require("./utils/defineCustomElement.js"),a=require("./utils/server-safe-globals.js");const l=a.Document.createElement("template");l.innerHTML=`
 <style>
@@ -64,3 +64,3 @@ :host {
 </style>
-`;const u=["Enter"," "];class m extends a.Window.HTMLElement{static get observedAttributes(){return[c.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(t={}){super();const n=this.attachShadow({mode:"open"}),e=l.content.cloneNode(!0);this.nativeEl=e;let o=t.slotTemplate;o||(o=a.Document.createElement("template"),o.innerHTML=`<slot>${t.defaultContent||""}</slot>`),this.nativeEl.appendChild(o.content.cloneNode(!0)),n.appendChild(e),this.addEventListener("click",i=>{this.handleClick(i)});const r=i=>{const{key:d}=i;if(!u.includes(d)){this.removeEventListener("keyup",r);return}this.handleClick(i)};this.addEventListener("keydown",i=>{const{metaKey:d,altKey:b,key:f}=i;if(d||b||!u.includes(f)){this.removeEventListener("keyup",r);return}this.addEventListener("keyup",r)})}attributeChangedCallback(t,n,e){var o,r;if(t===c.MediaUIAttributes.MEDIA_CONTROLLER){if(n){const i=a.Document.getElementById(n);(o=i==null?void 0:i.unassociateElement)==null||o.call(i,this)}if(e){const i=a.Document.getElementById(e);(r=i==null?void 0:i.associateElement)==null||r.call(i,this)}}}connectedCallback(){var n;this.setAttribute("role","button"),this.setAttribute("tabindex",0);const t=this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const e=a.Document.getElementById(t);(n=e==null?void 0:e.associateElement)==null||n.call(e,this)}}disconnectedCallback(){var n;if(this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER)){const e=a.Document.getElementById(mediaControllerId);(n=e==null?void 0:e.unassociateElement)==null||n.call(e,this)}}handleClick(){}}(0,g.defineCustomElement)("media-chrome-button",m);var E=m;module.exports=x(A);
+`;const u=["Enter"," "];class m extends a.Window.HTMLElement{static get observedAttributes(){return[d.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(t={}){super();const n=this.attachShadow({mode:"open"}),e=l.content.cloneNode(!0);this.nativeEl=e;let o=t.slotTemplate;o||(o=a.Document.createElement("template"),o.innerHTML=`<slot>${t.defaultContent||""}</slot>`),this.nativeEl.appendChild(o.content.cloneNode(!0)),n.appendChild(e),this.addEventListener("click",i=>{this.handleClick(i)});const c=i=>{const{key:r}=i;if(!u.includes(r)){this.removeEventListener("keyup",c);return}this.handleClick(i)};this.addEventListener("keydown",i=>{const{metaKey:r,altKey:b,key:f}=i;if(r||b||!u.includes(f)){this.removeEventListener("keyup",c);return}this.addEventListener("keyup",c)})}attributeChangedCallback(t,n,e){var o,c;if(t===d.MediaUIAttributes.MEDIA_CONTROLLER){if(n){const i=a.Document.getElementById(n);(o=i==null?void 0:i.unassociateElement)==null||o.call(i,this)}if(e){const i=a.Document.getElementById(e);(c=i==null?void 0:i.associateElement)==null||c.call(i,this)}}}connectedCallback(){var n;this.setAttribute("role","button"),this.setAttribute("tabindex",0);const t=this.getAttribute(d.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const e=a.Document.getElementById(t);(n=e==null?void 0:e.associateElement)==null||n.call(e,this)}}disconnectedCallback(){var n;const t=this.getAttribute(d.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const e=a.Document.getElementById(t);(n=e==null?void 0:e.unassociateElement)==null||n.call(e,this)}}handleClick(){}}(0,g.defineCustomElement)("media-chrome-button",m);var E=m;module.exports=x(A);
 //# sourceMappingURL=media-chrome-button.js.map

dist/cjs/media-chrome-range.js

@@ -1,2 +0,2 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var v=n=>c(n,"__esModule",{value:!0});var x=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},y=(n,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of l(e))!k.call(n,r)&&(t||r!=="default")&&c(n,r,{get:()=>e[r],enumerable:!(a=p(e,r))||a.enumerable});return n};var f=(n=>(e,t)=>n&&n.get(e)||(t=y(v({}),e,1),n&&n.set(e,t),t))(typeof WeakMap!="undefined"?new WeakMap:0);var R={};x(R,{default:()=>w});var s=require("./constants.js"),m=require("./utils/defineCustomElement.js"),o=require("./utils/server-safe-globals.js");const g=o.Document.createElement("template"),u=`
+var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var f=i=>c(i,"__esModule",{value:!0});var y=(i,t)=>{for(var e in t)c(i,e,{get:t[e],enumerable:!0})},w=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of k(t))!x.call(i,r)&&(e||r!=="default")&&c(i,r,{get:()=>t[r],enumerable:!(a=v(t,r))||a.enumerable});return i};var R=(i=>(t,e)=>i&&i.get(t)||(e=w(f({}),t,1),i&&i.set(t,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var A={};y(A,{default:()=>I});var d=require("./constants.js"),b=require("./utils/defineCustomElement.js"),s=require("./utils/server-safe-globals.js"),g=require("./utils/element-utils.js");const p=s.Document.createElement("template"),m=`
   height: var(--thumb-height);
@@ -18,4 +18,3 @@ width: var(--media-range-thumb-width, 10px);
   border-radius: var(--media-range-track-border-radius, 0);
-  background: var(--media-range-track-background-internal, var(--media-range-track-background, #eee));
-
+  background: var(--media-range-track-progress-internal, var(--media-range-track-background, #eee));
   box-shadow: var(--media-range-track-box-shadow, none);
@@ -25,3 +24,3 @@ transition: var(--media-range-track-transition, none);
   cursor: pointer;
-`;g.innerHTML=`
+`;p.innerHTML=`
   <style>
@@ -40,5 +39,7 @@ :host {
       width: 100px;
-      padding: 0 10px;
-
+      padding-left: var(--media-range-padding-left, 10px);
+      padding-right: var(--media-range-padding-right, 10px);
       pointer-events: auto;
+      /* needed for vertical align issue 1px off */
+      font-size: 0;
     }
@@ -67,3 +68,3 @@
       -webkit-appearance: none;
-      ${u}
+      ${m}
       /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
@@ -75,3 +76,3 @@ margin-top: calc(calc(0px - var(--thumb-height) + var(--track-height)) / 2);
     input[type=range]::-moz-range-thumb {
-      ${u}
+      ${m}
       translate: var(--media-range-track-translate-x, 0) var(--media-range-track-translate-y, 0);
@@ -94,2 +95,48 @@ }
 
+    #background,
+    #pointer {
+      ${h}
+      width: auto;
+      position: absolute;
+      top: 50%;
+      transform: translate(var(--media-range-track-translate-x, 0px), calc(var(--media-range-track-translate-y, 0px) - 50%));
+      left: var(--media-range-padding-left, 10px);
+      right: var(--media-range-padding-right, 10px);
+      background: var(--media-range-track-background, #333);
+    }
+
+    #pointer {
+      min-width: auto;
+      right: auto;
+      background: var(--media-range-track-pointer-background);
+      border-right: var(--media-range-track-pointer-border-right);
+      transition: visibility .25s, opacity .25s;
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    :host(:hover) #pointer {
+      transition: visibility .5s, opacity .5s;
+      visibility: visible;
+      opacity: 1;
+    }
+
+    #hoverzone {
+      /* Add z-index so it overlaps the top of the control buttons if they are right under. */
+      z-index: 1;
+      display: var(--media-time-range-hover-display, none);
+      box-sizing: border-box;
+      position: absolute;
+      left: var(--media-range-padding-left, 10px);
+      right: var(--media-range-padding-right, 10px);
+      bottom: var(--media-time-range-hover-bottom, -5px);
+      height: var(--media-time-range-hover-height, max(calc(100% + 5px), 20px));
+    }
+
+    #range {
+      z-index: 2;
+      position: relative;
+      height: var(--media-range-track-height, 4px);
+    }
+
     /*
@@ -124,4 +171,7 @@ * set input to focus-visible, unless host-context is available (in chrome)
   </style>
-  <input id="range" type="range" min="0" max="1000" step="1" value="0">
-`;class b extends o.Window.HTMLElement{static get observedAttributes(){return[s.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(g.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this))}attributeChangedCallback(e,t,a){var r,d;if(e===s.MediaUIAttributes.MEDIA_CONTROLLER){if(t){const i=o.Document.getElementById(t);(r=i==null?void 0:i.unassociateElement)==null||r.call(i,this)}if(a){const i=o.Document.getElementById(a);(d=i==null?void 0:i.associateElement)==null||d.call(i,this)}}}connectedCallback(){var t;const e=this.getAttribute(s.MediaUIAttributes.MEDIA_CONTROLLER);if(e){const a=o.Document.getElementById(e);(t=a==null?void 0:a.associateElement)==null||t.call(a,this)}this.updateBar()}disconnectedCallback(){var t;if(this.getAttribute(s.MediaUIAttributes.MEDIA_CONTROLLER)){const a=o.Document.getElementById(mediaControllerId);(t=a==null?void 0:a.unassociateElement)==null||t.call(a,this)}}updateBar(){const e=this.getBarColors();let t="linear-gradient(to right, ",a=0;e.forEach(r=>{r[1]<a||(t=t+`${r[0]} ${a}%, ${r[0]} ${r[1]}%,`,a=r[1])}),t=t.slice(0,t.length-1)+")",this.style.setProperty("--media-range-track-background-internal",t)}getBarColors(){const e=this.range,t=e.value-e.min,a=e.max-e.min,r=t/a*100;return[["var(--media-range-bar-color, #fff)",r],["var(--media-range-track-background, #333)",100]]}}(0,m.defineCustomElement)("media-chrome-range",b);var w=b;module.exports=f(R);
+  <div id="background"></div>
+  <div id="pointer"></div>
+  <div id="hoverzone"></div>
+  <input id="range" type="range" min="0" max="1000" step="any" value="0">
+`;class u extends s.Window.HTMLElement{static get observedAttributes(){return[d.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(p.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this))}attributeChangedCallback(t,e,a){var r,o;if(t===d.MediaUIAttributes.MEDIA_CONTROLLER){if(e){const n=s.Document.getElementById(e);(r=n==null?void 0:n.unassociateElement)==null||r.call(n,this)}if(a){const n=s.Document.getElementById(a);(o=n==null?void 0:n.associateElement)==null||o.call(n,this)}}}connectedCallback(){var e;const t=this.getAttribute(d.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const a=s.Document.getElementById(t);(e=a==null?void 0:a.associateElement)==null||e.call(a,this)}this.updateBar()}disconnectedCallback(){var e;const t=this.getAttribute(d.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const a=s.Document.getElementById(t);(e=a==null?void 0:a.unassociateElement)==null||e.call(a,this)}}updatePointerBar(t){const e=this.range.getBoundingClientRect();let a=(t.clientX-e.left)/e.width;a=Math.max(0,Math.min(1,a));const{style:r}=(0,g.getOrInsertCSSRule)(this.shadowRoot,"#pointer");r.setProperty("width",`${a*e.width}px`)}updateBar(){const t=this.getBarColors();let e="linear-gradient(to right, ",a=0;t.forEach(o=>{o[1]<a||(e=e+`${o[0]} ${a}%, ${o[0]} ${o[1]}%,`,a=o[1])}),e=e.slice(0,e.length-1)+")";const{style:r}=(0,g.getOrInsertCSSRule)(this.shadowRoot,":host");r.setProperty("--media-range-track-progress-internal",e)}getBarColors(){const t=this.range,e=t.value-t.min,a=t.max-t.min,r=e/a*100;let o=0;if(t.value>t.min&&t.value<t.max){const l=getComputedStyle(this).getPropertyValue("--media-range-thumb-width")||"10px";o=parseInt(l)*(.5-r/100)/t.offsetWidth*100}return[["var(--media-range-bar-color, #fff)",r+o],["transparent",100]]}}(0,b.defineCustomElement)("media-chrome-range",u);var I=u;module.exports=R(A);
 //# sourceMappingURL=media-chrome-range.js.map

dist/cjs/media-container.js

@@ -1,2 +0,2 @@
-var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var S=o=>m(o,"__esModule",{value:!0});var k=(o,e)=>{for(var i in e)m(o,i,{get:e[i],enumerable:!0})},_=(o,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of A(e))!C.call(o,s)&&(i||s!=="default")&&m(o,s,{get:()=>e[s],enumerable:!(a=w(e,s))||a.enumerable});return o};var M=(o=>(e,i)=>o&&o.get(e)||(i=_(S({}),e,1),o&&o.set(e,i),i))(typeof WeakMap!="undefined"?new WeakMap:0);var U={};k(U,{default:()=>I});var E=require("./utils/defineCustomElement.js"),r=require("./utils/server-safe-globals.js"),l=require("./constants.js"),p=require("./labels/labels.js"),y=require("./utils/element-utils.js"),N=require("./media-gesture-receiver.js");const f=r.Document.createElement("template");f.innerHTML=`
+var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var A=o=>c(o,"__esModule",{value:!0});var C=(o,e)=>{for(var i in e)c(o,i,{get:e[i],enumerable:!0})},S=(o,e,i,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of y(e))!w.call(o,s)&&(i||s!=="default")&&c(o,s,{get:()=>e[s],enumerable:!(a=E(e,s))||a.enumerable});return o};var k=(o=>(e,i)=>o&&o.get(e)||(i=S(A({}),e,1),o&&o.set(e,i),i))(typeof WeakMap!="undefined"?new WeakMap:0);var T={};C(T,{default:()=>_});var f=require("./utils/defineCustomElement.js"),r=require("./utils/server-safe-globals.js"),l=require("./constants.js"),m=require("./labels/labels.js"),g=require("./utils/element-utils.js"),U=require("./media-gesture-receiver.js");const b=r.Document.createElement("template");b.innerHTML=`
   <style>
@@ -121,3 +121,3 @@ :host {
   </span>
-`;const T=Object.values(l.MediaUIAttributes);class g extends r.Window.HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(f.content.cloneNode(!0));const i=(t,b)=>{const c=this.media;for(let h of t)h.type==="childList"&&(h.removedNodes.forEach(u=>{if(u.slot=="media"&&h.target==this){let d=h.previousSibling&&h.previousSibling.previousElementSibling;if(!d||!c)this.mediaUnsetCallback(u);else{let v=d.slot!=="media";for(;(d=d.previousSibling)!==null;)d.slot=="media"&&(v=!1);v&&this.mediaUnsetCallback(u)}}}),c&&h.addedNodes.forEach(u=>{u==c&&this.handleMediaUpdated(c).then(d=>this.mediaSetCallback(d))}))};new MutationObserver(i).observe(this,{childList:!0,subtree:!0});let s=this.media,n=this.querySelector(":scope > slot[slot=media]");n&&n.addEventListener("slotchange",()=>{if(!n.assignedElements({flatten:!0}).length){this.mediaUnsetCallback(s);return}this.media&&(s=this.media,this.handleMediaUpdated(this.media).then(b=>this.mediaSetCallback(b)))})}static get observedAttributes(){return["autohide","gestures-disabled"].concat(T)}attributeChangedCallback(e,i,a){e.toLowerCase()=="autohide"&&(this.autohide=a)}get media(){let e=this.querySelector(":scope > [slot=media]");return(e==null?void 0:e.nodeName)=="SLOT"&&(e=e.assignedElements({flatten:!0})[0]),e}mediaSetCallback(e){this._mediaClickPlayToggle=i=>{const a=e.paused?l.MediaUIEvents.MEDIA_PLAY_REQUEST:l.MediaUIEvents.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new r.Window.CustomEvent(a,{composed:!0,bubbles:!0}))}}handleMediaUpdated(e){const i=n=>Promise.resolve(n),a=n=>(console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',n),Promise.reject(n));if(!e)return a(e);const s=e.nodeName.toLowerCase();return s.includes("-")?r.Window.customElements.whenDefined(s).then(()=>i(e)):i(e)}mediaUnsetCallback(e){}connectedCallback(){const i=this.getAttribute("audio")!=null?p.nouns.AUDIO_PLAYER():p.nouns.VIDEO_PLAYER();this.setAttribute("role","region"),this.setAttribute("aria-label",i),this.media&&this.handleMediaUpdated(this.media).then(t=>this.mediaSetCallback(t)),this.setAttribute("user-inactive","user-inactive");const a=()=>{if(this.autohide<0)return;this.setAttribute("user-inactive","user-inactive");const t=new r.Window.CustomEvent(l.MediaStateChangeEvents.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!0});this.dispatchEvent(t)},s=()=>{this.removeAttribute("user-inactive");const t=new r.Window.CustomEvent(l.MediaStateChangeEvents.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!1});this.dispatchEvent(t)},n=()=>{s(),r.Window.clearTimeout(this._inactiveTimeout),!(this.autohide<0)&&(this._inactiveTimeout=r.Window.setTimeout(()=>{a()},this.autohide*1e3))};this.addEventListener("keyup",t=>{n()}),this.addEventListener("pointerup",t=>{t.pointerType==="touch"&&([this,this.media].includes(t.target)&&!this.hasAttribute("user-inactive")?a():n())}),this.addEventListener("pointermove",t=>{t.pointerType==="mouse"&&(!(0,y.containsComposedNode)(this,t.target)||(s(),r.Window.clearTimeout(this._inactiveTimeout),[this,this.media].includes(t.target)&&n()))}),this.addEventListener("mouseleave",t=>{a()}),this.addEventListener("keyup",t=>{this.setAttribute("media-keyboard-control","")}),this.addEventListener("mouseup",t=>{this.removeAttribute("media-keyboard-control")})}set autohide(e){e=Number(e),this._autohide=isNaN(e)?0:e}get autohide(){return this._autohide===void 0?2:this._autohide}}(0,E.defineCustomElement)("media-container-temp",g);var I=g;module.exports=M(U);
+`;const M=Object.values(l.MediaUIAttributes);class v extends r.Window.HTMLElement{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(b.content.cloneNode(!0));const e=n=>{const t=this.media;for(let u of n)u.type==="childList"&&(u.removedNodes.forEach(h=>{if(h.slot=="media"&&u.target==this){let d=u.previousSibling&&u.previousSibling.previousElementSibling;if(!d||!t)this.mediaUnsetCallback(h);else{let p=d.slot!=="media";for(;(d=d.previousSibling)!==null;)d.slot=="media"&&(p=!1);p&&this.mediaUnsetCallback(h)}}}),t&&u.addedNodes.forEach(h=>{h==t&&this.handleMediaUpdated(t).then(d=>this.mediaSetCallback(d))}))};new MutationObserver(e).observe(this,{childList:!0,subtree:!0});let a=this.media,s=this.querySelector(":scope > slot[slot=media]");s&&s.addEventListener("slotchange",()=>{if(!s.assignedElements({flatten:!0}).length){this.mediaUnsetCallback(a);return}this.media&&(a=this.media,this.handleMediaUpdated(this.media).then(t=>this.mediaSetCallback(t)))})}static get observedAttributes(){return["autohide","gestures-disabled"].concat(M)}attributeChangedCallback(e,i,a){e.toLowerCase()=="autohide"&&(this.autohide=a)}get media(){let e=this.querySelector(":scope > [slot=media]");return(e==null?void 0:e.nodeName)=="SLOT"&&(e=e.assignedElements({flatten:!0})[0]),e}mediaSetCallback(e){this._mediaClickPlayToggle=()=>{const i=e.paused?l.MediaUIEvents.MEDIA_PLAY_REQUEST:l.MediaUIEvents.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new r.Window.CustomEvent(i,{composed:!0,bubbles:!0}))}}handleMediaUpdated(e){const i=n=>Promise.resolve(n),a=n=>(console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',n),Promise.reject(n));if(!e)return a(e);const s=e.nodeName.toLowerCase();return s.includes("-")?r.Window.customElements.whenDefined(s).then(()=>i(e)):i(e)}mediaUnsetCallback(){}connectedCallback(){const i=this.getAttribute("audio")!=null?m.nouns.AUDIO_PLAYER():m.nouns.VIDEO_PLAYER();this.setAttribute("role","region"),this.setAttribute("aria-label",i),this.media&&this.handleMediaUpdated(this.media).then(t=>this.mediaSetCallback(t)),this.setAttribute("user-inactive","user-inactive");const a=()=>{if(this.autohide<0)return;this.setAttribute("user-inactive","user-inactive");const t=new r.Window.CustomEvent(l.MediaStateChangeEvents.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!0});this.dispatchEvent(t)},s=()=>{this.removeAttribute("user-inactive");const t=new r.Window.CustomEvent(l.MediaStateChangeEvents.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!1});this.dispatchEvent(t)},n=()=>{s(),r.Window.clearTimeout(this._inactiveTimeout),!(this.autohide<0)&&(this._inactiveTimeout=r.Window.setTimeout(()=>{a()},this.autohide*1e3))};this.addEventListener("keyup",()=>{n()}),this.addEventListener("pointerup",t=>{t.pointerType==="touch"&&([this,this.media].includes(t.target)&&!this.hasAttribute("user-inactive")?a():n())}),this.addEventListener("pointermove",t=>{t.pointerType==="mouse"&&(!(0,g.containsComposedNode)(this,t.target)||(s(),r.Window.clearTimeout(this._inactiveTimeout),[this,this.media].includes(t.target)&&n()))}),this.addEventListener("mouseleave",()=>{a()}),this.addEventListener("keyup",()=>{this.setAttribute("media-keyboard-control","")}),this.addEventListener("mouseup",()=>{this.removeAttribute("media-keyboard-control")})}set autohide(e){e=Number(e),this._autohide=isNaN(e)?0:e}get autohide(){return this._autohide===void 0?2:this._autohide}}(0,f.defineCustomElement)("media-container-temp",v);var _=v;module.exports=k(T);
 //# sourceMappingURL=media-container.js.map

dist/cjs/media-control-bar.js

@@ -1,2 +0,2 @@
-var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var l=o=>d(o,"__esModule",{value:!0});var u=(o,t)=>{for(var e in t)d(o,e,{get:t[e],enumerable:!0})},I=(o,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of b(t))!f.call(o,n)&&(e||n!=="default")&&d(o,n,{get:()=>t[n],enumerable:!(s=h(t,n))||s.enumerable});return o};var L=(o=>(t,e)=>o&&o.get(t)||(e=I(l({}),t,1),o&&o.set(t,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var y={};u(y,{default:()=>R});var c=require("./constants.js"),g=require("./utils/defineCustomElement.js"),a=require("./utils/server-safe-globals.js");const r=a.Document.createElement("template");r.innerHTML=`
+var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var u=i=>d(i,"__esModule",{value:!0});var I=(i,t)=>{for(var e in t)d(i,e,{get:t[e],enumerable:!0})},L=(i,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of b(t))!f.call(i,n)&&(e||n!=="default")&&d(i,n,{get:()=>t[n],enumerable:!(s=h(t,n))||s.enumerable});return i};var R=(i=>(t,e)=>i&&i.get(t)||(e=L(u({}),t,1),i&&i.set(t,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var A={};I(A,{default:()=>y});var c=require("./constants.js"),g=require("./utils/defineCustomElement.js"),a=require("./utils/server-safe-globals.js");const r=a.Document.createElement("template");r.innerHTML=`
   <style>
@@ -20,3 +20,3 @@ :host {
   <slot></slot>
-`;class p extends a.Window.HTMLElement{static get observedAttributes(){return[c.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(r.content.cloneNode(!0))}attributeChangedCallback(t,e,s){var n,m;if(t===c.MediaUIAttributes.MEDIA_CONTROLLER){if(e){const i=a.Document.getElementById(e);(n=i==null?void 0:i.unassociateElement)==null||n.call(i,this)}if(s){const i=a.Document.getElementById(s);(m=i==null?void 0:i.associateElement)==null||m.call(i,this)}}}connectedCallback(){var e;const t=this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const s=a.Document.getElementById(t);(e=s==null?void 0:s.associateElement)==null||e.call(s,this)}}disconnectedCallback(){var e;if(this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER)){const s=a.Document.getElementById(mediaControllerId);(e=s==null?void 0:s.unassociateElement)==null||e.call(s,this)}}}(0,g.defineCustomElement)("media-control-bar",p);var R=p;module.exports=L(y);
+`;class p extends a.Window.HTMLElement{static get observedAttributes(){return[c.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(r.content.cloneNode(!0))}attributeChangedCallback(t,e,s){var n,m;if(t===c.MediaUIAttributes.MEDIA_CONTROLLER){if(e){const o=a.Document.getElementById(e);(n=o==null?void 0:o.unassociateElement)==null||n.call(o,this)}if(s){const o=a.Document.getElementById(s);(m=o==null?void 0:o.associateElement)==null||m.call(o,this)}}}connectedCallback(){var e;const t=this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const s=a.Document.getElementById(t);(e=s==null?void 0:s.associateElement)==null||e.call(s,this)}}disconnectedCallback(){var e;const t=this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const s=a.Document.getElementById(t);(e=s==null?void 0:s.unassociateElement)==null||e.call(s,this)}}}(0,g.defineCustomElement)("media-control-bar",p);var y=p;module.exports=R(A);
 //# sourceMappingURL=media-control-bar.js.map

dist/cjs/media-controller.js

@@ -1,2 +0,2 @@
-var z=Object.create;var m=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var tt=Object.getPrototypeOf,et=Object.prototype.hasOwnProperty;var k=a=>m(a,"__esModule",{value:!0});var at=(a,e)=>{for(var t in e)m(a,t,{get:e[t],enumerable:!0})},y=(a,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Z(e))!et.call(a,r)&&(t||r!=="default")&&m(a,r,{get:()=>e[r],enumerable:!(i=J(e,r))||i.enumerable});return a},it=(a,e)=>y(k(m(a!=null?z(tt(a)):{},"default",!e&&a&&a.__esModule?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a),st=(a=>(e,t)=>a&&a.get(e)||(t=y(k({}),e,1),a&&a.set(e,t),t))(typeof WeakMap!="undefined"?new WeakMap:0);var At={};at(At,{default:()=>_t,delay:()=>C,getTestMediaEl:()=>v,hasPipSupport:()=>q,hasVolumeSupportAsync:()=>Y});var j=it(require("./media-container.js"),1),K=require("./utils/defineCustomElement.js"),E=require("./utils/server-safe-globals.js"),S=require("./utils/fullscreenApi.js"),U=require("./utils/stringUtils.js"),b=require("./utils/element-utils.js"),s=require("./constants.js"),o=require("./utils/captions.js");const{MEDIA_PLAY_REQUEST:ht,MEDIA_PAUSE_REQUEST:It,MEDIA_MUTE_REQUEST:mt,MEDIA_UNMUTE_REQUEST:Tt,MEDIA_VOLUME_REQUEST:Mt,MEDIA_ENTER_FULLSCREEN_REQUEST:ft,MEDIA_EXIT_FULLSCREEN_REQUEST:Ut,MEDIA_SEEK_REQUEST:bt,MEDIA_PREVIEW_REQUEST:Dt,MEDIA_ENTER_PIP_REQUEST:gt,MEDIA_EXIT_PIP_REQUEST:Rt,MEDIA_PLAYBACK_RATE_REQUEST:Pt}=s.MediaUIEvents;class N extends j.default{constructor(){super();ut||(this._airplayUnavailable=s.AvailabilityStates.UNSUPPORTED),lt||(this._castUnavailable=s.AvailabilityStates.UNSUPPORTED),ct||(this._pipUnavailable=s.AvailabilityStates.UNSUPPORTED),I!==void 0?I||(this._volumeUnavailable=s.AvailabilityStates.UNSUPPORTED):dt.then(()=>{I||(this._volumeUnavailable=s.AvailabilityStates.UNSUPPORTED,this.propagateMediaState(s.MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable))}),this.mediaStateReceivers=[],this.associatedElementSubscriptions=new Map,this.associatedElements=[],this.associateElement(this);const e={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const t=this.media;t.muted=!1,t.volume===0&&(t.volume=.25)},MEDIA_VOLUME_REQUEST:t=>{const i=this.media,r=t.detail;i.volume=r,r>0&&i.muted&&(i.muted=!1);try{E.Window.localStorage.setItem("media-chrome-pref-volume",r.toString())}catch{}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const t=this.media;E.Document.pictureInPictureElement&&E.Document.exitPictureInPicture(),super[S.fullscreenApi.enter]?super[S.fullscreenApi.enter]():t.webkitEnterFullscreen?t.webkitEnterFullscreen():t.requestFullscreen?t.requestFullscreen():console.warn("MediaChrome: Fullscreen not supported")},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{E.Document[S.fullscreenApi.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const t=this.media;!E.Document.pictureInPictureEnabled||(E.Document[S.fullscreenApi.element]&&E.Document[S.fullscreenApi.exit](),t.requestPictureInPicture())},MEDIA_EXIT_PIP_REQUEST:()=>{E.Document.pictureInPictureElement&&E.Document.exitPictureInPicture()},MEDIA_ENTER_CAST_REQUEST:()=>{var i;const t=this.media;!((i=globalThis.CastableVideoElement)==null?void 0:i.castEnabled)||(E.Document[S.fullscreenApi.element]&&E.Document[S.fullscreenApi.exit](),t.requestCast())},MEDIA_EXIT_CAST_REQUEST:async()=>{var t;((t=globalThis.CastableVideoElement)==null?void 0:t.castElement)&&globalThis.CastableVideoElement.exitCast()},MEDIA_SEEK_REQUEST:t=>{const i=this.media,r=t.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=r)},MEDIA_PLAYBACK_RATE_REQUEST:t=>{this.media.playbackRate=t.detail},MEDIA_PREVIEW_REQUEST:t=>{var l;const i=this.media;if(!i)return;const[r]=(0,o.getTextTracksList)(i,{kind:s.TextTrackKinds.METADATA,label:"thumbnails"});if(!(r&&r.cues))return;const n=t.detail;if(n===null){this.propagateMediaState(s.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,void 0),this.propagateMediaState(s.MediaUIAttributes.MEDIA_PREVIEW_COORDS,void 0);return}const d=Array.prototype.find.call(r.cues,p=>p.startTime>=n);if(!d)return;const A=/'^(?:[a-z]+:)?\/\//i.test(d.text)||(l=i.querySelector('track[label="thumbnails"]'))==null?void 0:l.src,u=new URL(d.text,A),_=new URLSearchParams(u.hash).get("#xywh");this.propagateMediaState(s.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,u.href),this.propagateMediaState(s.MediaUIAttributes.MEDIA_PREVIEW_COORDS,_.split(",").join(" "))},MEDIA_SHOW_CAPTIONS_REQUEST:t=>{const i=M(this),{detail:r=[]}=t;(0,o.updateTracksModeTo)(s.TextTrackModes.SHOWING,i,r)},MEDIA_DISABLE_CAPTIONS_REQUEST:t=>{const i=M(this),{detail:r=[]}=t;(0,o.updateTracksModeTo)(s.TextTrackModes.DISABLED,i,r)},MEDIA_SHOW_SUBTITLES_REQUEST:t=>{const i=T(this),{detail:r=[]}=t;(0,o.updateTracksModeTo)(s.TextTrackModes.SHOWING,i,r)},MEDIA_DISABLE_SUBTITLES_REQUEST:t=>{const i=T(this),{detail:r=[]}=t;(0,o.updateTracksModeTo)(s.TextTrackModes.DISABLED,i,r)},MEDIA_AIRPLAY_REQUEST:t=>{const{media:i}=this;if(!!i){if(!(i.webkitShowPlaybackTargetPicker&&E.Window.WebKitPlaybackTargetAvailabilityEvent)){console.warn("received a request to select AirPlay but AirPlay is not supported in this environment");return}i.webkitShowPlaybackTargetPicker()}}};if(Object.keys(e).forEach(t=>{const i=`_handle${(0,U.constToCamel)(t,!0)}`;this[i]=r=>{if(r.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}e[t](r,this.media)},this.addEventListener(s.MediaUIEvents[t],this[i])}),this._mediaStatePropagators={"play,pause,emptied":()=>{this.propagateMediaState(s.MediaUIAttributes.MEDIA_PAUSED,x(this))},"playing,emptied":()=>{var t;this.propagateMediaState(s.MediaUIAttributes.MEDIA_HAS_PLAYED,!((t=this.media)==null?void 0:t.paused))},volumechange:()=>{this.propagateMediaState(s.MediaUIAttributes.MEDIA_MUTED,V(this)),this.propagateMediaState(s.MediaUIAttributes.MEDIA_VOLUME,B(this)),this.propagateMediaState(s.MediaUIAttributes.MEDIA_VOLUME_LEVEL,w(this))},[S.fullscreenApi.event]:t=>{const r=!!E.Document[S.fullscreenApi.element]&&(t==null?void 0:t.target),n=(0,b.containsComposedNode)(this,r);this.propagateMediaState(s.MediaUIAttributes.MEDIA_IS_FULLSCREEN,n)},"enterpictureinpicture,leavepictureinpicture":t=>{var r;let i;if(t)i=t.type=="enterpictureinpicture";else{const n=(r=this.getRootNode().pictureInPictureElement)!=null?r:E.Document.pictureInPictureElement;i=this.media&&(0,b.containsComposedNode)(this.media,n)}this.propagateMediaState(s.MediaUIAttributes.MEDIA_IS_PIP,i)},"entercast,leavecast,castchange":t=>{var n;const i=(n=globalThis.CastableVideoElement)==null?void 0:n.castElement;let r=this.media&&(0,b.containsComposedNode)(this.media,i);(t==null?void 0:t.type)==="castchange"&&(t==null?void 0:t.detail)==="CONNECTING"&&(r="connecting"),this.propagateMediaState(s.MediaUIAttributes.MEDIA_IS_CASTING,r)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState(s.MediaUIAttributes.MEDIA_CURRENT_TIME,Q(this))},"durationchange,loadedmetadata,emptied":()=>{this.propagateMediaState(s.MediaUIAttributes.MEDIA_DURATION,F(this))},"loadedmetadata,emptied,progress":()=>{var t;this.propagateMediaState(s.MediaUIAttributes.MEDIA_SEEKABLE,(t=G(this))==null?void 0:t.join(":"))},"progress,emptied":()=>{var t;this.propagateMediaState(s.MediaUIAttributes.MEDIA_BUFFERED,St((t=this.media)==null?void 0:t.buffered))},"ratechange,loadstart":()=>{this.propagateMediaState(s.MediaUIAttributes.MEDIA_PLAYBACK_RATE,W(this))},"waiting,playing,emptied":()=>{var i;const t=((i=this.media)==null?void 0:i.readyState)<3;this.propagateMediaState(s.MediaUIAttributes.MEDIA_LOADING,t)}},this._airplayUnavailable!==s.AvailabilityStates.UNSUPPORTED){const t=i=>{(i==null?void 0:i.availability)==="available"?this._airplayUnavailable=void 0:(i==null?void 0:i.availability)==="not-available"&&(this._airplayUnavailable=s.AvailabilityStates.UNAVAILABLE),this.propagateMediaState(s.MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable)};this._mediaStatePropagators.webkitplaybacktargetavailabilitychanged=t}if(this._castUnavailable!==s.AvailabilityStates.UNSUPPORTED){const t=()=>{var r;const i=(r=globalThis.CastableVideoElement)==null?void 0:r.castState;(i==null?void 0:i.includes("CONNECT"))?this._castUnavailable=void 0:this._castUnavailable=s.AvailabilityStates.UNAVAILABLE,this.propagateMediaState(s.MediaUIAttributes.MEDIA_CAST_UNAVAILABLE,this._castUnavailable)};this._mediaStatePropagators.castchange=t}this._textTrackMediaStatePropagators={"addtrack,removetrack,loadstart":()=>{this.propagateMediaState(s.MediaUIAttributes.MEDIA_CAPTIONS_LIST,(0,o.stringifyTextTrackList)(M(this))||void 0),this.propagateMediaState(s.MediaUIAttributes.MEDIA_SUBTITLES_LIST,(0,o.stringifyTextTrackList)(T(this))||void 0),this.propagateMediaState(s.MediaUIAttributes.MEDIA_CAPTIONS_SHOWING,(0,o.stringifyTextTrackList)(P(this))||void 0),this.propagateMediaState(s.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING,(0,o.stringifyTextTrackList)(R(this))||void 0)},change:()=>{this.propagateMediaState(s.MediaUIAttributes.MEDIA_CAPTIONS_SHOWING,(0,o.stringifyTextTrackList)(P(this))||void 0),this.propagateMediaState(s.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING,(0,o.stringifyTextTrackList)(R(this))||void 0)}}}mediaSetCallback(e){super.mediaSetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const i=t.split(","),r=this._mediaStatePropagators[t];i.forEach(n=>{(n==S.fullscreenApi.event?this.getRootNode():e).addEventListener(n,r)}),r()}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.addEventListener(n,i)}),i()});try{const t=E.Window.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){console.debug("Error getting volume pref",t)}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const i=t.split(","),r=this._mediaStatePropagators[t];i.forEach(n=>{(n==S.fullscreenApi.event?this.getRootNode():e).removeEventListener(n,r)})}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.removeEventListener(n,i)}),i()}),this.propagateMediaState(s.MediaUIAttributes.MEDIA_PAUSED,!0)}propagateMediaState(e,t){c(this.mediaStateReceivers,e,t);const i=new E.Window.CustomEvent(s.AttributeToStateChangeEventMap[e],{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(i)}associateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(t.has(e))return;const i=this.registerMediaStateReceiver.bind(this),r=this.unregisterMediaStateReceiver.bind(this),n=ot(e,i,r);Object.keys(s.MediaUIEvents).forEach(d=>{e.addEventListener(s.MediaUIEvents[d],this[`_handle${(0,U.constToCamel)(d,!0)}`])}),t.set(e,n)}unassociateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(!t.has(e))return;t.get(e)(),t.delete(e),Object.keys(s.MediaUIEvents).forEach(r=>{e.removeEventListener(s.MediaUIEvents[r],this[`_handle${(0,U.constToCamel)(r,!0)}`])})}registerMediaStateReceiver(e){var r;if(!e)return;const t=this.mediaStateReceivers;t.indexOf(e)>-1||(t.push(e),c([e],s.MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable),c([e],s.MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable),c([e],s.MediaUIAttributes.MEDIA_CAST_UNAVAILABLE,this._castUnavailable),c([e],s.MediaUIAttributes.MEDIA_PIP_UNAVAILABLE,this._pipUnavailable),this.media&&(c([e],s.MediaUIAttributes.MEDIA_CAPTIONS_LIST,(0,o.stringifyTextTrackList)(M(this))||void 0),c([e],s.MediaUIAttributes.MEDIA_SUBTITLES_LIST,(0,o.stringifyTextTrackList)(T(this))||void 0),c([e],s.MediaUIAttributes.MEDIA_CAPTIONS_SHOWING,(0,o.stringifyTextTrackList)(P(this))||void 0),c([e],s.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING,(0,o.stringifyTextTrackList)(R(this))||void 0),c([e],s.MediaUIAttributes.MEDIA_PAUSED,x(this)),c([e],s.MediaUIAttributes.MEDIA_MUTED,V(this)),c([e],s.MediaUIAttributes.MEDIA_VOLUME,B(this)),c([e],s.MediaUIAttributes.MEDIA_VOLUME_LEVEL,w(this)),c([e],s.MediaUIAttributes.MEDIA_IS_FULLSCREEN,this.hasAttribute(s.MediaUIAttributes.MEDIA_IS_FULLSCREEN)),c([e],s.MediaUIAttributes.MEDIA_IS_CASTING,this.hasAttribute(s.MediaUIAttributes.MEDIA_IS_CASTING)),c([e],s.MediaUIAttributes.MEDIA_CURRENT_TIME,Q(this)),c([e],s.MediaUIAttributes.MEDIA_DURATION,F(this)),c([e],s.MediaUIAttributes.MEDIA_SEEKABLE,(r=G(this))==null?void 0:r.join(":")),c([e],s.MediaUIAttributes.MEDIA_PLAYBACK_RATE,W(this))))}unregisterMediaStateReceiver(e){const t=this.mediaStateReceivers,i=t.indexOf(e);i<0||t.splice(i,1)}}const x=a=>a.media?a.media.paused:!0,V=a=>!!(a.media&&a.media.muted),B=a=>{const e=a.media;return e?e.volume:1},w=a=>{let e="high";if(!a.media)return e;const{muted:t,volume:i}=a.media;return i===0||t?e="off":i<.5?e="low":i<.75&&(e="medium"),e},Q=a=>{const e=a.media;return e?e.currentTime:0},F=a=>{const e=a==null?void 0:a.media;return Number.isFinite(e==null?void 0:e.duration)?e.duration:NaN},G=a=>{var r;const e=a==null?void 0:a.media;if(!((r=e==null?void 0:e.seekable)==null?void 0:r.length))return;const t=e.seekable.start(0),i=e.seekable.end(e.seekable.length-1);if(!(!t&&!i))return[Number(t.toFixed(3)),Number(i.toFixed(3))]},W=a=>{const e=a.media;return e?e.playbackRate:1},T=a=>(0,o.getTextTracksList)(a.media,{kind:s.TextTrackKinds.SUBTITLES}),M=a=>(0,o.getTextTracksList)(a.media,{kind:s.TextTrackKinds.CAPTIONS}),R=a=>(0,o.getTextTracksList)(a.media,{kind:s.TextTrackKinds.SUBTITLES,mode:s.TextTrackModes.SHOWING}),P=a=>(0,o.getTextTracksList)(a.media,{kind:s.TextTrackKinds.CAPTIONS,mode:s.TextTrackModes.SHOWING}),rt=Object.values(s.MediaUIAttributes),H=a=>{var i,r,n,d;let{observedAttributes:e}=a.constructor;!e&&((i=a.nodeName)==null?void 0:i.includes("-"))&&(E.Window.customElements.upgrade(a),{observedAttributes:e}=a.constructor);const t=(d=(n=(r=a==null?void 0:a.getAttribute)==null?void 0:r.call(a,s.MediaUIAttributes.MEDIA_CHROME_ATTRIBUTES))==null?void 0:n.split)==null?void 0:d.call(n,/\s+/);return Array.isArray(e||t)?(e||t).filter(A=>rt.includes(A)):[]},L=a=>!!H(a).length,nt=async(a,e,t)=>(a.isConnected||await C(0),t==null?a.removeAttribute(e):typeof t=="boolean"?t?a.setAttribute(e,""):a.removeAttribute(e):Number.isNaN(t)?a.removeAttribute(e):a.setAttribute(e,t)),Et=a=>{var e;return!!((e=a.closest)==null?void 0:e.call(a,'*[slot="media"]'))},h=(a,e)=>{if(Et(a))return;const t=(r,n)=>{var _,l;L(r)&&n(r);const{children:d=[]}=r!=null?r:{},A=(l=(_=r==null?void 0:r.shadowRoot)==null?void 0:_.children)!=null?l:[];[...d,...A].forEach(p=>h(p,n))},i=a==null?void 0:a.nodeName.toLowerCase();if(i.includes("-")&&!L(a)){E.Window.customElements.whenDefined(i).then(()=>{t(a,e)});return}t(a,e)},c=(a,e,t)=>{a.forEach(i=>{!H(i).includes(e)||nt(i,e,t)})},ot=(a,e,t)=>{h(a,e);const i=u=>{var l;const _=(l=u==null?void 0:u.composedPath()[0])!=null?l:u.target;e(_)},r=u=>{var l;const _=(l=u==null?void 0:u.composedPath()[0])!=null?l:u.target;t(_)};a.addEventListener(s.MediaUIEvents.REGISTER_MEDIA_STATE_RECEIVER,i),a.addEventListener(s.MediaUIEvents.UNREGISTER_MEDIA_STATE_RECEIVER,r);const n=(u,_)=>{u.forEach(l=>{const{addedNodes:p=[],removedNodes:X=[],type:O,target:D,attributeName:$}=l;O==="childList"?(Array.prototype.forEach.call(p,g=>h(g,e)),Array.prototype.forEach.call(X,g=>h(g,t))):O==="attributes"&&$===s.MediaUIAttributes.MEDIA_CHROME_ATTRIBUTES&&(L(D)?e(D):t(D))})},d=new MutationObserver(n);return d.observe(a,{childList:!0,attributes:!0,subtree:!0}),()=>{h(a,t),d.disconnect(),a.removeEventListener(s.MediaUIEvents.REGISTER_MEDIA_STATE_RECEIVER,i),a.removeEventListener(s.MediaUIEvents.UNREGISTER_MEDIA_STATE_RECEIVER,r)}};let f;const v=()=>{var a,e;return f||(f=(e=(a=E.Document)==null?void 0:a.createElement)==null?void 0:e.call(a,"video"),f)},Y=async(a=v())=>{if(!a)return!1;const e=a.volume;return a.volume=e/2+.1,await C(0),a.volume!==e},C=a=>new Promise((e,t)=>setTimeout(e,a)),q=(a=v())=>typeof(a==null?void 0:a.requestPictureInPicture)=="function",ct=q();let I;const dt=Y().then(a=>(I=a,I)),ut=!!E.Window.WebKitPlaybackTargetAvailabilityEvent,lt=!!E.Window.chrome;function St(a=[]){return Array.from(a).map((e,t)=>[Number(a.start(t).toFixed(3)),Number(a.end(t).toFixed(3))].join(":")).join(" ")}(0,K.defineCustomElement)("media-controller",N);var _t=N;module.exports=st(At);
+var $=Object.create;var I=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,tt=Object.prototype.hasOwnProperty;var k=a=>I(a,"__esModule",{value:!0});var et=(a,e)=>{for(var t in e)I(a,t,{get:e[t],enumerable:!0})},y=(a,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of J(e))!tt.call(a,r)&&(t||r!=="default")&&I(a,r,{get:()=>e[r],enumerable:!(s=z(e,r))||s.enumerable});return a},at=(a,e)=>y(k(I(a!=null?$(Z(a)):{},"default",!e&&a&&a.__esModule?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a),it=(a=>(e,t)=>a&&a.get(e)||(t=y(k({}),e,1),a&&a.set(e,t),t))(typeof WeakMap!="undefined"?new WeakMap:0);var St={};et(St,{default:()=>pt,delay:()=>C,getTestMediaEl:()=>L,hasPipSupport:()=>q,hasVolumeSupportAsync:()=>Y});var j=at(require("./media-container.js"),1),K=require("./utils/defineCustomElement.js"),o=require("./utils/server-safe-globals.js"),p=require("./utils/fullscreenApi.js"),b=require("./utils/stringUtils.js"),g=require("./utils/element-utils.js"),i=require("./constants.js"),E=require("./utils/captions.js");class N extends j.default{constructor(){super();dt||(this._airplayUnavailable=i.AvailabilityStates.UNSUPPORTED),ut||(this._castUnavailable=i.AvailabilityStates.UNSUPPORTED),Et||(this._pipUnavailable=i.AvailabilityStates.UNSUPPORTED),m!==void 0?m||(this._volumeUnavailable=i.AvailabilityStates.UNSUPPORTED):ct.then(()=>{m||(this._volumeUnavailable=i.AvailabilityStates.UNSUPPORTED,this.propagateMediaState(i.MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable))}),this.mediaStateReceivers=[],this.associatedElementSubscriptions=new Map,this.associatedElements=[],this.associateElement(this);const e={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const t=this.media;t.muted=!1,t.volume===0&&(t.volume=.25)},MEDIA_VOLUME_REQUEST:t=>{const s=this.media,r=t.detail;s.volume=r,r>0&&s.muted&&(s.muted=!1);try{o.Window.localStorage.setItem("media-chrome-pref-volume",r.toString())}catch{}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const t=this.media;o.Document.pictureInPictureElement&&o.Document.exitPictureInPicture(),super[p.fullscreenApi.enter]?super[p.fullscreenApi.enter]():t.webkitEnterFullscreen?t.webkitEnterFullscreen():t.requestFullscreen?t.requestFullscreen():console.warn("MediaChrome: Fullscreen not supported")},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{o.Document[p.fullscreenApi.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const t=this.media;!o.Document.pictureInPictureEnabled||(o.Document[p.fullscreenApi.element]&&o.Document[p.fullscreenApi.exit](),t.requestPictureInPicture())},MEDIA_EXIT_PIP_REQUEST:()=>{o.Document.pictureInPictureElement&&o.Document.exitPictureInPicture()},MEDIA_ENTER_CAST_REQUEST:()=>{var s;const t=this.media;!((s=globalThis.CastableVideoElement)==null?void 0:s.castEnabled)||(o.Document[p.fullscreenApi.element]&&o.Document[p.fullscreenApi.exit](),t.requestCast())},MEDIA_EXIT_CAST_REQUEST:async()=>{var t;((t=globalThis.CastableVideoElement)==null?void 0:t.castElement)&&globalThis.CastableVideoElement.exitCast()},MEDIA_SEEK_REQUEST:t=>{const s=this.media,r=t.detail;(s.readyState>0||s.readyState===void 0)&&(s.currentTime=r)},MEDIA_PLAYBACK_RATE_REQUEST:t=>{this.media.playbackRate=t.detail},MEDIA_PREVIEW_REQUEST:t=>{var l;const s=this.media;if(!s)return;const r=t.detail;r===null&&this.propagateMediaState(i.MediaUIAttributes.MEDIA_PREVIEW_TIME,void 0),this.propagateMediaState(i.MediaUIAttributes.MEDIA_PREVIEW_TIME,r);const[n]=(0,E.getTextTracksList)(s,{kind:i.TextTrackKinds.METADATA,label:"thumbnails"});if(!(n&&n.cues))return;if(r===null){this.propagateMediaState(i.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,void 0),this.propagateMediaState(i.MediaUIAttributes.MEDIA_PREVIEW_COORDS,void 0);return}const d=Array.prototype.find.call(n.cues,A=>A.startTime>=r);if(!d)return;const h=/'^(?:[a-z]+:)?\/\//i.test(d.text)||(l=s.querySelector('track[label="thumbnails"]'))==null?void 0:l.src,u=new URL(d.text,h),S=new URLSearchParams(u.hash).get("#xywh");this.propagateMediaState(i.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,u.href),this.propagateMediaState(i.MediaUIAttributes.MEDIA_PREVIEW_COORDS,S.split(",").join(" "))},MEDIA_SHOW_CAPTIONS_REQUEST:t=>{const s=T(this),{detail:r=[]}=t;(0,E.updateTracksModeTo)(i.TextTrackModes.SHOWING,s,r)},MEDIA_DISABLE_CAPTIONS_REQUEST:t=>{const s=T(this),{detail:r=[]}=t;(0,E.updateTracksModeTo)(i.TextTrackModes.DISABLED,s,r)},MEDIA_SHOW_SUBTITLES_REQUEST:t=>{const s=M(this),{detail:r=[]}=t;(0,E.updateTracksModeTo)(i.TextTrackModes.SHOWING,s,r)},MEDIA_DISABLE_SUBTITLES_REQUEST:t=>{const s=M(this),{detail:r=[]}=t;(0,E.updateTracksModeTo)(i.TextTrackModes.DISABLED,s,r)},MEDIA_AIRPLAY_REQUEST:()=>{const{media:t}=this;if(!!t){if(!(t.webkitShowPlaybackTargetPicker&&o.Window.WebKitPlaybackTargetAvailabilityEvent)){console.warn("received a request to select AirPlay but AirPlay is not supported in this environment");return}t.webkitShowPlaybackTargetPicker()}}};if(Object.keys(e).forEach(t=>{const s=`_handle${(0,b.constToCamel)(t,!0)}`;this[s]=r=>{if(r.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}e[t](r,this.media)},this.addEventListener(i.MediaUIEvents[t],this[s])}),this._mediaStatePropagators={"play,pause,emptied":()=>{this.propagateMediaState(i.MediaUIAttributes.MEDIA_PAUSED,x(this))},"playing,emptied":()=>{var t;this.propagateMediaState(i.MediaUIAttributes.MEDIA_HAS_PLAYED,!((t=this.media)==null?void 0:t.paused))},volumechange:()=>{this.propagateMediaState(i.MediaUIAttributes.MEDIA_MUTED,V(this)),this.propagateMediaState(i.MediaUIAttributes.MEDIA_VOLUME,w(this)),this.propagateMediaState(i.MediaUIAttributes.MEDIA_VOLUME_LEVEL,B(this))},[p.fullscreenApi.event]:t=>{const r=!!o.Document[p.fullscreenApi.element]&&(t==null?void 0:t.target),n=(0,g.containsComposedNode)(this,r);this.propagateMediaState(i.MediaUIAttributes.MEDIA_IS_FULLSCREEN,n)},"enterpictureinpicture,leavepictureinpicture":t=>{var r;let s;if(t)s=t.type=="enterpictureinpicture";else{const n=(r=this.getRootNode().pictureInPictureElement)!=null?r:o.Document.pictureInPictureElement;s=this.media&&(0,g.containsComposedNode)(this.media,n)}this.propagateMediaState(i.MediaUIAttributes.MEDIA_IS_PIP,s)},"entercast,leavecast,castchange":t=>{var n;const s=(n=globalThis.CastableVideoElement)==null?void 0:n.castElement;let r=this.media&&(0,g.containsComposedNode)(this.media,s);(t==null?void 0:t.type)==="castchange"&&(t==null?void 0:t.detail)==="CONNECTING"&&(r="connecting"),this.propagateMediaState(i.MediaUIAttributes.MEDIA_IS_CASTING,r)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState(i.MediaUIAttributes.MEDIA_CURRENT_TIME,F(this))},"durationchange,loadedmetadata,emptied":()=>{this.propagateMediaState(i.MediaUIAttributes.MEDIA_DURATION,W(this))},"loadedmetadata,emptied,progress":()=>{var t;this.propagateMediaState(i.MediaUIAttributes.MEDIA_SEEKABLE,(t=G(this))==null?void 0:t.join(":"))},"progress,emptied":()=>{var t;this.propagateMediaState(i.MediaUIAttributes.MEDIA_BUFFERED,lt((t=this.media)==null?void 0:t.buffered))},"ratechange,loadstart":()=>{this.propagateMediaState(i.MediaUIAttributes.MEDIA_PLAYBACK_RATE,H(this))},"waiting,playing,emptied":()=>{var s;const t=((s=this.media)==null?void 0:s.readyState)<3;this.propagateMediaState(i.MediaUIAttributes.MEDIA_LOADING,t)}},this._airplayUnavailable!==i.AvailabilityStates.UNSUPPORTED){const t=s=>{(s==null?void 0:s.availability)==="available"?this._airplayUnavailable=void 0:(s==null?void 0:s.availability)==="not-available"&&(this._airplayUnavailable=i.AvailabilityStates.UNAVAILABLE),this.propagateMediaState(i.MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable)};this._mediaStatePropagators.webkitplaybacktargetavailabilitychanged=t}if(this._castUnavailable!==i.AvailabilityStates.UNSUPPORTED){const t=()=>{var r;const s=(r=globalThis.CastableVideoElement)==null?void 0:r.castState;(s==null?void 0:s.includes("CONNECT"))?this._castUnavailable=void 0:this._castUnavailable=i.AvailabilityStates.UNAVAILABLE,this.propagateMediaState(i.MediaUIAttributes.MEDIA_CAST_UNAVAILABLE,this._castUnavailable)};this._mediaStatePropagators.castchange=t}this._textTrackMediaStatePropagators={"addtrack,removetrack,loadstart":()=>{this.propagateMediaState(i.MediaUIAttributes.MEDIA_CAPTIONS_LIST,(0,E.stringifyTextTrackList)(T(this))||void 0),this.propagateMediaState(i.MediaUIAttributes.MEDIA_SUBTITLES_LIST,(0,E.stringifyTextTrackList)(M(this))||void 0),this.propagateMediaState(i.MediaUIAttributes.MEDIA_CAPTIONS_SHOWING,(0,E.stringifyTextTrackList)(P(this))||void 0),this.propagateMediaState(i.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING,(0,E.stringifyTextTrackList)(R(this))||void 0)},change:()=>{this.propagateMediaState(i.MediaUIAttributes.MEDIA_CAPTIONS_SHOWING,(0,E.stringifyTextTrackList)(P(this))||void 0),this.propagateMediaState(i.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING,(0,E.stringifyTextTrackList)(R(this))||void 0)}}}mediaSetCallback(e){super.mediaSetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const s=t.split(","),r=this._mediaStatePropagators[t];s.forEach(n=>{(n==p.fullscreenApi.event?this.getRootNode():e).addEventListener(n,r)}),r()}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,s])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.addEventListener(n,s)}),s()});try{const t=o.Window.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){console.debug("Error getting volume pref",t)}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const s=t.split(","),r=this._mediaStatePropagators[t];s.forEach(n=>{(n==p.fullscreenApi.event?this.getRootNode():e).removeEventListener(n,r)})}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,s])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.removeEventListener(n,s)}),s()}),this.propagateMediaState(i.MediaUIAttributes.MEDIA_PAUSED,!0)}propagateMediaState(e,t){c(this.mediaStateReceivers,e,t);const s=new o.Window.CustomEvent(i.AttributeToStateChangeEventMap[e],{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(s)}associateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(t.has(e))return;const s=this.registerMediaStateReceiver.bind(this),r=this.unregisterMediaStateReceiver.bind(this),n=ot(e,s,r);Object.keys(i.MediaUIEvents).forEach(d=>{e.addEventListener(i.MediaUIEvents[d],this[`_handle${(0,b.constToCamel)(d,!0)}`])}),t.set(e,n)}unassociateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(!t.has(e))return;t.get(e)(),t.delete(e),Object.keys(i.MediaUIEvents).forEach(r=>{e.removeEventListener(i.MediaUIEvents[r],this[`_handle${(0,b.constToCamel)(r,!0)}`])})}registerMediaStateReceiver(e){var r;if(!e)return;const t=this.mediaStateReceivers;t.indexOf(e)>-1||(t.push(e),c([e],i.MediaUIAttributes.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable),c([e],i.MediaUIAttributes.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable),c([e],i.MediaUIAttributes.MEDIA_CAST_UNAVAILABLE,this._castUnavailable),c([e],i.MediaUIAttributes.MEDIA_PIP_UNAVAILABLE,this._pipUnavailable),this.media&&(c([e],i.MediaUIAttributes.MEDIA_CAPTIONS_LIST,(0,E.stringifyTextTrackList)(T(this))||void 0),c([e],i.MediaUIAttributes.MEDIA_SUBTITLES_LIST,(0,E.stringifyTextTrackList)(M(this))||void 0),c([e],i.MediaUIAttributes.MEDIA_CAPTIONS_SHOWING,(0,E.stringifyTextTrackList)(P(this))||void 0),c([e],i.MediaUIAttributes.MEDIA_SUBTITLES_SHOWING,(0,E.stringifyTextTrackList)(R(this))||void 0),c([e],i.MediaUIAttributes.MEDIA_PAUSED,x(this)),c([e],i.MediaUIAttributes.MEDIA_MUTED,V(this)),c([e],i.MediaUIAttributes.MEDIA_VOLUME,w(this)),c([e],i.MediaUIAttributes.MEDIA_VOLUME_LEVEL,B(this)),c([e],i.MediaUIAttributes.MEDIA_IS_FULLSCREEN,this.hasAttribute(i.MediaUIAttributes.MEDIA_IS_FULLSCREEN)),c([e],i.MediaUIAttributes.MEDIA_IS_CASTING,this.hasAttribute(i.MediaUIAttributes.MEDIA_IS_CASTING)),c([e],i.MediaUIAttributes.MEDIA_CURRENT_TIME,F(this)),c([e],i.MediaUIAttributes.MEDIA_DURATION,W(this)),c([e],i.MediaUIAttributes.MEDIA_SEEKABLE,(r=G(this))==null?void 0:r.join(":")),c([e],i.MediaUIAttributes.MEDIA_PLAYBACK_RATE,H(this))))}unregisterMediaStateReceiver(e){const t=this.mediaStateReceivers,s=t.indexOf(e);s<0||t.splice(s,1)}}const x=a=>a.media?a.media.paused:!0,V=a=>!!(a.media&&a.media.muted),w=a=>{const e=a.media;return e?e.volume:1},B=a=>{let e="high";if(!a.media)return e;const{muted:t,volume:s}=a.media;return s===0||t?e="off":s<.5?e="low":s<.75&&(e="medium"),e},F=a=>{const e=a.media;return e?e.currentTime:0},W=a=>{const e=a==null?void 0:a.media;return Number.isFinite(e==null?void 0:e.duration)?e.duration:NaN},G=a=>{var r;const e=a==null?void 0:a.media;if(!((r=e==null?void 0:e.seekable)==null?void 0:r.length))return;const t=e.seekable.start(0),s=e.seekable.end(e.seekable.length-1);if(!(!t&&!s))return[Number(t.toFixed(3)),Number(s.toFixed(3))]},H=a=>{const e=a.media;return e?e.playbackRate:1},M=a=>(0,E.getTextTracksList)(a.media,{kind:i.TextTrackKinds.SUBTITLES}),T=a=>(0,E.getTextTracksList)(a.media,{kind:i.TextTrackKinds.CAPTIONS}),R=a=>(0,E.getTextTracksList)(a.media,{kind:i.TextTrackKinds.SUBTITLES,mode:i.TextTrackModes.SHOWING}),P=a=>(0,E.getTextTracksList)(a.media,{kind:i.TextTrackKinds.CAPTIONS,mode:i.TextTrackModes.SHOWING}),st=Object.values(i.MediaUIAttributes),Q=a=>{var s,r,n,d;let{observedAttributes:e}=a.constructor;!e&&((s=a.nodeName)==null?void 0:s.includes("-"))&&(o.Window.customElements.upgrade(a),{observedAttributes:e}=a.constructor);const t=(d=(n=(r=a==null?void 0:a.getAttribute)==null?void 0:r.call(a,i.MediaUIAttributes.MEDIA_CHROME_ATTRIBUTES))==null?void 0:n.split)==null?void 0:d.call(n,/\s+/);return Array.isArray(e||t)?(e||t).filter(h=>st.includes(h)):[]},v=a=>!!Q(a).length,rt=async(a,e,t)=>(a.isConnected||await C(0),t==null?a.removeAttribute(e):typeof t=="boolean"?t?a.setAttribute(e,""):a.removeAttribute(e):Number.isNaN(t)?a.removeAttribute(e):a.setAttribute(e,t)),nt=a=>{var e;return!!((e=a.closest)==null?void 0:e.call(a,'*[slot="media"]'))},_=(a,e)=>{if(nt(a))return;const t=(r,n)=>{var S,l;v(r)&&n(r);const{children:d=[]}=r!=null?r:{},h=(l=(S=r==null?void 0:r.shadowRoot)==null?void 0:S.children)!=null?l:[];[...d,...h].forEach(A=>_(A,n))},s=a==null?void 0:a.nodeName.toLowerCase();if(s.includes("-")&&!v(a)){o.Window.customElements.whenDefined(s).then(()=>{t(a,e)});return}t(a,e)},c=(a,e,t)=>{a.forEach(s=>{!Q(s).includes(e)||rt(s,e,t)})},ot=(a,e,t)=>{_(a,e);const s=u=>{var l;const S=(l=u==null?void 0:u.composedPath()[0])!=null?l:u.target;e(S)},r=u=>{var l;const S=(l=u==null?void 0:u.composedPath()[0])!=null?l:u.target;t(S)};a.addEventListener(i.MediaUIEvents.REGISTER_MEDIA_STATE_RECEIVER,s),a.addEventListener(i.MediaUIEvents.UNREGISTER_MEDIA_STATE_RECEIVER,r);const n=u=>{u.forEach(S=>{const{addedNodes:l=[],removedNodes:A=[],type:O,target:U,attributeName:X}=S;O==="childList"?(Array.prototype.forEach.call(l,D=>_(D,e)),Array.prototype.forEach.call(A,D=>_(D,t))):O==="attributes"&&X===i.MediaUIAttributes.MEDIA_CHROME_ATTRIBUTES&&(v(U)?e(U):t(U))})},d=new MutationObserver(n);return d.observe(a,{childList:!0,attributes:!0,subtree:!0}),()=>{_(a,t),d.disconnect(),a.removeEventListener(i.MediaUIEvents.REGISTER_MEDIA_STATE_RECEIVER,s),a.removeEventListener(i.MediaUIEvents.UNREGISTER_MEDIA_STATE_RECEIVER,r)}};let f;const L=()=>{var a,e;return f||(f=(e=(a=o.Document)==null?void 0:a.createElement)==null?void 0:e.call(a,"video"),f)},Y=async(a=L())=>{if(!a)return!1;const e=a.volume;return a.volume=e/2+.1,await C(0),a.volume!==e},C=a=>new Promise(e=>setTimeout(e,a)),q=(a=L())=>typeof(a==null?void 0:a.requestPictureInPicture)=="function",Et=q();let m;const ct=Y().then(a=>(m=a,m)),dt=!!o.Window.WebKitPlaybackTargetAvailabilityEvent,ut=!!o.Window.chrome;function lt(a=[]){return Array.from(a).map((e,t)=>[Number(a.start(t).toFixed(3)),Number(a.end(t).toFixed(3))].join(":")).join(" ")}(0,K.defineCustomElement)("media-controller",N);var pt=N;module.exports=it(St);
 //# sourceMappingURL=media-controller.js.map

dist/cjs/media-gesture-receiver.js

@@ -1,2 +0,2 @@
-var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var b=s=>r(s,"__esModule",{value:!0});var A=(s,t)=>{for(var e in t)r(s,e,{get:t[e],enumerable:!0})},M=(s,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!T.call(s,o)&&(e||o!=="default")&&r(s,o,{get:()=>t[o],enumerable:!(n=l(t,o))||n.enumerable});return s};var f=(s=>(t,e)=>s&&s.get(t)||(e=M(b({}),t,1),s&&s.set(t,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var _={};A(_,{default:()=>I});var a=require("./constants.js"),E=require("./utils/defineCustomElement.js"),c=require("./utils/server-safe-globals.js");const u=c.Document.createElement("template");u.innerHTML=`
+var h=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var l=i=>h(i,"__esModule",{value:!0});var A=(i,t)=>{for(var n in t)h(i,n,{get:t[n],enumerable:!0})},M=(i,t,n,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!m.call(i,o)&&(n||o!=="default")&&h(i,o,{get:()=>t[o],enumerable:!(e=T(t,o))||e.enumerable});return i};var f=(i=>(t,n)=>i&&i.get(t)||(n=M(l({}),t,1),i&&i.set(t,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var L={};A(L,{default:()=>I});var a=require("./constants.js"),E=require("./utils/defineCustomElement.js"),c=require("./utils/server-safe-globals.js");const p=c.Document.createElement("template");p.innerHTML=`
 <style>
@@ -12,3 +12,3 @@ :host {
 </style>
-`;class p extends c.Window.HTMLElement{static get observedAttributes(){return[a.MediaUIAttributes.MEDIA_CONTROLLER,a.MediaUIAttributes.MEDIA_PAUSED]}constructor(t={}){super();const e=this.attachShadow({mode:"open"}),n=u.content.cloneNode(!0);this.nativeEl=n;let o=t.slotTemplate;o||(o=c.Document.createElement("template"),o.innerHTML=`<slot>${t.defaultContent||""}</slot>`),this.nativeEl.appendChild(o.content.cloneNode(!0)),e.appendChild(n),this._pointerType=void 0;const d=i=>{this._pointerType=i.pointerType};this.addEventListener("pointerdown",d),this.addEventListener("click",i=>{const{pointerType:h=this._pointerType}=i;if(this._pointerType=void 0,h===a.PointerTypes.TOUCH){this.handleTap(i);return}else if(h===a.PointerTypes.MOUSE){this.handleMouseClick(i);return}})}attributeChangedCallback(t,e,n){var o,d;if(t===a.MediaUIAttributes.MEDIA_CONTROLLER){if(e){const i=c.Document.getElementById(e);(o=i==null?void 0:i.unassociateElement)==null||o.call(i,this)}if(n){const i=c.Document.getElementById(n);(d=i==null?void 0:i.associateElement)==null||d.call(i,this)}}}connectedCallback(){var e;this.setAttribute("tabindex",-1),this.setAttribute("aria-hidden",!0);const t=this.getAttribute(a.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const n=c.Document.getElementById(t);(e=n==null?void 0:n.associateElement)==null||e.call(n,this)}}disconnectedCallback(){var e;if(this.getAttribute(a.MediaUIAttributes.MEDIA_CONTROLLER)){const n=c.Document.getElementById(mediaControllerId);(e=n==null?void 0:n.unassociateElement)==null||e.call(n,this)}}handleTap(t){}handleMouseClick(t){const e=this.getAttribute(a.MediaUIAttributes.MEDIA_PAUSED)!=null?a.MediaUIEvents.MEDIA_PLAY_REQUEST:a.MediaUIEvents.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new c.Window.CustomEvent(e,{composed:!0,bubbles:!0}))}}(0,E.defineCustomElement)("media-gesture-receiver",p);var I=p;module.exports=f(_);
+`;class r extends c.Window.HTMLElement{static get observedAttributes(){return[a.MediaUIAttributes.MEDIA_CONTROLLER,a.MediaUIAttributes.MEDIA_PAUSED]}constructor(t={}){super();const n=this.attachShadow({mode:"open"}),e=p.content.cloneNode(!0);this.nativeEl=e;let o=t.slotTemplate;o||(o=c.Document.createElement("template"),o.innerHTML=`<slot>${t.defaultContent||""}</slot>`),this.nativeEl.appendChild(o.content.cloneNode(!0)),n.appendChild(e),this._pointerType=void 0;const d=s=>{this._pointerType=s.pointerType};this.addEventListener("pointerdown",d),this.addEventListener("click",s=>{const{pointerType:u=this._pointerType}=s;if(this._pointerType=void 0,u===a.PointerTypes.TOUCH){this.handleTap(s);return}else if(u===a.PointerTypes.MOUSE){this.handleMouseClick(s);return}})}attributeChangedCallback(t,n,e){var o,d;if(t===a.MediaUIAttributes.MEDIA_CONTROLLER){if(n){const s=c.Document.getElementById(n);(o=s==null?void 0:s.unassociateElement)==null||o.call(s,this)}if(e){const s=c.Document.getElementById(e);(d=s==null?void 0:s.associateElement)==null||d.call(s,this)}}}connectedCallback(){var n;this.setAttribute("tabindex",-1),this.setAttribute("aria-hidden",!0);const t=this.getAttribute(a.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const e=c.Document.getElementById(t);(n=e==null?void 0:e.associateElement)==null||n.call(e,this)}}disconnectedCallback(){var n;const t=this.getAttribute(a.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const e=c.Document.getElementById(t);(n=e==null?void 0:e.unassociateElement)==null||n.call(e,this)}}handleTap(){}handleMouseClick(){const t=this.getAttribute(a.MediaUIAttributes.MEDIA_PAUSED)!=null?a.MediaUIEvents.MEDIA_PLAY_REQUEST:a.MediaUIEvents.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new c.Window.CustomEvent(t,{composed:!0,bubbles:!0}))}}(0,E.defineCustomElement)("media-gesture-receiver",r);var I=r;module.exports=f(L);
 //# sourceMappingURL=media-gesture-receiver.js.map

dist/cjs/media-settings-popup.js

@@ -1,2 +0,2 @@
-var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var s=m=>n(m,"__esModule",{value:!0});var p=(m,e)=>{for(var o in e)n(m,o,{get:e[o],enumerable:!0})},b=(m,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of l(e))!h.call(m,t)&&(o||t!=="default")&&n(m,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return m};var w=(m=>(e,o)=>m&&m.get(e)||(o=b(s({}),e,1),m&&m.set(e,o),o))(typeof WeakMap!="undefined"?new WeakMap:0);var g={};p(g,{default:()=>x});var r=require("./utils/defineCustomElement.js"),i=require("./utils/server-safe-globals.js");const d=i.Document.createElement("template");d.innerHTML=`
+var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var s=e=>n(e,"__esModule",{value:!0});var p=(e,m)=>{for(var o in m)n(e,o,{get:m[o],enumerable:!0})},b=(e,m,o,a)=>{if(m&&typeof m=="object"||typeof m=="function")for(let t of l(m))!h.call(e,t)&&(o||t!=="default")&&n(e,t,{get:()=>m[t],enumerable:!(a=u(m,t))||a.enumerable});return e};var x=(e=>(m,o)=>e&&e.get(m)||(o=b(s({}),m,1),e&&e.set(m,o),o))(typeof WeakMap!="undefined"?new WeakMap:0);var w={};p(w,{default:()=>g});var r=require("./utils/defineCustomElement.js"),i=require("./utils/server-safe-globals.js");const d=i.Document.createElement("template");d.innerHTML=`
   <style>
@@ -33,3 +33,3 @@ :host {
   </media-chrome-menu>
-`;class c extends i.Window.HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(d.content.cloneNode(!0))}}(0,r.defineCustomElement)("media-settings-popup",c);var x=c;module.exports=w(g);
+`;class c extends i.Window.HTMLElement{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(d.content.cloneNode(!0))}}(0,r.defineCustomElement)("media-settings-popup",c);var g=c;module.exports=x(w);
 //# sourceMappingURL=media-settings-popup.js.map

dist/cjs/media-text-display.js

@@ -1,2 +0,2 @@
-var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var m=n=>r(n,"__esModule",{value:!0});var b=(n,t)=>{for(var e in t)r(n,e,{get:t[e],enumerable:!0})},y=(n,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of p(t))!l.call(n,o)&&(e||o!=="default")&&r(n,o,{get:()=>t[o],enumerable:!(s=g(t,o))||s.enumerable});return n};var x=(n=>(t,e)=>n&&n.get(t)||(e=y(m({}),t,1),n&&n.set(t,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var I={};b(I,{default:()=>w});var c=require("./constants.js"),f=require("./utils/defineCustomElement.js"),a=require("./utils/server-safe-globals.js");const h=a.Document.createElement("template");h.innerHTML=`
+var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var m=n=>r(n,"__esModule",{value:!0});var l=(n,t)=>{for(var e in t)r(n,e,{get:t[e],enumerable:!0})},y=(n,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of p(t))!b.call(n,o)&&(e||o!=="default")&&r(n,o,{get:()=>t[o],enumerable:!(s=g(t,o))||s.enumerable});return n};var x=(n=>(t,e)=>n&&n.get(t)||(e=y(m({}),t,1),n&&n.set(t,e),e))(typeof WeakMap!="undefined"?new WeakMap:0);var I={};l(I,{default:()=>w});var c=require("./constants.js"),f=require("./utils/defineCustomElement.js"),a=require("./utils/server-safe-globals.js");const d=a.Document.createElement("template");d.innerHTML=`
   <style>
@@ -44,3 +44,3 @@ :host {
   </span>
-`;class u extends a.Window.HTMLElement{static get observedAttributes(){return[c.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(h.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}attributeChangedCallback(t,e,s){var o,d;if(t===c.MediaUIAttributes.MEDIA_CONTROLLER){if(e){const i=a.Document.getElementById(e);(o=i==null?void 0:i.unassociateElement)==null||o.call(i,this)}if(s){const i=a.Document.getElementById(s);(d=i==null?void 0:i.associateElement)==null||d.call(i,this)}}}connectedCallback(){var e;const t=this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const s=a.Document.getElementById(t);(e=s==null?void 0:s.associateElement)==null||e.call(s,this)}}disconnectedCallback(){var e;if(this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER)){const s=a.Document.getElementById(mediaControllerId);(e=s==null?void 0:s.unassociateElement)==null||e.call(s,this)}}}(0,f.defineCustomElement)("media-text-display",u);var w=u;module.exports=x(I);
+`;class u extends a.Window.HTMLElement{static get observedAttributes(){return[c.MediaUIAttributes.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(d.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}attributeChangedCallback(t,e,s){var o,h;if(t===c.MediaUIAttributes.MEDIA_CONTROLLER){if(e){const i=a.Document.getElementById(e);(o=i==null?void 0:i.unassociateElement)==null||o.call(i,this)}if(s){const i=a.Document.getElementById(s);(h=i==null?void 0:i.associateElement)==null||h.call(i,this)}}}connectedCallback(){var e;const t=this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const s=a.Document.getElementById(t);(e=s==null?void 0:s.associateElement)==null||e.call(s,this)}}disconnectedCallback(){var e;const t=this.getAttribute(c.MediaUIAttributes.MEDIA_CONTROLLER);if(t){const s=a.Document.getElementById(t);(e=s==null?void 0:s.unassociateElement)==null||e.call(s,this)}}}(0,f.defineCustomElement)("media-text-display",u);var w=u;module.exports=x(I);
 //# sourceMappingURL=media-text-display.js.map

dist/cjs/media-time-range.js

@@ -1,7 +0,23 @@
-var W=Object.create;var c=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var x=i=>c(i,"__esModule",{value:!0});var K=(i,e)=>{for(var t in e)c(i,t,{get:e[t],enumerable:!0})},R=(i,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of H(e))!O.call(i,a)&&(t||a!=="default")&&c(i,a,{get:()=>e[a],enumerable:!(n=F(e,a))||n.enumerable});return i},q=(i,e)=>R(x(c(i!=null?W($(i)):{},"default",!e&&i&&i.__esModule?{get:()=>i.default,enumerable:!0}:{value:i,enumerable:!0})),i),G=(i=>(e,t)=>i&&i.get(e)||(t=R(x({}),e,1),i&&i.set(e,t),t))(typeof WeakMap!="undefined"?new WeakMap:0);var J={};K(J,{default:()=>X});var C=q(require("./media-chrome-range.js"),1),_=require("./utils/defineCustomElement.js"),s=require("./utils/server-safe-globals.js"),r=require("./constants.js"),S=require("./labels/labels.js"),g=require("./utils/time.js");const Q="video not loaded, unknown time.",f=i=>{const e=i.range,t=(0,g.formatAsTimePhrase)(+e.value),n=(0,g.formatAsTimePhrase)(+e.max),a=t&&n?`${t} of ${n}`:Q;e.setAttribute("aria-valuetext",a)},T=s.Document.createElement("template");T.innerHTML=`
+var P=Object.create;var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var A=i=>c(i,"__esModule",{value:!0});var V=(i,e)=>{for(var t in e)c(i,t,{get:e[t],enumerable:!0})},I=(i,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of S(e))!U.call(i,n)&&(t||n!=="default")&&c(i,n,{get:()=>e[n],enumerable:!(a=T(e,n))||a.enumerable});return i},W=(i,e)=>I(A(c(i!=null?P(k(i)):{},"default",!e&&i&&i.__esModule?{get:()=>i.default,enumerable:!0}:{value:i,enumerable:!0})),i),F=(i=>(e,t)=>i&&i.get(e)||(t=I(A({}),e,1),i&&i.set(e,t),t))(typeof WeakMap!="undefined"?new WeakMap:0);var G={};V(G,{default:()=>$});var D=W(require("./media-chrome-range.js"),1),y=require("./utils/defineCustomElement.js"),d=require("./utils/server-safe-globals.js"),r=require("./constants.js"),B=require("./labels/labels.js"),f=require("./utils/time.js"),w=require("./utils/element-utils.js");const L="video not loaded, unknown time.",g=i=>{const e=i.range,t=(0,f.formatAsTimePhrase)(+e.value),a=(0,f.formatAsTimePhrase)(+e.max),n=t&&a?`${t} of ${a}`:L;e.setAttribute("aria-valuetext",n)},M=d.Document.createElement("template");M.innerHTML=`
   <style>
-    #thumbnailContainer {
+    :host {
+      --media-preview-background-color: rgba(20,20,30, .5);
+      --media-preview-background: var(--media-control-background,
+        var(--media-preview-background-color));
+      --media-preview-border-radius: 3px;
+      --media-box-padding-left: 10px;
+      --media-box-padding-right: 10px;
+      color: #fff;
+    }
+
+    [part~="box"] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       position: absolute;
       left: 0;
-      top: 0;
+      bottom: 100%;
+    }
+
+    [part~="preview-box"] {
       transition: visibility .25s, opacity .25s;
@@ -12,35 +28,48 @@ visibility: hidden;
 
-    media-thumbnail-preview {
-      --thumb-preview-min-width: var(--media-thumbnail-preview-min-width, 120px);
-      --thumb-preview-max-width: var(--media-thumbnail-preview-max-width, 180px);
-      --thumb-preview-min-height: var(--media-thumbnail-preview-min-height, 80px);
-      --thumb-preview-max-height: var(--media-thumbnail-preview-max-height, 160px);
-      --thumb-preview-border: 2px solid #fff;
-      transform-origin: 50% 100%;
-      position: absolute;
-      bottom: calc(100% + 5px);
-      border: var(--media-thumbnail-preview-border, var(--thumb-preview-border, 2px solid #fff));
-      border-radius: var(--media-thumbnail-preview-border-radius, 2px);
-      background-color: #000;
+    media-preview-thumbnail,
+    ::slotted(media-preview-thumbnail) {
+      visibility: hidden;
+      transition: visibility 0s .25s;
+      background: var(--media-preview-time-background, var(--media-preview-background));
+      box-shadow: var(--media-preview-thumbnail-box-shadow, 0 0 4px rgba(0,0,0, .2));
+      max-width: var(--media-preview-thumbnail-max-width, 180px);
+      max-height: var(--media-preview-thumbnail-max-height, 160px);
+      min-width: var(--media-preview-thumbnail-min-width, 120px);
+      min-height: var(--media-preview-thumbnail-min-height, 80px);
+      border: var(--media-preview-thumbnail-border);
+      border-radius: var(--media-preview-thumbnail-border-radius,
+        var(--media-preview-border-radius) var(--media-preview-border-radius) 0 0);
     }
 
-    /*
-      This is a downward triangle. Commented out for now because it would also
-      require scaling the px properties below in JS; bottom and border-width.
-    */
-    /* media-thumbnail-preview::after {
-      content: "";
-      display: block;
-      width: 0;
-      height: 0;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: -10px;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-top: 10px solid #fff;
-    } */
+    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]:hover) media-preview-thumbnail,
+    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]:hover) ::slotted(media-preview-thumbnail) {
+      transition-delay: 0s;
+      visibility: visible;
+    }
 
-    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]:hover) #thumbnailContainer {
+    media-preview-time-display,
+    ::slotted(media-preview-time-display) {
+      color: unset;
+      min-width: 0;
+      /* delay changing these CSS props until the preview box transition is ended */
+      transition: min-width 0s .25s, border-radius 0s .25s;
+      background: var(--media-preview-time-background, var(--media-preview-background));
+      border-radius: var(--media-preview-time-border-radius,
+        var(--media-preview-border-radius) var(--media-preview-border-radius)
+        var(--media-preview-border-radius) var(--media-preview-border-radius));
+      padding: var(--media-preview-time-padding, 1px 10px 0);
+      margin: var(--media-preview-time-margin, 0 0 10px);
+      text-shadow: var(--media-preview-time-text-shadow, 0 0 4px rgba(0,0,0, .75));
+    }
+
+    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]) media-preview-time-display,
+    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]) ::slotted(media-preview-time-display) {
+      transition-delay: 0s;
+      min-width: 100%;
+      border-radius: var(--media-preview-time-border-radius,
+        0 0 var(--media-preview-border-radius) var(--media-preview-border-radius));
+    }
+
+    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE}]:hover) [part~="preview-box"],
+    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_TIME}]:hover) [part~="preview-box"] {
       transition: visibility .5s, opacity .5s;
@@ -50,7 +79,20 @@ visibility: visible;
     }
+
+    :host([${r.MediaUIAttributes.MEDIA_PREVIEW_TIME}]:hover) {
+      --media-time-range-hover-display: block;
+    }
   </style>
-  <div id="thumbnailContainer">
-    <media-thumbnail-preview></media-thumbnail-preview>
-  </div>
-`;class D extends C.default{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",r.MediaUIAttributes.MEDIA_DURATION,r.MediaUIAttributes.MEDIA_SEEKABLE,r.MediaUIAttributes.MEDIA_CURRENT_TIME,r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,r.MediaUIAttributes.MEDIA_BUFFERED]}constructor(){super();this.shadowRoot.appendChild(T.content.cloneNode(!0)),this.range.addEventListener("input",()=>{const t=this.range.value,n=new s.Window.CustomEvent(r.MediaUIEvents.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(n)}),this.enableThumbnails()}connectedCallback(){this.range.setAttribute("aria-label",S.nouns.SEEK()),super.connectedCallback()}attributeChangedCallback(e,t,n){var a,d,h,u,m;e===r.MediaUIAttributes.MEDIA_CURRENT_TIME&&(this.range.value=this.mediaCurrentTime,f(this),this.updateBar()),e===r.MediaUIAttributes.MEDIA_DURATION&&(this.range.max=Math.floor((d=(a=this.mediaSeekableEnd)!=null?a:this.mediaDuration)!=null?d:1e3),f(this),this.updateBar()),e===r.MediaUIAttributes.MEDIA_SEEKABLE&&(this.range.min=(h=this.mediaSeekableStart)!=null?h:0,this.range.max=Math.floor((m=(u=this.mediaSeekableEnd)!=null?u:this.mediaDuration)!=null?m:1e3),f(this),this.updateBar()),e===r.MediaUIAttributes.MEDIA_BUFFERED&&this.updateBar(),super.attributeChangedCallback(e,t,n)}get mediaDuration(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_DURATION);return e!=null?+e:void 0}get mediaCurrentTime(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_CURRENT_TIME);return e!=null?+e:void 0}get mediaBuffered(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_BUFFERED);return e?e.split(" ").map(t=>t.split(":").map(n=>+n)):[]}get mediaSeekable(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_SEEKABLE);if(!!e)return e.split(":").map(t=>+t)}get mediaSeekableEnd(){var t;const[,e]=(t=this.mediaSeekable)!=null?t:[];return e}get mediaSeekableStart(){var t;const[e]=(t=this.mediaSeekable)!=null?t:[];return e}getBarColors(){var o;let e=super.getBarColors();const{range:t}=this,n=this.mediaCurrentTime,a=t.max-t.min,d=this.mediaBuffered;if(!d.length||!Number.isFinite(a)||a<=0)return e;const[,h=t.min]=(o=d.find(([l,w])=>l<=n&&n<=w))!=null?o:[],m=(h-t.min)/a*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",m]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let t;const n=()=>{t=u=>{const m=+this.getAttribute(r.MediaUIAttributes.MEDIA_DURATION);if(!m)return;const o=this.range.getBoundingClientRect();let l=(u.clientX-o.left)/o.width;l=Math.max(0,Math.min(1,l));const P=o.left-this.getBoundingClientRect().left+l*o.width,b=getComputedStyle(this.thumbnailPreview),y=parseInt(b.getPropertyValue("--thumb-preview-min-width")),B=parseInt(b.getPropertyValue("--thumb-preview-max-width")),k=parseInt(b.getPropertyValue("--thumb-preview-min-height")),U=parseInt(b.getPropertyValue("--thumb-preview-max-height")),{clientWidth:E,clientHeight:M}=this.thumbnailPreview,A=Math.min(B/E,U/M),I=Math.max(y/E,k/M),L=P-E/2,v=A<1?A:I>1?I:1;this.thumbnailPreview.style.transform=`translateX(${L}px) scale(${v})`;let p=parseInt(b.getPropertyValue("--media-thumbnail-preview-border"));Number.isNaN(p)&&(p=parseInt(b.getPropertyValue("--thumb-preview-border"))),this.thumbnailPreview.style.borderWidth=`${Math.round(p/v)}px`,this.thumbnailPreview.style.borderRadius=`${Math.round(p/v)}px`;const V=l*m,N=new s.Window.CustomEvent(r.MediaUIEvents.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:V});this.dispatchEvent(N)},s.Window.addEventListener("pointermove",t,!1)},a=()=>{s.Window.removeEventListener("pointermove",t);const u=new s.Window.CustomEvent(r.MediaUIEvents.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:null});this.dispatchEvent(u)};let d=!1,h=u=>{const m=this.getAttribute(r.MediaUIAttributes.MEDIA_DURATION);if(!d&&m){d=!0,n();let o=l=>{l.composedPath().includes(this)||(s.Window.removeEventListener("pointermove",o),d=!1,a())};s.Window.addEventListener("pointermove",o,!1)}};this.addEventListener("pointermove",h,!1)}}(0,_.defineCustomElement)("media-time-range",D);var X=D;module.exports=G(J);
+  <span part="box preview-box">
+    <slot name="preview">
+      <media-preview-thumbnail></media-preview-thumbnail>
+      <media-preview-time-display></media-preview-time-display>
+    </slot>
+  </span>
+  <span part="box current-box">
+    <slot name="current">
+      <!-- Example: add the current time to the playhead -->
+      <!-- <media-current-time-display></media-current-time-display> -->
+    </slot>
+  </span>
+`;class _ extends D.default{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",r.MediaUIAttributes.MEDIA_PAUSED,r.MediaUIAttributes.MEDIA_DURATION,r.MediaUIAttributes.MEDIA_SEEKABLE,r.MediaUIAttributes.MEDIA_CURRENT_TIME,r.MediaUIAttributes.MEDIA_PREVIEW_IMAGE,r.MediaUIAttributes.MEDIA_PREVIEW_TIME,r.MediaUIAttributes.MEDIA_BUFFERED]}constructor(){super();this.shadowRoot.appendChild(M.content.cloneNode(!0)),this.range.addEventListener("input",()=>{cancelAnimationFrame(this._refreshId);const t=this.range.value,a=new d.Window.CustomEvent(r.MediaUIEvents.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(a)}),this._refreshBar=()=>{const e=(performance.now()-this._updateTimestamp)/1e3;this.range.value=this.mediaCurrentTime+e,this.updateBar(),this.updateCurrentBox(),this._refreshId=requestAnimationFrame(this._refreshBar)},this._enableBoxes()}connectedCallback(){this.range.setAttribute("aria-label",B.nouns.SEEK()),super.connectedCallback()}disconnectedCallback(){cancelAnimationFrame(this._refreshId),super.disconnectedCallback()}attributeChangedCallback(e,t,a){var n,m,u,h,s;(e===r.MediaUIAttributes.MEDIA_CURRENT_TIME||e===r.MediaUIAttributes.MEDIA_PAUSED)&&(this._updateTimestamp=performance.now(),this.range.value=this.mediaCurrentTime,g(this),this.updateBar(),this.updateCurrentBox(),cancelAnimationFrame(this._refreshId),this.mediaPaused||(this._refreshId=requestAnimationFrame(this._refreshBar))),e===r.MediaUIAttributes.MEDIA_DURATION&&(this.range.max=Math.floor((m=(n=this.mediaSeekableEnd)!=null?n:this.mediaDuration)!=null?m:1e3),g(this),this.updateBar(),this.updateCurrentBox()),e===r.MediaUIAttributes.MEDIA_SEEKABLE&&(this.range.min=(u=this.mediaSeekableStart)!=null?u:0,this.range.max=Math.floor((s=(h=this.mediaSeekableEnd)!=null?h:this.mediaDuration)!=null?s:1e3),g(this),this.updateBar()),e===r.MediaUIAttributes.MEDIA_BUFFERED&&this.updateBar(),super.attributeChangedCallback(e,t,a)}get mediaPaused(){return this.hasAttribute(r.MediaUIAttributes.MEDIA_PAUSED)}get mediaDuration(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_DURATION);return e!=null?+e:void 0}get mediaCurrentTime(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_CURRENT_TIME);return e!=null?+e:void 0}get mediaBuffered(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_BUFFERED);return e?e.split(" ").map(t=>t.split(":").map(a=>+a)):[]}get mediaSeekable(){const e=this.getAttribute(r.MediaUIAttributes.MEDIA_SEEKABLE);if(!!e)return e.split(":").map(t=>+t)}get mediaSeekableEnd(){var t;const[,e]=(t=this.mediaSeekable)!=null?t:[];return e}get mediaSeekableStart(){var t;const[e]=(t=this.mediaSeekable)!=null?t:[];return e}getBarColors(){var l;let e=super.getBarColors();const{range:t}=this,a=t.max-t.min,n=this.mediaBuffered;if(!n.length||!Number.isFinite(a)||a<=0)return e;const m=this.mediaCurrentTime,[,u=t.min]=(l=n.find(([p,o])=>p<=m&&m<=o))!=null?l:[],s=(u-t.min)/a*100;return e.splice(1,0,["var(--media-time-buffered-color, rgba(255,255,255, .4))",s]),e}updateCurrentBox(){const e=this.shadowRoot.querySelector('[part~="current-box"]'),t=this.range.value/(this.range.max-this.range.min),a=R(this,e,t),{style:n}=(0,w.getOrInsertCSSRule)(this.shadowRoot,'[part~="current-box"]');n.transform=`translateX(${a}px)`}_enableBoxes(){const e=this.shadowRoot.querySelectorAll('[part~="box"]'),t=this.shadowRoot.querySelector('[part~="preview-box"]');let a;const n=()=>{a=s=>{if([...e].some(C=>s.composedPath().includes(C)))return;this.updatePointerBar(s);const l=+this.getAttribute(r.MediaUIAttributes.MEDIA_DURATION);if(!l)return;const p=this.range.getBoundingClientRect();let o=(s.clientX-p.left)/p.width;o=Math.max(0,Math.min(1,o));const b=R(this,t,o),{style:v}=(0,w.getOrInsertCSSRule)(this.shadowRoot,'[part~="preview-box"]');v.transform=`translateX(${b}px)`;const E=o*l,x=new d.Window.CustomEvent(r.MediaUIEvents.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:E});this.dispatchEvent(x)},d.Window.addEventListener("pointermove",a,!1)},m=()=>{d.Window.removeEventListener("pointermove",a);const s=new d.Window.CustomEvent(r.MediaUIEvents.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:null});this.dispatchEvent(s)};let u=!1,h=()=>{const s=this.getAttribute(r.MediaUIAttributes.MEDIA_DURATION);if(!u&&s){u=!0,n();let l=p=>{(!p.composedPath().includes(this)||[...e].some(o=>p.composedPath().includes(o)))&&(d.Window.removeEventListener("pointermove",l),u=!1,m())};d.Window.addEventListener("pointermove",l,!1)}};this.addEventListener("pointermove",h,!1)}}function R(i,e,t){const a=i.getBoundingClientRect(),n=i.range.getBoundingClientRect(),m=parseInt(getComputedStyle(i).getPropertyValue("--media-box-padding-left")),u=parseInt(getComputedStyle(i).getPropertyValue("--media-box-padding-right")),h=m+t*n.width,s=e.offsetWidth,l=h-s/2,o=(i.getAttribute("media-bounds")?d.Document.getElementById(i.getAttribute("media-bounds")):i.parentElement).getBoundingClientRect(),b=a.left-o.left,v=o.right-a.left-s-u,E=m-b;return Math.max(E,Math.min(l,v))}(0,y.defineCustomElement)("media-time-range",_);var $=_;module.exports=F(G);
 //# sourceMappingURL=media-time-range.js.map

dist/cjs/utils/element-utils.js

@@ -1,2 +0,2 @@
-var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var x=e=>s(e,"__esModule",{value:!0});var f=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of a(t))!p.call(e,r)&&(o||r!=="default")&&s(e,r,{get:()=>t[r],enumerable:!(n=u(t,r))||n.enumerable});return e};var S=(e=>(t,o)=>e&&e.get(t)||(o=i(x({}),t,1),e&&e.set(t,o),o))(typeof WeakMap!="undefined"?new WeakMap:0);var m={};f(m,{containsComposedNode:()=>l,getAllSlotted:()=>c,getSlotted:()=>g,updateIconText:()=>d});const d=(e,t,o=".value")=>{const n=e.querySelector(o);!n||(n.textContent=t)},c=(e,t)=>{const o=`slot[name="${t}"]`,n=e.shadowRoot.querySelector(o);return n?n.children:[]},g=(e,t)=>c(e,t)[0],l=(e,t)=>!e||!t?!1:e.contains(t)?!0:l(e,t.getRootNode().host);module.exports=S(m);
+var n=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var p=t=>n(t,"__esModule",{value:!0});var R=(t,e)=>{for(var r in e)n(t,r,{get:e[r],enumerable:!0})},S=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!i.call(t,o)&&(r||o!=="default")&&n(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var a=(t=>(e,r)=>t&&t.get(e)||(r=S(p({}),e,1),t&&t.set(e,r),r))(typeof WeakMap!="undefined"?new WeakMap:0);var d={};R(d,{containsComposedNode:()=>c,getAllSlotted:()=>u,getOrInsertCSSRule:()=>y,getSlotted:()=>g,updateIconText:()=>x});const x=(t,e,r=".value")=>{const s=t.querySelector(r);!s||(s.textContent=e)},u=(t,e)=>{const r=`slot[name="${e}"]`,s=t.shadowRoot.querySelector(r);return s?s.children:[]},g=(t,e)=>u(t,e)[0],c=(t,e)=>!t||!e?!1:t.contains(e)?!0:c(t,e.getRootNode().host);function y(t,e){var s,o;let r;for(r of t.querySelectorAll("style"))for(let l of(o=(s=r.sheet)==null?void 0:s.cssRules)!=null?o:[])if(l.selectorText===e)return l;return(r==null?void 0:r.sheet)?(r.sheet.insertRule(`${e}{}`,r.sheet.cssRules.length),r.sheet.cssRules[r.sheet.cssRules.length-1]):{style:{setProperty:()=>{}}}}module.exports=a(d);
 //# sourceMappingURL=element-utils.js.map

dist/constants.js

@@ -1,2 +0,2 @@
-const _={MEDIA_PLAY_REQUEST:"mediaplayrequest",MEDIA_PAUSE_REQUEST:"mediapauserequest",MEDIA_MUTE_REQUEST:"mediamuterequest",MEDIA_UNMUTE_REQUEST:"mediaunmuterequest",MEDIA_VOLUME_REQUEST:"mediavolumerequest",MEDIA_SEEK_REQUEST:"mediaseekrequest",MEDIA_AIRPLAY_REQUEST:"mediaairplayrequest",MEDIA_ENTER_FULLSCREEN_REQUEST:"mediaenterfullscreenrequest",MEDIA_EXIT_FULLSCREEN_REQUEST:"mediaexitfullscreenrequest",MEDIA_PREVIEW_REQUEST:"mediapreviewrequest",MEDIA_ENTER_PIP_REQUEST:"mediaenterpiprequest",MEDIA_EXIT_PIP_REQUEST:"mediaexitpiprequest",MEDIA_ENTER_CAST_REQUEST:"mediaentercastrequest",MEDIA_EXIT_CAST_REQUEST:"mediaexitcastrequest",MEDIA_SHOW_TEXT_TRACKS_REQUEST:"mediashowtexttracksrequest",MEDIA_HIDE_TEXT_TRACKS_REQUEST:"mediahidetexttracksrequest",MEDIA_SHOW_CAPTIONS_REQUEST:"mediashowcaptionsrequest",MEDIA_SHOW_SUBTITLES_REQUEST:"mediashowsubtitlesrequest",MEDIA_DISABLE_CAPTIONS_REQUEST:"mediadisablecaptionsrequest",MEDIA_DISABLE_SUBTITLES_REQUEST:"mediadisablesubtitlesrequest",MEDIA_PLAYBACK_RATE_REQUEST:"mediaplaybackraterequest",REGISTER_MEDIA_STATE_RECEIVER:"registermediastatereceiver",UNREGISTER_MEDIA_STATE_RECEIVER:"unregistermediastatereceiver"},A={MEDIA_AIRPLAY_UNAVAILABLE:"mediaairplayunavailablechange",MEDIA_PIP_UNAVAILABLE:"mediapipunavailablechange",MEDIA_PAUSED:"mediapausedchange",MEDIA_HAS_PLAYED:"mediahasplayedchange",MEDIA_MUTED:"mediamutedchange",MEDIA_VOLUME_LEVEL:"mediavolumelevelchange",MEDIA_VOLUME:"mediavolumechange",MEDIA_VOLUME_UNAVAILABLE:"mediavolumeunavailablechange",MEDIA_IS_PIP:"mediaispipchange",MEDIA_IS_CASTING:"mediaiscastingchange",MEDIA_CAPTIONS_LIST:"mediacaptionslistchange",MEDIA_SUBTITLES_LIST:"mediasubtitleslistchange",MEDIA_CAPTIONS_SHOWING:"mediacaptionsshowingchange",MEDIA_SUBTITLES_SHOWING:"mediasubtitlesshowingchange",MEDIA_IS_FULLSCREEN:"mediaisfullscreenchange",MEDIA_PLAYBACK_RATE:"mediaplaybackratechange",MEDIA_CURRENT_TIME:"mediacurrenttimechange",MEDIA_DURATION:"mediadurationchange",MEDIA_SEEKABLE:"mediaseekablechange",MEDIA_PREVIEW_IMAGE:"mediapreviewimagechange",MEDIA_PREVIEW_COORDS:"mediapreviewcoordschange",MEDIA_LOADING:"medialoadingchange",USER_INACTIVE:"userinactivechange"},t={MEDIA_AIRPLAY_UNAVAILABLE:"media-airplay-unavailable",MEDIA_PIP_UNAVAILABLE:"media-pip-unavailable",MEDIA_CAST_UNAVAILABLE:"media-cast-unavailable",MEDIA_PAUSED:"media-paused",MEDIA_HAS_PLAYED:"media-has-played",MEDIA_MUTED:"media-muted",MEDIA_VOLUME_LEVEL:"media-volume-level",MEDIA_VOLUME:"media-volume",MEDIA_VOLUME_UNAVAILABLE:"media-volume-unavailable",MEDIA_IS_PIP:"media-is-pip",MEDIA_IS_CASTING:"media-is-casting",MEDIA_CAPTIONS_LIST:"media-captions-list",MEDIA_SUBTITLES_LIST:"media-subtitles-list",MEDIA_CAPTIONS_SHOWING:"media-captions-showing",MEDIA_SUBTITLES_SHOWING:"media-subtitles-showing",MEDIA_IS_FULLSCREEN:"media-is-fullscreen",MEDIA_PLAYBACK_RATE:"media-playback-rate",MEDIA_CURRENT_TIME:"media-current-time",MEDIA_DURATION:"media-duration",MEDIA_SEEKABLE:"media-seekable",MEDIA_PREVIEW_IMAGE:"media-preview-image",MEDIA_PREVIEW_COORDS:"media-preview-coords",MEDIA_CHROME_ATTRIBUTES:"media-chrome-attributes",MEDIA_CONTROLLER:"media-controller",MEDIA_LOADING:"media-loading",MEDIA_BUFFERED:"media-buffered"},I=Object.entries(A).reduce((e,[a,i])=>{const E=t[a];return E&&(e[i]=E),e},{userinactivechange:"user-inactive"}),s=Object.entries(t).reduce((e,[a,i])=>{const E=A[a];return E&&(e[i]=E),e},{"user-inactive":"userinactivechange"}),T={SUBTITLES:"subtitles",CAPTIONS:"captions",DESCRIPTIONS:"descriptions",CHAPTERS:"chapters",METADATA:"metadata"},d={DISABLED:"disabled",HIDDEN:"hidden",SHOWING:"showing"},S={HAVE_NOTHING:0,HAVE_METADATA:1,HAVE_CURRENT_DATA:2,HAVE_FUTURE_DATA:3,HAVE_ENOUGH_DATA:4},D={MOUSE:"mouse",PEN:"pen",TOUCH:"touch"},n={UNAVAILABLE:"unavailable",UNSUPPORTED:"unsupported"};export{s as AttributeToStateChangeEventMap,n as AvailabilityStates,A as MediaStateChangeEvents,t as MediaUIAttributes,_ as MediaUIEvents,D as PointerTypes,S as ReadyStates,I as StateChangeEventToAttributeMap,T as TextTrackKinds,d as TextTrackModes};
+const _={MEDIA_PLAY_REQUEST:"mediaplayrequest",MEDIA_PAUSE_REQUEST:"mediapauserequest",MEDIA_MUTE_REQUEST:"mediamuterequest",MEDIA_UNMUTE_REQUEST:"mediaunmuterequest",MEDIA_VOLUME_REQUEST:"mediavolumerequest",MEDIA_SEEK_REQUEST:"mediaseekrequest",MEDIA_AIRPLAY_REQUEST:"mediaairplayrequest",MEDIA_ENTER_FULLSCREEN_REQUEST:"mediaenterfullscreenrequest",MEDIA_EXIT_FULLSCREEN_REQUEST:"mediaexitfullscreenrequest",MEDIA_PREVIEW_REQUEST:"mediapreviewrequest",MEDIA_ENTER_PIP_REQUEST:"mediaenterpiprequest",MEDIA_EXIT_PIP_REQUEST:"mediaexitpiprequest",MEDIA_ENTER_CAST_REQUEST:"mediaentercastrequest",MEDIA_EXIT_CAST_REQUEST:"mediaexitcastrequest",MEDIA_SHOW_TEXT_TRACKS_REQUEST:"mediashowtexttracksrequest",MEDIA_HIDE_TEXT_TRACKS_REQUEST:"mediahidetexttracksrequest",MEDIA_SHOW_CAPTIONS_REQUEST:"mediashowcaptionsrequest",MEDIA_SHOW_SUBTITLES_REQUEST:"mediashowsubtitlesrequest",MEDIA_DISABLE_CAPTIONS_REQUEST:"mediadisablecaptionsrequest",MEDIA_DISABLE_SUBTITLES_REQUEST:"mediadisablesubtitlesrequest",MEDIA_PLAYBACK_RATE_REQUEST:"mediaplaybackraterequest",REGISTER_MEDIA_STATE_RECEIVER:"registermediastatereceiver",UNREGISTER_MEDIA_STATE_RECEIVER:"unregistermediastatereceiver"},A={MEDIA_AIRPLAY_UNAVAILABLE:"mediaairplayunavailablechange",MEDIA_PIP_UNAVAILABLE:"mediapipunavailablechange",MEDIA_PAUSED:"mediapausedchange",MEDIA_HAS_PLAYED:"mediahasplayedchange",MEDIA_MUTED:"mediamutedchange",MEDIA_VOLUME_LEVEL:"mediavolumelevelchange",MEDIA_VOLUME:"mediavolumechange",MEDIA_VOLUME_UNAVAILABLE:"mediavolumeunavailablechange",MEDIA_IS_PIP:"mediaispipchange",MEDIA_IS_CASTING:"mediaiscastingchange",MEDIA_CAPTIONS_LIST:"mediacaptionslistchange",MEDIA_SUBTITLES_LIST:"mediasubtitleslistchange",MEDIA_CAPTIONS_SHOWING:"mediacaptionsshowingchange",MEDIA_SUBTITLES_SHOWING:"mediasubtitlesshowingchange",MEDIA_IS_FULLSCREEN:"mediaisfullscreenchange",MEDIA_PLAYBACK_RATE:"mediaplaybackratechange",MEDIA_CURRENT_TIME:"mediacurrenttimechange",MEDIA_DURATION:"mediadurationchange",MEDIA_SEEKABLE:"mediaseekablechange",MEDIA_PREVIEW_IMAGE:"mediapreviewimagechange",MEDIA_PREVIEW_COORDS:"mediapreviewcoordschange",MEDIA_LOADING:"medialoadingchange",USER_INACTIVE:"userinactivechange"},t={MEDIA_AIRPLAY_UNAVAILABLE:"media-airplay-unavailable",MEDIA_PIP_UNAVAILABLE:"media-pip-unavailable",MEDIA_CAST_UNAVAILABLE:"media-cast-unavailable",MEDIA_PAUSED:"media-paused",MEDIA_HAS_PLAYED:"media-has-played",MEDIA_MUTED:"media-muted",MEDIA_VOLUME_LEVEL:"media-volume-level",MEDIA_VOLUME:"media-volume",MEDIA_VOLUME_UNAVAILABLE:"media-volume-unavailable",MEDIA_IS_PIP:"media-is-pip",MEDIA_IS_CASTING:"media-is-casting",MEDIA_CAPTIONS_LIST:"media-captions-list",MEDIA_SUBTITLES_LIST:"media-subtitles-list",MEDIA_CAPTIONS_SHOWING:"media-captions-showing",MEDIA_SUBTITLES_SHOWING:"media-subtitles-showing",MEDIA_IS_FULLSCREEN:"media-is-fullscreen",MEDIA_PLAYBACK_RATE:"media-playback-rate",MEDIA_CURRENT_TIME:"media-current-time",MEDIA_DURATION:"media-duration",MEDIA_SEEKABLE:"media-seekable",MEDIA_PREVIEW_TIME:"media-preview-time",MEDIA_PREVIEW_IMAGE:"media-preview-image",MEDIA_PREVIEW_COORDS:"media-preview-coords",MEDIA_CHROME_ATTRIBUTES:"media-chrome-attributes",MEDIA_CONTROLLER:"media-controller",MEDIA_LOADING:"media-loading",MEDIA_BUFFERED:"media-buffered"},I=Object.entries(A).reduce((e,[a,i])=>{const E=t[a];return E&&(e[i]=E),e},{userinactivechange:"user-inactive"}),s=Object.entries(t).reduce((e,[a,i])=>{const E=A[a];return E&&(e[i]=E),e},{"user-inactive":"userinactivechange"}),T={SUBTITLES:"subtitles",CAPTIONS:"captions",DESCRIPTIONS:"descriptions",CHAPTERS:"chapters",METADATA:"metadata"},d={DISABLED:"disabled",HIDDEN:"hidden",SHOWING:"showing"},S={HAVE_NOTHING:0,HAVE_METADATA:1,HAVE_CURRENT_DATA:2,HAVE_FUTURE_DATA:3,HAVE_ENOUGH_DATA:4},D={MOUSE:"mouse",PEN:"pen",TOUCH:"touch"},M={UNAVAILABLE:"unavailable",UNSUPPORTED:"unsupported"};export{s as AttributeToStateChangeEventMap,M as AvailabilityStates,A as MediaStateChangeEvents,t as MediaUIAttributes,_ as MediaUIEvents,D as PointerTypes,S as ReadyStates,I as StateChangeEventToAttributeMap,T as TextTrackKinds,d as TextTrackModes};
 //# sourceMappingURL=constants.js.map

dist/index.js

@@ -1,2 +0,2 @@
-import*as D from"./constants.js";import{default as ne}from"./labels/labels.js";import*as v from"./utils/time.js";import m from"./media-airplay-button.js";import"./media-cast-button.js";import a from"./media-chrome-button.js";import n from"./media-gesture-receiver.js";import o from"./media-controller.js";import d from"./media-chrome-range.js";import p from"./media-control-bar.js";import s from"./media-current-time-display.js";import f from"./media-duration-display.js";import M from"./media-time-display.js";import l from"./media-captions-button.js";import u from"./media-seek-forward-button.js";import c from"./media-fullscreen-button.js";import B from"./media-mute-button.js";import C from"./media-pip-button.js";import g from"./media-play-button.js";import h from"./media-playback-rate-button.js";import w from"./media-poster-image.js";import P from"./media-progress-range.js";import T from"./media-seek-backward-button.js";import r from"./media-thumbnail-preview.js";import x from"./media-time-range.js";import y from"./media-loading-indicator.js";import E from"./media-title-element.js";import R from"./media-volume-range.js";import b from"./themes/media-theme.js";import{Window as e}from"./utils/server-safe-globals.js";class k extends o{}e.customElements.get("media-chrome")||e.customElements.define("media-chrome",k);class i extends o{constructor(){super();console.warn("MediaChrome: <media-container> is deprecated. Use <media-controller>.")}}e.customElements.get("media-container")||e.customElements.define("media-container",i);export{m as MediaAirplayButton,l as MediaCaptionsButton,a as MediaChromeButton,d as MediaChromeRange,i as MediaContainer,p as MediaControlBar,o as MediaController,s as MediaCurrentTimeDisplay,f as MediaDurationDisplay,c as MediaFullscreenButton,n as MediaGestureReceiver,y as MediaLoadingIndicator,B as MediaMuteButton,C as MediaPipButton,g as MediaPlayButton,h as MediaPlaybackRateButton,w as MediaPosterImage,P as MediaProgressRange,T as MediaSeekBackwardButton,u as MediaSeekForwardButton,b as MediaTheme,r as MediaThumbnailPreview,r as MediaThumbnailPreviewElement,M as MediaTimeDisplay,x as MediaTimeRange,E as MediaTitleElement,R as MediaVolumeRange,D as constants,ne as labels,v as timeUtils};
+import*as F from"./constants.js";import{default as pe}from"./labels/labels.js";import*as I from"./utils/time.js";import t from"./media-airplay-button.js";import m from"./media-cast-button.js";import a from"./media-chrome-button.js";import d from"./media-gesture-receiver.js";import o from"./media-controller.js";import n from"./media-chrome-range.js";import p from"./media-control-bar.js";import s from"./media-current-time-display.js";import f from"./media-duration-display.js";import M from"./media-time-display.js";import l from"./media-captions-button.js";import u from"./media-seek-forward-button.js";import c from"./media-fullscreen-button.js";import B from"./media-mute-button.js";import C from"./media-pip-button.js";import g from"./media-play-button.js";import h from"./media-playback-rate-button.js";import w from"./media-poster-image.js";import y from"./media-progress-range.js";import P from"./media-seek-backward-button.js";import T from"./media-preview-time-display.js";import x from"./media-preview-thumbnail.js";import R from"./media-time-range.js";import D from"./media-loading-indicator.js";import E from"./media-title-element.js";import k from"./media-volume-range.js";import b from"./themes/media-theme.js";import{Window as e}from"./utils/server-safe-globals.js";class v extends o{}e.customElements.get("media-chrome")||e.customElements.define("media-chrome",v);class r extends o{constructor(){super();console.warn("MediaChrome: <media-container> is deprecated. Use <media-controller>.")}}e.customElements.get("media-container")||e.customElements.define("media-container",r);export{t as MediaAirplayButton,l as MediaCaptionsButton,m as MediaCastButton,a as MediaChromeButton,n as MediaChromeRange,r as MediaContainer,p as MediaControlBar,o as MediaController,s as MediaCurrentTimeDisplay,f as MediaDurationDisplay,c as MediaFullscreenButton,d as MediaGestureReceiver,D as MediaLoadingIndicator,B as MediaMuteButton,C as MediaPipButton,g as MediaPlayButton,h as MediaPlaybackRateButton,w as MediaPosterImage,x as MediaPreviewThumbnail,T as MediaPreviewTimeDisplay,y as MediaProgressRange,P as MediaSeekBackwardButton,u as MediaSeekForwardButton,b as MediaTheme,M as MediaTimeDisplay,R as MediaTimeRange,E as MediaTitleElement,k as MediaVolumeRange,F as constants,pe as labels,I as timeUtils};
 //# sourceMappingURL=index.js.map

dist/media-chrome-button.js

@@ -1,2 +0,2 @@
-import{MediaUIAttributes as r}from"./constants.js";import{defineCustomElement as g}from"./utils/defineCustomElement.js";import{Window as b,Document as a}from"./utils/server-safe-globals.js";const d=a.createElement("template");d.innerHTML=`
+import{MediaUIAttributes as c}from"./constants.js";import{defineCustomElement as g}from"./utils/defineCustomElement.js";import{Window as b,Document as a}from"./utils/server-safe-globals.js";const r=a.createElement("template");r.innerHTML=`
 <style>
@@ -64,3 +64,3 @@ :host {
 </style>
-`;const h=["Enter"," "];class l extends b.HTMLElement{static get observedAttributes(){return[r.MEDIA_CONTROLLER]}constructor(i={}){super();const n=this.attachShadow({mode:"open"}),e=d.content.cloneNode(!0);this.nativeEl=e;let s=i.slotTemplate;s||(s=a.createElement("template"),s.innerHTML=`<slot>${i.defaultContent||""}</slot>`),this.nativeEl.appendChild(s.content.cloneNode(!0)),n.appendChild(e),this.addEventListener("click",t=>{this.handleClick(t)});const o=t=>{const{key:c}=t;if(!h.includes(c)){this.removeEventListener("keyup",o);return}this.handleClick(t)};this.addEventListener("keydown",t=>{const{metaKey:c,altKey:u,key:m}=t;if(c||u||!h.includes(m)){this.removeEventListener("keyup",o);return}this.addEventListener("keyup",o)})}attributeChangedCallback(i,n,e){var s,o;if(i===r.MEDIA_CONTROLLER){if(n){const t=a.getElementById(n);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}if(e){const t=a.getElementById(e);(o=t==null?void 0:t.associateElement)==null||o.call(t,this)}}}connectedCallback(){var n;this.setAttribute("role","button"),this.setAttribute("tabindex",0);const i=this.getAttribute(r.MEDIA_CONTROLLER);if(i){const e=a.getElementById(i);(n=e==null?void 0:e.associateElement)==null||n.call(e,this)}}disconnectedCallback(){var n;if(this.getAttribute(r.MEDIA_CONTROLLER)){const e=a.getElementById(mediaControllerId);(n=e==null?void 0:e.unassociateElement)==null||n.call(e,this)}}handleClick(){}}g("media-chrome-button",l);var k=l;export{k as default};
+`;const h=["Enter"," "];class l extends b.HTMLElement{static get observedAttributes(){return[c.MEDIA_CONTROLLER]}constructor(n={}){super();const i=this.attachShadow({mode:"open"}),e=r.content.cloneNode(!0);this.nativeEl=e;let s=n.slotTemplate;s||(s=a.createElement("template"),s.innerHTML=`<slot>${n.defaultContent||""}</slot>`),this.nativeEl.appendChild(s.content.cloneNode(!0)),i.appendChild(e),this.addEventListener("click",t=>{this.handleClick(t)});const o=t=>{const{key:d}=t;if(!h.includes(d)){this.removeEventListener("keyup",o);return}this.handleClick(t)};this.addEventListener("keydown",t=>{const{metaKey:d,altKey:u,key:m}=t;if(d||u||!h.includes(m)){this.removeEventListener("keyup",o);return}this.addEventListener("keyup",o)})}attributeChangedCallback(n,i,e){var s,o;if(n===c.MEDIA_CONTROLLER){if(i){const t=a.getElementById(i);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}if(e){const t=a.getElementById(e);(o=t==null?void 0:t.associateElement)==null||o.call(t,this)}}}connectedCallback(){var i;this.setAttribute("role","button"),this.setAttribute("tabindex",0);const n=this.getAttribute(c.MEDIA_CONTROLLER);if(n){const e=a.getElementById(n);(i=e==null?void 0:e.associateElement)==null||i.call(e,this)}}disconnectedCallback(){var i;const n=this.getAttribute(c.MEDIA_CONTROLLER);if(n){const e=a.getElementById(n);(i=e==null?void 0:e.unassociateElement)==null||i.call(e,this)}}handleClick(){}}g("media-chrome-button",l);var k=l;export{k as default};
 //# sourceMappingURL=media-chrome-button.js.map

dist/media-chrome-range.js

@@ -1,2 +0,2 @@
-import{MediaUIAttributes as o}from"./constants.js";import{defineCustomElement as u}from"./utils/defineCustomElement.js";import{Window as b,Document as i}from"./utils/server-safe-globals.js";const c=i.createElement("template"),h=`
+import{MediaUIAttributes as s}from"./constants.js";import{defineCustomElement as u}from"./utils/defineCustomElement.js";import{Window as b,Document as o}from"./utils/server-safe-globals.js";import{getOrInsertCSSRule as h}from"./utils/element-utils.js";const c=o.createElement("template"),g=`
   height: var(--thumb-height);
@@ -18,4 +18,3 @@ width: var(--media-range-thumb-width, 10px);
   border-radius: var(--media-range-track-border-radius, 0);
-  background: var(--media-range-track-background-internal, var(--media-range-track-background, #eee));
-
+  background: var(--media-range-track-progress-internal, var(--media-range-track-background, #eee));
   box-shadow: var(--media-range-track-box-shadow, none);
@@ -39,5 +38,7 @@ transition: var(--media-range-track-transition, none);
       width: 100px;
-      padding: 0 10px;
-
+      padding-left: var(--media-range-padding-left, 10px);
+      padding-right: var(--media-range-padding-right, 10px);
       pointer-events: auto;
+      /* needed for vertical align issue 1px off */
+      font-size: 0;
     }
@@ -66,3 +67,3 @@
       -webkit-appearance: none;
-      ${h}
+      ${g}
       /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
@@ -74,3 +75,3 @@ margin-top: calc(calc(0px - var(--thumb-height) + var(--track-height)) / 2);
     input[type=range]::-moz-range-thumb {
-      ${h}
+      ${g}
       translate: var(--media-range-track-translate-x, 0) var(--media-range-track-translate-y, 0);
@@ -93,2 +94,48 @@ }
 
+    #background,
+    #pointer {
+      ${d}
+      width: auto;
+      position: absolute;
+      top: 50%;
+      transform: translate(var(--media-range-track-translate-x, 0px), calc(var(--media-range-track-translate-y, 0px) - 50%));
+      left: var(--media-range-padding-left, 10px);
+      right: var(--media-range-padding-right, 10px);
+      background: var(--media-range-track-background, #333);
+    }
+
+    #pointer {
+      min-width: auto;
+      right: auto;
+      background: var(--media-range-track-pointer-background);
+      border-right: var(--media-range-track-pointer-border-right);
+      transition: visibility .25s, opacity .25s;
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    :host(:hover) #pointer {
+      transition: visibility .5s, opacity .5s;
+      visibility: visible;
+      opacity: 1;
+    }
+
+    #hoverzone {
+      /* Add z-index so it overlaps the top of the control buttons if they are right under. */
+      z-index: 1;
+      display: var(--media-time-range-hover-display, none);
+      box-sizing: border-box;
+      position: absolute;
+      left: var(--media-range-padding-left, 10px);
+      right: var(--media-range-padding-right, 10px);
+      bottom: var(--media-time-range-hover-bottom, -5px);
+      height: var(--media-time-range-hover-height, max(calc(100% + 5px), 20px));
+    }
+
+    #range {
+      z-index: 2;
+      position: relative;
+      height: var(--media-range-track-height, 4px);
+    }
+
     /*
@@ -123,4 +170,7 @@ * set input to focus-visible, unless host-context is available (in chrome)
   </style>
-  <input id="range" type="range" min="0" max="1000" step="1" value="0">
-`;class g extends b.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(c.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this))}attributeChangedCallback(a,t,e){var n,s;if(a===o.MEDIA_CONTROLLER){if(t){const r=i.getElementById(t);(n=r==null?void 0:r.unassociateElement)==null||n.call(r,this)}if(e){const r=i.getElementById(e);(s=r==null?void 0:r.associateElement)==null||s.call(r,this)}}}connectedCallback(){var t;const a=this.getAttribute(o.MEDIA_CONTROLLER);if(a){const e=i.getElementById(a);(t=e==null?void 0:e.associateElement)==null||t.call(e,this)}this.updateBar()}disconnectedCallback(){var t;if(this.getAttribute(o.MEDIA_CONTROLLER)){const e=i.getElementById(mediaControllerId);(t=e==null?void 0:e.unassociateElement)==null||t.call(e,this)}}updateBar(){const a=this.getBarColors();let t="linear-gradient(to right, ",e=0;a.forEach(n=>{n[1]<e||(t=t+`${n[0]} ${e}%, ${n[0]} ${n[1]}%,`,e=n[1])}),t=t.slice(0,t.length-1)+")",this.style.setProperty("--media-range-track-background-internal",t)}getBarColors(){const a=this.range,t=a.value-a.min,e=a.max-a.min,n=t/e*100;return[["var(--media-range-bar-color, #fff)",n],["var(--media-range-track-background, #333)",100]]}}u("media-chrome-range",g);var v=g;export{v as default};
+  <div id="background"></div>
+  <div id="pointer"></div>
+  <div id="hoverzone"></div>
+  <input id="range" type="range" min="0" max="1000" step="any" value="0">
+`;class p extends b.HTMLElement{static get observedAttributes(){return[s.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(c.content.cloneNode(!0)),this.range=this.shadowRoot.querySelector("#range"),this.range.addEventListener("input",this.updateBar.bind(this))}attributeChangedCallback(e,a,t){var n,i;if(e===s.MEDIA_CONTROLLER){if(a){const r=o.getElementById(a);(n=r==null?void 0:r.unassociateElement)==null||n.call(r,this)}if(t){const r=o.getElementById(t);(i=r==null?void 0:r.associateElement)==null||i.call(r,this)}}}connectedCallback(){var a;const e=this.getAttribute(s.MEDIA_CONTROLLER);if(e){const t=o.getElementById(e);(a=t==null?void 0:t.associateElement)==null||a.call(t,this)}this.updateBar()}disconnectedCallback(){var a;const e=this.getAttribute(s.MEDIA_CONTROLLER);if(e){const t=o.getElementById(e);(a=t==null?void 0:t.unassociateElement)==null||a.call(t,this)}}updatePointerBar(e){const a=this.range.getBoundingClientRect();let t=(e.clientX-a.left)/a.width;t=Math.max(0,Math.min(1,t));const{style:n}=h(this.shadowRoot,"#pointer");n.setProperty("width",`${t*a.width}px`)}updateBar(){const e=this.getBarColors();let a="linear-gradient(to right, ",t=0;e.forEach(i=>{i[1]<t||(a=a+`${i[0]} ${t}%, ${i[0]} ${i[1]}%,`,t=i[1])}),a=a.slice(0,a.length-1)+")";const{style:n}=h(this.shadowRoot,":host");n.setProperty("--media-range-track-progress-internal",a)}getBarColors(){const e=this.range,a=e.value-e.min,t=e.max-e.min,n=a/t*100;let i=0;if(e.value>e.min&&e.value<e.max){const m=getComputedStyle(this).getPropertyValue("--media-range-thumb-width")||"10px";i=parseInt(m)*(.5-n/100)/e.offsetWidth*100}return[["var(--media-range-bar-color, #fff)",n+i],["transparent",100]]}}u("media-chrome-range",p);var w=p;export{w as default};
 //# sourceMappingURL=media-chrome-range.js.map

dist/media-container.js

@@ -1,2 +0,2 @@
-import{defineCustomElement as E}from"./utils/defineCustomElement.js";import{Window as n,Document as y}from"./utils/server-safe-globals.js";import{MediaUIEvents as p,MediaUIAttributes as u,MediaStateChangeEvents as b}from"./constants.js";import{nouns as v}from"./labels/labels.js";import{containsComposedNode as w}from"./utils/element-utils.js";import"./media-gesture-receiver.js";const f=y.createElement("template");f.innerHTML=`
+import{defineCustomElement as f}from"./utils/defineCustomElement.js";import{Window as n,Document as g}from"./utils/server-safe-globals.js";import{MediaUIEvents as c,MediaUIAttributes as u,MediaStateChangeEvents as m}from"./constants.js";import{nouns as p}from"./labels/labels.js";import{containsComposedNode as E}from"./utils/element-utils.js";import"./media-gesture-receiver.js";const b=g.createElement("template");b.innerHTML=`
   <style>
@@ -121,3 +121,3 @@ :host {
   </span>
-`;const A=Object.values(u);class g extends n.HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"});this.shadowRoot.appendChild(f.content.cloneNode(!0));const o=(t,c)=>{const h=this.media;for(let l of t)l.type==="childList"&&(l.removedNodes.forEach(d=>{if(d.slot=="media"&&l.target==this){let r=l.previousSibling&&l.previousSibling.previousElementSibling;if(!r||!h)this.mediaUnsetCallback(d);else{let m=r.slot!=="media";for(;(r=r.previousSibling)!==null;)r.slot=="media"&&(m=!1);m&&this.mediaUnsetCallback(d)}}}),h&&l.addedNodes.forEach(d=>{d==h&&this.handleMediaUpdated(h).then(r=>this.mediaSetCallback(r))}))};new MutationObserver(o).observe(this,{childList:!0,subtree:!0});let a=this.media,i=this.querySelector(":scope > slot[slot=media]");i&&i.addEventListener("slotchange",()=>{if(!i.assignedElements({flatten:!0}).length){this.mediaUnsetCallback(a);return}this.media&&(a=this.media,this.handleMediaUpdated(this.media).then(c=>this.mediaSetCallback(c)))})}static get observedAttributes(){return["autohide","gestures-disabled"].concat(A)}attributeChangedCallback(e,o,s){e.toLowerCase()=="autohide"&&(this.autohide=s)}get media(){let e=this.querySelector(":scope > [slot=media]");return(e==null?void 0:e.nodeName)=="SLOT"&&(e=e.assignedElements({flatten:!0})[0]),e}mediaSetCallback(e){this._mediaClickPlayToggle=o=>{const s=e.paused?p.MEDIA_PLAY_REQUEST:p.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new n.CustomEvent(s,{composed:!0,bubbles:!0}))}}handleMediaUpdated(e){const o=i=>Promise.resolve(i),s=i=>(console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',i),Promise.reject(i));if(!e)return s(e);const a=e.nodeName.toLowerCase();return a.includes("-")?n.customElements.whenDefined(a).then(()=>o(e)):o(e)}mediaUnsetCallback(e){}connectedCallback(){const o=this.getAttribute("audio")!=null?v.AUDIO_PLAYER():v.VIDEO_PLAYER();this.setAttribute("role","region"),this.setAttribute("aria-label",o),this.media&&this.handleMediaUpdated(this.media).then(t=>this.mediaSetCallback(t)),this.setAttribute("user-inactive","user-inactive");const s=()=>{if(this.autohide<0)return;this.setAttribute("user-inactive","user-inactive");const t=new n.CustomEvent(b.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!0});this.dispatchEvent(t)},a=()=>{this.removeAttribute("user-inactive");const t=new n.CustomEvent(b.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!1});this.dispatchEvent(t)},i=()=>{a(),n.clearTimeout(this._inactiveTimeout),!(this.autohide<0)&&(this._inactiveTimeout=n.setTimeout(()=>{s()},this.autohide*1e3))};this.addEventListener("keyup",t=>{i()}),this.addEventListener("pointerup",t=>{t.pointerType==="touch"&&([this,this.media].includes(t.target)&&!this.hasAttribute("user-inactive")?s():i())}),this.addEventListener("pointermove",t=>{t.pointerType==="mouse"&&(!w(this,t.target)||(a(),n.clearTimeout(this._inactiveTimeout),[this,this.media].includes(t.target)&&i()))}),this.addEventListener("mouseleave",t=>{s()}),this.addEventListener("keyup",t=>{this.setAttribute("media-keyboard-control","")}),this.addEventListener("mouseup",t=>{this.removeAttribute("media-keyboard-control")})}set autohide(e){e=Number(e),this._autohide=isNaN(e)?0:e}get autohide(){return this._autohide===void 0?2:this._autohide}}E("media-container-temp",g);var U=g;export{U as default};
+`;const y=Object.values(u);class v extends n.HTMLElement{constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(b.content.cloneNode(!0));const e=i=>{const t=this.media;for(let l of i)l.type==="childList"&&(l.removedNodes.forEach(d=>{if(d.slot=="media"&&l.target==this){let r=l.previousSibling&&l.previousSibling.previousElementSibling;if(!r||!t)this.mediaUnsetCallback(d);else{let h=r.slot!=="media";for(;(r=r.previousSibling)!==null;)r.slot=="media"&&(h=!1);h&&this.mediaUnsetCallback(d)}}}),t&&l.addedNodes.forEach(d=>{d==t&&this.handleMediaUpdated(t).then(r=>this.mediaSetCallback(r))}))};new MutationObserver(e).observe(this,{childList:!0,subtree:!0});let s=this.media,o=this.querySelector(":scope > slot[slot=media]");o&&o.addEventListener("slotchange",()=>{if(!o.assignedElements({flatten:!0}).length){this.mediaUnsetCallback(s);return}this.media&&(s=this.media,this.handleMediaUpdated(this.media).then(t=>this.mediaSetCallback(t)))})}static get observedAttributes(){return["autohide","gestures-disabled"].concat(y)}attributeChangedCallback(e,a,s){e.toLowerCase()=="autohide"&&(this.autohide=s)}get media(){let e=this.querySelector(":scope > [slot=media]");return(e==null?void 0:e.nodeName)=="SLOT"&&(e=e.assignedElements({flatten:!0})[0]),e}mediaSetCallback(e){this._mediaClickPlayToggle=()=>{const a=e.paused?c.MEDIA_PLAY_REQUEST:c.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new n.CustomEvent(a,{composed:!0,bubbles:!0}))}}handleMediaUpdated(e){const a=i=>Promise.resolve(i),s=i=>(console.error('<media-chrome>: Media element set with slot="media" does not appear to be compatible.',i),Promise.reject(i));if(!e)return s(e);const o=e.nodeName.toLowerCase();return o.includes("-")?n.customElements.whenDefined(o).then(()=>a(e)):a(e)}mediaUnsetCallback(){}connectedCallback(){const a=this.getAttribute("audio")!=null?p.AUDIO_PLAYER():p.VIDEO_PLAYER();this.setAttribute("role","region"),this.setAttribute("aria-label",a),this.media&&this.handleMediaUpdated(this.media).then(t=>this.mediaSetCallback(t)),this.setAttribute("user-inactive","user-inactive");const s=()=>{if(this.autohide<0)return;this.setAttribute("user-inactive","user-inactive");const t=new n.CustomEvent(m.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!0});this.dispatchEvent(t)},o=()=>{this.removeAttribute("user-inactive");const t=new n.CustomEvent(m.USER_INACTIVE,{composed:!0,bubbles:!0,detail:!1});this.dispatchEvent(t)},i=()=>{o(),n.clearTimeout(this._inactiveTimeout),!(this.autohide<0)&&(this._inactiveTimeout=n.setTimeout(()=>{s()},this.autohide*1e3))};this.addEventListener("keyup",()=>{i()}),this.addEventListener("pointerup",t=>{t.pointerType==="touch"&&([this,this.media].includes(t.target)&&!this.hasAttribute("user-inactive")?s():i())}),this.addEventListener("pointermove",t=>{t.pointerType==="mouse"&&(!E(this,t.target)||(o(),n.clearTimeout(this._inactiveTimeout),[this,this.media].includes(t.target)&&i()))}),this.addEventListener("mouseleave",()=>{s()}),this.addEventListener("keyup",()=>{this.setAttribute("media-keyboard-control","")}),this.addEventListener("mouseup",()=>{this.removeAttribute("media-keyboard-control")})}set autohide(e){e=Number(e),this._autohide=isNaN(e)?0:e}get autohide(){return this._autohide===void 0?2:this._autohide}}f("media-container-temp",v);var T=v;export{T as default};
 //# sourceMappingURL=media-container.js.map

dist/media-control-bar.js

@@ -1,2 +0,2 @@
-import{MediaUIAttributes as n}from"./constants.js";import{defineCustomElement as r}from"./utils/defineCustomElement.js";import{Window as p,Document as i}from"./utils/server-safe-globals.js";const d=i.createElement("template");d.innerHTML=`
+import{MediaUIAttributes as n}from"./constants.js";import{defineCustomElement as r}from"./utils/defineCustomElement.js";import{Window as p,Document as o}from"./utils/server-safe-globals.js";const d=o.createElement("template");d.innerHTML=`
   <style>
@@ -20,3 +20,3 @@ :host {
   <slot></slot>
-`;class m extends p.HTMLElement{static get observedAttributes(){return[n.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(d.content.cloneNode(!0))}attributeChangedCallback(o,s,t){var a,c;if(o===n.MEDIA_CONTROLLER){if(s){const e=i.getElementById(s);(a=e==null?void 0:e.unassociateElement)==null||a.call(e,this)}if(t){const e=i.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var s;const o=this.getAttribute(n.MEDIA_CONTROLLER);if(o){const t=i.getElementById(o);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}disconnectedCallback(){var s;if(this.getAttribute(n.MEDIA_CONTROLLER)){const t=i.getElementById(mediaControllerId);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}}}r("media-control-bar",m);var l=m;export{l as default};
+`;class m extends p.HTMLElement{static get observedAttributes(){return[n.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(d.content.cloneNode(!0))}attributeChangedCallback(i,s,t){var a,c;if(i===n.MEDIA_CONTROLLER){if(s){const e=o.getElementById(s);(a=e==null?void 0:e.unassociateElement)==null||a.call(e,this)}if(t){const e=o.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var s;const i=this.getAttribute(n.MEDIA_CONTROLLER);if(i){const t=o.getElementById(i);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}disconnectedCallback(){var s;const i=this.getAttribute(n.MEDIA_CONTROLLER);if(i){const t=o.getElementById(i);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}}}r("media-control-bar",m);var u=m;export{u as default};
 //# sourceMappingURL=media-control-bar.js.map

dist/media-controller.js

@@ -1,2 +0,2 @@
-import z from"./media-container.js";import{defineCustomElement as J}from"./utils/defineCustomElement.js";import{Window as h,Document as u}from"./utils/server-safe-globals.js";import{fullscreenApi as l}from"./utils/fullscreenApi.js";import{constToCamel as C}from"./utils/stringUtils.js";import{containsComposedNode as O}from"./utils/element-utils.js";import{MediaUIEvents as S,MediaUIAttributes as r,TextTrackKinds as M,TextTrackModes as m,AvailabilityStates as p,AttributeToStateChangeEventMap as Z}from"./constants.js";import{stringifyTextTrackList as _,getTextTracksList as f,updateTracksModeTo as D}from"./utils/captions.js";const{MEDIA_PLAY_REQUEST:mt,MEDIA_PAUSE_REQUEST:Tt,MEDIA_MUTE_REQUEST:Mt,MEDIA_UNMUTE_REQUEST:ft,MEDIA_VOLUME_REQUEST:Ut,MEDIA_ENTER_FULLSCREEN_REQUEST:bt,MEDIA_EXIT_FULLSCREEN_REQUEST:Dt,MEDIA_SEEK_REQUEST:gt,MEDIA_PREVIEW_REQUEST:Rt,MEDIA_ENTER_PIP_REQUEST:Pt,MEDIA_EXIT_PIP_REQUEST:Lt,MEDIA_PLAYBACK_RATE_REQUEST:vt}=S;class V extends z{constructor(){super();ot||(this._airplayUnavailable=p.UNSUPPORTED),ct||(this._castUnavailable=p.UNSUPPORTED),nt||(this._pipUnavailable=p.UNSUPPORTED),b!==void 0?b||(this._volumeUnavailable=p.UNSUPPORTED):Et.then(()=>{b||(this._volumeUnavailable=p.UNSUPPORTED,this.propagateMediaState(r.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable))}),this.mediaStateReceivers=[],this.associatedElementSubscriptions=new Map,this.associatedElements=[],this.associateElement(this);const e={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const t=this.media;t.muted=!1,t.volume===0&&(t.volume=.25)},MEDIA_VOLUME_REQUEST:t=>{const i=this.media,s=t.detail;i.volume=s,s>0&&i.muted&&(i.muted=!1);try{h.localStorage.setItem("media-chrome-pref-volume",s.toString())}catch{}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const t=this.media;u.pictureInPictureElement&&u.exitPictureInPicture(),super[l.enter]?super[l.enter]():t.webkitEnterFullscreen?t.webkitEnterFullscreen():t.requestFullscreen?t.requestFullscreen():console.warn("MediaChrome: Fullscreen not supported")},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{u[l.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const t=this.media;!u.pictureInPictureEnabled||(u[l.element]&&u[l.exit](),t.requestPictureInPicture())},MEDIA_EXIT_PIP_REQUEST:()=>{u.pictureInPictureElement&&u.exitPictureInPicture()},MEDIA_ENTER_CAST_REQUEST:()=>{var i;const t=this.media;!((i=globalThis.CastableVideoElement)==null?void 0:i.castEnabled)||(u[l.element]&&u[l.exit](),t.requestCast())},MEDIA_EXIT_CAST_REQUEST:async()=>{var t;((t=globalThis.CastableVideoElement)==null?void 0:t.castElement)&&globalThis.CastableVideoElement.exitCast()},MEDIA_SEEK_REQUEST:t=>{const i=this.media,s=t.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=s)},MEDIA_PLAYBACK_RATE_REQUEST:t=>{this.media.playbackRate=t.detail},MEDIA_PREVIEW_REQUEST:t=>{var d;const i=this.media;if(!i)return;const[s]=f(i,{kind:M.METADATA,label:"thumbnails"});if(!(s&&s.cues))return;const n=t.detail;if(n===null){this.propagateMediaState(r.MEDIA_PREVIEW_IMAGE,void 0),this.propagateMediaState(r.MEDIA_PREVIEW_COORDS,void 0);return}const o=Array.prototype.find.call(s.cues,T=>T.startTime>=n);if(!o)return;const I=/'^(?:[a-z]+:)?\/\//i.test(o.text)||(d=i.querySelector('track[label="thumbnails"]'))==null?void 0:d.src,c=new URL(o.text,I),A=new URLSearchParams(c.hash).get("#xywh");this.propagateMediaState(r.MEDIA_PREVIEW_IMAGE,c.href),this.propagateMediaState(r.MEDIA_PREVIEW_COORDS,A.split(",").join(" "))},MEDIA_SHOW_CAPTIONS_REQUEST:t=>{const i=R(this),{detail:s=[]}=t;D(m.SHOWING,i,s)},MEDIA_DISABLE_CAPTIONS_REQUEST:t=>{const i=R(this),{detail:s=[]}=t;D(m.DISABLED,i,s)},MEDIA_SHOW_SUBTITLES_REQUEST:t=>{const i=g(this),{detail:s=[]}=t;D(m.SHOWING,i,s)},MEDIA_DISABLE_SUBTITLES_REQUEST:t=>{const i=g(this),{detail:s=[]}=t;D(m.DISABLED,i,s)},MEDIA_AIRPLAY_REQUEST:t=>{const{media:i}=this;if(!!i){if(!(i.webkitShowPlaybackTargetPicker&&h.WebKitPlaybackTargetAvailabilityEvent)){console.warn("received a request to select AirPlay but AirPlay is not supported in this environment");return}i.webkitShowPlaybackTargetPicker()}}};if(Object.keys(e).forEach(t=>{const i=`_handle${C(t,!0)}`;this[i]=s=>{if(s.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}e[t](s,this.media)},this.addEventListener(S[t],this[i])}),this._mediaStatePropagators={"play,pause,emptied":()=>{this.propagateMediaState(r.MEDIA_PAUSED,B(this))},"playing,emptied":()=>{var t;this.propagateMediaState(r.MEDIA_HAS_PLAYED,!((t=this.media)==null?void 0:t.paused))},volumechange:()=>{this.propagateMediaState(r.MEDIA_MUTED,w(this)),this.propagateMediaState(r.MEDIA_VOLUME,Q(this)),this.propagateMediaState(r.MEDIA_VOLUME_LEVEL,F(this))},[l.event]:t=>{const s=!!u[l.element]&&(t==null?void 0:t.target),n=O(this,s);this.propagateMediaState(r.MEDIA_IS_FULLSCREEN,n)},"enterpictureinpicture,leavepictureinpicture":t=>{var s;let i;if(t)i=t.type=="enterpictureinpicture";else{const n=(s=this.getRootNode().pictureInPictureElement)!=null?s:u.pictureInPictureElement;i=this.media&&O(this.media,n)}this.propagateMediaState(r.MEDIA_IS_PIP,i)},"entercast,leavecast,castchange":t=>{var n;const i=(n=globalThis.CastableVideoElement)==null?void 0:n.castElement;let s=this.media&&O(this.media,i);(t==null?void 0:t.type)==="castchange"&&(t==null?void 0:t.detail)==="CONNECTING"&&(s="connecting"),this.propagateMediaState(r.MEDIA_IS_CASTING,s)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_CURRENT_TIME,G(this))},"durationchange,loadedmetadata,emptied":()=>{this.propagateMediaState(r.MEDIA_DURATION,W(this))},"loadedmetadata,emptied,progress":()=>{var t;this.propagateMediaState(r.MEDIA_SEEKABLE,(t=H(this))==null?void 0:t.join(":"))},"progress,emptied":()=>{var t;this.propagateMediaState(r.MEDIA_BUFFERED,dt((t=this.media)==null?void 0:t.buffered))},"ratechange,loadstart":()=>{this.propagateMediaState(r.MEDIA_PLAYBACK_RATE,j(this))},"waiting,playing,emptied":()=>{var i;const t=((i=this.media)==null?void 0:i.readyState)<3;this.propagateMediaState(r.MEDIA_LOADING,t)}},this._airplayUnavailable!==p.UNSUPPORTED){const t=i=>{(i==null?void 0:i.availability)==="available"?this._airplayUnavailable=void 0:(i==null?void 0:i.availability)==="not-available"&&(this._airplayUnavailable=p.UNAVAILABLE),this.propagateMediaState(r.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable)};this._mediaStatePropagators.webkitplaybacktargetavailabilitychanged=t}if(this._castUnavailable!==p.UNSUPPORTED){const t=()=>{var s;const i=(s=globalThis.CastableVideoElement)==null?void 0:s.castState;(i==null?void 0:i.includes("CONNECT"))?this._castUnavailable=void 0:this._castUnavailable=p.UNAVAILABLE,this.propagateMediaState(r.MEDIA_CAST_UNAVAILABLE,this._castUnavailable)};this._mediaStatePropagators.castchange=t}this._textTrackMediaStatePropagators={"addtrack,removetrack,loadstart":()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_LIST,_(R(this))||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_LIST,_(g(this))||void 0),this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,_(y(this))||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,_(k(this))||void 0)},change:()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,_(y(this))||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,_(k(this))||void 0)}}}mediaSetCallback(e){super.mediaSetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const i=t.split(","),s=this._mediaStatePropagators[t];i.forEach(n=>{(n==l.event?this.getRootNode():e).addEventListener(n,s)}),s()}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.addEventListener(n,i)}),i()});try{const t=h.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){console.debug("Error getting volume pref",t)}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const i=t.split(","),s=this._mediaStatePropagators[t];i.forEach(n=>{(n==l.event?this.getRootNode():e).removeEventListener(n,s)})}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.removeEventListener(n,i)}),i()}),this.propagateMediaState(r.MEDIA_PAUSED,!0)}propagateMediaState(e,t){E(this.mediaStateReceivers,e,t);const i=new h.CustomEvent(Z[e],{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(i)}associateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(t.has(e))return;const i=this.registerMediaStateReceiver.bind(this),s=this.unregisterMediaStateReceiver.bind(this),n=it(e,i,s);Object.keys(S).forEach(o=>{e.addEventListener(S[o],this[`_handle${C(o,!0)}`])}),t.set(e,n)}unassociateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(!t.has(e))return;t.get(e)(),t.delete(e),Object.keys(S).forEach(s=>{e.removeEventListener(S[s],this[`_handle${C(s,!0)}`])})}registerMediaStateReceiver(e){var s;if(!e)return;const t=this.mediaStateReceivers;t.indexOf(e)>-1||(t.push(e),E([e],r.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable),E([e],r.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable),E([e],r.MEDIA_CAST_UNAVAILABLE,this._castUnavailable),E([e],r.MEDIA_PIP_UNAVAILABLE,this._pipUnavailable),this.media&&(E([e],r.MEDIA_CAPTIONS_LIST,_(R(this))||void 0),E([e],r.MEDIA_SUBTITLES_LIST,_(g(this))||void 0),E([e],r.MEDIA_CAPTIONS_SHOWING,_(y(this))||void 0),E([e],r.MEDIA_SUBTITLES_SHOWING,_(k(this))||void 0),E([e],r.MEDIA_PAUSED,B(this)),E([e],r.MEDIA_MUTED,w(this)),E([e],r.MEDIA_VOLUME,Q(this)),E([e],r.MEDIA_VOLUME_LEVEL,F(this)),E([e],r.MEDIA_IS_FULLSCREEN,this.hasAttribute(r.MEDIA_IS_FULLSCREEN)),E([e],r.MEDIA_IS_CASTING,this.hasAttribute(r.MEDIA_IS_CASTING)),E([e],r.MEDIA_CURRENT_TIME,G(this)),E([e],r.MEDIA_DURATION,W(this)),E([e],r.MEDIA_SEEKABLE,(s=H(this))==null?void 0:s.join(":")),E([e],r.MEDIA_PLAYBACK_RATE,j(this))))}unregisterMediaStateReceiver(e){const t=this.mediaStateReceivers,i=t.indexOf(e);i<0||t.splice(i,1)}}const B=a=>a.media?a.media.paused:!0,w=a=>!!(a.media&&a.media.muted),Q=a=>{const e=a.media;return e?e.volume:1},F=a=>{let e="high";if(!a.media)return e;const{muted:t,volume:i}=a.media;return i===0||t?e="off":i<.5?e="low":i<.75&&(e="medium"),e},G=a=>{const e=a.media;return e?e.currentTime:0},W=a=>{const e=a==null?void 0:a.media;return Number.isFinite(e==null?void 0:e.duration)?e.duration:NaN},H=a=>{var s;const e=a==null?void 0:a.media;if(!((s=e==null?void 0:e.seekable)==null?void 0:s.length))return;const t=e.seekable.start(0),i=e.seekable.end(e.seekable.length-1);if(!(!t&&!i))return[Number(t.toFixed(3)),Number(i.toFixed(3))]},j=a=>{const e=a.media;return e?e.playbackRate:1},g=a=>f(a.media,{kind:M.SUBTITLES}),R=a=>f(a.media,{kind:M.CAPTIONS}),k=a=>f(a.media,{kind:M.SUBTITLES,mode:m.SHOWING}),y=a=>f(a.media,{kind:M.CAPTIONS,mode:m.SHOWING}),tt=Object.values(r),K=a=>{var i,s,n,o;let{observedAttributes:e}=a.constructor;!e&&((i=a.nodeName)==null?void 0:i.includes("-"))&&(h.customElements.upgrade(a),{observedAttributes:e}=a.constructor);const t=(o=(n=(s=a==null?void 0:a.getAttribute)==null?void 0:s.call(a,r.MEDIA_CHROME_ATTRIBUTES))==null?void 0:n.split)==null?void 0:o.call(n,/\s+/);return Array.isArray(e||t)?(e||t).filter(I=>tt.includes(I)):[]},N=a=>!!K(a).length,et=async(a,e,t)=>(a.isConnected||await q(0),t==null?a.removeAttribute(e):typeof t=="boolean"?t?a.setAttribute(e,""):a.removeAttribute(e):Number.isNaN(t)?a.removeAttribute(e):a.setAttribute(e,t)),at=a=>{var e;return!!((e=a.closest)==null?void 0:e.call(a,'*[slot="media"]'))},U=(a,e)=>{if(at(a))return;const t=(s,n)=>{var A,d;N(s)&&n(s);const{children:o=[]}=s!=null?s:{},I=(d=(A=s==null?void 0:s.shadowRoot)==null?void 0:A.children)!=null?d:[];[...o,...I].forEach(T=>U(T,n))},i=a==null?void 0:a.nodeName.toLowerCase();if(i.includes("-")&&!N(a)){h.customElements.whenDefined(i).then(()=>{t(a,e)});return}t(a,e)},E=(a,e,t)=>{a.forEach(i=>{!K(i).includes(e)||et(i,e,t)})},it=(a,e,t)=>{U(a,e);const i=c=>{var d;const A=(d=c==null?void 0:c.composedPath()[0])!=null?d:c.target;e(A)},s=c=>{var d;const A=(d=c==null?void 0:c.composedPath()[0])!=null?d:c.target;t(A)};a.addEventListener(S.REGISTER_MEDIA_STATE_RECEIVER,i),a.addEventListener(S.UNREGISTER_MEDIA_STATE_RECEIVER,s);const n=(c,A)=>{c.forEach(d=>{const{addedNodes:T=[],removedNodes:X=[],type:x,target:L,attributeName:$}=d;x==="childList"?(Array.prototype.forEach.call(T,v=>U(v,e)),Array.prototype.forEach.call(X,v=>U(v,t))):x==="attributes"&&$===r.MEDIA_CHROME_ATTRIBUTES&&(N(L)?e(L):t(L))})},o=new MutationObserver(n);return o.observe(a,{childList:!0,attributes:!0,subtree:!0}),()=>{U(a,t),o.disconnect(),a.removeEventListener(S.REGISTER_MEDIA_STATE_RECEIVER,i),a.removeEventListener(S.UNREGISTER_MEDIA_STATE_RECEIVER,s)}};let P;const Y=()=>{var a,e;return P||(P=(e=(a=u)==null?void 0:a.createElement)==null?void 0:e.call(a,"video"),P)},st=async(a=Y())=>{if(!a)return!1;const e=a.volume;return a.volume=e/2+.1,await q(0),a.volume!==e},q=a=>new Promise((e,t)=>setTimeout(e,a)),rt=(a=Y())=>typeof(a==null?void 0:a.requestPictureInPicture)=="function",nt=rt();let b;const Et=st().then(a=>(b=a,b)),ot=!!h.WebKitPlaybackTargetAvailabilityEvent,ct=!!h.chrome;function dt(a=[]){return Array.from(a).map((e,t)=>[Number(a.start(t).toFixed(3)),Number(a.end(t).toFixed(3))].join(":")).join(" ")}J("media-controller",V);var Ct=V;export{Ct as default,q as delay,Y as getTestMediaEl,rt as hasPipSupport,st as hasVolumeSupportAsync};
+import $ from"./media-container.js";import{defineCustomElement as z}from"./utils/defineCustomElement.js";import{Window as _,Document as u}from"./utils/server-safe-globals.js";import{fullscreenApi as l}from"./utils/fullscreenApi.js";import{constToCamel as C}from"./utils/stringUtils.js";import{containsComposedNode as O}from"./utils/element-utils.js";import{MediaUIEvents as h,MediaUIAttributes as r,TextTrackKinds as T,TextTrackModes as I,AvailabilityStates as A,AttributeToStateChangeEventMap as J}from"./constants.js";import{stringifyTextTrackList as S,getTextTracksList as f,updateTracksModeTo as U}from"./utils/captions.js";class V extends ${constructor(){super();ot||(this._airplayUnavailable=A.UNSUPPORTED),Et||(this._castUnavailable=A.UNSUPPORTED),rt||(this._pipUnavailable=A.UNSUPPORTED),g!==void 0?g||(this._volumeUnavailable=A.UNSUPPORTED):nt.then(()=>{g||(this._volumeUnavailable=A.UNSUPPORTED,this.propagateMediaState(r.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable))}),this.mediaStateReceivers=[],this.associatedElementSubscriptions=new Map,this.associatedElements=[],this.associateElement(this);const e={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const t=this.media;t.muted=!1,t.volume===0&&(t.volume=.25)},MEDIA_VOLUME_REQUEST:t=>{const i=this.media,s=t.detail;i.volume=s,s>0&&i.muted&&(i.muted=!1);try{_.localStorage.setItem("media-chrome-pref-volume",s.toString())}catch{}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const t=this.media;u.pictureInPictureElement&&u.exitPictureInPicture(),super[l.enter]?super[l.enter]():t.webkitEnterFullscreen?t.webkitEnterFullscreen():t.requestFullscreen?t.requestFullscreen():console.warn("MediaChrome: Fullscreen not supported")},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{u[l.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const t=this.media;!u.pictureInPictureEnabled||(u[l.element]&&u[l.exit](),t.requestPictureInPicture())},MEDIA_EXIT_PIP_REQUEST:()=>{u.pictureInPictureElement&&u.exitPictureInPicture()},MEDIA_ENTER_CAST_REQUEST:()=>{var i;const t=this.media;!((i=globalThis.CastableVideoElement)==null?void 0:i.castEnabled)||(u[l.element]&&u[l.exit](),t.requestCast())},MEDIA_EXIT_CAST_REQUEST:async()=>{var t;((t=globalThis.CastableVideoElement)==null?void 0:t.castElement)&&globalThis.CastableVideoElement.exitCast()},MEDIA_SEEK_REQUEST:t=>{const i=this.media,s=t.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=s)},MEDIA_PLAYBACK_RATE_REQUEST:t=>{this.media.playbackRate=t.detail},MEDIA_PREVIEW_REQUEST:t=>{var d;const i=this.media;if(!i)return;const s=t.detail;s===null&&this.propagateMediaState(r.MEDIA_PREVIEW_TIME,void 0),this.propagateMediaState(r.MEDIA_PREVIEW_TIME,s);const[n]=f(i,{kind:T.METADATA,label:"thumbnails"});if(!(n&&n.cues))return;if(s===null){this.propagateMediaState(r.MEDIA_PREVIEW_IMAGE,void 0),this.propagateMediaState(r.MEDIA_PREVIEW_COORDS,void 0);return}const E=Array.prototype.find.call(n.cues,M=>M.startTime>=s);if(!E)return;const m=/'^(?:[a-z]+:)?\/\//i.test(E.text)||(d=i.querySelector('track[label="thumbnails"]'))==null?void 0:d.src,c=new URL(E.text,m),p=new URLSearchParams(c.hash).get("#xywh");this.propagateMediaState(r.MEDIA_PREVIEW_IMAGE,c.href),this.propagateMediaState(r.MEDIA_PREVIEW_COORDS,p.split(",").join(" "))},MEDIA_SHOW_CAPTIONS_REQUEST:t=>{const i=R(this),{detail:s=[]}=t;U(I.SHOWING,i,s)},MEDIA_DISABLE_CAPTIONS_REQUEST:t=>{const i=R(this),{detail:s=[]}=t;U(I.DISABLED,i,s)},MEDIA_SHOW_SUBTITLES_REQUEST:t=>{const i=D(this),{detail:s=[]}=t;U(I.SHOWING,i,s)},MEDIA_DISABLE_SUBTITLES_REQUEST:t=>{const i=D(this),{detail:s=[]}=t;U(I.DISABLED,i,s)},MEDIA_AIRPLAY_REQUEST:()=>{const{media:t}=this;if(!!t){if(!(t.webkitShowPlaybackTargetPicker&&_.WebKitPlaybackTargetAvailabilityEvent)){console.warn("received a request to select AirPlay but AirPlay is not supported in this environment");return}t.webkitShowPlaybackTargetPicker()}}};if(Object.keys(e).forEach(t=>{const i=`_handle${C(t,!0)}`;this[i]=s=>{if(s.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}e[t](s,this.media)},this.addEventListener(h[t],this[i])}),this._mediaStatePropagators={"play,pause,emptied":()=>{this.propagateMediaState(r.MEDIA_PAUSED,w(this))},"playing,emptied":()=>{var t;this.propagateMediaState(r.MEDIA_HAS_PLAYED,!((t=this.media)==null?void 0:t.paused))},volumechange:()=>{this.propagateMediaState(r.MEDIA_MUTED,B(this)),this.propagateMediaState(r.MEDIA_VOLUME,F(this)),this.propagateMediaState(r.MEDIA_VOLUME_LEVEL,W(this))},[l.event]:t=>{const s=!!u[l.element]&&(t==null?void 0:t.target),n=O(this,s);this.propagateMediaState(r.MEDIA_IS_FULLSCREEN,n)},"enterpictureinpicture,leavepictureinpicture":t=>{var s;let i;if(t)i=t.type=="enterpictureinpicture";else{const n=(s=this.getRootNode().pictureInPictureElement)!=null?s:u.pictureInPictureElement;i=this.media&&O(this.media,n)}this.propagateMediaState(r.MEDIA_IS_PIP,i)},"entercast,leavecast,castchange":t=>{var n;const i=(n=globalThis.CastableVideoElement)==null?void 0:n.castElement;let s=this.media&&O(this.media,i);(t==null?void 0:t.type)==="castchange"&&(t==null?void 0:t.detail)==="CONNECTING"&&(s="connecting"),this.propagateMediaState(r.MEDIA_IS_CASTING,s)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_CURRENT_TIME,G(this))},"durationchange,loadedmetadata,emptied":()=>{this.propagateMediaState(r.MEDIA_DURATION,H(this))},"loadedmetadata,emptied,progress":()=>{var t;this.propagateMediaState(r.MEDIA_SEEKABLE,(t=Q(this))==null?void 0:t.join(":"))},"progress,emptied":()=>{var t;this.propagateMediaState(r.MEDIA_BUFFERED,ct((t=this.media)==null?void 0:t.buffered))},"ratechange,loadstart":()=>{this.propagateMediaState(r.MEDIA_PLAYBACK_RATE,j(this))},"waiting,playing,emptied":()=>{var i;const t=((i=this.media)==null?void 0:i.readyState)<3;this.propagateMediaState(r.MEDIA_LOADING,t)}},this._airplayUnavailable!==A.UNSUPPORTED){const t=i=>{(i==null?void 0:i.availability)==="available"?this._airplayUnavailable=void 0:(i==null?void 0:i.availability)==="not-available"&&(this._airplayUnavailable=A.UNAVAILABLE),this.propagateMediaState(r.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable)};this._mediaStatePropagators.webkitplaybacktargetavailabilitychanged=t}if(this._castUnavailable!==A.UNSUPPORTED){const t=()=>{var s;const i=(s=globalThis.CastableVideoElement)==null?void 0:s.castState;(i==null?void 0:i.includes("CONNECT"))?this._castUnavailable=void 0:this._castUnavailable=A.UNAVAILABLE,this.propagateMediaState(r.MEDIA_CAST_UNAVAILABLE,this._castUnavailable)};this._mediaStatePropagators.castchange=t}this._textTrackMediaStatePropagators={"addtrack,removetrack,loadstart":()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_LIST,S(R(this))||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_LIST,S(D(this))||void 0),this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,S(y(this))||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,S(k(this))||void 0)},change:()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,S(y(this))||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,S(k(this))||void 0)}}}mediaSetCallback(e){super.mediaSetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const i=t.split(","),s=this._mediaStatePropagators[t];i.forEach(n=>{(n==l.event?this.getRootNode():e).addEventListener(n,s)}),s()}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.addEventListener(n,i)}),i()});try{const t=_.localStorage.getItem("media-chrome-pref-volume");t!==null&&(e.volume=t)}catch(t){console.debug("Error getting volume pref",t)}}mediaUnsetCallback(e){super.mediaUnsetCallback(e),Object.keys(this._mediaStatePropagators).forEach(t=>{const i=t.split(","),s=this._mediaStatePropagators[t];i.forEach(n=>{(n==l.event?this.getRootNode():e).removeEventListener(n,s)})}),Object.entries(this._textTrackMediaStatePropagators).forEach(([t,i])=>{t.split(",").forEach(n=>{e.textTracks&&e.textTracks.removeEventListener(n,i)}),i()}),this.propagateMediaState(r.MEDIA_PAUSED,!0)}propagateMediaState(e,t){o(this.mediaStateReceivers,e,t);const i=new _.CustomEvent(J[e],{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(i)}associateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(t.has(e))return;const i=this.registerMediaStateReceiver.bind(this),s=this.unregisterMediaStateReceiver.bind(this),n=at(e,i,s);Object.keys(h).forEach(E=>{e.addEventListener(h[E],this[`_handle${C(E,!0)}`])}),t.set(e,n)}unassociateElement(e){if(!e)return;const{associatedElementSubscriptions:t}=this;if(!t.has(e))return;t.get(e)(),t.delete(e),Object.keys(h).forEach(s=>{e.removeEventListener(h[s],this[`_handle${C(s,!0)}`])})}registerMediaStateReceiver(e){var s;if(!e)return;const t=this.mediaStateReceivers;t.indexOf(e)>-1||(t.push(e),o([e],r.MEDIA_VOLUME_UNAVAILABLE,this._volumeUnavailable),o([e],r.MEDIA_AIRPLAY_UNAVAILABLE,this._airplayUnavailable),o([e],r.MEDIA_CAST_UNAVAILABLE,this._castUnavailable),o([e],r.MEDIA_PIP_UNAVAILABLE,this._pipUnavailable),this.media&&(o([e],r.MEDIA_CAPTIONS_LIST,S(R(this))||void 0),o([e],r.MEDIA_SUBTITLES_LIST,S(D(this))||void 0),o([e],r.MEDIA_CAPTIONS_SHOWING,S(y(this))||void 0),o([e],r.MEDIA_SUBTITLES_SHOWING,S(k(this))||void 0),o([e],r.MEDIA_PAUSED,w(this)),o([e],r.MEDIA_MUTED,B(this)),o([e],r.MEDIA_VOLUME,F(this)),o([e],r.MEDIA_VOLUME_LEVEL,W(this)),o([e],r.MEDIA_IS_FULLSCREEN,this.hasAttribute(r.MEDIA_IS_FULLSCREEN)),o([e],r.MEDIA_IS_CASTING,this.hasAttribute(r.MEDIA_IS_CASTING)),o([e],r.MEDIA_CURRENT_TIME,G(this)),o([e],r.MEDIA_DURATION,H(this)),o([e],r.MEDIA_SEEKABLE,(s=Q(this))==null?void 0:s.join(":")),o([e],r.MEDIA_PLAYBACK_RATE,j(this))))}unregisterMediaStateReceiver(e){const t=this.mediaStateReceivers,i=t.indexOf(e);i<0||t.splice(i,1)}}const w=a=>a.media?a.media.paused:!0,B=a=>!!(a.media&&a.media.muted),F=a=>{const e=a.media;return e?e.volume:1},W=a=>{let e="high";if(!a.media)return e;const{muted:t,volume:i}=a.media;return i===0||t?e="off":i<.5?e="low":i<.75&&(e="medium"),e},G=a=>{const e=a.media;return e?e.currentTime:0},H=a=>{const e=a==null?void 0:a.media;return Number.isFinite(e==null?void 0:e.duration)?e.duration:NaN},Q=a=>{var s;const e=a==null?void 0:a.media;if(!((s=e==null?void 0:e.seekable)==null?void 0:s.length))return;const t=e.seekable.start(0),i=e.seekable.end(e.seekable.length-1);if(!(!t&&!i))return[Number(t.toFixed(3)),Number(i.toFixed(3))]},j=a=>{const e=a.media;return e?e.playbackRate:1},D=a=>f(a.media,{kind:T.SUBTITLES}),R=a=>f(a.media,{kind:T.CAPTIONS}),k=a=>f(a.media,{kind:T.SUBTITLES,mode:I.SHOWING}),y=a=>f(a.media,{kind:T.CAPTIONS,mode:I.SHOWING}),Z=Object.values(r),K=a=>{var i,s,n,E;let{observedAttributes:e}=a.constructor;!e&&((i=a.nodeName)==null?void 0:i.includes("-"))&&(_.customElements.upgrade(a),{observedAttributes:e}=a.constructor);const t=(E=(n=(s=a==null?void 0:a.getAttribute)==null?void 0:s.call(a,r.MEDIA_CHROME_ATTRIBUTES))==null?void 0:n.split)==null?void 0:E.call(n,/\s+/);return Array.isArray(e||t)?(e||t).filter(m=>Z.includes(m)):[]},N=a=>!!K(a).length,tt=async(a,e,t)=>(a.isConnected||await q(0),t==null?a.removeAttribute(e):typeof t=="boolean"?t?a.setAttribute(e,""):a.removeAttribute(e):Number.isNaN(t)?a.removeAttribute(e):a.setAttribute(e,t)),et=a=>{var e;return!!((e=a.closest)==null?void 0:e.call(a,'*[slot="media"]'))},b=(a,e)=>{if(et(a))return;const t=(s,n)=>{var p,d;N(s)&&n(s);const{children:E=[]}=s!=null?s:{},m=(d=(p=s==null?void 0:s.shadowRoot)==null?void 0:p.children)!=null?d:[];[...E,...m].forEach(M=>b(M,n))},i=a==null?void 0:a.nodeName.toLowerCase();if(i.includes("-")&&!N(a)){_.customElements.whenDefined(i).then(()=>{t(a,e)});return}t(a,e)},o=(a,e,t)=>{a.forEach(i=>{!K(i).includes(e)||tt(i,e,t)})},at=(a,e,t)=>{b(a,e);const i=c=>{var d;const p=(d=c==null?void 0:c.composedPath()[0])!=null?d:c.target;e(p)},s=c=>{var d;const p=(d=c==null?void 0:c.composedPath()[0])!=null?d:c.target;t(p)};a.addEventListener(h.REGISTER_MEDIA_STATE_RECEIVER,i),a.addEventListener(h.UNREGISTER_MEDIA_STATE_RECEIVER,s);const n=c=>{c.forEach(p=>{const{addedNodes:d=[],removedNodes:M=[],type:x,target:v,attributeName:X}=p;x==="childList"?(Array.prototype.forEach.call(d,L=>b(L,e)),Array.prototype.forEach.call(M,L=>b(L,t))):x==="attributes"&&X===r.MEDIA_CHROME_ATTRIBUTES&&(N(v)?e(v):t(v))})},E=new MutationObserver(n);return E.observe(a,{childList:!0,attributes:!0,subtree:!0}),()=>{b(a,t),E.disconnect(),a.removeEventListener(h.REGISTER_MEDIA_STATE_RECEIVER,i),a.removeEventListener(h.UNREGISTER_MEDIA_STATE_RECEIVER,s)}};let P;const Y=()=>{var a,e;return P||(P=(e=(a=u)==null?void 0:a.createElement)==null?void 0:e.call(a,"video"),P)},it=async(a=Y())=>{if(!a)return!1;const e=a.volume;return a.volume=e/2+.1,await q(0),a.volume!==e},q=a=>new Promise(e=>setTimeout(e,a)),st=(a=Y())=>typeof(a==null?void 0:a.requestPictureInPicture)=="function",rt=st();let g;const nt=it().then(a=>(g=a,g)),ot=!!_.WebKitPlaybackTargetAvailabilityEvent,Et=!!_.chrome;function ct(a=[]){return Array.from(a).map((e,t)=>[Number(a.start(t).toFixed(3)),Number(a.end(t).toFixed(3))].join(":")).join(" ")}z("media-controller",V);var mt=V;export{mt as default,q as delay,Y as getTestMediaEl,st as hasPipSupport,it as hasVolumeSupportAsync};
 //# sourceMappingURL=media-controller.js.map

dist/media-gesture-receiver.js

@@ -1,2 +0,2 @@
-import{MediaUIAttributes as o,MediaUIEvents as r,PointerTypes as h}from"./constants.js";import{defineCustomElement as l}from"./utils/defineCustomElement.js";import{Window as u,Document as a}from"./utils/server-safe-globals.js";const p=a.createElement("template");p.innerHTML=`
+import{MediaUIAttributes as o,MediaUIEvents as h,PointerTypes as u}from"./constants.js";import{defineCustomElement as T}from"./utils/defineCustomElement.js";import{Window as p,Document as a}from"./utils/server-safe-globals.js";const r=a.createElement("template");r.innerHTML=`
 <style>
@@ -12,3 +12,3 @@ :host {
 </style>
-`;class E extends u.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER,o.MEDIA_PAUSED]}constructor(i={}){super();const n=this.attachShadow({mode:"open"}),t=p.content.cloneNode(!0);this.nativeEl=t;let s=i.slotTemplate;s||(s=a.createElement("template"),s.innerHTML=`<slot>${i.defaultContent||""}</slot>`),this.nativeEl.appendChild(s.content.cloneNode(!0)),n.appendChild(t),this._pointerType=void 0;const c=e=>{this._pointerType=e.pointerType};this.addEventListener("pointerdown",c),this.addEventListener("click",e=>{const{pointerType:d=this._pointerType}=e;if(this._pointerType=void 0,d===h.TOUCH){this.handleTap(e);return}else if(d===h.MOUSE){this.handleMouseClick(e);return}})}attributeChangedCallback(i,n,t){var s,c;if(i===o.MEDIA_CONTROLLER){if(n){const e=a.getElementById(n);(s=e==null?void 0:e.unassociateElement)==null||s.call(e,this)}if(t){const e=a.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var n;this.setAttribute("tabindex",-1),this.setAttribute("aria-hidden",!0);const i=this.getAttribute(o.MEDIA_CONTROLLER);if(i){const t=a.getElementById(i);(n=t==null?void 0:t.associateElement)==null||n.call(t,this)}}disconnectedCallback(){var n;if(this.getAttribute(o.MEDIA_CONTROLLER)){const t=a.getElementById(mediaControllerId);(n=t==null?void 0:t.unassociateElement)==null||n.call(t,this)}}handleTap(i){}handleMouseClick(i){const n=this.getAttribute(o.MEDIA_PAUSED)!=null?r.MEDIA_PLAY_REQUEST:r.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new u.CustomEvent(n,{composed:!0,bubbles:!0}))}}l("media-gesture-receiver",E);var M=E;export{M as default};
+`;class E extends p.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER,o.MEDIA_PAUSED]}constructor(n={}){super();const s=this.attachShadow({mode:"open"}),t=r.content.cloneNode(!0);this.nativeEl=t;let i=n.slotTemplate;i||(i=a.createElement("template"),i.innerHTML=`<slot>${n.defaultContent||""}</slot>`),this.nativeEl.appendChild(i.content.cloneNode(!0)),s.appendChild(t),this._pointerType=void 0;const c=e=>{this._pointerType=e.pointerType};this.addEventListener("pointerdown",c),this.addEventListener("click",e=>{const{pointerType:d=this._pointerType}=e;if(this._pointerType=void 0,d===u.TOUCH){this.handleTap(e);return}else if(d===u.MOUSE){this.handleMouseClick(e);return}})}attributeChangedCallback(n,s,t){var i,c;if(n===o.MEDIA_CONTROLLER){if(s){const e=a.getElementById(s);(i=e==null?void 0:e.unassociateElement)==null||i.call(e,this)}if(t){const e=a.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var s;this.setAttribute("tabindex",-1),this.setAttribute("aria-hidden",!0);const n=this.getAttribute(o.MEDIA_CONTROLLER);if(n){const t=a.getElementById(n);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}disconnectedCallback(){var s;const n=this.getAttribute(o.MEDIA_CONTROLLER);if(n){const t=a.getElementById(n);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}}handleTap(){}handleMouseClick(){const n=this.getAttribute(o.MEDIA_PAUSED)!=null?h.MEDIA_PLAY_REQUEST:h.MEDIA_PAUSE_REQUEST;this.dispatchEvent(new p.CustomEvent(n,{composed:!0,bubbles:!0}))}}T("media-gesture-receiver",E);var M=E;export{M as default};
 //# sourceMappingURL=media-gesture-receiver.js.map

dist/media-settings-popup.js

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

dist/media-text-display.js

@@ -1,2 +0,2 @@
-import{MediaUIAttributes as o}from"./constants.js";import{defineCustomElement as h}from"./utils/defineCustomElement.js";import{Window as u,Document as i}from"./utils/server-safe-globals.js";const r=i.createElement("template");r.innerHTML=`
+import{MediaUIAttributes as o}from"./constants.js";import{defineCustomElement as d}from"./utils/defineCustomElement.js";import{Window as u,Document as i}from"./utils/server-safe-globals.js";const r=i.createElement("template");r.innerHTML=`
   <style>
@@ -44,3 +44,3 @@ :host {
   </span>
-`;class d extends u.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(r.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}attributeChangedCallback(n,s,t){var a,c;if(n===o.MEDIA_CONTROLLER){if(s){const e=i.getElementById(s);(a=e==null?void 0:e.unassociateElement)==null||a.call(e,this)}if(t){const e=i.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var s;const n=this.getAttribute(o.MEDIA_CONTROLLER);if(n){const t=i.getElementById(n);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}disconnectedCallback(){var s;if(this.getAttribute(o.MEDIA_CONTROLLER)){const t=i.getElementById(mediaControllerId);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}}}h("media-text-display",d);var m=d;export{m as default};
+`;class h extends u.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(r.content.cloneNode(!0)),this.container=this.shadowRoot.querySelector("#container")}attributeChangedCallback(n,s,t){var a,c;if(n===o.MEDIA_CONTROLLER){if(s){const e=i.getElementById(s);(a=e==null?void 0:e.unassociateElement)==null||a.call(e,this)}if(t){const e=i.getElementById(t);(c=e==null?void 0:e.associateElement)==null||c.call(e,this)}}}connectedCallback(){var s;const n=this.getAttribute(o.MEDIA_CONTROLLER);if(n){const t=i.getElementById(n);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}disconnectedCallback(){var s;const n=this.getAttribute(o.MEDIA_CONTROLLER);if(n){const t=i.getElementById(n);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}}}d("media-text-display",h);var m=h;export{m as default};
 //# sourceMappingURL=media-text-display.js.map

dist/media-time-range.js

@@ -1,7 +0,23 @@
-import k from"./media-chrome-range.js";import{defineCustomElement as U}from"./utils/defineCustomElement.js";import{Window as u,Document as L}from"./utils/server-safe-globals.js";import{MediaUIEvents as E,MediaUIAttributes as i}from"./constants.js";import{nouns as V}from"./labels/labels.js";import{formatAsTimePhrase as I}from"./utils/time.js";const N="video not loaded, unknown time.",v=f=>{const e=f.range,t=I(+e.value),r=I(+e.max),n=t&&r?`${t} of ${r}`:N;e.setAttribute("aria-valuetext",n)},x=L.createElement("template");x.innerHTML=`
+import D from"./media-chrome-range.js";import{defineCustomElement as y}from"./utils/defineCustomElement.js";import{Window as h,Document as w}from"./utils/server-safe-globals.js";import{MediaUIEvents as E,MediaUIAttributes as i}from"./constants.js";import{nouns as B}from"./labels/labels.js";import{formatAsTimePhrase as x}from"./utils/time.js";import{getOrInsertCSSRule as A}from"./utils/element-utils.js";const C="video not loaded, unknown time.",g=o=>{const e=o.range,t=x(+e.value),r=x(+e.max),n=t&&r?`${t} of ${r}`:C;e.setAttribute("aria-valuetext",n)},I=w.createElement("template");I.innerHTML=`
   <style>
-    #thumbnailContainer {
+    :host {
+      --media-preview-background-color: rgba(20,20,30, .5);
+      --media-preview-background: var(--media-control-background,
+        var(--media-preview-background-color));
+      --media-preview-border-radius: 3px;
+      --media-box-padding-left: 10px;
+      --media-box-padding-right: 10px;
+      color: #fff;
+    }
+
+    [part~="box"] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       position: absolute;
       left: 0;
-      top: 0;
+      bottom: 100%;
+    }
+
+    [part~="preview-box"] {
       transition: visibility .25s, opacity .25s;
@@ -12,35 +28,48 @@ visibility: hidden;
 
-    media-thumbnail-preview {
-      --thumb-preview-min-width: var(--media-thumbnail-preview-min-width, 120px);
-      --thumb-preview-max-width: var(--media-thumbnail-preview-max-width, 180px);
-      --thumb-preview-min-height: var(--media-thumbnail-preview-min-height, 80px);
-      --thumb-preview-max-height: var(--media-thumbnail-preview-max-height, 160px);
-      --thumb-preview-border: 2px solid #fff;
-      transform-origin: 50% 100%;
-      position: absolute;
-      bottom: calc(100% + 5px);
-      border: var(--media-thumbnail-preview-border, var(--thumb-preview-border, 2px solid #fff));
-      border-radius: var(--media-thumbnail-preview-border-radius, 2px);
-      background-color: #000;
+    media-preview-thumbnail,
+    ::slotted(media-preview-thumbnail) {
+      visibility: hidden;
+      transition: visibility 0s .25s;
+      background: var(--media-preview-time-background, var(--media-preview-background));
+      box-shadow: var(--media-preview-thumbnail-box-shadow, 0 0 4px rgba(0,0,0, .2));
+      max-width: var(--media-preview-thumbnail-max-width, 180px);
+      max-height: var(--media-preview-thumbnail-max-height, 160px);
+      min-width: var(--media-preview-thumbnail-min-width, 120px);
+      min-height: var(--media-preview-thumbnail-min-height, 80px);
+      border: var(--media-preview-thumbnail-border);
+      border-radius: var(--media-preview-thumbnail-border-radius,
+        var(--media-preview-border-radius) var(--media-preview-border-radius) 0 0);
     }
 
-    /*
-      This is a downward triangle. Commented out for now because it would also
-      require scaling the px properties below in JS; bottom and border-width.
-    */
-    /* media-thumbnail-preview::after {
-      content: "";
-      display: block;
-      width: 0;
-      height: 0;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: -10px;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-top: 10px solid #fff;
-    } */
+    :host([${i.MEDIA_PREVIEW_IMAGE}]:hover) media-preview-thumbnail,
+    :host([${i.MEDIA_PREVIEW_IMAGE}]:hover) ::slotted(media-preview-thumbnail) {
+      transition-delay: 0s;
+      visibility: visible;
+    }
 
-    :host([${i.MEDIA_PREVIEW_IMAGE}]:hover) #thumbnailContainer {
+    media-preview-time-display,
+    ::slotted(media-preview-time-display) {
+      color: unset;
+      min-width: 0;
+      /* delay changing these CSS props until the preview box transition is ended */
+      transition: min-width 0s .25s, border-radius 0s .25s;
+      background: var(--media-preview-time-background, var(--media-preview-background));
+      border-radius: var(--media-preview-time-border-radius,
+        var(--media-preview-border-radius) var(--media-preview-border-radius)
+        var(--media-preview-border-radius) var(--media-preview-border-radius));
+      padding: var(--media-preview-time-padding, 1px 10px 0);
+      margin: var(--media-preview-time-margin, 0 0 10px);
+      text-shadow: var(--media-preview-time-text-shadow, 0 0 4px rgba(0,0,0, .75));
+    }
+
+    :host([${i.MEDIA_PREVIEW_IMAGE}]) media-preview-time-display,
+    :host([${i.MEDIA_PREVIEW_IMAGE}]) ::slotted(media-preview-time-display) {
+      transition-delay: 0s;
+      min-width: 100%;
+      border-radius: var(--media-preview-time-border-radius,
+        0 0 var(--media-preview-border-radius) var(--media-preview-border-radius));
+    }
+
+    :host([${i.MEDIA_PREVIEW_IMAGE}]:hover) [part~="preview-box"],
+    :host([${i.MEDIA_PREVIEW_TIME}]:hover) [part~="preview-box"] {
       transition: visibility .5s, opacity .5s;
@@ -50,7 +79,20 @@ visibility: visible;
     }
+
+    :host([${i.MEDIA_PREVIEW_TIME}]:hover) {
+      --media-time-range-hover-display: block;
+    }
   </style>
-  <div id="thumbnailContainer">
-    <media-thumbnail-preview></media-thumbnail-preview>
-  </div>
-`;class R extends k{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",i.MEDIA_DURATION,i.MEDIA_SEEKABLE,i.MEDIA_CURRENT_TIME,i.MEDIA_PREVIEW_IMAGE,i.MEDIA_BUFFERED]}constructor(){super();this.shadowRoot.appendChild(x.content.cloneNode(!0)),this.range.addEventListener("input",()=>{const t=this.range.value,r=new u.CustomEvent(E.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(r)}),this.enableThumbnails()}connectedCallback(){this.range.setAttribute("aria-label",V.SEEK()),super.connectedCallback()}attributeChangedCallback(e,t,r){var n,o,l,d,s;e===i.MEDIA_CURRENT_TIME&&(this.range.value=this.mediaCurrentTime,v(this),this.updateBar()),e===i.MEDIA_DURATION&&(this.range.max=Math.floor((o=(n=this.mediaSeekableEnd)!=null?n:this.mediaDuration)!=null?o:1e3),v(this),this.updateBar()),e===i.MEDIA_SEEKABLE&&(this.range.min=(l=this.mediaSeekableStart)!=null?l:0,this.range.max=Math.floor((s=(d=this.mediaSeekableEnd)!=null?d:this.mediaDuration)!=null?s:1e3),v(this),this.updateBar()),e===i.MEDIA_BUFFERED&&this.updateBar(),super.attributeChangedCallback(e,t,r)}get mediaDuration(){const e=this.getAttribute(i.MEDIA_DURATION);return e!=null?+e:void 0}get mediaCurrentTime(){const e=this.getAttribute(i.MEDIA_CURRENT_TIME);return e!=null?+e:void 0}get mediaBuffered(){const e=this.getAttribute(i.MEDIA_BUFFERED);return e?e.split(" ").map(t=>t.split(":").map(r=>+r)):[]}get mediaSeekable(){const e=this.getAttribute(i.MEDIA_SEEKABLE);if(!!e)return e.split(":").map(t=>+t)}get mediaSeekableEnd(){var t;const[,e]=(t=this.mediaSeekable)!=null?t:[];return e}get mediaSeekableStart(){var t;const[e]=(t=this.mediaSeekable)!=null?t:[];return e}getBarColors(){var a;let e=super.getBarColors();const{range:t}=this,r=this.mediaCurrentTime,n=t.max-t.min,o=this.mediaBuffered;if(!o.length||!Number.isFinite(n)||n<=0)return e;const[,l=t.min]=(a=o.find(([m,g])=>m<=r&&r<=g))!=null?a:[],s=(l-t.min)/n*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",s]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let t;const r=()=>{t=d=>{const s=+this.getAttribute(i.MEDIA_DURATION);if(!s)return;const a=this.range.getBoundingClientRect();let m=(d.clientX-a.left)/a.width;m=Math.max(0,Math.min(1,m));const T=a.left-this.getBoundingClientRect().left+m*a.width,h=getComputedStyle(this.thumbnailPreview),D=parseInt(h.getPropertyValue("--thumb-preview-min-width")),C=parseInt(h.getPropertyValue("--thumb-preview-max-width")),_=parseInt(h.getPropertyValue("--thumb-preview-min-height")),S=parseInt(h.getPropertyValue("--thumb-preview-max-height")),{clientWidth:p,clientHeight:w}=this.thumbnailPreview,M=Math.min(C/p,S/w),A=Math.max(D/p,_/w),P=T-p/2,c=M<1?M:A>1?A:1;this.thumbnailPreview.style.transform=`translateX(${P}px) scale(${c})`;let b=parseInt(h.getPropertyValue("--media-thumbnail-preview-border"));Number.isNaN(b)&&(b=parseInt(h.getPropertyValue("--thumb-preview-border"))),this.thumbnailPreview.style.borderWidth=`${Math.round(b/c)}px`,this.thumbnailPreview.style.borderRadius=`${Math.round(b/c)}px`;const y=m*s,B=new u.CustomEvent(E.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:y});this.dispatchEvent(B)},u.addEventListener("pointermove",t,!1)},n=()=>{u.removeEventListener("pointermove",t);const d=new u.CustomEvent(E.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:null});this.dispatchEvent(d)};let o=!1,l=d=>{const s=this.getAttribute(i.MEDIA_DURATION);if(!o&&s){o=!0,r();let a=m=>{m.composedPath().includes(this)||(u.removeEventListener("pointermove",a),o=!1,n())};u.addEventListener("pointermove",a,!1)}};this.addEventListener("pointermove",l,!1)}}U("media-time-range",R);var q=R;export{q as default};
+  <span part="box preview-box">
+    <slot name="preview">
+      <media-preview-thumbnail></media-preview-thumbnail>
+      <media-preview-time-display></media-preview-time-display>
+    </slot>
+  </span>
+  <span part="box current-box">
+    <slot name="current">
+      <!-- Example: add the current time to the playhead -->
+      <!-- <media-current-time-display></media-current-time-display> -->
+    </slot>
+  </span>
+`;class M extends D{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",i.MEDIA_PAUSED,i.MEDIA_DURATION,i.MEDIA_SEEKABLE,i.MEDIA_CURRENT_TIME,i.MEDIA_PREVIEW_IMAGE,i.MEDIA_PREVIEW_TIME,i.MEDIA_BUFFERED]}constructor(){super();this.shadowRoot.appendChild(I.content.cloneNode(!0)),this.range.addEventListener("input",()=>{cancelAnimationFrame(this._refreshId);const t=this.range.value,r=new h.CustomEvent(E.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(r)}),this._refreshBar=()=>{const e=(performance.now()-this._updateTimestamp)/1e3;this.range.value=this.mediaCurrentTime+e,this.updateBar(),this.updateCurrentBox(),this._refreshId=requestAnimationFrame(this._refreshBar)},this._enableBoxes()}connectedCallback(){this.range.setAttribute("aria-label",B.SEEK()),super.connectedCallback()}disconnectedCallback(){cancelAnimationFrame(this._refreshId),super.disconnectedCallback()}attributeChangedCallback(e,t,r){var n,d,m,p,a;(e===i.MEDIA_CURRENT_TIME||e===i.MEDIA_PAUSED)&&(this._updateTimestamp=performance.now(),this.range.value=this.mediaCurrentTime,g(this),this.updateBar(),this.updateCurrentBox(),cancelAnimationFrame(this._refreshId),this.mediaPaused||(this._refreshId=requestAnimationFrame(this._refreshBar))),e===i.MEDIA_DURATION&&(this.range.max=Math.floor((d=(n=this.mediaSeekableEnd)!=null?n:this.mediaDuration)!=null?d:1e3),g(this),this.updateBar(),this.updateCurrentBox()),e===i.MEDIA_SEEKABLE&&(this.range.min=(m=this.mediaSeekableStart)!=null?m:0,this.range.max=Math.floor((a=(p=this.mediaSeekableEnd)!=null?p:this.mediaDuration)!=null?a:1e3),g(this),this.updateBar()),e===i.MEDIA_BUFFERED&&this.updateBar(),super.attributeChangedCallback(e,t,r)}get mediaPaused(){return this.hasAttribute(i.MEDIA_PAUSED)}get mediaDuration(){const e=this.getAttribute(i.MEDIA_DURATION);return e!=null?+e:void 0}get mediaCurrentTime(){const e=this.getAttribute(i.MEDIA_CURRENT_TIME);return e!=null?+e:void 0}get mediaBuffered(){const e=this.getAttribute(i.MEDIA_BUFFERED);return e?e.split(" ").map(t=>t.split(":").map(r=>+r)):[]}get mediaSeekable(){const e=this.getAttribute(i.MEDIA_SEEKABLE);if(!!e)return e.split(":").map(t=>+t)}get mediaSeekableEnd(){var t;const[,e]=(t=this.mediaSeekable)!=null?t:[];return e}get mediaSeekableStart(){var t;const[e]=(t=this.mediaSeekable)!=null?t:[];return e}getBarColors(){var u;let e=super.getBarColors();const{range:t}=this,r=t.max-t.min,n=this.mediaBuffered;if(!n.length||!Number.isFinite(r)||r<=0)return e;const d=this.mediaCurrentTime,[,m=t.min]=(u=n.find(([l,s])=>l<=d&&d<=s))!=null?u:[],a=(m-t.min)/r*100;return e.splice(1,0,["var(--media-time-buffered-color, rgba(255,255,255, .4))",a]),e}updateCurrentBox(){const e=this.shadowRoot.querySelector('[part~="current-box"]'),t=this.range.value/(this.range.max-this.range.min),r=_(this,e,t),{style:n}=A(this.shadowRoot,'[part~="current-box"]');n.transform=`translateX(${r}px)`}_enableBoxes(){const e=this.shadowRoot.querySelectorAll('[part~="box"]'),t=this.shadowRoot.querySelector('[part~="preview-box"]');let r;const n=()=>{r=a=>{if([...e].some(R=>a.composedPath().includes(R)))return;this.updatePointerBar(a);const u=+this.getAttribute(i.MEDIA_DURATION);if(!u)return;const l=this.range.getBoundingClientRect();let s=(a.clientX-l.left)/l.width;s=Math.max(0,Math.min(1,s));const c=_(this,t,s),{style:b}=A(this.shadowRoot,'[part~="preview-box"]');b.transform=`translateX(${c}px)`;const v=s*u,f=new h.CustomEvent(E.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:v});this.dispatchEvent(f)},h.addEventListener("pointermove",r,!1)},d=()=>{h.removeEventListener("pointermove",r);const a=new h.CustomEvent(E.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:null});this.dispatchEvent(a)};let m=!1,p=()=>{const a=this.getAttribute(i.MEDIA_DURATION);if(!m&&a){m=!0,n();let u=l=>{(!l.composedPath().includes(this)||[...e].some(s=>l.composedPath().includes(s)))&&(h.removeEventListener("pointermove",u),m=!1,d())};h.addEventListener("pointermove",u,!1)}};this.addEventListener("pointermove",p,!1)}}function _(o,e,t){const r=o.getBoundingClientRect(),n=o.range.getBoundingClientRect(),d=parseInt(getComputedStyle(o).getPropertyValue("--media-box-padding-left")),m=parseInt(getComputedStyle(o).getPropertyValue("--media-box-padding-right")),p=d+t*n.width,a=e.offsetWidth,u=p-a/2,s=(o.getAttribute("media-bounds")?w.getElementById(o.getAttribute("media-bounds")):o.parentElement).getBoundingClientRect(),c=r.left-s.left,b=s.right-r.left-a-m,v=d-c;return Math.max(v,Math.min(u,b))}y("media-time-range",M);var F=M;export{F as default};
 //# sourceMappingURL=media-time-range.js.map

dist/react/index.d.ts

@@ -93,5 +93,8 @@ import type React from 'react';
 
-declare const MediaThumbnailPreview: GenericForwardRef;
-export { MediaThumbnailPreview };
+declare const MediaPreviewTimeDisplay: GenericForwardRef;
+export { MediaPreviewTimeDisplay };
 
+declare const MediaPreviewThumbnail: GenericForwardRef;
+export { MediaPreviewThumbnail };
+
 declare const MediaLoadingIndicator: GenericForwardRef;
@@ -98,0 +101,0 @@ export { MediaLoadingIndicator };

dist/react/index.js

@@ -167,9 +167,16 @@ import React from "react";
 /** @type { import("react").HTMLElement } */
-const MediaThumbnailPreview = React.forwardRef(({ children, ...props }, ref) => {
-  return React.createElement('media-thumbnail-preview', toNativeProps({ ...props, ref }), children);
+const MediaPreviewTimeDisplay = React.forwardRef(({ children, ...props }, ref) => {
+  return React.createElement('media-preview-time-display', toNativeProps({ ...props, ref }), children);
 });
 
-export { MediaThumbnailPreview };
+export { MediaPreviewTimeDisplay };
 
 /** @type { import("react").HTMLElement } */
+const MediaPreviewThumbnail = React.forwardRef(({ children, ...props }, ref) => {
+  return React.createElement('media-preview-thumbnail', toNativeProps({ ...props, ref }), children);
+});
+
+export { MediaPreviewThumbnail };
+
+/** @type { import("react").HTMLElement } */
 const MediaLoadingIndicator = React.forwardRef(({ children, ...props }, ref) => {
@@ -176,0 +183,0 @@ return React.createElement('media-loading-indicator', toNativeProps({ ...props, ref }), children);

dist/utils/element-utils.js

@@ -1,2 +0,2 @@
-const c=(t,e,n=".value")=>{const o=t.querySelector(n);!o||(o.textContent=e)},r=(t,e)=>{const n=`slot[name="${e}"]`,o=t.shadowRoot.querySelector(n);return o?o.children:[]},l=(t,e)=>r(t,e)[0],s=(t,e)=>!t||!e?!1:t.contains(e)?!0:s(t,e.getRootNode().host);export{s as containsComposedNode,r as getAllSlotted,l as getSlotted,c as updateIconText};
+const c=(r,t,e=".value")=>{const s=r.querySelector(e);!s||(s.textContent=t)},l=(r,t)=>{const e=`slot[name="${t}"]`,s=r.shadowRoot.querySelector(e);return s?s.children:[]},f=(r,t)=>l(r,t)[0],u=(r,t)=>!r||!t?!1:r.contains(t)?!0:u(r,t.getRootNode().host);function h(r,t){var s,o;let e;for(e of r.querySelectorAll("style"))for(let n of(o=(s=e.sheet)==null?void 0:s.cssRules)!=null?o:[])if(n.selectorText===t)return n;return(e==null?void 0:e.sheet)?(e.sheet.insertRule(`${t}{}`,e.sheet.cssRules.length),e.sheet.cssRules[e.sheet.cssRules.length-1]):{style:{setProperty:()=>{}}}}export{u as containsComposedNode,l as getAllSlotted,h as getOrInsertCSSRule,f as getSlotted,c as updateIconText};
 //# sourceMappingURL=element-utils.js.map

package.json

 {
   "name": "media-chrome",
-  "version": "0.6.10-canary.4-cec3aaa",
+  "version": "0.6.10-canary.5-2aa7223",
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
@@ -15,2 +15,3 @@ "main": "dist/index.js",
     "clean": "rimraf dist",
+    "lint": "eslint src/js",
     "build:esm": "esbuild src/js/*.js src/js/*/*.js --target=es2019 --format=esm --outdir=dist --minify --sourcemap",
@@ -17,0 +18,0 @@ "build:cjs": "esbuild src/js/*.js src/js/*/*.js --target=es2019 --format=cjs --outdir=dist/cjs --minify --sourcemap",

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 3 instances 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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

1400151

increased by5.58%

Number of package files

219

increased by4.29%

Lines of code

3973

increased by15.63%

Worsened metrics

Number of low quality alerts

36

increased by5.88%

No dependency changes