@flowplayer/player
Version:
video player for the future
2 lines (1 loc) • 19.4 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.subtitles=t())}(this,(function(){"use strict";function e(e,t,s){const n=function(e){return Array.isArray(e)?e.slice(0):e.split(".")}(t);for(;n.length;){if(null==e)return s;const t=n.shift();if("string"!=typeof t)return s;e=e[t]}return null==e?s:e}function t(e,t){e.innerHTML="",t.forEach((function(t){const s=document.createElement("pre");s.classList.add("fp-cue"),function(e,t){const s=e.style,n=t.size;s.setProperty("--caption-size",n.toString());const i=t.position;i&&"auto"!==i&&t?s.setProperty("--caption-position",i.toString()):s.removeProperty("--caption-position");const r="captions-align-"+t.align;Array.from(e.classList).forEach((function(s){s!=r&&("captions-vertical"==s&&t.vertical||s.startsWith("captions")&&e.classList.remove(s))})),e.classList.add(r),e.classList.toggle("captions-vertical",!!t.vertical)}(e,t),s.appendChild(t.getCueAsHTML()),e.appendChild(s)}))}function s(){}const n="is-source-processing",i=(e,t)=>new(((e,t)=>{const s=e.get(t);if(!s)throw new Error(`no flowplayer component with the name ${t} exists`);const n=window.customElements.get(t);if(!n)throw new Error(`no default flowplayer component with the name ${t} exists`);const i=window.customElements.get(s);return"function"!=typeof i?n:i})(e._customElements,t))(e),r=(e,t,s)=>{window.customElements.get(t)||window.customElements.define(t,s),e.customElements.get(t)||e.customElements.set(t,t)};function a(e,t,s){const n=function(e,t){const s=new CustomEvent(e,{detail:t,cancelable:!0});return t&&Object.defineProperty(s,"data",{get:()=>t}),s}(t,s);return e.dispatchEvent(n),e}function o(e,t){const s=e._customElements.get(t);return s&&e.root.querySelector(s)||void 0}!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){}}();class FlowplayerComponent extends HTMLElement{constructor(e){super(),this.player=e}}const l="fp-on",c="fp-invis";class FlowplayerMenu extends FlowplayerComponent{constructor(e){super(e),this.player=e,this.menuContainer=document.createElement("details"),this.summaryEle=document.createElement("summary"),this.menuHeader=document.createElement("div"),this.menuTitle=document.createElement("h3"),this.olEle=document.createElement("ol"),this.olEle.id=d(),this.menu=document.createElement("div"),this.closeEle=document.createElement("span"),this.menuHeader.classList.add("fp-menu-header"),this.menuHeader.append(this.menuTitle,this.closeEle),this.menu.classList.add("fp-menu"),this.menu.append(this.menuHeader,this.olEle),this.closeEle.classList.add("fp-close"),this.closeEle.textContent="×",this.menuContainer.classList.add("fp-menu-container"),this.menuContainer.append(this.summaryEle,this.menu),this.menuContainer.addEventListener("click",t=>{if(t.defaultPrevented)return;t.preventDefault();const s=this.menuContainer.open;s||(u(),document.active_menu=this.menuContainer),this.menuContainer.open=!s,e.root.classList.toggle("has-menu-opened",!s),this.summaryEle.setAttribute("aria-expanded",s?"false":"true")}),this.addEventListener("focusin",e=>{const t=e.target;t instanceof HTMLLIElement&&t.setAttribute("aria-selected","true")}),this.addEventListener("focusout",e=>{const t=e.target;t instanceof HTMLLIElement&&t.setAttribute("aria-selected","false")}),this.append(this.menuContainer),this.olEle.setAttribute("aria-labelledby",this.summaryEle.id),this.olEle.setAttribute("role","menu"),this.summaryEle.setAttribute("aria-haspopup","true"),this.summaryEle.setAttribute("aria-controls",this.olEle.id),this.summaryEle.setAttribute("tabindex","0"),this.summaryEle.setAttribute("aria-expanded","false"),this.summaryEle.setAttribute("role","button")}get options(){return this.olEle.querySelectorAll("li")}setMenuAttrs(e){if(this.className=e.class,this.toggle_visibility(!0),this.summaryEle.id||(this.summaryEle.id=e.id||d()),this.summaryEle.setAttribute("aria-label",e.menuTitle||"Menu"),e.summaryTitle&&(this.summaryEle.textContent=e.summaryTitle),e.summaryIcon){const t=i(this.player,e.summaryIcon);t.setAttribute("tabindex",""),this.summaryEle.append(t)}e.menuTitle&&(this.menuTitle.textContent=e.menuTitle),this.menu.classList.toggle("fp-icons",!!e.icons),this.addEventListener(e.options_event,e=>{this.render(e.data)}),e.item_selected_event&&this.addEventListener(e.item_selected_event,e=>{void 0!==e.data&&this.select_item(e.data.selected_index)})}render(e){this.olEle&&(this.olEle.innerHTML="",e&&e.forEach(this.menuOption,this),this.toggle_visibility(!(null==e?void 0:e.length)))}menuOption(e,t){const s=document.createElement("li");s.setAttribute("role","menuitem"),s.setAttribute("aria-selected","false"),s.setAttribute("tabindex","0"),e.icon&&s.append(e.icon);const n=document.createElement("span");n.textContent=e.text,s.append(n),s.addEventListener("click",()=>{this.select_item(t),"function"==typeof e.onclick&&e.onclick()}),this.olEle.appendChild(s),e.selected&&this.select_item(t)}select_item(e){this.options.forEach((t,s)=>{t.classList.toggle(l,s===e)})}unselect_item(){this.options.forEach(e=>{e.classList.remove(l)})}toggle_visibility(e){this.classList.toggle(c,e),this.menu.style.setProperty("display",e?"none":"flex")}}function u(){Array.from(document.querySelectorAll(".fp-engine")).forEach(e=>{var t;const s=e.root.querySelector("details[open].fp-menu-container");s&&(s.open=!1,null===(t=s.querySelector("summary"))||void 0===t||t.removeAttribute("aria-expanded"),e.root.classList.toggle("has-menu-opened",!1))})}function d(){return Math.random().toString(36).replace(/[^a-z]+/g,"").substr(0,5)}document.addEventListener("click",(function(e){this.active_menu&&!e.composedPath().includes(this.active_menu)&&(u(),this.active_menu=void 0)}));const p=["255, 255, 255","255, 255, 0","0, 255, 0","0, 255, 255","0, 0, 255","255, 0, 255","255, 0, 0","0, 0, 0"],m=[.25,.5,.75,1,1.25,1.5,1.75,2,3,4],h=["White","Yellow","Green","Cyan","Blue","Magenta","Red","Black"],f=["Monospaced Serif","Proportional Serif","Monospaced Sans-Serif","Proportional Sans-Serif","Casual","Cursive"],y=["Courier New, monospace","serif","Andale Mono, Lucida Console, monospace","sans-serif","Comic Sans MS, Impact, fantasy","Monotype Corsiva, cursive"],v=["None","Drop shadow","Raised","Depressed","Outline"],b=["","rgb(34, 34, 34) 2px 2px 3px, rgb(34, 34, 34) 2px 2px 4px, rgb(34, 34, 34) 2px 2px 5px","rgb(34, 34, 34) 1px 1px, rgb(34, 34, 34) 2px 2px, rgb(34, 34, 34) 3px 3px","rgb(204, 204, 204) 1px 1px, rgb(204, 204, 204) 0px 1px, rgb(34, 34, 34) -1px -1px, rgb(34, 34, 34) 0px -1px","rgb(34, 34, 34) 0px 0px 1px, rgb(34, 34, 34) 0px 0px 1px, rgb(34, 34, 34) 0px 0px 1px, rgb(34, 34, 34) 0px 0px 1px, rgb(34, 34, 34) 0px 0px 1px"];class StyleOpt{constructor(e,t,s,n,i){this.player=e,this.labels=t,this.values=s,this.css_variable=n,this.default_value=i,this.selected=e._storage.getItem(n)||i}set selected(e){document.documentElement.style.setProperty(this.css_variable,e),this.player._storage.setItem(this.css_variable,e)}get selected(){return document.documentElement.style.getPropertyValue(this.css_variable)}}var g;!function(e){e[e.main=0]="main",e[e.tracks=1]="tracks",e[e.style=2]="style",e[e.styleOpt=3]="styleOpt"}(g||(g={}));class FlowplayerSubtitlesMenu extends FlowplayerMenu{constructor(e){if(super(e),this.state=g.main,this.selectedTrackIdx=-1,this.isTV=!1,this.styleOpts=function(e){return{[e.i18n("cc.properties.fontSize","Font size")]:new StyleOpt(e,m.map(e=>100*e+"%"),m.map(e=>100*e+"%"),"--fp-sub-font-size","100%"),[e.i18n("cc.properties.fontFamily","Font family")]:new StyleOpt(e,f.map(t=>e.i18n("cc.fontFamily."+t,t)),y,"--fp-sub-font-family","sans-serif"),[e.i18n("cc.properties.fontColor","Font color")]:new StyleOpt(e,h.map(t=>e.i18n("cc.colors."+t,t)),p,"--fp-sub-font-color",p[0]),[e.i18n("cc.properties.fontOpacity","Font opacity")]:new StyleOpt(e,m.flatMap(e=>e>1?[]:100*e+"%"),m.flatMap(e=>e>1?[]:e+""),"--fp-sub-font-opacity","1"),[e.i18n("cc.properties.backgroundColor","Background color")]:new StyleOpt(e,h.map(t=>e.i18n("cc.colors."+t,t)),p,"--fp-sub-background-color",p[7]),[e.i18n("cc.properties.backgroundOpacity","Background opacity")]:new StyleOpt(e,m.flatMap(e=>e>1?[]:100*e+"%"),m.flatMap(e=>e>1?[]:e+""),"--fp-sub-background-opacity","0.5"),[e.i18n("cc.properties.characterEdgeStyle","Character edge style")]:new StyleOpt(e,v.map(t=>e.i18n("cc.edgeStyle."+t,t)),b,"--fp-sub-edge-style","")}}(e),e.on("mount",()=>{setTimeout(()=>this.isTV=e.hasState("is-tv"),0),this.classList.toggle("subs-native",!!e.opt("subtitles.native"))}),e.on(M.events.TRACK_UPDATED,e=>this.summaryEle.classList.toggle("fp-color-text",!!e.detail)),e.opt("subtitles.native"))return;const t=i(this.player,"flowplayer-menu-back");t.setAttribute("aria-label","Back to previous menu"),this.menuHeader.prepend(t),t.addEventListener("click",()=>this.navigateBack());const s=i(this.player,"flowplayer-subs-menu-icon");s.setAttribute("aria-label","Open style menu"),s.addEventListener("click",()=>this.createMenu(g.style)),this.menuHeader.insertBefore(s,this.menuTitle),this.summaryEle.addEventListener("click",()=>{this.menuContainer.open||this.createMenu(g.main)}),this.menu.addEventListener("click",e=>{(e.target===s||e.target===t||this.state!==g.main&&e.target!==this.closeEle)&&e.preventDefault()}),this.addEventListener(M.events.TRACKS,e=>{var t;this.tracks=e.detail,this.selectedTrackIdx=-1,this.toggle_visibility(!(null===(t=null==this?void 0:this.tracks)||void 0===t?void 0:t.length)),this.state===(this.isTV?g.tracks:g.main)&&this.createMenu(this.isTV?g.tracks:g.main)}),this.addEventListener(M.events.SWITCH,e=>{this.selectedTrackIdx=e.detail.selected_index,this.state===(this.isTV?g.tracks:g.main)&&this.select_item(this.selectedTrackIdx)}),this.player.addEventListener("tv-menu:will-open",()=>{var e;(null===(e=this.tracks)||void 0===e?void 0:e.length)&&this.createMenu(g.main)}),this.player.on(["tv-menu:will-close","keyboard:close:menus"],e=>{var t;this.state!==g.main&&(null===(t=document.activeElement)||void 0===t?void 0:t.closest(".fp-menu"))===this.menu&&(this.navigateBack(),e.preventDefault())})}navigateBack(){switch(this.state){case g.style:case g.tracks:return this.createMenu(g.main);case g.styleOpt:return this.createMenu(g.style)}}getMenuTitle(){switch(this.state){case g.main:return this.player.i18n("cc.menu_title","Subtitles");case g.tracks:return this.player.i18n("cc.tracks","Tracks");case g.style:return this.player.i18n("cc.options","Options");default:return""}}createMenuOpts(e){switch(this.state){case g.main:return this.isTV?this.createTvMainMenuOpts():this.createTracksMenuOpts();case g.tracks:return this.createTracksMenuOpts();case g.style:return this.createStyleMenuOpts();case g.styleOpt:return e?this.createStylePropertyMenuOpts(this.styleOpts[e]):[]}}createMenu(e,t){var s;this.state=e,this.menu.classList.toggle("fp-submenu",e>0),this.menuTitle.textContent=t||this.getMenuTitle(),this.render(this.createMenuOpts(t)),null===(s=this.menu.querySelector("li"))||void 0===s||s.focus()}createTvMainMenuOpts(){return[{text:this.player.i18n("cc.tracks","Tracks"),onclick:this.createMenu.bind(this,g.tracks)},{text:this.player.i18n("cc.options","Options"),onclick:this.createMenu.bind(this,g.style)}]}createTracksMenuOpts(){return Array.isArray(null==this?void 0:this.tracks)?this.tracks.map((e,t)=>({text:e.text,onclick:()=>{e.onclick(),this.selectedTrackIdx=this.selectedTrackIdx===t?-1:t},selected:this.selectedTrackIdx===t})):[]}createStyleMenuOpts(){const e=Object.keys(this.styleOpts).map(e=>({text:e,onclick:this.createMenu.bind(this,g.styleOpt,e)}));return e.push({text:this.player.i18n("cc.reset","Reset"),onclick:()=>Object.values(this.styleOpts).forEach(e=>e.selected=e.default_value)}),e}createStylePropertyMenuOpts(e){return e.labels.map((t,s)=>({text:t,onclick:()=>{e.selected=e.values[s]},selected:s===e.values.indexOf(e.selected)}))}select_item(e){if(this.state!==g.style)return this.state===g.styleOpt?super.select_item(e):void this.options.forEach((t,s)=>{t.classList.toggle(l,s===e&&!t.classList.contains(l))})}}class FlowplayerIcon extends FlowplayerComponent{constructor(e,t){super(e),this.classList.add("fp-icon",t.name),t.title&&this.setAttribute("title",t.title),t.title&&this.setAttribute("aria-label",t.title),t.translation_key&&this.setAttribute("aria-label",e.i18n(t.translation_key)),this.setAttribute("tabindex","0"),this.setAttribute("focusable","true")}}function k(e){return!document.fullscreenEnabled&&"function"==typeof e.webkitEnterFullScreen&&"function"==typeof e.webkitExitFullScreen}const x="subs:tracks",E="subs:change";var A,w=Object.freeze({__proto__:null,TRACK_UPDATED:"tracks:text:updated",TRACKS:x,SWITCH:E,CUES_PARSED:"cues:parsed",TEXT_TRACKS:"tracks:text:all"});function _(e,t){if(function(e){return Object.values(A).includes(e)}(t=t||A.Anonymous))return e instanceof HTMLVideoElement&&(e.poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="),"crossOrigin"in e?e.crossOrigin=t:e.setAttribute("crossorigin",t),e}function T(e){const t=document.createElement("a");return t.href=e,t.origin}function C(e,t){const n=document.createElement("track");n.className="fp-track renderable",n.kind=t.kind||"captions",n.label=t.label||t.lang||"",n.lang=t.lang||"",n.id=["fp",t.lang].join("-");const i=n.track;return i.removeCue=s,"string"!=typeof t.crossorigin&&function(e,t){try{return e.src.startsWith("blob:"),T(e.src)!==T(t)}catch(e){return console.error(e),!0}}(e,t.src)&&(_(e),t.crossorigin=e.getAttribute("crossorigin")),"crossorigin"in t&&_(e,t.crossorigin),Object.keys(t).forEach(e=>{"default"!==e&&(n[e]=t[e])}),i.mode=t.default?"hidden":"disabled",e.appendChild(n),n}!function(e){e.Anonymous="anonymous",e.UseCredentials="use-credentials",e.Empty=""}(A||(A={}));const O={translation_key:"cc.menu_title",name:"fp-subtitles-menu"},S={name:"fp-menu-back"};var L;const M=((L=class Subtitles{constructor(e){r(e,"flowplayer-subtitles-menu",FlowplayerSubtitlesMenu),r(e,"flowplayer-subs-menu-icon",class extends FlowplayerIcon{constructor(e){super(e,O)}}),r(e,"flowplayer-menu-back",class extends FlowplayerIcon{constructor(e){super(e,S)}})}init(r,l,c){var u,d;const p=i(c,"flowplayer-subtitles-menu");p instanceof FlowplayerSubtitlesMenu&&p.setMenuAttrs({class:"fp-cc",summaryTitle:c.i18n("cc.button","CC"),menuTitle:c.i18n("cc.menu_title","Subtitles"),options_event:(null===(u=r.subtitles)||void 0===u?void 0:u.native)?x:void 0,item_selected_event:(null===(d=r.subtitles)||void 0===d?void 0:d.native)?E:void 0});const m=function(e){const t=document.createElement("div");return t.classList.add("fp-captions"),t.ontouchend=t=>e.emit(t.type),t.onclick=t=>e.emit(t.type),t}(c);let h,f=[],y=[];function v(){return Array.from(c.textTracks).filter(e=>~["captions","subtitles","descriptions"].indexOf(e.kind)&&!e.removed&&e.label)}function b(){return v().find(e=>e.is_active)}function g(e){Array.from(e.querySelectorAll("track")).forEach(t=>{["captions","subtitles","descriptions"].includes(t.kind)&&e.removeChild(t)})}function A(e,t,s){a(t,x,s.map((function(t){return{text:t.label,onclick:w.bind(0,e,t)}})));const n=b();return n?v().find(e=>e===n)?void a(t,E,{selected_index:s.indexOf(n)}):_():e.emit("tracks:text:updated")}function w(e,t){var s,n;if(t==b())return _();_(),t.is_hls_embedded&&"number"==typeof t.track_id&&e.hls&&(e.hls.subtitleTrack=t.track_id),t.mode=(null===(s=e.opts.subtitles)||void 0===s?void 0:s.native)?"showing":"hidden",t.is_active=!0,e.emit("tracks:text:updated",t),(null===(n=e.opts.subtitles)||void 0===n?void 0:n.native)||e.emit("cuechange",{track:t})}function _(){const e=b();e&&(c.emit("tracks:text:updated"),e.mode="disabled",e.is_active=!1,t(m,[]))}!function(e){if(!k(e))return;e.on("webkitbeginfullscreen",()=>{const e=b();e&&(e.mode="showing")}),e.on("webkitendfullscreen",()=>{var t;const s=v().find(e=>"showing"===e.mode);s&&!(null===(t=e.opts.subtitles)||void 0===t?void 0:t.native)&&(s.mode="hidden"),s!==b()&&(s?w(e,s):_(),a(p,E,{selected_index:s?y.indexOf(s):-1}))})}(c),c.on("mount",(function(){var e,t;const s=o(c,"flowplayer-control");if(!s)return null===(e=o(c,"flowplayer-ui"))||void 0===e?void 0:e.appendChild(m);s.insertAdjacentElement("beforebegin",m),null===(t=c.hasState("is-tv")?o(c,"flowplayer-tv-menu"):s)||void 0===t||t.append(p)})),c.on("config",(function(e){var t,s;const n=null===(s=null===(t=e.data)||void 0===t?void 0:t.subtitles)||void 0===s?void 0:s.tracks;n&&f!==n&&(f=n,g(c),y=v(),A(c,p,y),f.forEach(e=>C(c,e)))})),c.on("tracks:text:all",e=>{const t=e.detail.tracks;t!==h&&(h=t,y=y.flatMap(e=>e.is_hls_embedded?(e.removed=!0,[]):e),A(c,p,y),t.filter(e=>{var t,s;return~["subtitles","captions"].indexOf((null==e?void 0:e.kind)||(null===(s=null===(t=null==e?void 0:e.subtitleTrack)||void 0===t?void 0:t.type)||void 0===s?void 0:s.toLocaleLowerCase())||"")}).forEach(e=>{var t,n,i,r,a,o,l;const u=c.addTextTrack("captions"===e.kind?"captions":"subtitles",(null===(t=e.subtitleTrack)||void 0===t?void 0:t.name)||e.label,null===(n=e.subtitleTrack)||void 0===n?void 0:n.lang);u.is_hls_embedded=!0,u.default=void 0!==(null===(i=e.subtitleTrack)||void 0===i?void 0:i.default)?null===(r=e.subtitleTrack)||void 0===r?void 0:r.default:e.default,u.track_id=null!==(o=null===(a=e.subtitleTrack)||void 0===a?void 0:a.id)&&void 0!==o?o:e._id,u.mode=u.default?"hidden":"disabled",u.removeCue=s,u.attr=null===(l=e.subtitleTrack)||void 0===l?void 0:l.attrs}))}),c.on("cues:parsed",e=>{const t=e.detail,s=y.find(e=>e.is_hls_embedded&&!e.removed&&(e.default&&"default"===t.track||e.track_id===t.track||"subtitles"+e.track_id===t.track||"captions"+e.track_id===t.track));s&&t.cues.forEach(e=>s.addCue(e))}),c.textTracks.addEventListener("addtrack",()=>{const e=v();if(y.length===e.length&&y.every((t,s)=>t===e[s]))return;let t=b();if(e.map((function(e){return~["showing","hidden"].indexOf(e.mode)&&(t=e,e.mode="disabled",e.is_active=!1),e.oncuechange=function(t){var s;if(!(e===b()||k(c)&&c.hasState("is-fullscreen")))return e.mode="disabled";(null===(s=r.subtitles)||void 0===s?void 0:s.native)||c.emit(t.type,{track:t.target})},e})),a(p,x,e.map((function(e){return{text:e.label,onclick:w.bind(0,c,e)}}))),y=e,!t)return _();w(c,t),a(p,E,{selected_index:y.indexOf(t)})}),c.on("cuechange",(function(s){var n;const i=null===(n=s.data)||void 0===n?void 0:n.track;if(!i||!["captions","subtitles","descriptions"].includes(i.kind))return;const r=Array.from(e(i,"activeCues",[])).filter((e,t,s)=>t===s.findIndex(t=>e.id===t.id)).sort((e,t)=>"number"!=typeof e.line||"number"!=typeof t.line?0:e.line-t.line);t(m,r)})),c.on(["playlist/advance","src"],e=>{c.currentSrc&&("src"===e.type&&["is-playlist",n].some(e=>c.root.classList.contains(e))||(delete c.opts.subtitles,g(c),f=[],_(),y=[],h=[],v().forEach(e=>e.removed=!0),a(p,x,[])))})}}).pluginName="subtitles",L.events=w,L);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 s=e.flowplayer;return"function"==typeof s?(s(t),t):(Array.isArray(s.extensions)||(s.extensions=[]),~s.extensions.indexOf(t)||s.extensions.push(t),t)}(window,M)}));