UNPKG

videojs-sprite-thumbnails

Version:

Plugin to display thumbnails when hovering over the progress bar.

3 lines (2 loc) 3.47 kB
/*! @name videojs-sprite-thumbnails @version 2.2.6 @license MIT */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).videojsSpriteThumbnails=e(t.videojs)}(this,function(t){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=e(t);function o(){return o=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},o.apply(null,arguments)}const r=n.default.getPlugin("plugin"),i={url:"",idxTag:t=>t,urlArray:[],width:0,height:0,columns:0,rows:0,interval:1,responsive:600,downlink:1.5,initOnDemand:!1};class s extends r{constructor(t,e){super(t,e),this.options=n.default.obj.merge(i,e),this.player.ready(()=>{((t,e,r)=>{const i=window.navigator,s=n.default.dom,a=n.default.obj,l=e.log,u=l.debug,d=o({},e.state),c=()=>{e.setState(d)},h=["ControlBar","ProgressControl","SeekBar","MouseTimeDisplay","TimeTooltip"],[f,p,g,y,b]=h,m=e=>{const n=h.indexOf(e);return t.getDescendant(h.slice(0,n+1))},v=t=>{const e=m(t);return e||(c(),u(`component tree ${h.join(" > ")} required`)),e};let x,w,j;const $=t=>{const e=r.urlArray;return e.length?e[t]:r.url.replace("{index}",r.idxTag(t))},P=e=>{if(!v(b))return;const n=m(g).el(),o=s.findPosition(m(f).el()).top,i=t.currentWidth(),l=t.duration(),u=r.interval,d=r.columns,c=r.responsive,h=u*d,p=h*(r.rows||Math.ceil(l/h));let y=s.getPointerPosition(n,e).x*l;const w=Math.floor(y/p);y=(y-p*w)/u;const P=c&&i<c?i/c:1,k=r.width*P,O=r.height*P,S=Math.floor(y%d)*-k,T=Math.floor(y/d)*-O,A=s.findPosition(n).top,C=-O-Math.max(0,A-o),M={backgroundImage:`url("${$(w)}")`,backgroundRepeat:"no-repeat",backgroundPosition:`${S}px ${T}px`,backgroundSize:k*d+"px auto",top:`${C}px`,color:"#fff",textShadow:"1px 1px #000",border:"1px solid #000",width:`${k+2}px`,height:`${O+2}px`,visibility:"visible"};a.each(M,(t,e)=>{x.style[e]=t}),j.style.visibility="visible",j.style.opacity="1"},k=()=>{j&&(j.style.visibility="",j.style.opacity=""),x&&(x.style.visibility="")},O=t=>{const e=r[t],n="rows"!==t?1:0,o=parseInt(e,10)===e&&e>=n;return o||l.warn(`${t} must be an integer greater than ${n-1}`),o},S=()=>{const t=i.connection||i.mozConnection||i.webkitConnection,e="downlink",n=!t||t[e]>=r[e];return n||l(`connection.${e} < ${r[e]}`),n},T=n=>{t.off("loadstart",T),c();const o=e.name,i=t.currentSources().find(t=>t.hasOwnProperty(o));let s=i&&i[o];if(s){const t=s.urlArray;Object.keys(s).length?t&&t.length?s.url="":s.url&&(s.urlArray=[]):s={url:"",urlArray:[]},e.options=r=a.merge(r,s)}const l=v(b);!l||n&&"loadstart"===n.type||(x=l.el(),w=x.style,j=m(y).el(),e.setState({ready:!!((r.urlArray.length||r.url)&&O("width")&&O("height")&&O("columns")&&O("rows")&&S())}))};e.on("statechanged",n=>{const o=e.state,i=["mousemove","touchmove"],s=["mouseleave","touchend","touchcancel"],a=v(p);o.ready?(u("ready to show thumbnails"),a.on(i,P),a.on(s,k)):(r.url||r.urlArray.length||u("no urls given, resetting"),a&&(a.off(i,P),a.off(s,k),x.style=w)),t.toggleClass("vjs-thumbnails-ready",o.ready)}),r.initOnDemand&&t.duration()?T():t.on(["loadstart","loadedmetadata"],T),t.addClass("vjs-sprite-thumbnails")})(this.player,this,this.options)})}}return s.defaultState={ready:!1},s.VERSION="2.2.6",n.default.registerPlugin("spriteThumbnails",s),s});