UNPKG

@vime/core

Version:

Customizable, extensible, accessible and framework agnostic media player.

1 lines 18.2 kB
import{g as i,a as t,w as n,r as e,c as s,h as o,H as h}from"./p-aa8acb66.js";import{e as a,j as r,l,r as u,D as d,s as v,t as c,i as f,h as y}from"./p-b018976f.js";import{c as m,o as g,a as p,b,d as C}from"./p-d84b1c8a.js";import{P as w,a as k}from"./p-17652948.js";import{F as P}from"./p-111a8e5b.js";import{i as T,s as x,a as j,e as V}from"./p-8acb8eb5.js";import{M}from"./p-8b74fa0e.js";import{V as R}from"./p-415151d7.js";import{f as S,L as A}from"./p-152748b8.js";import{S as $}from"./p-5ad78595.js";import"./p-121aab6e.js";var O=new Map,Q=function(i,t){var n=i.updater;i.fields.forEach((function(i){n(i,t[i])}))},D=function(i,n){var e=i.state,s=t();if(O.has(s)){var o=O.get(s);o.state=e,o.wormholes.forEach((function(i){Q(i,e)}))}return n};class E{constructor(){this.silent=!1}log(...i){this.silent||a(console)||console.log("[Vime tip]:",...i)}warn(...i){this.silent||a(console)||console.error("[Vime warn]:",...i)}}const L=new Set;var F=function(i,t,n,e){return new(n||(n=Promise))((function(s,o){function h(i){try{r(e.next(i))}catch(i){o(i)}}function a(i){try{r(e.throw(i))}catch(i){o(i)}}function r(i){var t;i.done?s(i.value):(t=i.value,t instanceof n?t:new n((function(i){i(t)}))).then(h,a)}r((e=e.apply(i,t||[])).next())}))};const z=new Set(["currentTime","paused"]);var I=function(i,t,n,e){return new(n||(n=Promise))((function(s,o){function h(i){try{r(e.next(i))}catch(i){o(i)}}function a(i){try{r(e.throw(i))}catch(i){o(i)}}function r(i){var t;i.done?s(i.value):(t=i.value,t instanceof n?t:new n((function(i){i(t)}))).then(h,a)}r((e=e.apply(i,t||[])).next())}))};let W=0;const B=class{constructor(t){e(this,t),this.vmThemeChange=s(this,"vmThemeChange",7),this.vmPausedChange=s(this,"vmPausedChange",7),this.vmPlay=s(this,"vmPlay",7),this.vmPlayingChange=s(this,"vmPlayingChange",7),this.vmSeekingChange=s(this,"vmSeekingChange",7),this.vmSeeked=s(this,"vmSeeked",7),this.vmBufferingChange=s(this,"vmBufferingChange",7),this.vmDurationChange=s(this,"vmDurationChange",7),this.vmCurrentTimeChange=s(this,"vmCurrentTimeChange",7),this.vmReady=s(this,"vmReady",7),this.vmPlaybackReady=s(this,"vmPlaybackReady",7),this.vmPlaybackStarted=s(this,"vmPlaybackStarted",7),this.vmPlaybackEnded=s(this,"vmPlaybackEnded",7),this.vmBufferedChange=s(this,"vmBufferedChange",7),this.vmError=s(this,"vmError",7),this.vmLoadStart=s(this,"vmLoadStart",7),this.vmCurrentProviderChange=s(this,"vmCurrentProviderChange",7),this.vmCurrentSrcChange=s(this,"vmCurrentSrcChange",7),this.vmCurrentPosterChange=s(this,"vmCurrentPosterChange",7),this.vmMediaTitleChange=s(this,"vmMediaTitleChange",7),this.vmControlsChange=s(this,"vmControlsChange",7),this.vmPlaybackRateChange=s(this,"vmPlaybackRateChange",7),this.vmPlaybackRatesChange=s(this,"vmPlaybackRatesChange",7),this.vmPlaybackQualityChange=s(this,"vmPlaybackQualityChange",7),this.vmPlaybackQualitiesChange=s(this,"vmPlaybackQualitiesChange",7),this.vmMutedChange=s(this,"vmMutedChange",7),this.vmVolumeChange=s(this,"vmVolumeChange",7),this.vmViewTypeChange=s(this,"vmViewTypeChange",7),this.vmMediaTypeChange=s(this,"vmMediaTypeChange",7),this.vmLiveChange=s(this,"vmLiveChange",7),this.vmTouchChange=s(this,"vmTouchChange",7),this.vmLanguageChange=s(this,"vmLanguageChange",7),this.vmI18nChange=s(this,"vmI18nChange",7),this.vmTranslationsChange=s(this,"vmTranslationsChange",7),this.vmLanguagesChange=s(this,"vmLanguagesChange",7),this.vmFullscreenChange=s(this,"vmFullscreenChange",7),this.vmPiPChange=s(this,"vmPiPChange",7),this.vmTextTracksChange=s(this,"vmTextTracksChange",7),this.vmCurrentTextTrackChange=s(this,"vmCurrentTextTrackChange",7),this.vmTextTrackVisibleChange=s(this,"vmTextTrackVisibleChange",7),this.vmAudioTracksChange=s(this,"vmAudioTracksChange",7),this.vmCurrentAudioTrackChange=s(this,"vmCurrentAudioTrackChange",7),this.disposal=new d,this.logger=new E,this.icons="vime",this.paused=!0,this.playing=!1,this.duration=-1,this.currentTime=0,this.autoplay=!1,this.ready=!1,this.playbackReady=!1,this.loop=!1,this.muted=!1,this.buffered=0,this.playbackRate=1,this.lastRateCheck=1,this.playbackRates=[1],this.playbackQualities=[],this.seeking=!1,this.debug=!1,this.playbackStarted=!1,this.playbackEnded=!1,this.buffering=!1,this.controls=!1,this.isControlsActive=!1,this.isSettingsActive=!1,this.volume=50,this.isFullscreenActive=!1,this.aspectRatio="16:9",this.isAudioView=!1,this.isVideoView=!1,this.isAudio=!1,this.isVideo=!1,this.isLive=!1,this.isMobile=!1,this.isTouch=!1,this.isPiPActive=!1,this.textTracks=[],this.currentTextTrack=-1,this.isTextTrackVisible=!0,this.shouldRenderNativeTextTracks=!0,this.audioTracks=[],this.currentAudioTrack=-1,this.autopause=!0,this.playsinline=!1,this.language="en",this.translations={en:V},this.languages=["en"],this.i18n=V,v(this),c(this),function(t){const n=i(t);r(t,(()=>{L.add(n)}),(()=>{L.delete(n)}))}(this),k(this),function(t){const n=i(t),e=new Map;r(t,(()=>{Object.keys(T).forEach((i=>{e.set(i,t[i])}))}),(()=>{e.clear()}));const{componentDidRender:s}=t;t.componentDidRender=function(){null==s||s();const i=Array.from(e.keys());for(let s=0;s<i.length;s+=1){const o=i[s],h=e.get(o),a=t[o];h!==a&&(S(n,o,a,h),e.set(o,a))}}}(this),this.safeAdapterCall=function(t){const e=i(t),s=new d,o=new Map;let h=[],v=!1;function c(i){null==i||i.stopImmediatePropagation(),v?(h=[],n((()=>{Object.keys(T).filter(x).forEach((i=>{t[i]=T[i]}))}))):v=!0}function f(i){var e;return F(this,void 0,void 0,(function*(){i.stopImmediatePropagation();const{by:s,prop:o,value:h}=i.detail;if(j(o)){if(!t.playbackStarted&&z.has(o)){const i=yield t.adapter;"paused"!==o||h||null==i||i.play(),"currentTime"===o&&(null==i||i.play(),null==i||i.setCurrentTime(h))}n((()=>{t[o]=h}))}else null===(e=t.logger)||void 0===e||e.warn(`${s.nodeName} tried to change \`${o}\` but it is readonly.`)}))}const{onProviderDisconnect:y}=t;return t.onProviderDisconnect=function(){c(),y&&y.call(t)},r(t,(()=>{Object.keys(T).forEach((i=>{o.set(i,t[i])})),s.add(l(e,A,c)),s.add(l(e,$,f))}),(()=>{o.clear(),s.empty()})),u(t,"componentWillRender",(()=>F(this,void 0,void 0,(function*(){t.playbackReady&&h.length>0&&(yield function(){return F(this,void 0,void 0,(function*(){const i=yield t.adapter;if(!a(i)){for(let t=0;t<h.length;t+=1)yield h[t](i);h=[]}}))}())})))),function(i,n){return F(this,void 0,void 0,(function*(){if(!function(i,n){var e;return n!==(null===(e=t[w])||void 0===e?void 0:e.get(i))}(i,t[i]))return;const s=t[i],o=i=>F(this,void 0,void 0,(function*(){var t;try{yield null===(t=null==i?void 0:i[n])||void 0===t?void 0:t.call(i,s)}catch(i){e.dispatchEvent(new CustomEvent("vmError",{detail:i}))}}));t.playbackReady?yield o(yield t.adapter):h.push(o)}))}}(this)}get adapter(){var i;return null===(i=this.provider)||void 0===i?void 0:i.getAdapter()}onContainerChange(){var i;null===(i=this.fullscreenController)||void 0===i||i.destroy(),a(this.container)||(this.fullscreenController=new P(this.container),this.fullscreenController.on("change",(i=>{this.isFullscreenActive=i,i&&this.rotateDevice()})),this.fullscreenController.on("error",(i=>{this.vmError.emit(i)})))}onPausedChange(){this.paused?this.playing=!1:function(t){const n=i(t);L.forEach((i=>{i!==n&&i.autopause&&(i.paused=!0)}))}(this),this.safeAdapterCall("paused",this.paused?"pause":"play")}onDurationChange(){this.isLive=this.duration===1/0}onCurrentTimeChange(){this.currentTime=Math.max(0,Math.min(this.currentTime,this.playbackReady?this.duration:1/0)),this.safeAdapterCall("currentTime","setCurrentTime")}onPlaybackReadyChange(){this.ready||(this.ready=!0)}onMutedChange(){this.safeAdapterCall("muted","setMuted")}onPlaybackRateChange(i,t){var n,e;return I(this,void 0,void 0,(function*(){if(i!==this.lastRateCheck){if(!(yield null===(e=null===(n=yield this.adapter)||void 0===n?void 0:n.canSetPlaybackRate)||void 0===e?void 0:e.call(n)))return this.logger.log("provider cannot change `playbackRate`."),this.lastRateCheck=t,void(this.playbackRate=t);if(!this.playbackRates.includes(i))return this.logger.log(`invalid \`playbackRate\` of ${i}, valid values are [${this.playbackRates.join(", ")}]`),this.lastRateCheck=t,void(this.playbackRate=t);this.lastRateCheck=i,this.safeAdapterCall("playbackRate","setPlaybackRate")}}))}onPlaybackQualityChange(i,t){var n,e;return I(this,void 0,void 0,(function*(){if(!a(i)&&i!==this.lastQualityCheck){if(!(yield null===(e=null===(n=yield this.adapter)||void 0===n?void 0:n.canSetPlaybackQuality)||void 0===e?void 0:e.call(n)))return this.logger.log("provider cannot change `playbackQuality`."),this.lastQualityCheck=t,void(this.playbackQuality=t);if(!this.playbackQualities.includes(i))return this.logger.log(`invalid \`playbackQuality\` of ${i}, valid values are [${this.playbackQualities.join(", ")}]`),this.lastQualityCheck=t,void(this.playbackQuality=t);this.lastQualityCheck=i,this.safeAdapterCall("playbackQuality","setPlaybackQuality")}}))}onDebugChange(){this.logger.silent=!this.debug}onVolumeChange(){return I(this,void 0,void 0,(function*(){this.volume=Math.max(0,Math.min(this.volume,100)),this.safeAdapterCall("volume","setVolume")}))}onViewTypeChange(){this.isAudioView=this.viewType===R.Audio,this.isVideoView=this.viewType===R.Video}onMediaTypeChange(){this.isAudio=this.mediaType===M.Audio,this.isVideo=this.mediaType===M.Video}onLanguageChange(i,t){if(!this.languages.includes(this.language))return this.logger.log(`invalid \`language\` of ${this.language}, valid values are [${this.languages.join(", ")}]`),void(this.language=t);this.i18n=this.translations[this.language]}onTranslationsChange(){Object.assign(this.translations,{en:V}),this.languages=Object.keys(this.translations),this.i18n=this.translations[this.language]}onError(i){this.logger.warn(i.detail)}getProvider(){return I(this,void 0,void 0,(function*(){return this.provider}))}getAdapter(){return I(this,void 0,void 0,(function*(){return this.adapter}))}play(){var i;return I(this,void 0,void 0,(function*(){return null===(i=yield this.adapter)||void 0===i?void 0:i.play()}))}pause(){var i;return I(this,void 0,void 0,(function*(){return null===(i=yield this.adapter)||void 0===i?void 0:i.pause()}))}canPlay(i){var t,n;return I(this,void 0,void 0,(function*(){return null!==(n=null===(t=yield this.adapter)||void 0===t?void 0:t.canPlay(i))&&void 0!==n&&n}))}canAutoplay(){return I(this,void 0,void 0,(function*(){return m()}))}canMutedAutoplay(){return I(this,void 0,void 0,(function*(){return m(!0)}))}canSetPlaybackRate(){var i,t,n;return I(this,void 0,void 0,(function*(){return null!==(n=null===(t=null===(i=yield this.adapter)||void 0===i?void 0:i.canSetPlaybackRate)||void 0===t?void 0:t.call(i))&&void 0!==n&&n}))}canSetPlaybackQuality(){var i,t,n;return I(this,void 0,void 0,(function*(){return null!==(n=null===(t=null===(i=yield this.adapter)||void 0===i?void 0:i.canSetPlaybackQuality)||void 0===t?void 0:t.call(i))&&void 0!==n&&n}))}canSetFullscreen(){var i,t,n;return I(this,void 0,void 0,(function*(){return this.fullscreenController.isSupported||null!==(n=null===(t=null===(i=yield this.adapter)||void 0===i?void 0:i.canSetFullscreen)||void 0===t?void 0:t.call(i))&&void 0!==n&&n}))}enterFullscreen(i){var t,n,e;return I(this,void 0,void 0,(function*(){if(!this.isVideoView)throw Error("Cannot enter fullscreen on an audio player view.");if(this.fullscreenController.isSupported)return this.fullscreenController.requestFullscreen();const s=yield this.adapter;if(null!==(n=yield null===(t=null==s?void 0:s.canSetFullscreen)||void 0===t?void 0:t.call(s))&&void 0!==n&&n)return null===(e=null==s?void 0:s.enterFullscreen)||void 0===e?void 0:e.call(s,i);throw Error("Fullscreen API is not available.")}))}exitFullscreen(){var i,t;return I(this,void 0,void 0,(function*(){return this.fullscreenController.isSupported?this.fullscreenController.exitFullscreen():null===(t=null===(i=yield this.adapter)||void 0===i?void 0:i.exitFullscreen)||void 0===t?void 0:t.call(i)}))}canSetPiP(){var i,t,n;return I(this,void 0,void 0,(function*(){return null!==(n=null===(t=null===(i=yield this.adapter)||void 0===i?void 0:i.canSetPiP)||void 0===t?void 0:t.call(i))&&void 0!==n&&n}))}enterPiP(){var i,t;return I(this,void 0,void 0,(function*(){if(!this.isVideoView)throw Error("Cannot enter PiP mode on an audio player view.");if(!(yield this.canSetPiP()))throw Error("Picture-in-Picture API is not available.");return null===(t=null===(i=yield this.adapter)||void 0===i?void 0:i.enterPiP)||void 0===t?void 0:t.call(i)}))}exitPiP(){var i,t;return I(this,void 0,void 0,(function*(){return null===(t=null===(i=yield this.adapter)||void 0===i?void 0:i.exitPiP)||void 0===t?void 0:t.call(i)}))}canSetAudioTrack(){var i;return I(this,void 0,void 0,(function*(){return!a(null===(i=yield this.adapter)||void 0===i?void 0:i.setCurrentAudioTrack)}))}setCurrentAudioTrack(i){var t,n;return I(this,void 0,void 0,(function*(){null===(n=null===(t=yield this.adapter)||void 0===t?void 0:t.setCurrentAudioTrack)||void 0===n||n.call(t,i)}))}canSetTextTrack(){var i;return I(this,void 0,void 0,(function*(){return!a(null===(i=yield this.adapter)||void 0===i?void 0:i.setCurrentTextTrack)}))}setCurrentTextTrack(i){var t,n;return I(this,void 0,void 0,(function*(){null===(n=null===(t=yield this.adapter)||void 0===t?void 0:t.setCurrentTextTrack)||void 0===n||n.call(t,i)}))}canSetTextTrackVisibility(){var i;return I(this,void 0,void 0,(function*(){return!a(null===(i=yield this.adapter)||void 0===i?void 0:i.setTextTrackVisibility)}))}setTextTrackVisibility(i){var t,n;return I(this,void 0,void 0,(function*(){null===(n=null===(t=yield this.adapter)||void 0===t?void 0:t.setTextTrackVisibility)||void 0===n||n.call(t,i)}))}extendLanguage(i,t){var n;return I(this,void 0,void 0,(function*(){const e=Object.assign(Object.assign({},this.translations),{[i]:Object.assign(Object.assign({},null!==(n=this.translations[i])&&void 0!==n?n:{}),t)});this.translations=e}))}connectedCallback(){this.onPausedChange(),this.onCurrentTimeChange(),this.onVolumeChange(),this.onMutedChange(),this.onDebugChange(),this.onContainerChange(),this.onTranslationsChange(),this.onLanguageChange(this.language,T.language),this.disposal.add(g((i=>{this.isMobile=i}))),this.disposal.add(p((i=>{this.isTouch=i})))}componentWillLoad(){!function(t,n){var e=i(t),s=new Map,o={wormholes:s,state:n};O.set(t,o);var h=t.connectedCallback;t.connectedCallback=function(){O.set(t,o),h&&h.call(t)};var a=t.disconnectedCallback;t.disconnectedCallback=function(){O.delete(t),a&&a.call(t)},e.addEventListener("openWormhole",(function(i){i.stopPropagation();var t=i.detail,n=t.consumer,e=t.onOpen;if(!s.has(n)){if("symbol"!=typeof n){var h=n.connectedCallback,a=n.disconnectedCallback;n.connectedCallback=function(){s.set(n,i.detail),h&&h.call(n)},n.disconnectedCallback=function(){s.delete(n),a&&a.call(n)}}s.set(n,i.detail),Q(i.detail,o.state),null==e||e.resolve((function(){s.delete(n)}))}})),e.addEventListener("closeWormhole",(function(i){s.delete(i.detail)}))}(this,this.getPlayerState())}disconnectedCallback(){var i;null===(i=this.fullscreenController)||void 0===i||i.destroy(),this.disposal.empty()}rotateDevice(){return I(this,void 0,void 0,(function*(){if(this.isMobile&&b())try{this.isFullscreenActive?yield window.screen.orientation.lock("landscape"):yield window.screen.orientation.unlock()}catch(i){this.vmError.emit(i)}}))}getPlayerState(){const i={},t=Object.keys(T);for(let n=0;n<t.length;n+=1)i[t[n]]=this[t[n]];return i}calcAspectRatio(){const[i,t]=/\d{1,2}:\d{1,2}/.test(this.aspectRatio)?this.aspectRatio.split(":"):[16,9];return 100/Number(i)*Number(t)}getContainer(){return I(this,void 0,void 0,(function*(){return this.container}))}callAdapter(i,t){return I(this,void 0,void 0,(function*(){return(yield this.adapter)[i](t)}))}hasCustomControls(){return f(this,"vm-controls")}genId(){var i;const t=null===(i=this.host)||void 0===i?void 0:i.id;return y(t)&&t.length>0?t:(W+=1,`vm-player-${W}`)}render(){const i=(this.isAudioView?"Audio Player":"Video Player")+(a(this.mediaTitle)?"":` - ${this.mediaTitle}`),t=!C||!this.isVideoView||this.playsinline&&!this.isFullscreenActive;t||(this.controls=!0);const e=t&&this.hasCustomControls()&&this.isVideoView&&!this.paused&&!this.isControlsActive,s=!this.controls&&t&&this.isVideoView;return o(h,{id:this.genId(),idle:e,mobile:this.isMobile,touch:this.isTouch,live:this.isLive,audio:this.isAudioView,video:this.isVideoView,pip:this.isPiPActive,fullscreen:this.isFullscreenActive},o("div",{"aria-label":i,"aria-hidden":this.ready?"false":"true","aria-busy":this.playbackReady?"false":"true",class:{player:!0,idle:e,audio:this.isAudioView,video:this.isVideoView,fullscreen:this.isFullscreenActive},style:{paddingBottom:this.isVideoView?`${this.calcAspectRatio()}%`:void 0},ref:i=>{n((()=>{this.container=i}))}},s&&o("div",{class:"blocker"}),o(D,{state:this.getPlayerState()},o("slot",null))))}get host(){return i(this)}static get watchers(){return{container:["onContainerChange"],paused:["onPausedChange"],duration:["onDurationChange"],currentTime:["onCurrentTimeChange"],playbackReady:["onPlaybackReadyChange"],muted:["onMutedChange"],playbackRate:["onPlaybackRateChange"],playbackQuality:["onPlaybackQualityChange"],debug:["onDebugChange"],volume:["onVolumeChange"],viewType:["onViewTypeChange"],isAudioView:["onViewTypeChange"],isVideoView:["onViewTypeChange"],mediaType:["onMediaTypeChange"],language:["onLanguageChange"],translations:["onTranslationsChange"]}}};B.style=".player{box-sizing:border-box;direction:ltr;font-family:var(--vm-player-font-family);-moz-osx-font-smoothing:auto;-webkit-font-smoothing:subpixel-antialiased;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;width:100%;display:block;max-width:100%;min-width:275px;min-height:40px;position:relative;text-shadow:none;outline:0;transition:box-shadow 0.3s ease;box-shadow:var(--vm-player-box-shadow);border-radius:var(--vm-player-border-radius)}.player.idle{cursor:none}.player.audio{background-color:transparent !important}.player.video{height:0;overflow:hidden;background-color:var(--vm-player-bg, #000)}.player.fullscreen{margin:0;border-radius:0;width:100%;height:100%;padding-bottom:0 !important}.blocker{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;z-index:var(--vm-blocker-z-index)}";export{B as vm_player}