UNPKG

videojs-sprite-thumbnails

Version:

Plugin to display thumbnails when hovering over the progress bar.

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