import videojs from 'video.js';
import { version as VERSION } from '../package.json';
const Plugin = videojs.getPlugin('plugin');
// Default options for the plugin.
const defaults = {
image: undefined,
url: undefined,
position: 'top-right',
offsetH: 0,
offsetV: 0,
width: undefined,
height: undefined,
padding: 5,
fadeDelay: 5000,
hideOnReady: false,
opacity: 1
};
/**
* A videojs plugin to display a logo image on the player.
*/
class Logo extends Plugin {
/**
* Create a Logo plugin instance.
*
* @param {Player} player A Video.js Player instance.
* @param {Object} options An optional options object.
* @param {string} options.image The URL to the logo image.
* @param {string} [options.url] A url to be linked to from the logo. If the user clicks the logo the link will open in a new window.
* @param {string} [options.position="top-right"] The location to place the logo (top-left, top-right, bottom-left, or bottom-right).
* @param {number} [options.offsetH=0] Horizontal offset (px) from the edge of the video.
* @param {number} [options.offsetV=0] Vertical offset (px) from the edge of the video.
* @param {number} [options.width] The width of the logo image (px). If not specified, it will be the width of the original image.
* @param {number} [options.height] The height of the logo image (px). If not specified, it will be the height of the original image.
* @param {number} [options.padding=5] Padding around the logo image (px).
* @param {?Number} [options.fadeDelay=5000] Time until fade-out begins (msec). If `null` is specified, automatic fade-out is not performed.
* @param {boolean} [options.hideOnReady=false] Do not show the logo image when the player is ready.
* @param {number} [options.opacity=1] The opacity of the image. If not specified it will default to 1.
*/
constructor(player, options) {
super(player);
this.tid = null;
this.div = null;
this.options = videojs.obj.merge(defaults, options);
this.player.ready(() => this._onPlayerReady());
}
/**
* Start the plugin after the player is ready.
*
* @private
*/
_onPlayerReady() {
this.player.addClass('vjs-logo');
if (!this.options.image) {
return;
}
this._setup();
if (!this.options.hideOnReady) {
this.show();
}
}
/**
* Setup the plugin.
*
* @private
*/
_setup() {
const video = this.player.el();
// Create div element
const div = document.createElement('div'); // eslint-disable-line no-undef
div.classList.add('vjs-logo-content');
div.classList.add('vjs-logo-hide');
div.style.padding = this.options.padding + 'px';
// Setup position
const { offsetH, offsetV } = this.options;
switch (this.options.position) {
case 'top-left':
div.style.top = offsetV + 'px';
div.style.left = offsetH + 'px';
break;
case 'top-right':
div.style.top = offsetV + 'px';
div.style.right = offsetH + 'px';
break;
case 'bottom-left':
div.style.bottom = offsetV + 'px';
div.style.left = offsetH + 'px';
break;
case 'bottom-right':
div.style.bottom = offsetV + 'px';
div.style.right = offsetH + 'px';
break;
default:
div.style.top = offsetV + 'px';
div.style.right = offsetH + 'px';
}
this.div = div;
// Create img element
const img = document.createElement('img'); // eslint-disable-line no-undef
img.src = this.options.image;
const { width, height, opacity } = this.options;
if (width) {
img.width = width;
}
if (height) {
img.height = height;
}
if (opacity) {
img.style.opacity = opacity;
}
if (this.options.url) {
// Create a element for the image link
const a = document.createElement('a'); // eslint-disable-line no-undef
a.href = this.options.url;
a.onclick = (e) => {
e.preventDefault();
window.open(this.options.url); // eslint-disable-line no-undef
};
a.appendChild(img);
div.appendChild(a);
} else {
div.appendChild(img);
}
video.appendChild(div);
}
/**
* Show the logo image.
*/
show() {
// Clear timeout if set
if (this.tid) {
clearTimeout(this.tid);
this.tid = null;
}
// Show the logo image
if (this.div) {
this.div.classList.remove('vjs-logo-hide');
}
// Set timeout to hide the logo image
if (this.options.fadeDelay !== null) {
this.tid = setTimeout(() => {
this.hide();
this.tid = null;
}, this.options.fadeDelay);
}
}
/**
* Hide logo image.
*/
hide() {
// Hide the logo image
if (this.div) {
this.div.classList.add('vjs-logo-hide');
}
}
}
// Define default values for the plugin's `state` object here.
Logo.defaultState = {};
// Include the version number.
Logo.VERSION = VERSION;
// Register the plugin with video.js.
videojs.registerPlugin('logo', Logo);
export default Logo;