@flowplayer/player
Version:
video player for the future
2 lines (1 loc) • 12.9 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).flowplayer=e.flowplayer||{},e.flowplayer.chapters=t())}(this,(function(){"use strict";function e(){}var t;function n(e,n){if(function(e){return Object.values(t).includes(e)}(n=n||t.Anonymous))return e instanceof HTMLVideoElement&&(e.poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="),"crossOrigin"in e?e.crossOrigin=n:e.setAttribute("crossorigin",n),e}function r(e){const t=document.createElement("a");return t.href=e,t.origin}function i(t,i){const s=document.createElement("track");s.className="fp-track renderable",s.kind=i.kind||"captions",s.label=i.label||i.lang||"",s.lang=i.lang||"",s.id=["fp",i.lang].join("-");const o=s.track;return o.removeCue=e,"string"!=typeof i.crossorigin&&function(e,t){try{return e.src.startsWith("blob:"),r(e.src)!==r(t)}catch(e){return console.error(e),!0}}(t,i.src)&&(n(t),i.crossorigin=t.getAttribute("crossorigin")),"crossorigin"in i&&n(t,i.crossorigin),Object.keys(i).forEach(e=>{"default"!==e&&(s[e]=i[e])}),o.mode=i.default?"hidden":"disabled",t.appendChild(s),s}!function(e){e.Anonymous="anonymous",e.UseCredentials="use-credentials",e.Empty=""}(t||(t={}));var s=Object.freeze({__proto__:null,CHAPTER_CHANGED:"chapter:changed",CHAPTERS_NEW:"chapters:new"});function o(e,t,n){const r=function(e,t){const n=new CustomEvent(e,{detail:t,cancelable:!0});return t&&Object.defineProperty(n,"data",{get:()=>t}),n}(t,n);return e.dispatchEvent(r),e}function a(e,t){const n=e._customElements.get(t);return n&&e.root.querySelector(n)||void 0}function c(...e){const t=document.createElement("div");return 0==e.length||t.classList.add(...e),t}!function(){let e=!1;try{const t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("testPassive",null,t),window.removeEventListener("testPassive",null,t)}catch(e){}}();const l="flowplayer-timeline-bar",u="is-source-processing";class FlowplayerComponent extends HTMLElement{constructor(e){super(),this.player=e}}document.addEventListener("click",(function(e){this.active_menu&&!e.composedPath().includes(this.active_menu)&&(Array.from(document.querySelectorAll(".fp-engine")).forEach(e=>{var t;const n=e.root.querySelector("details[open].fp-menu-container");n&&(n.open=!1,null===(t=n.querySelector("summary"))||void 0===t||t.removeAttribute("aria-expanded"),e.root.classList.toggle("has-menu-opened",!1))}),this.active_menu=void 0)}));const d={passive:!0};var h;function p(t,n){let r=0,i=-1,s=-1;const o=Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,5),a=t.classList;t.id=o,a.remove(h.GRABBING),a.remove(h.TOUCHING);const c=n.onseek||e,l=n.onstart||e,u=n.onend||e,p=n.onmouse||e,_=n.ontouch||e,v=n.ontouchend||e;function g(e){!function(){const e=t.getBoundingClientRect();r=e.left,i=e.width}();let n=(function(e){return"function"==typeof window.TouchEvent&&e instanceof TouchEvent}(e)?e.changedTouches[0].pageX:e.pageX)-r;return n>i&&(n=i),n<0&&(n=0),n/i*100}function y(e){const n=g(e);n!=s&&(c(t,n),s=n)}return t.addEventListener("touchstart",(function(e){f(t,e)&&(a.add(h.TOUCHING),m(t.parentElement)&&(a.add(h.GRABBING),_(t,g(e)),l(t,g(e)),y(e)))}),d),t.addEventListener("touchmove",(function(e){y(e),p(t,g(e))}),d),t.addEventListener("touchend",(function(e){setTimeout((function(){a.remove(h.TOUCHING)}),500),f(t,e)&&(a.remove(h.GRABBING),v(t,g(e)),u(t,g(e)),i=0)}),d),t.addEventListener("touchcancel",(function(){a.remove(h.GRABBING,h.TOUCHING),i=0}),d),t.addEventListener("mousedown",(function(e){a.contains(h.TOUCHING)||(document.addEventListener("mousemove",y),a.add(h.GRABBING),l(t,g(e)),e.preventDefault(),y(e))})),t.addEventListener("mousemove",(function(e){a.contains(h.TOUCHING)||p(t,g(e))})),document.addEventListener("mouseup",(function(e){a.contains(h.TOUCHING)||(document.removeEventListener("mousemove",y),a.contains(h.GRABBING)&&(a.remove(h.GRABBING),u(t,g(e)),i=0))})),t}function f(e,t){const n=t.target;return!!n&&(n&&!n.closest(e.id)||!m(e.parentElement)||!e.classList.contains(h.TOUCHING))}function m(e){if(!e)return!1;const t=window.getComputedStyle(e);return"0"!==t.width&&"0"!==t.height&&"0"!==t.opacity&&"none"!==t.display&&"hidden"!==t.visibility}function _(e){const t="number"==typeof e?e:parseInt(e,10);return(t>9?"":"0")+t}function v(e){if(isNaN(e)||e>=Number.MAX_SAFE_INTEGER)return"";const t=e<0?"-":"";e=Math.round(Math.abs(e));const n=Math.floor(e/3600);let r=Math.floor(e/60);return e-=60*r,n>=1?(r-=60*n,t+n+":"+_(r)+":"+_(e)):t+_(r)+":"+_(e)}function g(e,t){if(!e.parentElement)return;const n=e.clientWidth/e.parentElement.clientWidth*100/2;e.style.left=t-n+"%",e.style.display="block"}function y(e,t){if(isNaN(e.duration))return;const n=e.buffered;n.length&&(t.style.width=Math.min(n.end(n.length-1)/e.duration*100,100)+"%")}function E(e,t){e.style.width="0",t.style.display="none"}!function(e){e.GRABBING="has-grab",e.TOUCHING="has-touch"}(h||(h={}));function b(e,t){const n=e.seekable;if("object"!=typeof e.opts||0==n.length)return{head:0,tail:0};const r=function(e){var t;const n=e.seekable;return n.length?e.hasState("is-chromecast-playing")||!(null===(t=e.hls)||void 0===t?void 0:t.liveSyncPosition)?n.end(n.length-1):e.hls.liveSyncPosition:0}(e),i=t||e.live_state.dvr_window;return{head:r,tail:"number"!=typeof i||r-i<0?n.start(0):r-i}}function A(e,t,n){if(!t.seekable||0==t.seekable.length)return;g(n,e);const r=b(t),i=(100-Math.max(0,Math.min(e,100)))/100*(r.head-r.tail);n.innerText="-"+v(i)}function w(e,t){e/=100,t.currentTime=function(e,t){if(t>1||t<0)return console.warn("cannot calculate a percent outside of range(0..1)"),0;const n=b(e);return n.tail+t*(n.head-n.tail)}(t,e)}function k(e,t){e.style.width="0",t.style.display="none"}class FlowplayerTimelineBar extends FlowplayerComponent{constructor(e){let t;super(e),this.bufferEle=c("fp-buffer"),this.progress=c("fp-progress","fp-color"),this.tooltipEle=c("fp-timestamp"),this.proposedSeekBar=c("fp-hover"),this.dragger=c("fp-dragger","fp-color"),this.classList.add("fp-timeline","fp-bar"),this.tooltipEle.style.display="none",this.setAttribute("role","slider"),this.setAttribute("tabindex","0"),this.setAttribute("aria-label",e.i18n("core.timeline_aria_label","Seek slider")),this.setAttribute("aria-valuenow","0"),this.progress.append(this.dragger),this.append(this.bufferEle,this.progress,this.proposedSeekBar,this.tooltipEle);const n=requestAnimationFrame;let r=void 0;const i=()=>{var n;0==e.reaper||t.live||(n=e,this.progress.style.width=n.currentTime/n.duration*100+"%",r=void 0,e.paused||this.classList.contains(h.GRABBING)||r||(r=setTimeout(i,200)))},s=()=>!!this.player.opt("seekable",!0)&&!isNaN(this.player.duration);p(this,{onseek:(n,r)=>{if(s())switch(!!t.live){case!0:A(r,e,this.tooltipEle);break;case!1:!function(e,t,n){const r=t.duration*(e/100);if(t.disabled&&r>t.currentTime)return!1;n.style.width=e+"%",t.currentTime=r}(r,e,this.progress),g(this.tooltipEle,r)}},onstart:()=>{s()&&(e.emit("timeline/gesture/start"),!e.hasState("is-casting")&&e.setState("is-seeking",!0),t.live||function(e){e.style.display="block"}(this.tooltipEle))},onend:function(r,s){n(i),0!=t.seekable&&t.live&&w(s,e)},ontouchend:()=>{t.live?k(this.proposedSeekBar,this.tooltipEle):E(this.proposedSeekBar,this.tooltipEle),setTimeout(()=>e.emit("timeline/gesture/end"),0)},onmouse:(n,r)=>{if(s()&&(e.emit("timeline/gesture/move",{percent:r}),!this.classList.contains(h.GRABBING)))switch(!!t.live){case!0:!function(e,t){t.style.width=e+"%"}(r,this.proposedSeekBar),A(r,e,this.tooltipEle);break;case!1:!function(e,t){t.style.width=e+"%"}(r,this.proposedSeekBar),function(e,t,n){isNaN(e)||isNaN(t.duration)||(g(n,e),n.textContent=v(e/100*t.duration))}(r,e,this.tooltipEle)}}}),e.on("config",(function(e){e.data&&(t=e.data)})),e.on("playing",()=>n(i)),e.on("progress",()=>{0==e.reaper||t.live||y(e,this.bufferEle)}),e.on("dvr",e=>{this.progress.style.width=e.detail+"%"}),e.on("timeupdate",()=>{0!=e.reaper&&(n(i),this.setAttribute("aria-valuenow",e.currentTime+""),this.setAttribute("aria-valuetext",Math.round(e.currentTime)+" "+e.i18n("core.seconds","Seconds")),t.live||y(e,this.bufferEle))}),e.on("loadedmetadata",()=>{0!=e.reaper&&(t.live||y(e,this.bufferEle))}),e.on("durationchange",t=>{if(0==e.reaper)return;const n=function(e){return e.opt("live",!1)||e.duration>=Number.MAX_SAFE_INTEGER}(e)?function(e){return isFinite(e.duration)?e.duration:0==e.seekable.length?0:b(e).head}(e):t.data||e.duration;isNaN(n)||(this.setAttribute("aria-valuemax",n+""),this.setAttribute("aria-valuemin","0"))}),this.addEventListener("mouseleave",()=>{e.emit("timeline/gesture/end"),t.live?k(this.proposedSeekBar,this.tooltipEle):E(this.proposedSeekBar,this.tooltipEle)})}}class FlowplayerChaptersTimelineBar extends FlowplayerTimelineBar{constructor(e){super(e),this.handleChapters(e)}handleChapters(e){const t=document.createElement("div");let n;this.addEventListener("chapters:new",e=>{t.innerText="",this.querySelectorAll(".fp-chapter").forEach(e=>this.removeChild(e)),e.data&&e.data.forEach(e=>{const r=document.createElement("div");r.className="fp-chapter",r.style.left=e.left,r.style.bottom=r.style.top="0",r.style.width=e.width,r.title=e.title,r.onmouseover=()=>{t.innerText=e.title},r.onmouseleave=()=>{t.innerText=n||""},this.appendChild(r)})}),this.addEventListener("chapter:changed",r=>{var i;const s=r.data;s&&(t.parentNode||(null===(i=a(e,"flowplayer-control"))||void 0===i||i.insertAdjacentElement("beforebegin",t),t.classList.toggle("fp-togglable",!0),t.classList.toggle("fp-chapter-info",!0)),n=s,t.innerText=s)})}}var T;const N=((T=class Chapters{constructor(t){this._track_added_handler=e,this._cue_changed_handler=e,this.chapters=[],this.render=this.render.bind(this),t.customElements.get(l)===l&&(((e,t,n)=>{window.customElements.get(t)||window.customElements.define(t,n),e.customElements.get(t)||e.customElements.set(t,t)})(t,"flowplayer-chapters-timeline-bar",FlowplayerChaptersTimelineBar),t.customElements.set(l,"flowplayer-chapters-timeline-bar"))}init(e,t,n){this._root=t,this._player=n,this._timeline=a(n,l),this._track_added_handler=this.track_added.bind(this,n),this._cue_changed_handler=this.cue_changed.bind(this,n),n.textTracks.addEventListener("addtrack",this._track_added_handler),this.wireup(n,e),n.chapters=this,n.on("config",e=>{e.data&&this.wireup(n,e.data)}),n.on(["playlist/advance","src"],e=>{n.currentSrc&&("src"===e.type&&["is-playlist",u].some(e=>n.root.classList.contains(e))||(this._current_chapters_src=void 0,delete n.opts.chapters,this.wiredown(n)))}),n.on("reap",()=>{this.wiredown(n),n.textTracks.removeEventListener("addtrack",this._track_added_handler),n.off("durationchange",this.render)}),n.on("durationchange",this.render)}track_added(e,t){}cue_changed(e,t){var n;this._current_chapters_track&&(this.current_cue=this._current_chapters_track.track.activeCues?this._current_chapters_track.track.activeCues[0]:void 0,this._timeline&&o(this._timeline,"chapter:changed",null===(n=this.current_cue)||void 0===n?void 0:n.text))}set_chapters(e){this.chapters=e,this.render()}jump(e){this._player&&this.chapters[e]&&(this._player.currentTime=this.chapters[e].start)}current(){if(this.current_cue)return this.chapters.find(e=>e.cue==this.current_cue)}render(){if(!this._root||!this._player||!this._timeline)return;const e=this._player.duration;isFinite(e)&&(o(this._timeline,"chapters:new",this.chapters.map(t=>({title:t.label,left:t.start/e*100+"%",width:(t.end-t.start)/e*100+"%"}))),this._root.classList.toggle("has-chapters",!!this.chapters.length))}wireup(e,t){const n=Array.isArray(t.chapters)?t.chapters[0]:t.chapters;n&&n.src!==this._current_chapters_src&&(this._current_chapters_track=i(e,Object.assign(Object.assign({},n),{kind:"chapters",default:!0})),this._current_chapters_track.onload=()=>{var e;(null===(e=this._current_chapters_track)||void 0===e?void 0:e.track.cues)&&this.set_chapters(Array.from(this._current_chapters_track.track.cues).filter(e=>e instanceof VTTCue).map(e=>{const t=e;return{start:e.startTime,end:e.endTime,cue:t,label:t.text}}))},this._current_chapters_src=n.src,this._current_chapters_track.addEventListener("cuechange",this._cue_changed_handler))}wiredown(e){this.set_chapters([]),this._current_chapters_track&&(this._current_chapters_track.removeEventListener("cuechange",this._cue_changed_handler),e.removeChild(this._current_chapters_track),this._current_chapters_track=void 0)}}).events=s,T.pluginName="chapters",T);return function(e,t){if("object"==typeof exports&&"undefined"!=typeof module)return t;if(null===document.currentScript)return t;"flowplayer"in e||(e.flowplayer={extensions:[]});const n=e.flowplayer;return"function"==typeof n?(n(t),t):(Array.isArray(n.extensions)||(n.extensions=[]),~n.extensions.indexOf(t)||n.extensions.push(t),t)}(window,N)}));