UNPKG

@oplayer/plugins

Version:
9 lines (8 loc) 3.17 kB
/** * name: @oplayer/vttThumbnails * version: v1.0.15-beta.3 * description: oplayer's plugin * author: shiyiya * homepage: https://github.com/shiyiya/oplayer */ (function(o,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("@oplayer/core")):typeof define=="function"&&define.amd?define(["@oplayer/core"],m):(o=typeof globalThis<"u"?globalThis:o||self,o.OVttThumbnails=m(o.OPlayer))})(this,function(o){"use strict";function m(c,i){const{$progress:I}=c.context.ui,S=I.firstElementChild;let h=[],y={},b,v=!1,a=i==null?void 0:i.src;const l=o.$.render(o.$.create(`div.${c.context.ui.vttThumbnailsCls}`),S);l.style.width=((i==null?void 0:i.width)||160)+"px",l.style.height=((i==null?void 0:i.height)||90)+"px";const w=e=>{fetch(e).then(t=>t.text()).then(t=>{h=F(t),v=!0,l.style.opacity="1"}).catch(t=>{c.emit("notice",{text:"Failed to load vtt thumbnails",reason:t})})};i!=null&&i.src&&w(i.src),c.on("videosourcechange",()=>{c.context.ui.progressHoverCallback.splice(c.context.ui.progressHoverCallback.findIndex(e=>e==P),1),v=!1,l.style.opacity="0",h=[],y={}});const F=e=>{const t=[];return e.split(/[\r\n][\r\n]/i).forEach(n=>{if(n.match(/([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?( ?--> ?)([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?[\r\n]{1}.*/gi)){const r=n.split(/[\r\n]/i),f=isFinite(+r[0])?r[1]:r[0],g=isFinite(+r[0])?r[2]:r[1],u=f.split(/ ?--> ?/i),p=u[0],x=u[1],d=k(g);t.push({start:C(p),end:C(x),css:d})}return t}),t},C=e=>{const t=O(e);return t.hours*(60*60)+t.minutes*60+t.seconds+t.milliseconds/1e3},O=e=>{const t=e.split("."),n=t[0].split(":");return{milliseconds:parseInt(t[1],10)||0,seconds:parseInt(n.pop(),10)||0,minutes:parseInt(n.pop(),10)||0,hours:parseInt(n.pop(),10)||0}},k=e=>{const t={};if(!e.match(/#xywh=/i))return t.background='url("'+T(e)+'")',t;const s=D(e);return t.background='url("'+T(s.image)+'") no-repeat -'+s.x+"px -"+s.y+"px",t.width=s.w+"px",t.height=s.h+"px",t.url=T(s.image),t},T=(()=>{const e={};return t=>{if(!a)return t;if(e[t])return e[t];if(/(https?:)?\/\//.test(t))return t;let s=a;/(https?:)?\/\//.test(t)&&(s=a.substring(0,a.indexOf("?")||void 0));const n=s.lastIndexOf("/");if(s.startsWith("https://")&&n<8||s.startsWith("http://")&&n<7)return a+t;const r=s.substring(n+1);return e[t]=((i==null?void 0:i.prefix)||"")+a.replace(r,t),e[t]}})(),D=e=>{const t=e.split(/#xywh=/i),s=t[0],r=t[1].match(/[0-9]+/gi);return{x:r[0],y:r[1],w:r[2],h:r[3],image:s}},P=e=>{if(!v||!e)return;const t=c.duration,s=e*t,n=W(s);if(!n){l.style.opacity="0";return}const r=S.clientWidth,f=e*r,g=parseInt(n.width,10),u=g>>1,p=r-(f+u),x=f-u;if(l.style.opacity="1",x>0&&p>0?l.style.transform="translateX("+(f-u)+"px)":x<=0?l.style.transform="translateX(0px)":p<=0&&(l.style.transform="translateX("+(r-g)+"px)"),!(b&&b===n)){b=n;for(const d in n)n.hasOwnProperty(d)&&(l.style[d]=n[d])}},W=e=>{for(let t=0;t<h.length;++t){const s=h[t];if(e>=s.start&&e<s.end){if(s.css.url&&!y[s.css.url]){const n=new Image;n.src=s.css.url,y[s.css.url]=n}return s.css}}};c.context.ui.progressHoverCallback.push(P),c.context.ui.changThumbnails=({src:e})=>w(e)}return c=>({name:"oplayer-vtt-thumbnails",version:"1.0.15-beta.3",apply:i=>m(i,c)})});