@flowplayer/player 3.14.1 → 3.15.0-rc.10

package/plugins/thumbnails.js

@@ -1 +1 @@
-!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.thumbnails=t())}(this,(function(){"use strict";var e;function t(t,n){if(function(t){return Object.values(e).includes(t)}(n=n||e.Anonymous))return t instanceof HTMLVideoElement&&(t.poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="),"crossOrigin"in t?t.crossOrigin=n:t.setAttribute("crossorigin",n),t}function n(e){const t=document.createElement("a");return t.href=e,t.origin}!function(e){e.Anonymous="anonymous",e.UseCredentials="use-credentials",e.Empty=""}(e||(e={}));function r(e,t){return e.querySelector("track[id='"+t+"']")}function s(e,r){const s=document.createElement("track");return s.src=r,function(e,t){try{return e.src.startsWith("blob:"),n(e.src)!==n(t)}catch(e){return console.error(e),!0}}(e,r)&&(t(e),t(s)),s}var o=Object.freeze({__proto__:null,THUMBNAILS_RENDER:"thumbnails:render",THUMBNAILS_HIDE:"thumbnails:hide"});function i(e,t){const n=e._customElements.get(t);return n&&e.root.querySelector(n)||void 0}const u=(e,t)=>new(((e,t)=>{const n=e.get(t);if(!n)throw new Error(`no flowplayer component with the name ${t} exists`);const r=window.customElements.get(t);if(!r)throw new Error(`no default flowplayer component with the name ${t} exists`);const s=window.customElements.get(n);return"function"!=typeof s?r:s})(e._customElements,t))(e);class FlowplayerComponent extends HTMLElement{constructor(e){super(),this.player=e}}class FlowplayerThumbnails extends FlowplayerComponent{constructor(e){super(e),this.className="fp-thumbnail-carousel",this.carousel=this.makeCarousel(),this.addEventListener("thumbnails:render",this.renderCarousel.bind(this,e)),this.addEventListener("thumbnails:hide",()=>e.root.classList.remove("with-thumbnails"))}renderCarousel(e,t){const{previous:n,current:r,next:s}=t.detail;e.root.classList.add("with-thumbnails"),n&&this.renderCarouselItem(this.carousel.previous,n),r&&this.renderCarouselItem(this.carousel.current,r),s&&this.renderCarouselItem(this.carousel.next,s)}makeCarousel(){return{previous:this.makeCarouselItem("previous"),current:this.makeCarouselItem("current"),next:this.makeCarouselItem("next")}}makeCarouselItem(e){const t=document.createElement("div");return t.classList.add("thumbnail",e),this.append(t),t}renderCarouselItem(e,t){const n=e.style;n.backgroundImage=`url("${t.url}")`,n.backgroundPositionX="-"+t.x+"px ",n.backgroundPositionY="-"+t.y+"px",n.height=t.h+"px",n.width=t.w+"px"}}function a(e){const t=document.createElement("a");return t.href=e,t}const c=/#xywh=(\d+),(\d+),(\d+),(\d+)$/,l=/^(https:|https:|\/)/;function m(e,t){const n=a(e.src),r=a(t),[s,o,i,u,l]=(r.hash.match(c)||[]).map(e=>parseInt(e,10));return{x:o,y:i,w:u,h:l,url:d(t,n)}}function d(e,t){if(e.match(l))return e;try{return new URL(e,t.href).toString()}catch(e){return""}}const h="is-source-processing";function f(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(){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 Thumbnails{constructor(e){((e,t,n)=>{window.customElements.get(t)||window.customElements.define(t,n),e.customElements.get(t)||e.customElements.set(t,t)})(e,"flowplayer-thumbnails-carousel",FlowplayerThumbnails)}static activeThumbnails(e,t){var n,s;const o=r(e,"thumbnails");if(!o)return;const i=Array.from(o.track.cues||{length:0}),u=i.find(e=>e.startTime<=t&&t<=e.endTime);if(!u)return{};const a=i.indexOf(u);return{previous:m(o,(null===(n=i[a-1])||void 0===n?void 0:n.text)||""),current:m(o,(null==u?void 0:u.text)||""),next:m(o,(null===(s=i[a+1])||void 0===s?void 0:s.text)||"")}}init(e,t,n){const o=i(n,"flowplayer-ui"),a=u(n,"flowplayer-thumbnails-carousel"),c=i(n,"flowplayer-control");n.reaper&&o&&c&&(o.insertBefore(a,c),n.once("mount",()=>{this.attachTimelineListeners(n,a)}),n.textTracks.addEventListener("addtrack",(function(e){const t=e.track;"thumbnails"===(null==t?void 0:t.id)&&(t.mode="hidden")})),n.on("config",(function(){var t;const r=null===(t=null==e?void 0:e.thumbnails)||void 0===t?void 0:t.src;if("string"==typeof r)return function(e,t){if(function(e,t){return e.querySelector("track[src='"+t+"']")}(e,t))return;const n=s(e,t);return n.kind="metadata",n.id="thumbnails",n.src=t,e.append(n),n}(n,r)})),n.on(["playlist/advance","src"],t=>{n.currentSrc&&("src"===t.type&&["is-playlist",h].some(e=>n.root.classList.contains(e))||(delete e.thumbnails,function(e){const t=r(e,"thumbnails");t&&t.remove()}(n)))}))}attachTimelineListeners(e,t){e.on("timeline/gesture/move",({data:n})=>{const r=null==n?void 0:n.percent;if("number"!=typeof r)return;if(!Number.isFinite(e.duration))return;const s=Math.max(0,Math.min(e.duration,e.duration*(r/100))),o=Thumbnails.activeThumbnails(e,s);o&&requestAnimationFrame(()=>f(t,"thumbnails:render",Object.assign(Object.assign({},o),{timestamp:s})))}),e.on("timeline/gesture/end",()=>{e.root.classList.contains("with-thumbnails")&&f(t,"thumbnails:hide")})}}return Thumbnails.events=o,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,Thumbnails)}));
+!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.thumbnails=t())}(this,(function(){"use strict";var e;function t(t,n){if(function(t){return Object.values(e).includes(t)}(n=n||e.Anonymous))return t instanceof HTMLVideoElement&&(t.poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="),"crossOrigin"in t?t.crossOrigin=n:t.setAttribute("crossorigin",n),t}function n(e){const t=document.createElement("a");return t.href=e,t.origin}!function(e){e.Anonymous="anonymous",e.UseCredentials="use-credentials",e.Empty=""}(e||(e={}));function r(e,t){return e.querySelector("track[id='"+t+"']")}function s(e,r){const s=document.createElement("track");return s.src=r,function(e,t){try{return e.src.startsWith("blob:"),n(e.src)!==n(t)}catch(e){return console.error(e),!0}}(e,r)&&(t(e),t(s)),s}var o=Object.freeze({__proto__:null,THUMBNAILS_RENDER:"thumbnails:render",THUMBNAILS_HIDE:"thumbnails:hide"});function i(e,t){const n=e._customElements.get(t);return n&&e.root.querySelector(n)||void 0}const u=(e,t)=>new(((e,t)=>{const n=e.get(t);if(!n)throw new Error(`no flowplayer component with the name ${t} exists`);const r=window.customElements.get(t);if(!r)throw new Error(`no default flowplayer component with the name ${t} exists`);const s=window.customElements.get(n);return"function"!=typeof s?r:s})(e._customElements,t))(e);class FlowplayerComponent extends HTMLElement{constructor(e){super(),this.player=e}}class FlowplayerThumbnails extends FlowplayerComponent{constructor(e){super(e),this.className="fp-thumbnail-carousel",this.carousel=this.makeCarousel(),this.addEventListener("thumbnails:render",this.renderCarousel.bind(this,e)),this.addEventListener("thumbnails:hide",()=>e.root.classList.remove("with-thumbnails"))}renderCarousel(e,t){const{previous:n,current:r,next:s}=t.detail;e.root.classList.add("with-thumbnails"),n&&this.renderCarouselItem(this.carousel.previous,n),r&&this.renderCarouselItem(this.carousel.current,r),s&&this.renderCarouselItem(this.carousel.next,s)}makeCarousel(){return{previous:this.makeCarouselItem("previous"),current:this.makeCarouselItem("current"),next:this.makeCarouselItem("next")}}makeCarouselItem(e){const t=document.createElement("div");return t.classList.add("thumbnail",e),this.append(t),t}renderCarouselItem(e,t){const n=e.style;n.backgroundImage=`url("${t.url}")`,n.backgroundPositionX="-"+t.x+"px ",n.backgroundPositionY="-"+t.y+"px",n.height=t.h+"px",n.width=t.w+"px"}}function a(e){const t=document.createElement("a");return t.href=e,t}const c=/#xywh=(\d+),(\d+),(\d+),(\d+)$/,l=/^(https:|https:|\/)/;function m(e,t){const n=a(e.src),r=a(t),[s,o,i,u,l]=(r.hash.match(c)||[]).map(e=>parseInt(e,10));return{x:o,y:i,w:u,h:l,url:d(t,n)}}function d(e,t){if(e.match(l))return e;try{return new URL(e,t.href).toString()}catch(e){return""}}const h="is-source-processing";function f(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}var p;!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 y=((p=class Thumbnails{constructor(e){((e,t,n)=>{window.customElements.get(t)||window.customElements.define(t,n),e.customElements.get(t)||e.customElements.set(t,t)})(e,"flowplayer-thumbnails-carousel",FlowplayerThumbnails)}static activeThumbnails(e,t){var n,s;const o=r(e,"thumbnails");if(!o)return;const i=Array.from(o.track.cues||{length:0}),u=i.find(e=>e.startTime<=t&&t<=e.endTime);if(!u)return{};const a=i.indexOf(u);return{previous:m(o,(null===(n=i[a-1])||void 0===n?void 0:n.text)||""),current:m(o,(null==u?void 0:u.text)||""),next:m(o,(null===(s=i[a+1])||void 0===s?void 0:s.text)||"")}}init(e,t,n){const o=i(n,"flowplayer-ui"),a=u(n,"flowplayer-thumbnails-carousel"),c=i(n,"flowplayer-control");n.reaper&&o&&c&&(o.insertBefore(a,c),n.once("mount",()=>{this.attachTimelineListeners(n,a)}),n.textTracks.addEventListener("addtrack",(function(e){const t=e.track;"thumbnails"===(null==t?void 0:t.id)&&(t.mode="hidden")})),n.on("config",(function(){var t;const r=null===(t=null==e?void 0:e.thumbnails)||void 0===t?void 0:t.src;if("string"==typeof r)return function(e,t){if(function(e,t){return e.querySelector("track[src='"+t+"']")}(e,t))return;const n=s(e,t);return n.kind="metadata",n.id="thumbnails",n.src=t,e.append(n),n}(n,r)})),n.on(["playlist/advance","src"],t=>{n.currentSrc&&("src"===t.type&&["is-playlist",h].some(e=>n.root.classList.contains(e))||(delete e.thumbnails,function(e){const t=r(e,"thumbnails");t&&t.remove()}(n)))}))}attachTimelineListeners(e,t){e.on("timeline/gesture/move",({data:n})=>{const r=null==n?void 0:n.percent;if("number"!=typeof r)return;if(!Number.isFinite(e.duration))return;const s=Math.max(0,Math.min(e.duration,e.duration*(r/100))),o=Thumbnails.activeThumbnails(e,s);o&&requestAnimationFrame(()=>f(t,"thumbnails:render",Object.assign(Object.assign({},o),{timestamp:s})))}),e.on("timeline/gesture/end",()=>{e.root.classList.contains("with-thumbnails")&&f(t,"thumbnails:hide")})}}).events=o,p);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,y)}));