@project-sunbird/content-player
Version:
Which renders the contents in both web and devices
1,459 lines (1,122 loc) • 868 kB
JavaScript
/**
* @license
* Video.js 5.20.2 <http://videojs.com/>
* Copyright Brightcove, Inc. <https://www.brightcove.com/>
* Available under Apache License Version 2.0
* <https://github.com/videojs/video.js/blob/master/LICENSE>
*
* Includes vtt.js <https://github.com/mozilla/vtt.js>
* Available under Apache License Version 2.0
* <https://github.com/mozilla/vtt.js/blob/master/LICENSE>
*/
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.videojs = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
'use strict';
exports.__esModule = true;
var _button = _dereq_(2);
var _button2 = _interopRequireDefault(_button);
var _component = _dereq_(5);
var _component2 = _interopRequireDefault(_component);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* @file big-play-button.js
*/
/**
* The initial play button that shows before the video has played. The hiding of the
* `BigPlayButton` get done via CSS and `Player` states.
*
* @extends Button
*/
var BigPlayButton = function (_Button) {
_inherits(BigPlayButton, _Button);
function BigPlayButton(player, options) {
_classCallCheck(this, BigPlayButton);
var _this = _possibleConstructorReturn(this, _Button.call(this, player, options));
_this.mouseused_ = false;
_this.on('mousedown', _this.handleMouseDown);
return _this;
}
/**
* Builds the default DOM `className`.
*
* @return {string}
* The DOM `className` for this object. Always returns 'vjs-big-play-button'.
*/
BigPlayButton.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-big-play-button';
};
/**
* This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
* for more detailed information on what a click can be.
*
* @param {EventTarget~Event} event
* The `keydown`, `tap`, or `click` event that caused this function to be
* called.
*
* @listens tap
* @listens click
*/
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
return;
}
var cb = this.player_.getChild('controlBar');
var playToggle = cb && cb.getChild('playToggle');
if (!playToggle) {
this.player_.focus();
return;
}
var playFocus = function playFocus() {
return playToggle.focus();
};
if (playPromise && playPromise.then) {
var ignoreRejectedPlayPromise = function ignoreRejectedPlayPromise() {};
playPromise.then(playFocus, ignoreRejectedPlayPromise);
} else {
this.setTimeout(playFocus, 1);
}
};
BigPlayButton.prototype.handleKeyPress = function handleKeyPress(event) {
this.mouseused_ = false;
_Button.prototype.handleKeyPress.call(this, event);
};
BigPlayButton.prototype.handleMouseDown = function handleMouseDown(event) {
this.mouseused_ = true;
};
return BigPlayButton;
}(_button2['default']);
/**
* The text that should display over the `BigPlayButton`s controls. Added to for localization.
*
* @type {string}
* @private
*/
BigPlayButton.prototype.controlText_ = 'Play Video';
_component2['default'].registerComponent('BigPlayButton', BigPlayButton);
exports['default'] = BigPlayButton;
},{"2":2,"5":5}],2:[function(_dereq_,module,exports){
'use strict';
exports.__esModule = true;
var _clickableComponent = _dereq_(3);
var _clickableComponent2 = _interopRequireDefault(_clickableComponent);
var _component = _dereq_(5);
var _component2 = _interopRequireDefault(_component);
var _log = _dereq_(86);
var _log2 = _interopRequireDefault(_log);
var _obj = _dereq_(88);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* @file button.js
*/
/**
* Base class for all buttons.
*
* @extends ClickableComponent
*/
var Button = function (_ClickableComponent) {
_inherits(Button, _ClickableComponent);
function Button() {
_classCallCheck(this, Button);
return _possibleConstructorReturn(this, _ClickableComponent.apply(this, arguments));
}
/**
* Create the `Button`s DOM element.
*
* @param {string} [tag=button]
* Element's node type. e.g. 'button'
*
* @param {Object} [props={}]
* An object of properties that should be set on the element.
*
* @param {Object} [attributes={}]
* An object of attributes that should be set on the element.
*
* @return {Element}
* The element that gets created.
*/
Button.prototype.createEl = function createEl() {
var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'button';
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
props = (0, _obj.assign)({
className: this.buildCSSClass()
}, props);
if (tag !== 'button') {
_log2['default'].warn('Creating a Button with an HTML element of ' + tag + ' is deprecated; use ClickableComponent instead.');
// Add properties for clickable element which is not a native HTML button
props = (0, _obj.assign)({
tabIndex: 0
}, props);
// Add ARIA attributes for clickable element which is not a native HTML button
attributes = (0, _obj.assign)({
role: 'button'
}, attributes);
}
// Add attributes for button element
attributes = (0, _obj.assign)({
// Necessary since the default button type is "submit"
'type': 'button',
// let the screen reader user know that the text of the button may change
'aria-live': 'polite'
}, attributes);
var el = _component2['default'].prototype.createEl.call(this, tag, props, attributes);
this.createControlTextEl(el);
return el;
};
/**
* Add a child `Component` inside of this `Button`.
*
* @param {string|Component} child
* The name or instance of a child to add.
*
* @param {Object} [options={}]
* The key/value store of options that will get passed to children of
* the child.
*
* @return {Component}
* The `Component` that gets added as a child. When using a string the
* `Component` will get created by this process.
*
* @deprecated since version 5
*/
Button.prototype.addChild = function addChild(child) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var className = this.constructor.name;
_log2['default'].warn('Adding an actionable (user controllable) child to a Button (' + className + ') is not supported; use a ClickableComponent instead.');
// Avoid the error message generated by ClickableComponent's addChild method
return _component2['default'].prototype.addChild.call(this, child, options);
};
/**
* Enable the `Button` element so that it can be activated or clicked. Use this with
* {@link Button#disable}.
*/
Button.prototype.enable = function enable() {
_ClickableComponent.prototype.enable.call(this);
this.el_.removeAttribute('disabled');
};
/**
* Enable the `Button` element so that it cannot be activated or clicked. Use this with
* {@link Button#enable}.
*/
Button.prototype.disable = function disable() {
_ClickableComponent.prototype.disable.call(this);
this.el_.setAttribute('disabled', 'disabled');
};
/**
* This gets called when a `Button` has focus and `keydown` is triggered via a key
* press.
*
* @param {EventTarget~Event} event
* The event that caused this function to get called.
*
* @listens keydown
*/
Button.prototype.handleKeyPress = function handleKeyPress(event) {
// Ignore Space (32) or Enter (13) key operation, which is handled by the browser for a button.
if (event.which === 32 || event.which === 13) {
return;
}
// Pass keypress handling up for unsupported keys
_ClickableComponent.prototype.handleKeyPress.call(this, event);
};
return Button;
}(_clickableComponent2['default']);
_component2['default'].registerComponent('Button', Button);
exports['default'] = Button;
},{"3":3,"5":5,"86":86,"88":88}],3:[function(_dereq_,module,exports){
'use strict';
exports.__esModule = true;
var _component = _dereq_(5);
var _component2 = _interopRequireDefault(_component);
var _dom = _dereq_(81);
var Dom = _interopRequireWildcard(_dom);
var _events = _dereq_(82);
var Events = _interopRequireWildcard(_events);
var _fn = _dereq_(83);
var Fn = _interopRequireWildcard(_fn);
var _log = _dereq_(86);
var _log2 = _interopRequireDefault(_log);
var _document = _dereq_(94);
var _document2 = _interopRequireDefault(_document);
var _obj = _dereq_(88);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* @file button.js
*/
/**
* Clickable Component which is clickable or keyboard actionable,
* but is not a native HTML button.
*
* @extends Component
*/
var ClickableComponent = function (_Component) {
_inherits(ClickableComponent, _Component);
/**
* Creates an instance of this class.
*
* @param {Player} player
* The `Player` that this class should be attached to.
*
* @param {Object} [options]
* The key/value store of player options.
*/
function ClickableComponent(player, options) {
_classCallCheck(this, ClickableComponent);
var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));
_this.emitTapEvents();
_this.enable();
return _this;
}
/**
* Create the `Component`s DOM element.
*
* @param {string} [tag=div]
* The element's node type.
*
* @param {Object} [props={}]
* An object of properties that should be set on the element.
*
* @param {Object} [attributes={}]
* An object of attributes that should be set on the element.
*
* @return {Element}
* The element that gets created.
*/
ClickableComponent.prototype.createEl = function createEl() {
var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
props = (0, _obj.assign)({
className: this.buildCSSClass(),
tabIndex: 0
}, props);
if (tag === 'button') {
_log2['default'].error('Creating a ClickableComponent with an HTML element of ' + tag + ' is not supported; use a Button instead.');
}
// Add ARIA attributes for clickable element which is not a native HTML button
attributes = (0, _obj.assign)({
'role': 'button',
// let the screen reader user know that the text of the element may change
'aria-live': 'polite'
}, attributes);
this.tabIndex_ = props.tabIndex;
var el = _Component.prototype.createEl.call(this, tag, props, attributes);
this.createControlTextEl(el);
return el;
};
/**
* Create a control text element on this `Component`
*
* @param {Element} [el]
* Parent element for the control text.
*
* @return {Element}
* The control text element that gets created.
*/
ClickableComponent.prototype.createControlTextEl = function createControlTextEl(el) {
this.controlTextEl_ = Dom.createEl('span', {
className: 'vjs-control-text'
});
if (el) {
el.appendChild(this.controlTextEl_);
}
this.controlText(this.controlText_, el);
return this.controlTextEl_;
};
/**
* Get or set the localize text to use for the controls on the `Component`.
*
* @param {string} [text]
* Control text for element.
*
* @param {Element} [el=this.el()]
* Element to set the title on.
*
* @return {string|ClickableComponent}
* - The control text when getting
* - Returns itself when setting; method can be chained.
*/
ClickableComponent.prototype.controlText = function controlText(text) {
var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.el();
if (!text) {
return this.controlText_ || 'Need Text';
}
var localizedText = this.localize(text);
this.controlText_ = text;
this.controlTextEl_.innerHTML = localizedText;
if (!this.nonIconControl) {
// Set title attribute if only an icon is shown
el.setAttribute('title', localizedText);
}
return this;
};
/**
* Builds the default DOM `className`.
*
* @return {string}
* The DOM `className` for this object.
*/
ClickableComponent.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-control vjs-button ' + _Component.prototype.buildCSSClass.call(this);
};
/**
* Enable this `Component`s element.
*
* @return {ClickableComponent}
* Returns itself; method can be chained.
*/
ClickableComponent.prototype.enable = function enable() {
this.removeClass('vjs-disabled');
this.el_.setAttribute('aria-disabled', 'false');
if (typeof this.tabIndex_ !== 'undefined') {
this.el_.setAttribute('tabIndex', this.tabIndex_);
}
this.off(['tap', 'click'], this.handleClick);
this.off('focus', this.handleFocus);
this.off('blur', this.handleBlur);
this.on(['tap', 'click'], this.handleClick);
this.on('focus', this.handleFocus);
this.on('blur', this.handleBlur);
return this;
};
/**
* Disable this `Component`s element.
*
* @return {ClickableComponent}
* Returns itself; method can be chained.
*/
ClickableComponent.prototype.disable = function disable() {
this.addClass('vjs-disabled');
this.el_.setAttribute('aria-disabled', 'true');
if (typeof this.tabIndex_ !== 'undefined') {
this.el_.removeAttribute('tabIndex');
}
this.off(['tap', 'click'], this.handleClick);
this.off('focus', this.handleFocus);
this.off('blur', this.handleBlur);
return this;
};
/**
* This gets called when a `ClickableComponent` gets:
* - Clicked (via the `click` event, listening starts in the constructor)
* - Tapped (via the `tap` event, listening starts in the constructor)
* - The following things happen in order:
* 1. {@link ClickableComponent#handleFocus} is called via a `focus` event on the
* `ClickableComponent`.
* 2. {@link ClickableComponent#handleFocus} adds a listener for `keydown` on using
* {@link ClickableComponent#handleKeyPress}.
* 3. `ClickableComponent` has not had a `blur` event (`blur` means that focus was lost). The user presses
* the space or enter key.
* 4. {@link ClickableComponent#handleKeyPress} calls this function with the `keydown`
* event as a parameter.
*
* @param {EventTarget~Event} event
* The `keydown`, `tap`, or `click` event that caused this function to be
* called.
*
* @listens tap
* @listens click
* @abstract
*/
ClickableComponent.prototype.handleClick = function handleClick(event) {};
/**
* This gets called when a `ClickableComponent` gains focus via a `focus` event.
* Turns on listening for `keydown` events. When they happen it
* calls `this.handleKeyPress`.
*
* @param {EventTarget~Event} event
* The `focus` event that caused this function to be called.
*
* @listens focus
*/
ClickableComponent.prototype.handleFocus = function handleFocus(event) {
Events.on(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress));
};
/**
* Called when this ClickableComponent has focus and a key gets pressed down. By
* default it will call `this.handleClick` when the key is space or enter.
*
* @param {EventTarget~Event} event
* The `keydown` event that caused this function to be called.
*
* @listens keydown
*/
ClickableComponent.prototype.handleKeyPress = function handleKeyPress(event) {
// Support Space (32) or Enter (13) key operation to fire a click event
if (event.which === 32 || event.which === 13) {
event.preventDefault();
this.handleClick(event);
} else if (_Component.prototype.handleKeyPress) {
// Pass keypress handling up for unsupported keys
_Component.prototype.handleKeyPress.call(this, event);
}
};
/**
* Called when a `ClickableComponent` loses focus. Turns off the listener for
* `keydown` events. Which Stops `this.handleKeyPress` from getting called.
*
* @param {EventTarget~Event} event
* The `blur` event that caused this function to be called.
*
* @listens blur
*/
ClickableComponent.prototype.handleBlur = function handleBlur(event) {
Events.off(_document2['default'], 'keydown', Fn.bind(this, this.handleKeyPress));
};
return ClickableComponent;
}(_component2['default']);
_component2['default'].registerComponent('ClickableComponent', ClickableComponent);
exports['default'] = ClickableComponent;
},{"5":5,"81":81,"82":82,"83":83,"86":86,"88":88,"94":94}],4:[function(_dereq_,module,exports){
'use strict';
exports.__esModule = true;
var _button = _dereq_(2);
var _button2 = _interopRequireDefault(_button);
var _component = _dereq_(5);
var _component2 = _interopRequireDefault(_component);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* @file close-button.js
*/
/**
* The `CloseButton` is a `{@link Button}` that fires a `close` event when
* it gets clicked.
*
* @extends Button
*/
var CloseButton = function (_Button) {
_inherits(CloseButton, _Button);
/**
* Creates an instance of the this class.
*
* @param {Player} player
* The `Player` that this class should be attached to.
*
* @param {Object} [options]
* The key/value store of player options.
*/
function CloseButton(player, options) {
_classCallCheck(this, CloseButton);
var _this = _possibleConstructorReturn(this, _Button.call(this, player, options));
_this.controlText(options && options.controlText || _this.localize('Close'));
return _this;
}
/**
* Builds the default DOM `className`.
*
* @return {string}
* The DOM `className` for this object.
*/
CloseButton.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-close-button ' + _Button.prototype.buildCSSClass.call(this);
};
/**
* This gets called when a `CloseButton` gets clicked. See
* {@link ClickableComponent#handleClick} for more information on when this will be
* triggered
*
* @param {EventTarget~Event} event
* The `keydown`, `tap`, or `click` event that caused this function to be
* called.
*
* @listens tap
* @listens click
* @fires CloseButton#close
*/
CloseButton.prototype.handleClick = function handleClick(event) {
/**
* Triggered when the a `CloseButton` is clicked.
*
* @event CloseButton#close
* @type {EventTarget~Event}
*
* @property {boolean} [bubbles=false]
* set to false so that the close event does not
* bubble up to parents if there is no listener
*/
this.trigger({ type: 'close', bubbles: false });
};
return CloseButton;
}(_button2['default']);
_component2['default'].registerComponent('CloseButton', CloseButton);
exports['default'] = CloseButton;
},{"2":2,"5":5}],5:[function(_dereq_,module,exports){
'use strict';
exports.__esModule = true;
var _window = _dereq_(95);
var _window2 = _interopRequireDefault(_window);
var _dom = _dereq_(81);
var Dom = _interopRequireWildcard(_dom);
var _fn = _dereq_(83);
var Fn = _interopRequireWildcard(_fn);
var _guid = _dereq_(85);
var Guid = _interopRequireWildcard(_guid);
var _events = _dereq_(82);
var Events = _interopRequireWildcard(_events);
var _log = _dereq_(86);
var _log2 = _interopRequireDefault(_log);
var _toTitleCase = _dereq_(91);
var _toTitleCase2 = _interopRequireDefault(_toTitleCase);
var _mergeOptions = _dereq_(87);
var _mergeOptions2 = _interopRequireDefault(_mergeOptions);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } /**
* Player Component - Base class for all UI objects
*
* @file component.js
*/
/**
* Base class for all UI Components.
* Components are UI objects which represent both a javascript object and an element
* in the DOM. They can be children of other components, and can have
* children themselves.
*
* Components can also use methods from {@link EventTarget}
*/
var Component = function () {
/**
* A callback that is called when a component is ready. Does not have any
* paramters and any callback value will be ignored.
*
* @callback Component~ReadyCallback
* @this Component
*/
/**
* Creates an instance of this class.
*
* @param {Player} player
* The `Player` that this class should be attached to.
*
* @param {Object} [options]
* The key/value store of player options.
#
* @param {Object[]} [options.children]
* An array of children objects to intialize this component with. Children objects have
* a name property that will be used if more than one component of the same type needs to be
* added.
*
* @param {Component~ReadyCallback} [ready]
* Function that gets called when the `Component` is ready.
*/
function Component(player, options, ready) {
_classCallCheck(this, Component);
// The component might be the player itself and we can't pass `this` to super
if (!player && this.play) {
this.player_ = player = this; // eslint-disable-line
} else {
this.player_ = player;
}
// Make a copy of prototype.options_ to protect against overriding defaults
this.options_ = (0, _mergeOptions2['default'])({}, this.options_);
// Updated options with supplied options
options = this.options_ = (0, _mergeOptions2['default'])(this.options_, options);
// Get ID from options or options element if one is supplied
this.id_ = options.id || options.el && options.el.id;
// If there was no ID from the options, generate one
if (!this.id_) {
// Don't require the player ID function in the case of mock players
var id = player && player.id && player.id() || 'no_player';
this.id_ = id + '_component_' + Guid.newGUID();
}
this.name_ = options.name || null;
// Create element if one wasn't provided in options
if (options.el) {
this.el_ = options.el;
} else if (options.createEl !== false) {
this.el_ = this.createEl();
}
this.children_ = [];
this.childIndex_ = {};
this.childNameIndex_ = {};
// Add any child components in options
if (options.initChildren !== false) {
this.initChildren();
}
this.ready(ready);
// Don't want to trigger ready here or it will before init is actually
// finished for all children that run this constructor
if (options.reportTouchActivity !== false) {
this.enableTouchActivity();
}
}
/**
* Dispose of the `Component` and all child components.
*
* @fires Component#dispose
*/
Component.prototype.dispose = function dispose() {
/**
* Triggered when a `Component` is disposed.
*
* @event Component#dispose
* @type {EventTarget~Event}
*
* @property {boolean} [bubbles=false]
* set to false so that the close event does not
* bubble up
*/
this.trigger({ type: 'dispose', bubbles: false });
// Dispose all children.
if (this.children_) {
for (var i = this.children_.length - 1; i >= 0; i--) {
if (this.children_[i].dispose) {
this.children_[i].dispose();
}
}
}
// Delete child references
this.children_ = null;
this.childIndex_ = null;
this.childNameIndex_ = null;
// Remove all event listeners.
this.off();
// Remove element from DOM
if (this.el_.parentNode) {
this.el_.parentNode.removeChild(this.el_);
}
Dom.removeElData(this.el_);
this.el_ = null;
};
/**
* Return the {@link Player} that the `Component` has attached to.
*
* @return {Player}
* The player that this `Component` has attached to.
*/
Component.prototype.player = function player() {
return this.player_;
};
/**
* Deep merge of options objects with new options.
* > Note: When both `obj` and `options` contain properties whose values are objects.
* The two properties get merged using {@link module:mergeOptions}
*
* @param {Object} obj
* The object that contains new options.
*
* @return {Object}
* A new object of `this.options_` and `obj` merged together.
*
* @deprecated since version 5
*/
Component.prototype.options = function options(obj) {
_log2['default'].warn('this.options() has been deprecated and will be moved to the constructor in 6.0');
if (!obj) {
return this.options_;
}
this.options_ = (0, _mergeOptions2['default'])(this.options_, obj);
return this.options_;
};
/**
* Get the `Component`s DOM element
*
* @return {Element}
* The DOM element for this `Component`.
*/
Component.prototype.el = function el() {
return this.el_;
};
/**
* Create the `Component`s DOM element.
*
* @param {string} [tagName]
* Element's DOM node type. e.g. 'div'
*
* @param {Object} [properties]
* An object of properties that should be set.
*
* @param {Object} [attributes]
* An object of attributes that should be set.
*
* @return {Element}
* The element that gets created.
*/
Component.prototype.createEl = function createEl(tagName, properties, attributes) {
return Dom.createEl(tagName, properties, attributes);
};
/**
* Localize a string given the string in english.
*
* @param {string} string
* The string to localize.
*
* @return {string}
* The localized string or if no localization exists the english string.
*/
Component.prototype.localize = function localize(string) {
var code = this.player_.language && this.player_.language();
var languages = this.player_.languages && this.player_.languages();
if (!code || !languages) {
return string;
}
var language = languages[code];
if (language && language[string]) {
return language[string];
}
var primaryCode = code.split('-')[0];
var primaryLang = languages[primaryCode];
if (primaryLang && primaryLang[string]) {
return primaryLang[string];
}
return string;
};
/**
* Return the `Component`s DOM element. This is where children get inserted.
* This will usually be the the same as the element returned in {@link Component#el}.
*
* @return {Element}
* The content element for this `Component`.
*/
Component.prototype.contentEl = function contentEl() {
return this.contentEl_ || this.el_;
};
/**
* Get this `Component`s ID
*
* @return {string}
* The id of this `Component`
*/
Component.prototype.id = function id() {
return this.id_;
};
/**
* Get the `Component`s name. The name gets used to reference the `Component`
* and is set during registration.
*
* @return {string}
* The name of this `Component`.
*/
Component.prototype.name = function name() {
return this.name_;
};
/**
* Get an array of all child components
*
* @return {Array}
* The children
*/
Component.prototype.children = function children() {
return this.children_;
};
/**
* Returns the child `Component` with the given `id`.
*
* @param {string} id
* The id of the child `Component` to get.
*
* @return {Component|undefined}
* The child `Component` with the given `id` or undefined.
*/
Component.prototype.getChildById = function getChildById(id) {
return this.childIndex_[id];
};
/**
* Returns the child `Component` with the given `name`.
*
* @param {string} name
* The name of the child `Component` to get.
*
* @return {Component|undefined}
* The child `Component` with the given `name` or undefined.
*/
Component.prototype.getChild = function getChild(name) {
if (!name) {
return;
}
name = (0, _toTitleCase2['default'])(name);
return this.childNameIndex_[name];
};
/**
* Add a child `Component` inside the current `Component`.
*
*
* @param {string|Component} child
* The name or instance of a child to add.
*
* @param {Object} [options={}]
* The key/value store of options that will get passed to children of
* the child.
*
* @param {number} [index=this.children_.length]
* The index to attempt to add a child into.
*
* @return {Component}
* The `Component` that gets added as a child. When using a string the
* `Component` will get created by this process.
*/
Component.prototype.addChild = function addChild(child) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.children_.length;
var component = void 0;
var componentName = void 0;
// If child is a string, create component with options
if (typeof child === 'string') {
componentName = (0, _toTitleCase2['default'])(child);
// Options can also be specified as a boolean,
// so convert to an empty object if false.
if (!options) {
options = {};
}
// Same as above, but true is deprecated so show a warning.
if (options === true) {
_log2['default'].warn('Initializing a child component with `true` is deprecated.' + 'Children should be defined in an array when possible, ' + 'but if necessary use an object instead of `true`.');
options = {};
}
var componentClassName = options.componentClass || componentName;
// Set name through options
options.name = componentName;
// Create a new object & element for this controls set
// If there's no .player_, this is a player
var ComponentClass = Component.getComponent(componentClassName);
if (!ComponentClass) {
throw new Error('Component ' + componentClassName + ' does not exist');
}
// data stored directly on the videojs object may be
// misidentified as a component to retain
// backwards-compatibility with 4.x. check to make sure the
// component class can be instantiated.
if (typeof ComponentClass !== 'function') {
return null;
}
component = new ComponentClass(this.player_ || this, options);
// child is a component instance
} else {
component = child;
}
this.children_.splice(index, 0, component);
if (typeof component.id === 'function') {
this.childIndex_[component.id()] = component;
}
// If a name wasn't used to create the component, check if we can use the
// name function of the component
componentName = componentName || component.name && (0, _toTitleCase2['default'])(component.name());
if (componentName) {
this.childNameIndex_[componentName] = component;
}
// Add the UI object's element to the container div (box)
// Having an element is not required
if (typeof component.el === 'function' && component.el()) {
var childNodes = this.contentEl().children;
var refNode = childNodes[index] || null;
this.contentEl().insertBefore(component.el(), refNode);
}
// Return so it can stored on parent object if desired.
return component;
};
/**
* Remove a child `Component` from this `Component`s list of children. Also removes
* the child `Component`s element from this `Component`s element.
*
* @param {Component} component
* The child `Component` to remove.
*/
Component.prototype.removeChild = function removeChild(component) {
if (typeof component === 'string') {
component = this.getChild(component);
}
if (!component || !this.children_) {
return;
}
var childFound = false;
for (var i = this.children_.length - 1; i >= 0; i--) {
if (this.children_[i] === component) {
childFound = true;
this.children_.splice(i, 1);
break;
}
}
if (!childFound) {
return;
}
this.childIndex_[component.id()] = null;
this.childNameIndex_[component.name()] = null;
var compEl = component.el();
if (compEl && compEl.parentNode === this.contentEl()) {
this.contentEl().removeChild(component.el());
}
};
/**
* Add and initialize default child `Component`s based upon options.
*/
Component.prototype.initChildren = function initChildren() {
var _this = this;
var children = this.options_.children;
if (children) {
// `this` is `parent`
var parentOptions = this.options_;
var handleAdd = function handleAdd(child) {
var name = child.name;
var opts = child.opts;
// Allow options for children to be set at the parent options
// e.g. videojs(id, { controlBar: false });
// instead of videojs(id, { children: { controlBar: false });
if (parentOptions[name] !== undefined) {
opts = parentOptions[name];
}
// Allow for disabling default components
// e.g. options['children']['posterImage'] = false
if (opts === false) {
return;
}
// Allow options to be passed as a simple boolean if no configuration
// is necessary.
if (opts === true) {
opts = {};
}
// We also want to pass the original player options
// to each component as well so they don't need to
// reach back into the player for options later.
opts.playerOptions = _this.options_.playerOptions;
// Create and add the child component.
// Add a direct reference to the child by name on the parent instance.
// If two of the same component are used, different names should be supplied
// for each
var newChild = _this.addChild(name, opts);
if (newChild) {
_this[name] = newChild;
}
};
// Allow for an array of children details to passed in the options
var workingChildren = void 0;
var Tech = Component.getComponent('Tech');
if (Array.isArray(children)) {
workingChildren = children;
} else {
workingChildren = Object.keys(children);
}
workingChildren
// children that are in this.options_ but also in workingChildren would
// give us extra children we do not want. So, we want to filter them out.
.concat(Object.keys(this.options_).filter(function (child) {
return !workingChildren.some(function (wchild) {
if (typeof wchild === 'string') {
return child === wchild;
}
return child === wchild.name;
});
})).map(function (child) {
var name = void 0;
var opts = void 0;
if (typeof child === 'string') {
name = child;
opts = children[name] || _this.options_[name] || {};
} else {
name = child.name;
opts = child;
}
return { name: name, opts: opts };
}).filter(function (child) {
// we have to make sure that child.name isn't in the techOrder since
// techs are registerd as Components but can't aren't compatible
// See https://github.com/videojs/video.js/issues/2772
var c = Component.getComponent(child.opts.componentClass || (0, _toTitleCase2['default'])(child.name));
return c && !Tech.isTech(c);
}).forEach(handleAdd);
}
};
/**
* Builds the default DOM class name. Should be overriden by sub-components.
*
* @return {string}
* The DOM class name for this object.
*
* @abstract
*/
Component.prototype.buildCSSClass = function buildCSSClass() {
// Child classes can include a function that does:
// return 'CLASS NAME' + this._super();
return '';
};
/**
* Add an `event listener` to this `Component`s element.
*
* The benefit of using this over the following:
* - `VjsEvents.on(otherElement, 'eventName', myFunc)`
* - `otherComponent.on('eventName', myFunc)`
*
* 1. Is that the listeners will get cleaned up when either component gets disposed.
* 1. It will also bind `myComponent` as the context of `myFunc`.
* > NOTE: If you remove the element from the DOM that has used `on` you need to
* clean up references using: `myComponent.trigger(el, 'dispose')`
* This will also allow the browser to garbage collect it. In special
* cases such as with `window` and `document`, which are both permanent,
* this is not necessary.
*
* @param {string|Component|string[]} [first]
* The event name, and array of event names, or another `Component`.
*
* @param {EventTarget~EventListener|string|string[]} [second]
* The listener function, an event name, or an Array of events names.
*
* @param {EventTarget~EventListener} [third]
* The event handler if `first` is a `Component` and `second` is an event name
* or an Array of event names.
*
* @return {Component}
* Returns itself; method can be chained.
*
* @listens Component#dispose
*/
Component.prototype.on = function on(first, second, third) {
var _this2 = this;
if (typeof first === 'string' || Array.isArray(first)) {
Events.on(this.el_, first, Fn.bind(this, second));
// Targeting another component or element
} else {
var target = first;
var type = second;
var fn = Fn.bind(this, third);
// When this component is disposed, remove the listener from the other component
var removeOnDispose = function removeOnDispose() {
return _this2.off(target, type, fn);
};
// Use the same function ID so we can remove it later it using the ID
// of the original listener
removeOnDispose.guid = fn.guid;
this.on('dispose', removeOnDispose);
// If the other component is disposed first we need to clean the reference
// to the other component in this component's removeOnDispose listener
// Otherwise we create a memory leak.
var cleanRemover = function cleanRemover() {
return _this2.off('dispose', removeOnDispose);
};
// Add the same function ID so we can easily remove it later
cleanRemover.guid = fn.guid;
// Check if this is a DOM node
if (first.nodeName) {
// Add the listener to the other element
Events.on(target, type, fn);
Events.on(target, 'dispose', cleanRemover);
// Should be a component
// Not using `instanceof Component` because it makes mock players difficult
} else if (typeof first.on === 'function') {
// Add the listener to the other component
target.on(type, fn);
target.on('dispose', cleanRemover);
}
}
return this;
};
/**
* Remove an event listener from this `Component`s element. If the second argument is
* exluded all listeners for the type passed in as the first argument will be removed.
*
* @param {string|Component|string[]} [first]
* The event name, and array of event names, or another `Component`.
*
* @param {EventTarget~EventListener|string|string[]} [second]
* The listener function, an event name, or an Array of events names.
*
* @param {EventTarget~EventListener} [third]
* The event hand