Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
media-chrome
Advanced tools
media-chrome - npm Package Compare versions
Comparing version 0.5.1 to 0.5.2
@@ -1,1 +0,1 @@ | ||
| export const MediaUIEvents={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_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"},MediaUIAttributes={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_IS_PIP:"media-is-pip",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_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"},TextTrackKinds={SUBTITLES:"subtitles",CAPTIONS:"captions",DESCRIPTIONS:"descriptions",CHAPTERS:"chapters",METADATA:"metadata"},TextTrackModes={DISABLED:"disabled",HIDDEN:"hidden",SHOWING:"showing"},ReadyStates={HAVE_NOTHING:0,HAVE_METADATA:1,HAVE_CURRENT_DATA:2,HAVE_FUTURE_DATA:3,HAVE_ENOUGH_DATA:4}; | ||
| export const MediaUIEvents={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_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"},MediaUIAttributes={MEDIA_AIRPLAY_UNAVAILABLE:"media-airplay-unavailable",MEDIA_PIP_UNAVAILABLE:"media-pip-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_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_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"},TextTrackKinds={SUBTITLES:"subtitles",CAPTIONS:"captions",DESCRIPTIONS:"descriptions",CHAPTERS:"chapters",METADATA:"metadata"},TextTrackModes={DISABLED:"disabled",HIDDEN:"hidden",SHOWING:"showing"},ReadyStates={HAVE_NOTHING:0,HAVE_METADATA:1,HAVE_CURRENT_DATA:2,HAVE_FUTURE_DATA:3,HAVE_ENOUGH_DATA:4},AvailabilityStates={UNAVAILABLE:"unavailable",UNSUPPORTED:"unsupported"}; |
@@ -1,6 +0,6 @@ | ||
| import l from"./media-chrome-button.js";import{defineCustomElement as o}from"./utils/defineCustomElement.js";import{Window as r,Document as i}from"./utils/server-safe-globals.js";import{MediaUIEvents as n}from"./constants.js";import{verbs as c}from"./labels/labels.js";const m='<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 18"><defs><style>.cls-1{fill:var(--media-icon-color, #eee);}</style></defs><title>Mux Player SVG Icons_v2</title><path class="cls-1" d="M10.19,11.22a.25.25,0,0,0-.38,0L4.35,17.59a.25.25,0,0,0,.19.41H15.46a.25.25,0,0,0,.19-.41Z"/><path class="cls-1" d="M19,0H1A1,1,0,0,0,0,1V14a1,1,0,0,0,1,1H3.94L5,13.75H1.25V1.25h17.5v12.5H15L16.06,15H19a1,1,0,0,0,1-1V1A1,1,0,0,0,19,0Z"/></svg>',t=i.createElement("template");t.innerHTML=` | ||
| import l from"./media-chrome-button.js";import{defineCustomElement as o}from"./utils/defineCustomElement.js";import{Window as r,Document as i}from"./utils/server-safe-globals.js";import{MediaUIEvents as n,MediaUIAttributes as c}from"./constants.js";import{verbs as m}from"./labels/labels.js";const d='<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 18"><defs><style>.cls-1{fill:var(--media-icon-color, #eee);}</style></defs><title>Mux Player SVG Icons_v2</title><path class="cls-1" d="M10.19,11.22a.25.25,0,0,0-.38,0L4.35,17.59a.25.25,0,0,0,.19.41H15.46a.25.25,0,0,0,.19-.41Z"/><path class="cls-1" d="M19,0H1A1,1,0,0,0,0,1V14a1,1,0,0,0,1,1H3.94L5,13.75H1.25V1.25h17.5v12.5H15L16.06,15H19a1,1,0,0,0,1-1V1A1,1,0,0,0,19,0Z"/></svg>',t=i.createElement("template");t.innerHTML=` | ||
| <style> | ||
| </style> | ||
| <slot name="airplay">${m}</slot> | ||
| `;class s extends l{static get observedAttributes(){return[...super.observedAttributes]}constructor(e={}){super({slotTemplate:t,...e})}connectedCallback(){this.setAttribute("aria-label",c.AIRPLAY()),super.connectedCallback()}handleClick(e){const a=new r.CustomEvent(n.MEDIA_AIRPLAY_REQUEST,{composed:!0,bubbles:!0});this.dispatchEvent(a)}}o("media-airplay-button",s);export default s; | ||
| <slot name="airplay">${d}</slot> | ||
| `;class s extends l{static get observedAttributes(){return[...super.observedAttributes,c.MEDIA_AIRPLAY_UNAVAILABLE]}constructor(e={}){super({slotTemplate:t,...e})}connectedCallback(){this.setAttribute("aria-label",m.AIRPLAY()),super.connectedCallback()}handleClick(e){const a=new r.CustomEvent(n.MEDIA_AIRPLAY_REQUEST,{composed:!0,bubbles:!0});this.dispatchEvent(a)}}o("media-airplay-button",s);export default s; |
@@ -1,1 +0,1 @@ | ||
| import w from"./media-container.js";import{defineCustomElement as O}from"./utils/defineCustomElement.js";import{Window as E,Document as h}from"./utils/server-safe-globals.js";import{fullscreenApi as S}from"./utils/fullscreenApi.js";import{constToCamel as D}from"./utils/stringUtils.js";import{containsWithShadow as y}from"./utils/element-utils.js";import{MediaUIEvents as l,MediaUIAttributes as r,TextTrackKinds as I,TextTrackModes as T}from"./constants.js";import{stringifyTextTrackList as m,getTextTracksList as A,updateTracksModeTo as f}from"./utils/captions.js";const{MEDIA_PLAY_REQUEST:Q,MEDIA_PAUSE_REQUEST:x,MEDIA_MUTE_REQUEST:N,MEDIA_UNMUTE_REQUEST:B,MEDIA_VOLUME_REQUEST:W,MEDIA_ENTER_FULLSCREEN_REQUEST:H,MEDIA_EXIT_FULLSCREEN_REQUEST:j,MEDIA_SEEK_REQUEST:F,MEDIA_PREVIEW_REQUEST:G,MEDIA_ENTER_PIP_REQUEST:V,MEDIA_EXIT_PIP_REQUEST:K,MEDIA_PLAYBACK_RATE_REQUEST:Y}=l;class P extends w{constructor(){super();this.mediaStateReceivers=[],this.associatedElementSubscriptions=new Map,this.associatedElements=[],this.associateElement(this);const t={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const e=this.media;e.muted=!1,e.volume===0&&(e.volume=.25)},MEDIA_VOLUME_REQUEST:e=>{const i=this.media,s=e.detail;i.volume=s,s>0&&i.muted&&(i.muted=!1);try{E.localStorage.setItem("media-chrome-pref-volume",s.toString())}catch(n){}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const e=this.media;h.pictureInPictureElement&&h.exitPictureInPicture(),super[S.enter]?super[S.enter]():e.webkitEnterFullscreen?e.webkitEnterFullscreen():e.requestFullscreen?e.requestFullscreen():console.warn("MediaChrome: Fullscreen not supported")},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{h[S.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const e=this.media;!h.pictureInPictureEnabled||(h[S.element]&&h[S.exit](),e.requestPictureInPicture())},MEDIA_EXIT_PIP_REQUEST:()=>{h.pictureInPictureElement&&h.exitPictureInPicture()},MEDIA_SEEK_REQUEST:e=>{const i=this.media,s=e.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=s)},MEDIA_PLAYBACK_RATE_REQUEST:e=>{this.media.playbackRate=e.detail},MEDIA_PREVIEW_REQUEST:e=>{const i=this.media;if(!i)return;const[s]=A(i,{kind:I.METADATA,label:"thumbnails"});if(!(s&&s.cues))return;const n=e.detail,c=Array.prototype.find.call(s.cues,p=>p.startTime>=n);if(!c)return;const _=new URL(c.text),o=new URLSearchParams(_.hash).get("#xywh");this.propagateMediaState(r.MEDIA_PREVIEW_IMAGE,_.href),this.propagateMediaState(r.MEDIA_PREVIEW_COORDS,o.split(",").join(" "))},MEDIA_SHOW_CAPTIONS_REQUEST:e=>{const i=this.captionTracks,{detail:s=[]}=e;f(T.SHOWING,i,s)},MEDIA_DISABLE_CAPTIONS_REQUEST:e=>{const i=this.captionTracks,{detail:s=[]}=e;f(T.DISABLED,i,s)},MEDIA_SHOW_SUBTITLES_REQUEST:e=>{const i=this.subtitleTracks,{detail:s=[]}=e;f(T.SHOWING,i,s)},MEDIA_DISABLE_SUBTITLES_REQUEST:e=>{const i=this.subtitleTracks,{detail:s=[]}=e;f(T.DISABLED,i,s)},MEDIA_AIRPLAY_REQUEST:e=>{const{media:i}=this;if(!!i){if(!(i.webkitShowPlaybackTargetPicker&&E.WebKitPlaybackTargetAvailabilityEvent)){console.warn("received a request to select AirPlay but AirPlay is not supported in this environment");return}i.webkitShowPlaybackTargetPicker()}}};Object.keys(t).forEach(e=>{const i=`_handle${D(e,!0)}`;this[i]=s=>{if(s.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}t[e](s,this.media)},this.addEventListener(l[e],this[i])}),this._mediaStatePropagators={"play,pause":()=>{this.propagateMediaState(r.MEDIA_PAUSED,this.paused)},playing:()=>{var e;this.propagateMediaState(r.MEDIA_HAS_PLAYED,!((e=this.media)==null?void 0:e.paused))},volumechange:()=>{this.propagateMediaState(r.MEDIA_MUTED,this.muted),this.propagateMediaState(r.MEDIA_VOLUME,this.volume),this.propagateMediaState(r.MEDIA_VOLUME_LEVEL,this.volumeLevel)},[S.event]:()=>{var i;let e=h[S.element];this.propagateMediaState(r.MEDIA_IS_FULLSCREEN,e===((i=this.getRootNode().host)!=null?i:this))},"enterpictureinpicture,leavepictureinpicture":e=>{let i;e?i=e.type=="enterpictureinpicture":i=this.isPip,this.propagateMediaState(r.MEDIA_IS_PIP,i)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_CURRENT_TIME,this.currentTime)},"durationchange,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_DURATION,this.duration)},ratechange:()=>{this.propagateMediaState(r.MEDIA_PLAYBACK_RATE,this.playbackRate)},"waiting,playing":()=>{var i;const e=((i=this.media)==null?void 0:i.readyState)<3;this.propagateMediaState(r.MEDIA_LOADING,e)}},this._textTrackMediaStatePropagators={"addtrack,removetrack":()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_LIST,m(this.captionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_LIST,m(this.subtitleTracks)||void 0),this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,m(this.showingCaptionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,m(this.showingSubtitleTracks)||void 0)},change:()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,m(this.showingCaptionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,m(this.showingSubtitleTracks)||void 0)}}}mediaSetCallback(t){super.mediaSetCallback(t),Object.keys(this._mediaStatePropagators).forEach(e=>{const i=e.split(","),s=this._mediaStatePropagators[e];i.forEach(n=>{(n==S.event?this.getRootNode():t).addEventListener(n,s)}),s()}),Object.entries(this._textTrackMediaStatePropagators).forEach(([e,i])=>{e.split(",").forEach(n=>{t.textTracks&&t.textTracks.addEventListener(n,i)}),i()});try{const e=E.localStorage.getItem("media-chrome-pref-volume");e!==null&&(t.volume=e)}catch(e){console.debug("Error getting volume pref",e)}}mediaUnsetCallback(t){super.mediaUnsetCallback(t),Object.keys(this._mediaStatePropagators).forEach(e=>{const i=e.split(","),s=this._mediaStatePropagators[e];i.forEach(n=>{(n==S.event?this.getRootNode():t).removeEventListener(n,s)})}),Object.entries(this._textTrackMediaStatePropagators).forEach(([e,i])=>{e.split(",").forEach(n=>{t.textTracks&&t.textTracks.removeEventListener(n,i)}),i()}),this.propagateMediaState(r.MEDIA_PAUSED,!0)}propagateMediaState(t,e){u(this.mediaStateReceivers,t,e)}associateElement(t){if(!t)return;const{associatedElementSubscriptions:e}=this;if(e.has(t))return;const i=this.registerMediaStateReceiver.bind(this),s=this.unregisterMediaStateReceiver.bind(this),n=z(t,i,s);Object.keys(l).forEach(c=>{t.addEventListener(l[c],this[`_handle${D(c,!0)}`])}),e.set(t,n)}unassociateElement(t){if(!t)return;const{associatedElementSubscriptions:e}=this;if(!e.has(t))return;e.get(t)(),e.delete(t),Object.keys(l).forEach(s=>{t.removeEventListener(l[s],this[`_handle${D(s,!0)}`])})}registerMediaStateReceiver(t){if(!t)return;const e=this.mediaStateReceivers;e.indexOf(t)>-1||(e.push(t),this.media&&(u([t],r.MEDIA_CAPTIONS_LIST,m(this.captionTracks)||void 0),u([t],r.MEDIA_SUBTITLES_LIST,m(this.subtitleTracks)||void 0),u([t],r.MEDIA_CAPTIONS_SHOWING,m(this.showingCaptionTracks)||void 0),u([t],r.MEDIA_SUBTITLES_SHOWING,m(this.showingSubtitleTracks)||void 0),u([t],r.MEDIA_PAUSED,this.paused),u([t],r.MEDIA_MUTED,this.muted),u([t],r.MEDIA_VOLUME,this.volume),u([t],r.MEDIA_VOLUME_LEVEL,this.volumeLevel),u([t],r.MEDIA_CURRENT_TIME,this.currentTime),u([t],r.MEDIA_DURATION,this.duration),u([t],r.MEDIA_PLAYBACK_RATE,this.playbackRate)))}unregisterMediaStateReceiver(t){const e=this.mediaStateReceivers,i=e.indexOf(t);i<0||e.splice(i,1)}play(){this.dispatchEvent(new E.CustomEvent(Q))}pause(){this.dispatchEvent(new E.CustomEvent(x))}get paused(){return this.media?this.media.paused:!0}get muted(){return!!(this.media&&this.media.muted)}set muted(t){const e=t?N:B;this.dispatchEvent(new E.CustomEvent(e))}get volume(){const t=this.media;return t?t.volume:1}set volume(t){this.dispatchEvent(new E.CustomEvent(W,{detail:t}))}get volumeLevel(){let t="high";if(!this.media)return t;const{muted:e,volume:i}=this.media;return i===0||e?t="off":i<.5?t="low":i<.75&&(t="medium"),t}requestFullscreen(){this.dispatchEvent(new E.CustomEvent(H))}exitFullscreen(){this.dispatchEvent(new E.CustomEvent(j))}get currentTime(){const t=this.media;return t?t.currentTime:0}set currentTime(t){this.dispatchEvent(new E.CustomEvent(F,{detail:t}))}get duration(){const t=this.media;return t?t.duration:NaN}get playbackRate(){const t=this.media;return t?t.playbackRate:1}set playbackRate(t){this.dispatchEvent(new E.CustomEvent(Y,{detail:t}))}get subtitleTracks(){return A(this.media,{kind:I.SUBTITLES})}get captionTracks(){return A(this.media,{kind:I.CAPTIONS})}get showingSubtitleTracks(){return A(this.media,{kind:I.SUBTITLES,mode:T.SHOWING})}get showingCaptionTracks(){return A(this.media,{kind:I.CAPTIONS,mode:T.SHOWING})}get isPip(){var e;const t=(e=this.getRootNode().pictureInPictureElement)!=null?e:h.pictureInPictureElement;return this.media&&y(this.media,t)}requestPictureInPicture(){this.dispatchEvent(new E.CustomEvent(V))}exitPictureInPicture(){this.dispatchEvent(new E.CustomEvent(K))}requestPreview(t){this.dispatchEvent(new E.CustomEvent(G,{detail:t}))}}const q=Object.values(r),L=a=>{var i,s,n;const{constructor:{observedAttributes:t}}=a,e=(n=(s=(i=a==null?void 0:a.getAttribute)==null?void 0:i.call(a,r.MEDIA_CHROME_ATTRIBUTES))==null?void 0:s.split)==null?void 0:n.call(s,/\s+/);return Array.isArray(t||e)?(t||e).filter(c=>q.includes(c)):[]},U=a=>!!L(a).length,X=(a,t,e)=>e==null?a.removeAttribute(t):typeof e=="boolean"?e?a.setAttribute(t,""):a.removeAttribute(t):Number.isNaN(e)?a.removeAttribute(t):a.setAttribute(t,e),$=a=>{var t;return!!((t=a.closest)==null?void 0:t.call(a,'*[slot="media"]'))},M=(a,t)=>{if($(a))return;const e=(s,n)=>{var p,d;U(s)&&n(s);const{children:c=[]}=s!=null?s:{},_=(d=(p=s==null?void 0:s.shadowRoot)==null?void 0:p.children)!=null?d:[];[...c,..._].forEach(R=>M(R,n))},i=a==null?void 0:a.nodeName.toLowerCase();if(i.includes("-")&&!U(a)){E.customElements.whenDefined(i).then(()=>{e(a,t)});return}e(a,t)},u=(a,t,e)=>{a.forEach(i=>{!L(i).includes(t)||X(i,t,e)})},z=(a,t,e)=>{M(a,t);const i=o=>{var d;const p=(d=o==null?void 0:o.composedPath()[0])!=null?d:o.target;t(p)},s=o=>{var d;const p=(d=o==null?void 0:o.composedPath()[0])!=null?d:o.target;e(p)};a.addEventListener(l.REGISTER_MEDIA_STATE_RECEIVER,i),a.addEventListener(l.UNREGISTER_MEDIA_STATE_RECEIVER,s);const n=(o,p)=>{o.forEach(d=>{const{addedNodes:R=[],removedNodes:k=[],type:b,target:v,attributeName:C}=d;b==="childList"?(Array.prototype.forEach.call(R,g=>M(g,t)),Array.prototype.forEach.call(k,g=>M(g,e))):b==="attributes"&&C===r.MEDIA_CHROME_ATTRIBUTES&&(U(v)?t(v):e(v))})},c=new MutationObserver(n);return c.observe(a,{childList:!0,attributes:!0,subtree:!0}),()=>{M(a,e),c.disconnect(),a.removeEventListener(l.REGISTER_MEDIA_STATE_RECEIVER,i),a.removeEventListener(l.UNREGISTER_MEDIA_STATE_RECEIVER,s)}};O("media-controller",P);export default P; | ||
| import N from"./media-container.js";import{defineCustomElement as x}from"./utils/defineCustomElement.js";import{Window as E,Document as l}from"./utils/server-safe-globals.js";import{fullscreenApi as m}from"./utils/fullscreenApi.js";import{constToCamel as P}from"./utils/stringUtils.js";import{containsWithShadow as Q}from"./utils/element-utils.js";import{MediaUIEvents as h,MediaUIAttributes as r,TextTrackKinds as T,TextTrackModes as _,AvailabilityStates as A}from"./constants.js";import{stringifyTextTrackList as p,getTextTracksList as M,updateTracksModeTo as f}from"./utils/captions.js";const{MEDIA_PLAY_REQUEST:B,MEDIA_PAUSE_REQUEST:V,MEDIA_MUTE_REQUEST:W,MEDIA_UNMUTE_REQUEST:H,MEDIA_VOLUME_REQUEST:j,MEDIA_ENTER_FULLSCREEN_REQUEST:F,MEDIA_EXIT_FULLSCREEN_REQUEST:G,MEDIA_SEEK_REQUEST:Y,MEDIA_PREVIEW_REQUEST:K,MEDIA_ENTER_PIP_REQUEST:q,MEDIA_EXIT_PIP_REQUEST:X,MEDIA_PLAYBACK_RATE_REQUEST:$}=h;class C extends N{constructor(){super();at||(this._airplayUnavailable=A.UNSUPPORTED),et||(this._pipUnavailable=A.UNSUPPORTED),U!==void 0?U||(this._volumeUnavailable=A.UNSUPPORTED):it.then(()=>{U||(this._volumeUnavailable=A.UNSUPPORTED,this.propagateMediaState(r.MEDIA_VOLUME_UNAVAILABLE,this.volumeUnavailable))}),this.mediaStateReceivers=[],this.associatedElementSubscriptions=new Map,this.associatedElements=[],this.associateElement(this);const t={MEDIA_PLAY_REQUEST:()=>this.media.play(),MEDIA_PAUSE_REQUEST:()=>this.media.pause(),MEDIA_MUTE_REQUEST:()=>this.media.muted=!0,MEDIA_UNMUTE_REQUEST:()=>{const e=this.media;e.muted=!1,e.volume===0&&(e.volume=.25)},MEDIA_VOLUME_REQUEST:e=>{const i=this.media,s=e.detail;i.volume=s,s>0&&i.muted&&(i.muted=!1);try{E.localStorage.setItem("media-chrome-pref-volume",s.toString())}catch(n){}},MEDIA_ENTER_FULLSCREEN_REQUEST:()=>{const e=this.media;l.pictureInPictureElement&&l.exitPictureInPicture(),super[m.enter]?super[m.enter]():e.webkitEnterFullscreen?e.webkitEnterFullscreen():e.requestFullscreen?e.requestFullscreen():console.warn("MediaChrome: Fullscreen not supported")},MEDIA_EXIT_FULLSCREEN_REQUEST:()=>{l[m.exit]()},MEDIA_ENTER_PIP_REQUEST:()=>{const e=this.media;!l.pictureInPictureEnabled||(l[m.element]&&l[m.exit](),e.requestPictureInPicture())},MEDIA_EXIT_PIP_REQUEST:()=>{l.pictureInPictureElement&&l.exitPictureInPicture()},MEDIA_SEEK_REQUEST:e=>{const i=this.media,s=e.detail;(i.readyState>0||i.readyState===void 0)&&(i.currentTime=s)},MEDIA_PLAYBACK_RATE_REQUEST:e=>{this.media.playbackRate=e.detail},MEDIA_PREVIEW_REQUEST:e=>{const i=this.media;if(!i)return;const[s]=M(i,{kind:T.METADATA,label:"thumbnails"});if(!(s&&s.cues))return;const n=e.detail,c=Array.prototype.find.call(s.cues,S=>S.startTime>=n);if(!c)return;const I=new URL(c.text),u=new URLSearchParams(I.hash).get("#xywh");this.propagateMediaState(r.MEDIA_PREVIEW_IMAGE,I.href),this.propagateMediaState(r.MEDIA_PREVIEW_COORDS,u.split(",").join(" "))},MEDIA_SHOW_CAPTIONS_REQUEST:e=>{const i=this.captionTracks,{detail:s=[]}=e;f(_.SHOWING,i,s)},MEDIA_DISABLE_CAPTIONS_REQUEST:e=>{const i=this.captionTracks,{detail:s=[]}=e;f(_.DISABLED,i,s)},MEDIA_SHOW_SUBTITLES_REQUEST:e=>{const i=this.subtitleTracks,{detail:s=[]}=e;f(_.SHOWING,i,s)},MEDIA_DISABLE_SUBTITLES_REQUEST:e=>{const i=this.subtitleTracks,{detail:s=[]}=e;f(_.DISABLED,i,s)},MEDIA_AIRPLAY_REQUEST:e=>{const{media:i}=this;if(!!i){if(!(i.webkitShowPlaybackTargetPicker&&E.WebKitPlaybackTargetAvailabilityEvent)){console.warn("received a request to select AirPlay but AirPlay is not supported in this environment");return}i.webkitShowPlaybackTargetPicker()}}};if(Object.keys(t).forEach(e=>{const i=`_handle${P(e,!0)}`;this[i]=s=>{if(s.stopPropagation(),!this.media){console.warn("MediaController: No media available.");return}t[e](s,this.media)},this.addEventListener(h[e],this[i])}),this._mediaStatePropagators={"play,pause":()=>{this.propagateMediaState(r.MEDIA_PAUSED,this.paused)},playing:()=>{var e;this.propagateMediaState(r.MEDIA_HAS_PLAYED,!((e=this.media)==null?void 0:e.paused))},volumechange:()=>{this.propagateMediaState(r.MEDIA_MUTED,this.muted),this.propagateMediaState(r.MEDIA_VOLUME,this.volume),this.propagateMediaState(r.MEDIA_VOLUME_LEVEL,this.volumeLevel)},[m.event]:()=>{var i;let e=l[m.element];this.propagateMediaState(r.MEDIA_IS_FULLSCREEN,e===((i=this.getRootNode().host)!=null?i:this))},"enterpictureinpicture,leavepictureinpicture":e=>{let i;e?i=e.type=="enterpictureinpicture":i=this.isPip,this.propagateMediaState(r.MEDIA_IS_PIP,i)},"timeupdate,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_CURRENT_TIME,this.currentTime)},"durationchange,loadedmetadata":()=>{this.propagateMediaState(r.MEDIA_DURATION,this.duration)},ratechange:()=>{this.propagateMediaState(r.MEDIA_PLAYBACK_RATE,this.playbackRate)},"waiting,playing":()=>{var i;const e=((i=this.media)==null?void 0:i.readyState)<3;this.propagateMediaState(r.MEDIA_LOADING,e)}},this.airplayUnavailable!==A.UNSUPPORTED){const e=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=e}this._textTrackMediaStatePropagators={"addtrack,removetrack":()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_LIST,p(this.captionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_LIST,p(this.subtitleTracks)||void 0),this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,p(this.showingCaptionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,p(this.showingSubtitleTracks)||void 0)},change:()=>{this.propagateMediaState(r.MEDIA_CAPTIONS_SHOWING,p(this.showingCaptionTracks)||void 0),this.propagateMediaState(r.MEDIA_SUBTITLES_SHOWING,p(this.showingSubtitleTracks)||void 0)}}}mediaSetCallback(t){super.mediaSetCallback(t),Object.keys(this._mediaStatePropagators).forEach(e=>{const i=e.split(","),s=this._mediaStatePropagators[e];i.forEach(n=>{(n==m.event?this.getRootNode():t).addEventListener(n,s)}),s()}),Object.entries(this._textTrackMediaStatePropagators).forEach(([e,i])=>{e.split(",").forEach(n=>{t.textTracks&&t.textTracks.addEventListener(n,i)}),i()});try{const e=E.localStorage.getItem("media-chrome-pref-volume");e!==null&&(t.volume=e)}catch(e){console.debug("Error getting volume pref",e)}}mediaUnsetCallback(t){super.mediaUnsetCallback(t),Object.keys(this._mediaStatePropagators).forEach(e=>{const i=e.split(","),s=this._mediaStatePropagators[e];i.forEach(n=>{(n==m.event?this.getRootNode():t).removeEventListener(n,s)})}),Object.entries(this._textTrackMediaStatePropagators).forEach(([e,i])=>{e.split(",").forEach(n=>{t.textTracks&&t.textTracks.removeEventListener(n,i)}),i()}),this.propagateMediaState(r.MEDIA_PAUSED,!0)}propagateMediaState(t,e){o(this.mediaStateReceivers,t,e)}associateElement(t){if(!t)return;const{associatedElementSubscriptions:e}=this;if(e.has(t))return;const i=this.registerMediaStateReceiver.bind(this),s=this.unregisterMediaStateReceiver.bind(this),n=tt(t,i,s);Object.keys(h).forEach(c=>{t.addEventListener(h[c],this[`_handle${P(c,!0)}`])}),e.set(t,n)}unassociateElement(t){if(!t)return;const{associatedElementSubscriptions:e}=this;if(!e.has(t))return;e.get(t)(),e.delete(t),Object.keys(h).forEach(s=>{t.removeEventListener(h[s],this[`_handle${P(s,!0)}`])})}registerMediaStateReceiver(t){if(!t)return;const e=this.mediaStateReceivers;e.indexOf(t)>-1||(e.push(t),o([t],r.MEDIA_VOLUME_UNAVAILABLE,this.volumeUnavailable),o([t],r.MEDIA_AIRPLAY_UNAVAILABLE,this.airplayUnavailable),o([t],r.MEDIA_PIP_UNAVAILABLE,this.pipUnavailable),this.media&&(o([t],r.MEDIA_CAPTIONS_LIST,p(this.captionTracks)||void 0),o([t],r.MEDIA_SUBTITLES_LIST,p(this.subtitleTracks)||void 0),o([t],r.MEDIA_CAPTIONS_SHOWING,p(this.showingCaptionTracks)||void 0),o([t],r.MEDIA_SUBTITLES_SHOWING,p(this.showingSubtitleTracks)||void 0),o([t],r.MEDIA_PAUSED,this.paused),o([t],r.MEDIA_MUTED,this.muted),o([t],r.MEDIA_VOLUME,this.volume),o([t],r.MEDIA_VOLUME_LEVEL,this.volumeLevel),o([t],r.MEDIA_CURRENT_TIME,this.currentTime),o([t],r.MEDIA_DURATION,this.duration),o([t],r.MEDIA_PLAYBACK_RATE,this.playbackRate)))}unregisterMediaStateReceiver(t){const e=this.mediaStateReceivers,i=e.indexOf(t);i<0||e.splice(i,1)}play(){this.dispatchEvent(new E.CustomEvent(B))}pause(){this.dispatchEvent(new E.CustomEvent(V))}get airplayUnavailable(){return this._airplayUnavailable}get paused(){return this.media?this.media.paused:!0}get muted(){return!!(this.media&&this.media.muted)}set muted(t){const e=t?W:H;this.dispatchEvent(new E.CustomEvent(e))}get volume(){const t=this.media;return t?t.volume:1}set volume(t){this.dispatchEvent(new E.CustomEvent(j,{detail:t}))}get volumeLevel(){let t="high";if(!this.media)return t;const{muted:e,volume:i}=this.media;return i===0||e?t="off":i<.5?t="low":i<.75&&(t="medium"),t}get volumeUnavailable(){return this._volumeUnavailable}requestFullscreen(){this.dispatchEvent(new E.CustomEvent(F))}exitFullscreen(){this.dispatchEvent(new E.CustomEvent(G))}get currentTime(){const t=this.media;return t?t.currentTime:0}set currentTime(t){this.dispatchEvent(new E.CustomEvent(Y,{detail:t}))}get duration(){const t=this.media;return t?t.duration:NaN}get playbackRate(){const t=this.media;return t?t.playbackRate:1}set playbackRate(t){this.dispatchEvent(new E.CustomEvent($,{detail:t}))}get subtitleTracks(){return M(this.media,{kind:T.SUBTITLES})}get captionTracks(){return M(this.media,{kind:T.CAPTIONS})}get showingSubtitleTracks(){return M(this.media,{kind:T.SUBTITLES,mode:_.SHOWING})}get showingCaptionTracks(){return M(this.media,{kind:T.CAPTIONS,mode:_.SHOWING})}get isPip(){var e;const t=(e=this.getRootNode().pictureInPictureElement)!=null?e:l.pictureInPictureElement;return this.media&&Q(this.media,t)}requestPictureInPicture(){this.dispatchEvent(new E.CustomEvent(q))}exitPictureInPicture(){this.dispatchEvent(new E.CustomEvent(X))}requestPreview(t){this.dispatchEvent(new E.CustomEvent(K,{detail:t}))}get pipUnavailable(){return this._pipUnavailable}}const z=Object.values(r),y=a=>{var i,s,n;const{constructor:{observedAttributes:t}}=a,e=(n=(s=(i=a==null?void 0:a.getAttribute)==null?void 0:i.call(a,r.MEDIA_CHROME_ATTRIBUTES))==null?void 0:s.split)==null?void 0:n.call(s,/\s+/);return Array.isArray(t||e)?(t||e).filter(c=>z.includes(c)):[]},L=a=>!!y(a).length,J=(a,t,e)=>e==null?a.removeAttribute(t):typeof e=="boolean"?e?a.setAttribute(t,""):a.removeAttribute(t):Number.isNaN(e)?a.removeAttribute(t):a.setAttribute(t,e),Z=a=>{var t;return!!((t=a.closest)==null?void 0:t.call(a,'*[slot="media"]'))},v=(a,t)=>{if(Z(a))return;const e=(s,n)=>{var S,d;L(s)&&n(s);const{children:c=[]}=s!=null?s:{},I=(d=(S=s==null?void 0:s.shadowRoot)==null?void 0:S.children)!=null?d:[];[...c,...I].forEach(R=>v(R,n))},i=a==null?void 0:a.nodeName.toLowerCase();if(i.includes("-")&&!L(a)){E.customElements.whenDefined(i).then(()=>{e(a,t)});return}e(a,t)},o=(a,t,e)=>{a.forEach(i=>{!y(i).includes(t)||J(i,t,e)})},tt=(a,t,e)=>{v(a,t);const i=u=>{var d;const S=(d=u==null?void 0:u.composedPath()[0])!=null?d:u.target;t(S)},s=u=>{var d;const S=(d=u==null?void 0:u.composedPath()[0])!=null?d:u.target;e(S)};a.addEventListener(h.REGISTER_MEDIA_STATE_RECEIVER,i),a.addEventListener(h.UNREGISTER_MEDIA_STATE_RECEIVER,s);const n=(u,S)=>{u.forEach(d=>{const{addedNodes:R=[],removedNodes:O=[],type:k,target:g,attributeName:w}=d;k==="childList"?(Array.prototype.forEach.call(R,D=>v(D,t)),Array.prototype.forEach.call(O,D=>v(D,e))):k==="attributes"&&w===r.MEDIA_CHROME_ATTRIBUTES&&(L(g)?t(g):e(g))})},c=new MutationObserver(n);return c.observe(a,{childList:!0,attributes:!0,subtree:!0}),()=>{v(a,e),c.disconnect(),a.removeEventListener(h.REGISTER_MEDIA_STATE_RECEIVER,i),a.removeEventListener(h.UNREGISTER_MEDIA_STATE_RECEIVER,s)}};let b;export const getTestMediaEl=()=>{var a,t;return b||(b=(t=(a=l)==null?void 0:a.createElement)==null?void 0:t.call(a,"video"),b)},hasVolumeSupportAsync=async(a=getTestMediaEl())=>{if(!a)return!1;const t=a.volume;return a.volume=t/2+.1,new Promise((e,i)=>{setTimeout(()=>{e(a.volume!==t)},0)})},hasPipSupport=(a=getTestMediaEl())=>typeof(a==null?void 0:a.requestPictureInPicture)=="function";const et=hasPipSupport();let U;const it=hasVolumeSupportAsync().then(a=>(U=a,U)),at=!!E.WebKitPlaybackTargetAvailabilityEvent;x("media-controller",C);export default C; |
@@ -17,2 +17,2 @@ import c from"./media-chrome-button.js";import{defineCustomElement as d}from"./utils/defineCustomElement.js";import{Window as m,Document as b}from"./utils/server-safe-globals.js";import{MediaUIEvents as n,MediaUIAttributes as t}from"./constants.js";import{verbs as l}from"./labels/labels.js";const i='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="icon" d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',a=b.createElement("template");a.innerHTML=` | ||
| <slot name="exit">${i}</slot> | ||
| `;const r=o=>{const s=o.getAttribute(t.MEDIA_IS_PIP)!=null?l.EXIT_PIP():l.ENTER_PIP();o.setAttribute("aria-label",s)};class u extends c{static get observedAttributes(){return[...super.observedAttributes,t.MEDIA_IS_PIP]}constructor(e={}){super({slotTemplate:a,...e})}connectedCallback(){r(this),super.connectedCallback()}attributeChangedCallback(e,s,I){e===t.MEDIA_IS_PIP&&r(this),super.attributeChangedCallback(e,s,I)}handleClick(e){const s=this.getAttribute(t.MEDIA_IS_PIP)!=null?n.MEDIA_EXIT_PIP_REQUEST:n.MEDIA_ENTER_PIP_REQUEST;this.dispatchEvent(new m.CustomEvent(s,{composed:!0,bubbles:!0}))}}d("media-pip-button",u);export default u; | ||
| `;const r=o=>{const s=o.getAttribute(t.MEDIA_IS_PIP)!=null?l.EXIT_PIP():l.ENTER_PIP();o.setAttribute("aria-label",s)};class I extends c{static get observedAttributes(){return[...super.observedAttributes,t.MEDIA_IS_PIP,t.MEDIA_PIP_UNAVAILABLE]}constructor(e={}){super({slotTemplate:a,...e})}connectedCallback(){r(this),super.connectedCallback()}attributeChangedCallback(e,s,u){e===t.MEDIA_IS_PIP&&r(this),super.attributeChangedCallback(e,s,u)}handleClick(e){const s=this.getAttribute(t.MEDIA_IS_PIP)!=null?n.MEDIA_EXIT_PIP_REQUEST:n.MEDIA_ENTER_PIP_REQUEST;this.dispatchEvent(new m.CustomEvent(s,{composed:!0,bubbles:!0}))}}d("media-pip-button",I);export default I; |
@@ -1,18 +0,14 @@ | ||
| import{Window as g,Document as c}from"./utils/server-safe-globals.js";import{defineCustomElement as p}from"./utils/defineCustomElement.js";import{MediaUIAttributes as o}from"./constants.js";const m=c.createElement("template");m.innerHTML=` | ||
| import{Window as I,Document as o}from"./utils/server-safe-globals.js";import{defineCustomElement as g}from"./utils/defineCustomElement.js";import{MediaUIAttributes as i}from"./constants.js";const E=o.createElement("template");E.innerHTML=` | ||
| <style> | ||
| :host { | ||
| box-sizing: border-box; | ||
| background-color: #000; | ||
| width: 284px; | ||
| height: 160px; | ||
| overflow: hidden; | ||
| height: auto; | ||
| width: auto; | ||
| } | ||
| img { | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| object-fit: none; | ||
| } | ||
| </style> | ||
| <img crossorigin loading="eager" decoding="async" /> | ||
| `;class E extends g.HTMLElement{static get observedAttributes(){return[o.MEDIA_CONTROLLER,"time",o.MEDIA_PREVIEW_IMAGE,o.MEDIA_PREVIEW_COORDS]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(m.content.cloneNode(!0))}connectedCallback(){var i;const n=this.getAttribute(o.MEDIA_CONTROLLER);if(n){const t=c.getElementById(n);(i=t==null?void 0:t.associateElement)==null||i.call(t,this)}}disconnectedCallback(){var i;if(this.getAttribute(o.MEDIA_CONTROLLER)){const t=c.getElementById(mediaControllerId);(i=t==null?void 0:t.unassociateElement)==null||i.call(t,this)}}attributeChangedCallback(n,i,t){var s,a;if(["time",o.MEDIA_PREVIEW_IMAGE,o.MEDIA_PREVIEW_COORDS].includes(n)&&this.update(),n===o.MEDIA_CONTROLLER){if(i){const e=c.getElementById(i);(s=e==null?void 0:e.unassociateElement)==null||s.call(e,this)}if(t){const e=c.getElementById(t);(a=e==null?void 0:e.associateElement)==null||a.call(e,this)}}}update(){const n=this.getAttribute(o.MEDIA_PREVIEW_COORDS),i=this.getAttribute(o.MEDIA_PREVIEW_IMAGE);if(!(n&&i))return;const t=this.offsetWidth,s=this.shadowRoot.querySelector("img"),[a,e,u,l]=n.split(/\s+/).map(I=>+I),r=i,d=t/u||1,h=()=>{s.style.width=`${d*s.naturalWidth}px`,s.style.height=`${d*s.naturalHeight}px`};s.src!==r&&(s.onload=h,s.src=r,h()),h(),s.style.left=`-${d*a}px`,s.style.top=`-${d*e}px`}}p("media-thumbnail-preview",E);export default E; | ||
| `;class u extends I.HTMLElement{static get observedAttributes(){return[i.MEDIA_CONTROLLER,"time",i.MEDIA_PREVIEW_IMAGE,i.MEDIA_PREVIEW_COORDS]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(E.content.cloneNode(!0))}connectedCallback(){var s;const n=this.getAttribute(i.MEDIA_CONTROLLER);if(n){const t=o.getElementById(n);(s=t==null?void 0:t.associateElement)==null||s.call(t,this)}}disconnectedCallback(){var s;if(this.getAttribute(i.MEDIA_CONTROLLER)){const t=o.getElementById(mediaControllerId);(s=t==null?void 0:t.unassociateElement)==null||s.call(t,this)}}attributeChangedCallback(n,s,t){var c,a;if(["time",i.MEDIA_PREVIEW_IMAGE,i.MEDIA_PREVIEW_COORDS].includes(n)&&this.update(),n===i.MEDIA_CONTROLLER){if(s){const e=o.getElementById(s);(c=e==null?void 0:e.unassociateElement)==null||c.call(e,this)}if(t){const e=o.getElementById(t);(a=e==null?void 0:e.associateElement)==null||a.call(e,this)}}}update(){const n=this.getAttribute(i.MEDIA_PREVIEW_COORDS),s=this.getAttribute(i.MEDIA_PREVIEW_IMAGE);if(!(n&&s))return;const t=this.shadowRoot.querySelector("img"),[c,a,e,m]=n.split(/\s+/).map(h=>+h),r=s,d=()=>{t.style.height=`${m}px`,t.style["aspect-ratio"]=`${e} / ${m}`};t.src!==r&&(t.onload=d,t.src=r,d()),d(),t.style["object-position"]=`-${c}px -${a}px`}}g("media-thumbnail-preview",u);export default u; |
@@ -1,20 +0,15 @@ | ||
| import A from"./media-chrome-range.js";import{defineCustomElement as I}from"./utils/defineCustomElement.js";import{Window as r,Document as C}from"./utils/server-safe-globals.js";import{MediaUIEvents as h,MediaUIAttributes as n}from"./constants.js";import{nouns as w}from"./labels/labels.js";import{formatAsTimePhrase as c}from"./utils/time.js";const T="video not loaded, unknown time.",f=d=>{const e=d.range,t=c(+e.value),i=c(+e.max),l=t&&i?`${t} of ${i}`:T;e.setAttribute("aria-valuetext",l)},b=C.createElement("template");b.innerHTML=` | ||
| import A from"./media-chrome-range.js";import{defineCustomElement as I}from"./utils/defineCustomElement.js";import{Window as o,Document as C}from"./utils/server-safe-globals.js";import{MediaUIEvents as c,MediaUIAttributes as i}from"./constants.js";import{nouns as w}from"./labels/labels.js";import{formatAsTimePhrase as h}from"./utils/time.js";const T="video not loaded, unknown time.",f=d=>{const e=d.range,t=h(+e.value),a=h(+e.max),l=t&&a?`${t} of ${a}`:T;e.setAttribute("aria-valuetext",l)},b=C.createElement("template");b.innerHTML=` | ||
| <style> | ||
| #thumbnailContainer { | ||
| display: none; | ||
| position: absolute; | ||
| top: 0; | ||
| } | ||
| media-thumbnail-preview { | ||
| /* Scale the thumbnail preview to 50% and reposition appropriately to not take up too much real-estate. */ | ||
| transform: scale(0.5) translateY(50%) translateX(-100%); | ||
| position: absolute; | ||
| bottom: 10px; | ||
| bottom: calc(100% + 5px); | ||
| border: 2px solid #fff; | ||
| border-radius: 2px; | ||
| background-color: #000; | ||
| width: 160px; | ||
| height: 90px; | ||
| /* Negative offset of half to center on the handle */ | ||
| margin-left: -80px; | ||
| } | ||
@@ -32,3 +27,3 @@ | ||
| :host([${n.MEDIA_PREVIEW_IMAGE}]:hover) #thumbnailContainer { | ||
| :host([${i.MEDIA_PREVIEW_IMAGE}]:hover) #thumbnailContainer { | ||
| display: block; | ||
@@ -56,2 +51,2 @@ animation: fadeIn ease 0.5s; | ||
| </div> | ||
| `;class p extends A{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",n.MEDIA_DURATION,n.MEDIA_CURRENT_TIME,n.MEDIA_PREVIEW_IMAGE]}constructor(){super();this.shadowRoot.appendChild(b.content.cloneNode(!0)),this.range.addEventListener("input",()=>{const t=this.range.value,i=new r.CustomEvent(h.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(i)}),this.enableThumbnails()}connectedCallback(){this.range.setAttribute("aria-label",w.SEEK()),super.connectedCallback()}attributeChangedCallback(e,t,i){e===n.MEDIA_CURRENT_TIME&&(this.range.value=+i,f(this),this.updateBar()),e===n.MEDIA_DURATION&&(this.range.max=Math.floor(+i),f(this),this.updateBar()),super.attributeChangedCallback(e,t,i)}getBarColors(){let e=super.getBarColors();if(!this.mediaBuffered||!this.mediaBuffered.length||this.mediaDuration<=0)return e;const t=this.mediaBuffered,i=t[t.length-1][1]/this.mediaDuration*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",i]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let t;const i=()=>{t=u=>{const s=+this.getAttribute(n.MEDIA_DURATION);if(!s)return;const a=this.range.getBoundingClientRect();let o=(u.clientX-a.left)/a.width;o=Math.max(0,Math.min(1,o));const E=a.left-this.getBoundingClientRect().left+o*a.width;this.thumbnailPreview.style.left=`${E}px`;const v=o*s,M=new r.CustomEvent(h.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:v});this.dispatchEvent(M)},r.addEventListener("mousemove",t,!1)},l=()=>{r.removeEventListener("mousemove",t)};let m=!1,g=u=>{const s=this.getAttribute(n.MEDIA_DURATION);if(!m&&s){m=!0,i();let a=o=>{o.target!=this&&!this.contains(o.target)&&(r.removeEventListener("mousemove",a),m=!1,l())};r.addEventListener("mousemove",a,!1)}};this.addEventListener("mousemove",g,!1)}}I("media-time-range",p);export default p; | ||
| `;class p extends A{static get observedAttributes(){return[...super.observedAttributes,"thumbnails",i.MEDIA_DURATION,i.MEDIA_CURRENT_TIME,i.MEDIA_PREVIEW_IMAGE]}constructor(){super();this.shadowRoot.appendChild(b.content.cloneNode(!0)),this.range.addEventListener("input",()=>{const t=this.range.value,a=new o.CustomEvent(c.MEDIA_SEEK_REQUEST,{composed:!0,bubbles:!0,detail:t});this.dispatchEvent(a)}),this.enableThumbnails()}connectedCallback(){this.range.setAttribute("aria-label",w.SEEK()),super.connectedCallback()}attributeChangedCallback(e,t,a){e===i.MEDIA_CURRENT_TIME&&(this.range.value=+a,f(this),this.updateBar()),e===i.MEDIA_DURATION&&(this.range.max=Math.floor(+a),f(this),this.updateBar()),super.attributeChangedCallback(e,t,a)}getBarColors(){let e=super.getBarColors();if(!this.mediaBuffered||!this.mediaBuffered.length||this.mediaDuration<=0)return e;const t=this.mediaBuffered,a=t[t.length-1][1]/this.mediaDuration*100;return e.splice(1,0,["var(--media-time-buffered-color, #777)",a]),e}enableThumbnails(){this.thumbnailPreview=this.shadowRoot.querySelector("media-thumbnail-preview"),this.shadowRoot.querySelector("#thumbnailContainer").classList.add("enabled");let t;const a=()=>{t=u=>{const s=+this.getAttribute(i.MEDIA_DURATION);if(!s)return;const n=this.range.getBoundingClientRect();let r=(u.clientX-n.left)/n.width;r=Math.max(0,Math.min(1,r));const g=n.left-this.getBoundingClientRect().left+r*n.width;this.thumbnailPreview.style.left=`${g}px`;const v=r*s,M=new o.CustomEvent(c.MEDIA_PREVIEW_REQUEST,{composed:!0,bubbles:!0,detail:v});this.dispatchEvent(M)},o.addEventListener("mousemove",t,!1)},l=()=>{o.removeEventListener("mousemove",t)};let m=!1,E=u=>{const s=this.getAttribute(i.MEDIA_DURATION);if(!m&&s){m=!0,a();let n=r=>{r.target!=this&&!this.contains(r.target)&&(o.removeEventListener("mousemove",n),m=!1,l())};o.addEventListener("mousemove",n,!1)}};this.addEventListener("mousemove",E,!1)}}I("media-time-range",p);export default p; |
@@ -1,1 +0,1 @@ | ||
| import{Window as i}from"./utils/server-safe-globals.js";import u from"./media-chrome-range.js";import{defineCustomElement as l}from"./utils/defineCustomElement.js";import{MediaUIAttributes as n,MediaUIEvents as m}from"./constants.js";import{nouns as d}from"./labels/labels.js";const c=100,E=t=>{var s;if(t.getAttribute(n.MEDIA_MUTED)!=null)return 0;const r=+((s=t.getAttribute(n.MEDIA_VOLUME))!=null?s:1);return Math.round(r*t.range.max)},M=({value:t,max:e})=>`${Math.round(t/e*100)}%`;class a extends u{static get observedAttributes(){return[...super.observedAttributes,n.MEDIA_VOLUME,n.MEDIA_MUTED]}constructor(){super();this.range.max=c,this.range.addEventListener("input",()=>{const r=this.range.value/this.range.max,s=new i.CustomEvent(m.MEDIA_VOLUME_REQUEST,{composed:!0,bubbles:!0,detail:r});this.dispatchEvent(s)})}connectedCallback(){this.range.setAttribute("aria-label",d.VOLUME()),super.connectedCallback()}attributeChangedCallback(e,r,s){if(e===n.MEDIA_VOLUME||e===n.MEDIA_MUTED){const o=E(this);this.range.value=o,this.range.setAttribute("aria-valuetext",M(this.range)),this.updateBar()}super.attributeChangedCallback(e,r,s)}}l("media-volume-range",a);export default a; | ||
| import{Window as i}from"./utils/server-safe-globals.js";import u from"./media-chrome-range.js";import{defineCustomElement as l}from"./utils/defineCustomElement.js";import{MediaUIAttributes as t,MediaUIEvents as m}from"./constants.js";import{nouns as d}from"./labels/labels.js";const E=100,c=s=>{var n;if(s.getAttribute(t.MEDIA_MUTED)!=null)return 0;const r=+((n=s.getAttribute(t.MEDIA_VOLUME))!=null?n:1);return Math.round(r*s.range.max)},M=({value:s,max:e})=>`${Math.round(s/e*100)}%`;class a extends u{static get observedAttributes(){return[...super.observedAttributes,t.MEDIA_VOLUME,t.MEDIA_MUTED,t.MEDIA_VOLUME_UNAVAILABLE]}constructor(){super();this.range.max=E,this.range.addEventListener("input",()=>{const r=this.range.value/this.range.max,n=new i.CustomEvent(m.MEDIA_VOLUME_REQUEST,{composed:!0,bubbles:!0,detail:r});this.dispatchEvent(n)})}connectedCallback(){this.range.setAttribute("aria-label",d.VOLUME()),super.connectedCallback()}attributeChangedCallback(e,r,n){if(e===t.MEDIA_VOLUME||e===t.MEDIA_MUTED){const o=c(this);this.range.value=o,this.range.setAttribute("aria-valuetext",M(this.range)),this.updateBar()}super.attributeChangedCallback(e,r,n)}}l("media-volume-range",a);export default a; |
| { | ||
| "name": "media-chrome", | ||
| "version": "0.5.1", | ||
| "version": "0.5.2", | ||
| "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.", | ||
@@ -15,3 +15,5 @@ "main": "dist/index.js", | ||
| "clean": "rimraf dist", | ||
| "build": "snowpack build --config snowpack.prod.config.cjs", | ||
| "build:esm": "snowpack build --config snowpack.prod.config.cjs", | ||
| "build:react": "node ./tools/react/build.js", | ||
| "build": "yarn build:esm && yarn build:react", | ||
| "dev": "snowpack dev --config snowpack.dev.config.cjs", | ||
@@ -46,2 +48,3 @@ "start": "yarn dev", | ||
| "prettier": "^2.5.1", | ||
| "react": "^17.0.2", | ||
| "rimraf": "^3.0.2", | ||
@@ -48,0 +51,0 @@ "sinon": "^11.1.2", |
@@ -164,20 +164,21 @@ # [`<media-chrome>`](https://media-chrome.org) | ||
| | Element | Description | | ||
| | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `<media-controller>` | Wraps controls and the media element, and handles communication between them. ([docs](./docs/media-controller.md)) | | ||
| | `<media-control-bar>` | Optional controls container to help align the controls in the standard fashion. | | ||
| | `<media-play-button>` | Toggle media playback | | ||
| | `<media-mute-button>` | Toggle the sound. The icon responds to volume changes and acts as part of the typical volume control. | | ||
| | `<media-volume-range>` | Change the volume of the sound. | | ||
| | `<media-time-range>` | See how far the playhead is through the media duration, and seek to new times. | | ||
| | `<media-time-display>` | Show the time of the playhead.<br><br>Options: <br>`<media-time-display remaining>` Show as remaining time <br>`<media-time-display show-duration>` Also show the duration after a slash. Ex: `1:00 / 2:00` | | ||
| | `<media-duration-display>` | Show the duration of the media | | ||
| | `<media-fullscreen-button>` | Toggle fullscreen viewing | | ||
| | `<media-pip-button>` | Toggle picture-in-picture mode of the video | | ||
| | `<media-playback-rate-button>` | Change the speed of playback | | ||
| | `<media-seek-backward-button>` | Jump back 30 seconds in the media | | ||
| | `<media-seek-forward-button>` | Jump ahead 30 seconds in the media | | ||
| | `<media-captions-button>` | Show/disable captions (if no captions are available, will fallback to subtitles by default unless `no-subtitles-fallback` attribute is set) | | ||
| | `<media-airplay-button>` | Bring up the AirPlay menu to select/deselect AirPlay playback (Safari only). | | ||
| | More to come | Requests and contributions welcome | | ||
| | Element | Description | | ||
| | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `<media-controller>` | Wraps controls and the media element, and handles communication between them. ([docs](./docs/media-controller.md)) | | ||
| | `<media-control-bar>` | Optional controls container to help align the controls in the standard fashion. | | ||
| | `<media-play-button>` | Toggle media playback. ([docs](./docs/media-play-button.md)) | | ||
| | `<media-mute-button>` | Toggle the sound. The icon responds to volume changes and acts as part of the typical volume control. ([docs](./docs/media-mute-button.md)) | | ||
| | `<media-volume-range>` | Change the volume of the sound. ([docs](./docs/media-volume-range.md)) | | ||
| | `<media-time-range>` | See how far the playhead is through the media duration, and seek to new times. ([docs](./docs/media-time-range.md)) | | ||
| | `<media-time-display>` | Show the time of the playhead.<br><br>Options: <br>`<media-time-display remaining>` Show as remaining time <br>`<media-time-display show-duration>` Also show the duration after a slash. Ex: `1:00 / 2:00`. ([docs](./docs/media-time-display.md)) | | ||
| | `<media-duration-display>` | Show the duration of the media | | ||
| | `<media-fullscreen-button>` | Toggle fullscreen viewing. ([docs](./docs/media-fullscreen-button.md)) | | ||
| | `<media-pip-button>` | Toggle picture-in-picture mode of the video. ([docs](./docs/media-pip-button.md)) | | ||
| | `<media-playback-rate-button>` | Change the speed of playback. ([docs](./docs/media-playback-rate-button.md)) | | ||
| | `<media-seek-backward-button>` | Jump back `n` seconds in the media (default 30). ([docs](./docs/media-seek-backward-button.md)) | | ||
| | `<media-seek-forward-button>` | Jump ahead `n` seconds in the media (default 30). ([docs](./docs/media-seek-forward-button.md)) | | ||
| | `<media-captions-button>` | Show/disable captions (if no captions are available, will fallback to subtitles by default unless `no-subtitles-fallback` attribute is set). ([docs](./docs/media-captions-button.md)) | | ||
| | `<media-airplay-button>` | Bring up the AirPlay menu to select/deselect AirPlay playback (Safari only). ([docs](./docs/media-airplay-button.md)) | | ||
| | `<media-loading-indicator>` | Show when your media content is loading/buffering. ([docs](./docs/media-loading-indicator.md)) | | ||
| | More to come | Requests and contributions welcome | | ||
@@ -225,2 +226,6 @@ ### Extras | ||
| ## Use with React | ||
| While you technically can use the Media Chrome directly with React, it can sometimes be a bit clunky to work with Web Components in React, and some things just don't feel idiomatic to the framework. To help with this, we've published some React wrapper components for all of our core Elements. You can read up on using them [here](./docs/react.md). | ||
| ## Why? | ||
@@ -227,0 +232,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.72%
407793
- Number of package files
- increased by3.9%
80
- Lines of code
- increased by22.37%
1302
- Number of lines in readme file
- increased by1.95%
261
Worsened metrics
- Dev dependency count
- increased by14.29%
8
No dependency changes