UNPKG

@pardnchiu/flexplyr

Version:

FlexPlyr is a lightweight JavaScript library that provides embedded HTML5 video players and YouTube players, featuring highly customizable control panels and visual effects.

1 lines 29.7 kB
const $document=document;const $String=String;const $Array=Array;const $Map=Map;const $JSON=JSON;const $Math=Math;const regex_css_class=/\.([\w_-]+)?/gi;const regex_css_id=/\#([\w_-]+)?/i;const regex_css_tag=/^\w+(?=[\#\.]*)/i;const _id="id";const _panelType="panelType";const _panelItem="panelItem";const _mute="mute";const _option="option";const _volume="volume";const _init="init";const _match="match";const _trim="trim";const _body="body";const _test="test";const _map="map";const _ceil="ceil";const _youtube="youtube";const _vimeo="vimeo";const _audio="audio";const _video="video";const _replace="replace";const _length="length";const _temp="temp";const _createElement="createElement";const _getElementById="getElementById";const _createDocumentFragment="createDocumentFragment";const _createTextNode="createTextNode";const _classList="classList";const _dataset="dataset";const _add="add";const _set="set";const _from="from";const _charAt="charAt";const _string="string";const _number="number";const _floor="floor";const _random="random";const _join="join";const _has="has";const _isArray="isArray";const _object="object";const _hasOwnProperty="hasOwnProperty";const _value="value";const _innerText="innerText";const _innerHTML="innerHTML";const _textContent="textContent";const _contentEditable="contentEditable";const _indexOf="indexOf";const _console="console";const _log="log";const _apply="apply";const _void="void";const _stringify="stringify";const _appendChild="appendChild";const _color="color";const _backgroundColor="backgroundColor";const _width="width";const _height="height";const _display="display";const _float="float";const _setAttribute="setAttribute";const _img="img";const _source="source";const _head="head";const _div="div";const _FPlyr="FPlyr";const _link="link";const _script="script";const _style="style";const _preconnect="preconnect";const _preload="preload";const _anonymous="anonymous";const _stylesheet="stylesheet";const _rel="rel";const _href="href";const _async="async";const _as="as";const _src="src";const _crossOrigin="crossOrigin";const _onmousemove="onmousemove";const _onmouseleave="onmouseleave";const href_jsdelivr="https://cdn.jsdelivr.net";const href_css=href_jsdelivr+"/npm/@pardnchiu/flexplyr@latest/dist/FlexPlyr.css";const href_gstatic="https://fonts.gstatic.com";const href_googleapis="https://fonts.googleapis.com";const href_meterial=href_googleapis+"/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,1,0";const href_youtube="https://www.youtube.com";const href_iframe_api=href_youtube+"/iframe_api";const href_vimeo="https://player.vimeo.com";const href_vimeo_api=href_vimeo+"/api/player.js";const keyString="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";const isMobile=/iphone|ipad|ipod|android/i[_test](navigator["userAgent"]);const isIOS=/iphone|ipad|ipod/i[_test](navigator["userAgent"]);const ytConfig={autoplay:0,controls:0,showinfo:0,modestbranding:1,start:0,loop:0,fs:0,[_rel]:0,cc_load_policty:1,iv_load_policy:3,autohide:1};let onYouTubeIframeAPIReady;$document[_head][_appendChild](createElement(_link,{[_rel]:_preconnect,[_href]:href_jsdelivr,[_crossOrigin]:""}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preload,[_href]:href_css,[_as]:_style,[_crossOrigin]:_anonymous}));$document[_head][_appendChild](createElement(_link,{[_href]:href_css,[_rel]:_stylesheet}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preconnect,[_href]:href_gstatic,[_crossOrigin]:""}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preconnect,[_href]:href_googleapis,[_crossOrigin]:""}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preload,[_href]:href_meterial,[_as]:_style,[_crossOrigin]:_anonymous}));$document[_head][_appendChild](createElement(_link,{[_href]:href_meterial,[_rel]:_stylesheet}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preconnect,[_href]:href_youtube,[_crossOrigin]:""}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preload,[_href]:href_iframe_api,[_as]:_script,[_crossOrigin]:_anonymous}));$document[_head][_appendChild](createElement(_script,{[_src]:href_iframe_api,[_async]:""}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preconnect,[_href]:href_vimeo,[_crossOrigin]:""}));$document[_head][_appendChild](createElement(_link,{[_rel]:_preload,[_href]:href_vimeo_api,[_as]:_script,[_crossOrigin]:_anonymous}));$document[_head][_appendChild](createElement(_script,{[_src]:href_vimeo_api,[_async]:""}));let uuid_map=new $Map;function UUID(length=32){const len=keyString[_length];let result="";do{result=$Array[_from]({length:length},(_=>keyString[_charAt]($Math[_floor]($Math[_random]()*len))))[_join]("")}while(uuid_map[_has](result));uuid_map[_set](result,1);return result}function createElement(tag="",val0,val1){const css_tag=((tag[_match](regex_css_tag)||[])[0]||"")[_trim]();const css_id=((tag[_match](regex_css_id)||[])[1]||"")[_trim]();const css_class=(regex_css_class[_test](tag)?tag[_match](regex_css_class):[])[_map]((e=>e[_replace](/^\./,"")));if(css_tag[_length]<1){return}let dom;let is_temp=false;if(tag===_temp){is_temp=true;dom=$document[_createDocumentFragment]()}else{dom=$document[_createElement](css_tag)}if(css_id[_length]){dom.id=css_id}for(let e of css_class){dom[_classList][_add](e)}if(val0==null&&val1!=null){[val0,val1]=[val1,null]}let attribute_value;let children_value;if(val0!=null&&val1!=null){[attribute_value,children_value]=[val0,val1]}else if(val1==null){if(typeof val0===_string||typeof val0===_number||Array[_isArray](val0)){children_value=val0}else{attribute_value=val0}}else if(val0==null){return dom}if(typeof attribute_value===_object&&attribute_value!=null){for(const e in attribute_value){if(!attribute_value[_hasOwnProperty](e)){continue}const value=attribute_value[e];if([_value,_innerText,_innerHTML,_textContent,_contentEditable][_indexOf](e)!=-1){dom[e]=value}else if([_color,_backgroundColor,_width,_height,_display,_float][_indexOf](e)!=-1){dom[_style][e]=value}else if(value!=null){dom[_setAttribute](e,value)}}}if(children_value!=null){const is_string=typeof children_value===_string;const is_number=typeof children_value===_number;const is_array=Array[_isArray](children_value);if(is_string||is_number){const value=children_value;const is_img=css_tag===_img;const is_source=css_tag===_source;if(is_img||is_source||css_tag==="audio"){dom["src"]=value}else if(is_temp){dom[_appendChild]($document[_createTextNode](children_value))}else{dom[_innerHTML]=value}}else if(is_array){for(let e of children_value){const is_string=typeof e===_string;const is_number=typeof e===_number;const is_element=e instanceof Element;if(is_string||is_number){if(is_temp){dom[_appendChild]($document[_createTextNode](e))}else{dom[_innerHTML]+=e}}else if(is_element){dom[_appendChild](e)}}}}return dom}function getTime(sec,duration){const t=sec;const h=$Math[_floor](t>3599?t/3600:0);const m=$Math[_floor](t>3599?t%3600/60:t>59?t/60:0);const s=t>3599?t%3600%60:t>59?t%60:t;if(duration>=3600){return`${h<10?`0${h}`:h}:${m<10?`0${m}`:m}:${s<10?`0${s}`:s}`}else if(duration>=60){return`${m<10?`0${m}`:m}:${s<10?`0${s}`:s}`}else{return`0:${s<10?`0${s}`:s}`}}class FPlyr{video;audio;youtube;vimeo;when;option={showThumb:true,panelType:"",panelItem:["play","progress","time","volumeMini","rate","full"],volume:100,mute:false};stateFull=false;#isVideo;#isAudio;#isYoutube;#isVimeo;#isFullReady;#vimeoMuted=false;#vimeoVolume=100;#vimeoRate=1;#vimeoReady=false;#vimeoPlay=false;#vimeoPaused=true;#vimeoEnd=true;#vimeoDuration=0;#vimeoCurrentTime=0;#mediaPlayer;#fullPlayer;constructor(config={}){if(typeof config!="object"){console.log("config: 不存在。");return}const option=config[_option]||{};const volume=parseInt(option[_volume]||config[_volume]);const mute=Boolean(option.mute||config.mute);const showThumb=Boolean(option["showThumb"]);this.option.panelType=$String(option.panelType||config.type||this.option.panelType);this.option.panelItem=$Array.from(option.panelItem||config.panel||this.option.panelItem);if(option["showThumb"]!=null){this[_option]["showThumb"]=showThumb}if(option[_volume]!=null&&config[_volume]!=null&&!isNaN(volume)){this[_option][_volume]=volume}if(option.mute!=null&&config.mute!=null){this.option.mute=mute}this.when=config.when||config.event||{};if(typeof config[_id]===_string&&document[_getElementById](config[_id])){this[_body]=document[_getElementById](config[_id]);this[_body][_classList][_add](_FPlyr);this[_body][_dataset].type=this.option.panelType;this[_body][_dataset].thumb=this.option.showThumb?1:0}else{this[_body]=createElement(_div+"."+_FPlyr,{"data-thumb":this.option.showThumb?1:0,"data-type":this.option.panelType})}if(this[_body]==null){console.log("body: 不存在");return}this[_body][_onmousemove]=this[_body][_onmouseleave]=_=>this.#showPanel(1);const video=$String(config[_video]||"")[_trim]();const youtube=$String(config[_youtube]||"")[_trim]();const vimeo=$String(config[_vimeo]||"")[_trim]();const audio=$String(config[_audio]||"")[_trim]();if(video[_length]){this[_video]=video;this.#initVideo()}else if(youtube[_length]){this[_youtube]=youtube;this.#initYoutube()}else if(vimeo[_length]){this[_vimeo]=vimeo;this.#initVimeo()}else if(audio[_length]){this[_audio]=audio;this.#initAudio()}}#player(isFull){if(isMobile&&isFull&&this[_vimeo]==null){return this.#fullPlayer}return this.#mediaPlayer}isPaused(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){return player.paused}else if(this.#isYoutube){return this.ytState!==1}else if(this.#isVimeo){return this.#vimeoPaused}}play(isFull){const player=this.#player(isFull);if(isFull&&!this.#isFullReady&&this[_youtube]!=null){alert("not Ready");return}if(this.#isVideo||this.#isAudio){player.play()}else if(this.#isYoutube){player.playVideo()}else if(this.#isVimeo&&isFull){player.requestFullscreen().then((_=>{player.play()}))}else if(this.#isVimeo){player.play()}this.panel.setPlayIcon(false)}pause(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){player.pause()}else if(this.#isYoutube){player.pauseVideo()}else if(this.#isVimeo){player.pause()}this.panel.setPlayIcon(true)}#toggle(isFull){const isPaused=this.isPaused(isFull);isPaused?this.play():this.pause();this.panel.setPlayIcon(!isPaused)}#seekTo(sec,isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){player.currentTime=sec}else if(this.#isYoutube){player.seekTo(sec)}else if(this.#isVimeo){player.setCurrentTime(sec)}this.pause()}#getVolume(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){return player[_volume]*100}else if(this.#isYoutube){return player.getVolume()}else if(this.#isVimeo){return this.#vimeoVolume*100}}#setVolume(num,isFull){const player=this.#player(isFull);this[_option][_volume]=parseInt(num);if(this.#isVideo||this.#isAudio){player[_volume]=num/100}else if(this.#isYoutube){player.setVolume(num)}else if(this.#isVimeo){this.#vimeoVolume=num/100;player.setVolume(num/100)}this.panel.setVolume(num);this.#setMute(parseInt(num)===0)}#setMute(bool,isFull){const isMuted=bool==null?this.isMuted():!bool;const player=this.#player(isFull);if(isMuted&&this[_option][_volume]===0){this[_option][_volume]=50;this.#setVolume(50);this.panel.setMuteIcon(false);return}if(this.#isVideo||this.#isAudio){player.muted=!isMuted}else if(this.#isYoutube){isMuted?player.unMute():player.mute()}else if(this.#isVimeo){this.#vimeoMuted=!isMuted;player.setMuted(!isMuted).catch((err=>alert(err)))}this.panel.setMuteIcon(!isMuted)}isMuted(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){return player.muted}else if(this.#isYoutube){return player.isMuted()}else if(this.#isVimeo){return this.#vimeoMuted}}#setPlaybackRate(num,isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){player.playbackRate=num}else if(this.#isYoutube){player.setPlaybackRate(num)}else if(this.#isVimeo){player.setPlaybackRate(num).catch((err=>alert(err)))}}#getPlaybackRate(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){return player.playbackRate}else if(this.#isYoutube){return player.getPlaybackRate()}else if(this.#isVimeo){return this.#vimeoRate}}#duration(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){this.panel.duration(player.duration)}else if(this.#isYoutube){this.panel.duration(player.getDuration())}else if(this.#isVimeo){this.#mediaPlayer.getDuration().then((e=>{this.#vimeoDuration=e;this.panel.duration(this.#vimeoDuration)}))}}#getDuration(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){return $Math[_ceil](player.duration)}else if(this[_youtube]!=null){return $Math[_ceil](player.getDuration())}else if(this.#isVimeo){return $Math[_ceil](this.#vimeoDuration)}}#getCurrentTime(isFull){const player=this.#player(isFull);if(this.#isVideo||this.#isAudio){return $Math[_ceil](player.currentTime)}else if(this[_youtube]!=null){return $Math[_ceil](player.getCurrentTime())}else if(this.#isVimeo){return $Math[_ceil](this.#vimeoCurrentTime)}}#setCurrentTime(isFull){const total=this.#getDuration(isFull);this.videoTimer=setInterval((()=>{if(this.#isVimeo){this.#mediaPlayer.getCurrentTime().then((sec=>{this.#vimeoCurrentTime=sec;this.panel.setCurrent($Math[_ceil](sec));if($Math[_ceil](sec)<total){return}clearInterval(this.videoTimer)}))}else{const sec=this.#getCurrentTime();this.panel.setCurrent(sec);if($Math[_ceil](sec)<total){return}clearInterval(this.videoTimer)}}),100)}#stateReady(){if(this.when.ready!=null){this.when.ready()}if(this[_vimeo]!=null){this.#vimeoReady=this.#vimeoPaused=this.#vimeoEnd=true;this.#vimeoPlay=false}this.#isVideo=Boolean(this.video&&this.#mediaPlayer);this.#isVimeo=Boolean(this[_vimeo]&&this.#mediaPlayer);this.#isYoutube=Boolean(this[_youtube]&&this.#mediaPlayer);this.#isAudio=Boolean(this[_audio]&&this.#mediaPlayer);this.#duration();this.panel.setCurrent(0);this.sec=0;if(this.option.mute!=null){this.#setMute(this.option.mute)}else if(this.#isVimeo){this.#mediaPlayer.getMuted().then((bool=>this.#vimeoMuted=bool))}if(this[_option][_volume]!=null){this.#setVolume(this[_option][_volume])}else if(this.#isVimeo){this.#mediaPlayer.getVolume().then((volume=>this.#vimeoVolume=volume*100))}}#statePlaying(){this.#vimeoPlay=false;this.#vimeoPaused=this.#vimeoEnd=false;if(this.when.playing!=null){this.when.playing()}if(this.#isYoutube){if(this.start){this.start=false}setTimeout((()=>{this.mask.classList[_add]("hide")}),500)}this.#setCurrentTime();this.panel.hide(1)}#statePause(){this.#vimeoPaused=true;this.#vimeoPlay=false;if(this.when.pause!=null){this.when.pause()}clearInterval(this.videoTimer);if(this.#isYoutube){this.mask.classList.remove("hide")}this.panel.show()}#stateEnd(){this.#vimeoEnd=this.#vimeoPaused=true;this.#vimeoPlay=false;if(typeof this.when.end=="function"){this.when.end()}clearInterval(this.videoTimer);this.panel.reset();if(this.#isVideo){this.#mediaPlayer.currentTime=0}else if(this.#isYoutube){this.#seekTo(0);setTimeout((()=>{this.start=true}),50)}else if(this.#isVimeo){this.#seekTo(0)}}#stateFullPlaying(){this.pause();this.#seekTo(this.#getCurrentTime(),true);this.#setVolume(this.#getVolume(),true);this.#setPlaybackRate(this.#getPlaybackRate(),true);this.play(true)}#stateFullPause(){const sec=this.#getCurrentTime(true);this.panel.setCurrent(sec);this.#seekTo(sec);this.#setVolume(this.#getVolume(true));this.#setPlaybackRate(this.#getPlaybackRate(true))}#initPanel(){this.panel=new playerPanel(this);if(this.panel.buttonPlay!=null){this.panel.buttonPlay.onclick=_=>this.#toggle()}if(this.panel.inputProgress!=null){let seekTimer,playTimer;this.panel.inputProgress.oninput=e=>{clearTimeout(seekTimer);clearTimeout(playTimer);this.pause();const _this=e.target;const value=_this.value;this.panel.setCurrent(value);seekTimer=setTimeout((_=>{this.#seekTo(value);playTimer=setTimeout((_=>{this.play()}),500)}),500)}}if(this.panel.buttonVolume!=null){let timer;this.panel.buttonVolume.onclick=_=>{clearTimeout(timer);timer=setTimeout((_=>{this.panel.buttonVolume.parentElement.parentElement.open=false}),1e3)};this.panel.inputVolumeMini.onmouseover=_=>{clearTimeout(timer)};this.panel.inputVolumeMini[_onmouseleave]=_=>{clearTimeout(timer);timer=setTimeout((_=>{this.panel.buttonVolume.parentElement.parentElement.open=false}),1e3)};this.panel.inputVolumeMini.oninput=e=>{const _this=e.target;const value=_this.value;this.#setVolume(value)}}if(this.panel.buttonMute!=null){this.panel.buttonMute.onclick=_=>this.#setMute()}if(this.panel.inputVolume!=null){this.panel.inputVolume.oninput=e=>{const _this=e.target;const value=_this.value;this.#setVolume(value)}}if(this.panel.buttonRate!=null){this.panel.buttonRate.onclick=e=>{const _this=e.target;if(_this.innerText==="1x_mobiledata"){_this.innerText="speed_1_25";this.#setPlaybackRate(1.25)}else if(_this.innerText==="speed_1_25"){_this.innerText="speed_1_5x";this.#setPlaybackRate(1.5)}else if(_this.innerText==="speed_1_5x"){_this.innerText="speed_2x";this.#setPlaybackRate(2)}else if(_this.innerText==="speed_2x"){_this.innerText="speed_0_5x";this.#setPlaybackRate(.5)}else{_this.innerText="1x_mobiledata";this.#setPlaybackRate(1)}}}}#showPanel(sec){if(this.panel==null){return}this.panel.show();if(sec==null){return}this.panel.hide(sec)}#initAudio(){if(this[_audio]==null){return}this.#mediaPlayer=createElement("audio",{preload:"auto",controls:""},[createElement("source",{src:this[_audio]})]);this.#initPanel();this[_body][_appendChild](this.#mediaPlayer);this[_body][_appendChild](this.panel[_body]);this.#mediaPlayer.onloadedmetadata=()=>this.#stateReady();this.#mediaPlayer.onplaying=()=>this.#statePlaying();this.#mediaPlayer.onpause=()=>this.#statePause();this.#mediaPlayer.onended=()=>this.#stateEnd()}#initVideo(){if(this[_video]==null){return}this.#mediaPlayer=createElement("video",{preload:"auto",playsinline:""},[createElement("source",this[_video])]);if(!isMobile){this.#mediaPlayer.onclick=_=>this.#toggle()}this[_body][_appendChild](this.#mediaPlayer);this.#initPanel();this[_body][_appendChild](this.panel[_body]);this.#mediaPlayer.onloadedmetadata=_=>this.#stateReady();this.#mediaPlayer.onplaying=_=>this.#statePlaying();this.#mediaPlayer.onpause=_=>this.#statePause();this.#mediaPlayer.onended=_=>this.#stateEnd();if(!isMobile){return}this.#fullPlayer=createElement("video.PDFullPlayer",{preload:"metadata",playsinline:null},[createElement("source",this[_video])]);this.#fullPlayer.onplaying=_=>this.#stateFullPlaying();this.#fullPlayer.onpause=_=>this.#stateFullPause();this.#fullPlayer.onended=_=>this.#stateEnd();if(isIOS){this.#fullPlayer.addEventListener("webkitpresentationmodechanged",(_=>{this.stateFull=this.#fullPlayer.webkitPresentationMode==="fullscreen"}))}else{this.#fullPlayer.addEventListener("fullscreenchange",(_=>{this.stateFull=document.fullscreenElement===this.#fullPlayer}))}this[_body][_appendChild](this.#fullPlayer)}#initYoutube(){if(this[_youtube]==null){return}const id=UUID(24);const fullId=UUID(24);this.start=true;const domPlayer=createElement("div#"+id);const dom=createElement("div[_body]",[domPlayer]);if(!isMobile){dom.onclick=_=>this.#toggle()}this[_body][_appendChild](dom);this.mask=createElement("div.mask",{sec:this.live?"live":0});if(!isMobile){this.mask.onclick=_=>this.#toggle()}this[_body][_appendChild](this.mask);this.#initPanel();this[_body][_appendChild](this.panel[_body]);onYouTubeIframeAPIReady=async()=>{await this.#setVideoId();this.#mediaPlayer=new YT.Player(id,{videoId:this[_youtube],width:"100%",height:"100%",playerVars:{...ytConfig,playsinline:1},events:{onReady:_=>this.#stateReady(),onStateChange:e=>{this.ytState=e.data;if(e.data===0){this.#stateEnd()}else if(e.data===1){this.#statePlaying()}else if(e.data===2){this.#statePause()}}}});if(!isMobile){return}const domFullPlayer=createElement("div#"+fullId+".PDFullPlayer");this[_body][_appendChild](domFullPlayer);this.#fullPlayer=new YT.Player(fullId,{videoId:this[_youtube],width:"100%",height:"100%",playerVars:{...ytConfig,playsinline:0},events:{onReady:_=>{console.log("is Ready");this.#isFullReady=true},onStateChange:e=>{if(e.data===0){this.#stateEnd()}else if(e.data===2){this.#stateFullPause()}else if(e.data===3){this.#stateFullPlaying()}}}})};onYouTubeIframeAPIReady()}#initVimeo(){if(this[_vimeo]==null){return}const player=createElement("iframe",{src:href_vimeo+"/video/"+this[_vimeo]+"?background=1&loop=0&autoplay=0&controls=0",frameborder:"0",allowfullscreen:"",allow:"autoplay;"});const dom=createElement("div[_body]",[player]);if(!isMobile){dom.onclick=_=>this.#toggle()}this[_body][_appendChild](dom);this.mask=createElement("div.mask.hide");if(!isMobile){this.mask.onclick=_=>this.#toggle()}this[_body][_appendChild](this.mask);this.#initPanel();this[_body][_appendChild](this.panel[_body]);this.#mediaPlayer=new Vimeo.Player(player);this.#mediaPlayer.ready().then((_=>this.#stateReady()));this.#mediaPlayer.on("play",(_=>this.#statePlaying()));this.#mediaPlayer.on("pause",(_=>this.#statePause()));this.#mediaPlayer.on("ended",(_=>this.#stateEnd()));if(isMobile){this.#mediaPlayer.on("fullscreenchange",(e=>{this.panel.setPlayIcon(!e.fullscreen)}))}}async#setVideoId(res){const set=res=>{if(this[_youtube])return this[_youtube],res(res);this[_youtube]=prompt("Youtube 影片ID / 網址");if(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(this[_youtube])){let match=videoId.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/);this[_youtube]=match&&match[7][_length]==11?match[7]:null;this[_youtube]?(history.pushState(null,null,location.href.split("?")[0]+`?videoId=${this[_youtube]}`),res()):fitVideoId(res)}else res(res)};if(res)set(res);else return new Promise(((res,rej)=>set(res)))}destroy(){this[_body][_onmousemove]=this[_body][_onmouseleave]=null;clearInterval(this.videoTimer);if(this.#isVimeo){this.#mediaPlayer.destroy()}else if(this.#isYoutube){this.#mediaPlayer.destroy();if(this.#fullPlayer){this.#fullPlayer.destroy()}}else if(this.#isVideo||this.#isAudio){this.#mediaPlayer.pause();this.#mediaPlayer.src=""}this[_body].remove();if(typeof this.when.destroyed==="function"){this.when.destroyed()}}}window.PDPlayer=window.FPlyr=FPlyr;class playerPanel{body;#timer;#player;#duration;buttonPlay;buttonVolume;buttonMute;buttonRate;buttonFull;inputProgress;inputVolume;inputVolumeMini;#textTime;#textTimeFull;#width=8;constructor(player){this.#player=player;this.body=createElement("div.panel");this.body.onmouseover=_=>this.show();for(let key of player.option.panelItem){this.#setButtonPlay(key);this.#setInputProgress(player,key);this.#setButtonTime(player,key);this.#setButtonTimeFull(player,key);this.#setInputVolume(key,player.option.volume);this.#setInputVolumeMini(key,player.option.volume);this.#setButtonRate(player,key,1);this.#setButtonFull(player,key)}if(player.option.panelType==="minimal"){this.body.style.width=this.#width+"px"}}#setButtonPlay(key){if(key!=="play"){return}this.#width+=16+8;this.buttonPlay=createElement("span.material-symbols-outlined","play_arrow");this.body[_appendChild](this.buttonPlay)}#setInputProgress(player,key){if(key!=="progress"){return}this.inputProgress=createElement("input.progress",{type:"range",name:"progress",min:0,value:0});this.body[_appendChild](createElement("section.progress",[createElement("progress",{min:0,max:100}),this.inputProgress]))}#setButtonTime(player,key){if(key!=="timeMini"||player.option.panelType==="minimal"){return}this.#textTime=createElement("p.time","--:--");this.body[_appendChild](this.#textTime)}#setButtonTimeFull(player,key){if(key!=="time"||player.option.panelType==="minimal"){return}this.#textTimeFull=createElement("p.time","--:--/--:--");this.body[_appendChild](this.#textTimeFull)}#setInputVolume(key,volumeValue){if(key!=="volume"){return}this.#width+=24+8+64+8;this.buttonMute=createElement("span.material-symbols-outlined",this.#muteIcon);this.inputVolume=createElement("input.volume",{type:"range",name:"volume",min:0,max:100,value:volumeValue});this.body[_appendChild](createElement("section.volume",[this.buttonMute,createElement("section",[createElement("progress",{min:0,max:100,value:volumeValue}),this.inputVolume])]))}#setInputVolumeMini(key,volumeValue){if(key!=="volumeMini"){return}this.#width+=24+8;this.buttonVolume=createElement("span.material-symbols-outlined",this.#muteIcon);this.inputVolumeMini=createElement("input",{type:"range",name:"volume",min:0,max:100,value:volumeValue});this.body[_appendChild](createElement("details.volume",[createElement("summary",[this.buttonVolume]),createElement("section",[createElement("progress",{min:0,max:100,value:volumeValue}),this.inputVolumeMini])]))}#setButtonRate(player,key,rateValue){if(key!=="rate"){return}this.#width+=24+8;this.buttonRate=createElement("span.material-symbols-outlined","1x_mobiledata");this.body[_appendChild](this.buttonRate)}#setButtonFull(player,key){if(key!=="full"||this.#player.audio!=null){return}this.#width+=24+8;this.buttonFull=createElement("span.material-symbols-outlined","fullscreen");this.buttonFull.onclick=_=>{const isFull=document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen||false;const reqFull=player.body.requestFullscreen||player.body.msRequestFullscreen||player.body.mozRequestFullScreen||player.body.webkitRequestFullscreen;const exitFull=document.exitFullscreen||document.msExitFullscree||document.mozCancelFullScreen||document.webkitExitFullscreen;player.stateFull=!isFull;if(isFull){if(isMobile){player.mobilePause()}else{exitFull&&exitFull.call(document)}}else if(isMobile){player.pause();player.play(true)}else{reqFull&&reqFull.call(player.body)}};this.body[_appendChild](this.buttonFull)}get#muteIcon(){const isMute=this.#player.isMuted();return isMute?"no_sound":"volume_up"}setPlayIcon(bool){if(this.buttonPlay==null){return}this.buttonPlay.innerText=bool?"play_arrow":"pause"}setMuteIcon(bool){if(this.buttonMute!=null){this.buttonMute[_innerText]=bool?"no_sound":"volume_up"}if(this.inputVolume!=null){this.inputVolume.value=bool?0:this.#player.option.volume;this.inputVolume.previousElementSibling.value=bool?0:this.#player.option.volume}}reset(){if(this.buttonPlay!=null){this.buttonPlay.innerText="play_arrow"}this.show();this.setCurrent(0)}setVolume(num){if(this.inputVolume!=null){this.inputVolume.value=num;this.inputVolume.previousElementSibling.value=num}if(this.inputVolumeMini!=null){this.inputVolumeMini.value=num;this.inputVolumeMini.previousElementSibling.value=num}}duration(sec){const duration=Math.ceil(sec);this.#duration=duration;if(this.inputProgress!=null){this.inputProgress.max=duration;this.inputProgress.previousElementSibling.max=duration}if(this.#textTimeFull!=null){this.#textTimeFull.innerText=getTime(0,duration,true)+"/"+getTime(this.#duration,this.#duration)}}setCurrent(sec){if(this.inputProgress!=null){this.inputProgress.value=sec;this.inputProgress.previousElementSibling.value=sec}if(sec==null||this.#textTime==null&&this.#textTimeFull==null){return}if(this.#textTime!=null){this.#textTime.innerText=getTime(sec,this.#duration)}if(this.#textTimeFull!=null){this.#textTimeFull.innerText=getTime(sec,this.#duration)+"/"+getTime(this.#duration,this.#duration)}}show(){clearTimeout(this.#timer);this.body.classList.remove("hide")}hide(sec){clearTimeout(this.#timer);this.#timer=setTimeout((_=>{if(this.#player.isPaused()){return}this.body.classList.add("hide")}),sec*1e3)}}class videoPlayer{player;fullplayer;volume;constructor(config={}){this.type=config.type||"";this.volume=config.volume==null?50:volume;this.defaultMute=config.mute||false;this.event=config.event||{};this.player=createElement("video",{preload:"auto",playsinline:""},[createElement("source",this[_video])]);this.player.onloadedmetadata=_=>this.#stateReady();this.player.onplaying=_=>this.#statePlaying();this.player.onpause=_=>this.#statePause();this.player.onended=_=>this.#stateEnd();if(!isMobile){return}this.fullplayer=createElement("video.PDFullPlayer",{preload:"metadata",playsinline:null},[createElement("source",this[_video])]);this.fullplayer.onplaying=_=>this.#stateFullPlaying();this.fullplayer.onpause=_=>this.#stateFullPause();this.fullplayer.onended=_=>this.#stateEnd()}#stateReady(){if(this.event.ready!=null){this.event.ready()}this.sec=0;this.setVolume(this.volume);this.setMute(this.defaultMute)}#statePlaying(){if(this.event.playing!=null){this.event.playing()}this.#setCurrentTime()}#setCurrentTime(){const total=this.getDuration();this.videoTimer=setInterval((()=>{const sec=this.#getCurrentTime();this.panel.setCurrent(sec,this.getDuration());if(Math.ceil(sec)<total){return}clearInterval(this.videoTimer)}),100)}#getCurrentTime(){return Math.ceil(this.currentTime)}#statePause(){if(this.event.pause!=null){this.event.pause()}clearInterval(this.videoTimer)}#stateEnd(){if(typeof this.event.end=="function"){this.event.end()}clearInterval(this.videoTimer);this.player.currentTime=0}#stateFullPlaying(){this.pause();this.seekTo(this.#getCurrentTime(),true);this.setVolume(this.getVolume(),true);this.setPlaybackRate(this.getPlaybackRate(),true);this.play(true)}#stateFullPause(){const sec=this.#getCurrentTime(true);this.seekTo(sec);this.setVolume(this.getVolume(true));this.setPlaybackRate(this.getPlaybackRate(true))}seekTo(sec){player.currentTime=sec;this.pause()}pause(){player.pause()}setPlaybackRate(num){player.playbackRate=num}getDuration(){return Math.ceil(player.duration)}setVolume(num){if(num==null){return}this.volume=num;this.player.volume=num/100}setMute(bool){if(bool==null){return}const isMuted=bool==null?this.isMuted():!bool;if(isMuted&&this.volume===0){this.volume=50;this.setVolume(50);return}this.player.muted=!isMuted}isMuted(){return player.muted}}