import document from 'global/document';

import videojs from 'video.js';

import ContextMenu from './context-menu';

import {getPointerPosition} from './util';

// support VJS5 & VJS6 at the same time

const registerPlugin = videojs.registerPlugin || videojs.plugin;

/**

* Whether or not the player has an active context menu.

*

* @param {Player} player

* @return {Boolean}

*/

function hasMenu(player) {

return player.hasOwnProperty('contextmenuUI') &&

player.contextmenuUI.hasOwnProperty('menu') &&

player.contextmenuUI.menu.el();

}

/**

* Calculates the position of a menu based on the pointer position and player

* size.

*

* @param {Object} pointerPosition

* @param {Object} playerSize

* @return {Object}

*/

function findMenuPosition(pointerPosition, playerSize) {

return {

left: Math.round(playerSize.width * pointerPosition.x),

top: Math.round(playerSize.height - (playerSize.height * pointerPosition.y))

};

}

/**

* Handles vjs-contextmenu events.

*

* @param {Event} e

*/

function onVjsContextMenu(e) {

// If this event happens while the custom menu is open, close it and do

// nothing else. This will cause native contextmenu events to be intercepted

// once again; so, the next time a contextmenu event is encountered, we'll

// open the custom menu.

if (hasMenu(this)) {

this.contextmenuUI.menu.dispose();

return;

}

// Stop canceling the native contextmenu event until further notice.

this.contextmenu.options.cancel = false;

// Calculate the positioning of the menu based on the player size and

// triggering event.

const pointerPosition = getPointerPosition(this.el(), e);

const playerSize = this.el().getBoundingClientRect();

const menuPosition = findMenuPosition(pointerPosition, playerSize);

e.preventDefault();

const menu = this.contextmenuUI.menu = new ContextMenu(this, {

content: this.contextmenuUI.content,

position: menuPosition

});

// This is for backward compatibility. We no longer have the `closeMenu`

// function, but removing it would necessitate a major version bump.

this.contextmenuUI.closeMenu = () => {

videojs.warn('player.contextmenuUI.closeMenu() is deprecated, please use player.contextmenuUI.menu.dispose() instead!');

menu.dispose();

};

menu.on('dispose', () => {

// Begin canceling contextmenu events again, so subsequent events will

// cause the custom menu to be displayed again.

this.contextmenu.options.cancel = true;

videojs.off(document, ['click', 'tap'], menu.dispose);

this.removeChild(menu);

delete this.contextmenuUI.menu;

});

this.addChild(menu);

videojs.on(document, ['click', 'tap'], menu.dispose);

}

/**

* Creates a menu for videojs-contextmenu abstract event(s).

*

* @function contextmenuUI

* @param {Object} options

* @param {Array} options.content

* An array of objects which populate a content list within the menu.

*/

function contextmenuUI(options) {

if (!Array.isArray(options.content)) {

throw new Error('"content" required');

}

// If we have already invoked the plugin, teardown before setting up again.

if (hasMenu(this)) {

this.contextmenuUI.menu.dispose();

this.off('vjs-contextmenu', this.contextmenuUI.onVjsContextMenu);

// Deleting the player-specific contextmenuUI plugin function/namespace will

// restore the original plugin function, so it can be called again.

delete this.contextmenuUI;

}

// If we are not already providing "vjs-contextmenu" events, do so.

this.contextmenu();

// Wrap the plugin function with an player instance-specific function. This

// allows us to attach the menu to it without affecting other players on

// the page.

const cmui = this.contextmenuUI = function() {

contextmenuUI.apply(this, arguments);

};

cmui.onVjsContextMenu = videojs.bind(this, onVjsContextMenu);

cmui.content = options.content;

cmui.VERSION = '__VERSION__';

this.on('vjs-contextmenu', cmui.onVjsContextMenu);

this.ready(() => this.addClass('vjs-contextmenu-ui'));

}

registerPlugin('contextmenuUI', contextmenuUI);

contextmenuUI.VERSION = '__VERSION__';

export default contextmenuUI;