UNPKG

videojs-overlay

Version:

A plugin to display simple overlays during video playback.

3 lines (2 loc) 5.13 kB
/*! @name videojs-overlay @version 4.0.0 @license Apache-2.0 */ !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).videojsOverlay=t(e.videojs)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=t(e);const i=s.default.getPlugin("plugin"),r={align:"top-left",class:"",content:"This overlay will show up while the video is playing",debug:!1,showBackground:!0,attachToControlBar:!1,overlays:[{start:"playing",end:"paused"}]};class n extends i{constructor(e,t){super(e),this.reset(t)}add(e){Array.isArray(e)||(e=[e]);const t=this.mapOverlays_(e);return this.player.overlays_=this.player.overlays_.concat(t),t}remove(e){const t=this.player.overlays_.indexOf(e);-1!==t?(e.el().parentNode.removeChild(e.el()),this.player.overlays_.splice(t,1)):this.player.log.warn("overlay does not exist and cannot be removed")}get(){return this.player.overlays_}reset(e){this.clearOverlays_();const t=s.default.obj&&s.default.obj.merge||s.default.mergeOptions;this.options=t(r,e);const i=this.options.overlays;delete this.options.overlays,this.player.overlays_=this.mapOverlays_(i)}dispose(){this.clearOverlays_(),delete this.player.overlays_,super.dispose()}clearOverlays_(){Array.isArray(this.player.overlays_)&&this.player.overlays_.forEach((e=>{this.player.removeChild(e),this.player.controlBar&&this.player.controlBar.removeChild(e)}))}mapOverlays_(e){return e.map((e=>{const t=s.default.mergeOptions(this.options,e),i="string"==typeof t.attachToControlBar||!0===t.attachToControlBar;if(!this.player.controls()||!this.player.controlBar)return this.player.addChild("overlay",t);if(i&&-1!==t.align.indexOf("bottom")){let e=this.player.controlBar.children()[0];if(void 0!==this.player.controlBar.getChild(t.attachToControlBar)&&(e=this.player.controlBar.getChild(t.attachToControlBar)),e){const s=this.player.controlBar.children().indexOf(e);return this.player.controlBar.addChild("overlay",t,s)}}const r=this.player.addChild("overlay",t);return this.player.el().insertBefore(r.el(),this.player.controlBar.el()),r}))}}return(e=>{const t=e.getComponent("Component"),s=e.dom||e,i=e=>"number"==typeof e&&e==e,r=e=>"string"==typeof e&&/^\S+$/.test(e);class n extends t{constructor(e,t){super(e,t),["start","end"].forEach((e=>{const t=this.options_[e];if(i(t))this[e+"Event_"]="timeupdate";else if(r(t))this[e+"Event_"]=t;else if("start"===e)throw new Error('invalid "start" option; expected number or string')})),["endListener_","rewindListener_","startListener_"].forEach((e=>{this[e]=t=>n.prototype[e].call(this,t)})),"timeupdate"===this.startEvent_&&this.on(e,"timeupdate",this.rewindListener_),this.debug(`created, listening to "${this.startEvent_}" for "start" and "${this.endEvent_||"nothing"}" for "end"`),this.hide()}createEl(){const e=this.options_,t=e.content,i=e.showBackground?"vjs-overlay-background":"vjs-overlay-no-background",r=s.createEl("div",{className:`\n vjs-overlay\n vjs-overlay-${e.align}\n ${e.class}\n ${i}\n vjs-hidden\n `});return"string"==typeof t?r.innerHTML=t:t instanceof window.DocumentFragment?r.appendChild(t):s.appendContent(r,t),r}debug(...t){if(!this.options_.debug)return;const s=e.log;let i=s;s.hasOwnProperty(t[0])&&"function"==typeof s[t[0]]&&(i=s[t.shift()]),i(`overlay#${this.id()}: `,...t)}hide(){return super.hide(),this.debug("hidden"),this.debug(`bound \`startListener_\` to "${this.startEvent_}"`),this.endEvent_&&(this.debug(`unbound \`endListener_\` from "${this.endEvent_}"`),this.off(this.player(),this.endEvent_,this.endListener_)),this.on(this.player(),this.startEvent_,this.startListener_),this}shouldHide_(e,t){const s=this.options_.end;return i(s)?e>=s:s===t}show(){return super.show(),this.off(this.player(),this.startEvent_,this.startListener_),this.debug("shown"),this.debug(`unbound \`startListener_\` from "${this.startEvent_}"`),this.endEvent_&&(this.debug(`bound \`endListener_\` to "${this.endEvent_}"`),this.on(this.player(),this.endEvent_,this.endListener_)),this}shouldShow_(e,t){const s=this.options_.start,r=this.options_.end;return i(s)?i(r)?e>=s&&e<r:this.hasShownSinceSeek_?Math.floor(e)===s:(this.hasShownSinceSeek_=!0,e>=s):s===t}startListener_(e){const t=this.player().currentTime();this.shouldShow_(t,e.type)&&this.show()}endListener_(e){const t=this.player().currentTime();this.shouldHide_(t,e.type)&&this.hide()}rewindListener_(e){const t=this.player().currentTime(),s=this.previousTime_,n=this.options_.start,o=this.options_.end;t<s&&(this.debug("rewind detected"),i(o)&&!this.shouldShow_(t)?(this.debug(`hiding; ${o} is an integer and overlay should not show at this time`),this.hasShownSinceSeek_=!1,this.hide()):r(o)&&t<n&&(this.debug(`hiding; show point (${n}) is before now (${t}) and end point (${o}) is an event`),this.hasShownSinceSeek_=!1,this.hide())),this.previousTime_=t}}e.registerComponent("Overlay",n)})(s.default),n.VERSION="4.0.0",s.default.registerPlugin("overlay",n),n}));