playable
Version:
Video player based on HTML5Video
235 lines • 9.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var resize_observer_polyfill_1 = (0, tslib_1.__importDefault)(require("resize-observer-polyfill"));
var focus_source_1 = (0, tslib_1.__importDefault)(require("./utils/focus-source"));
var focus_within_1 = (0, tslib_1.__importDefault)(require("./utils/focus-within"));
var player_api_decorator_1 = (0, tslib_1.__importDefault)(require("../../core/player-api-decorator"));
var constants_1 = require("../../constants");
var root_container_view_1 = (0, tslib_1.__importDefault)(require("./root-container.view"));
var element_queries_1 = (0, tslib_1.__importDefault)(require("../ui/core/element-queries"));
var DEFAULT_CONFIG = {
fillAllSpace: false,
rtl: false,
};
var RootContainer = /** @class */ (function () {
function RootContainer(_a) {
var eventEmitter = _a.eventEmitter, config = _a.config;
this._eventEmitter = eventEmitter;
this.isHidden = false;
this._bindCallbacks();
this._initUI(config);
this._bindEvents();
}
/**
* Getter for DOM element with player UI
* (use it only for debug, if you need attach player to your document use `attachToElement` method)
*/
RootContainer.prototype.getElement = function () {
return this.view.getElement();
};
RootContainer.prototype._bindCallbacks = function () {
this._onResized = this._onResized.bind(this);
this._broadcastMouseEnter = this._broadcastMouseEnter.bind(this);
this._broadcastMouseMove = this._broadcastMouseMove.bind(this);
this._broadcastMouseLeave = this._broadcastMouseLeave.bind(this);
this._broadcastFocusEnter = this._broadcastFocusEnter.bind(this);
this._broadcastFocusLeave = this._broadcastFocusLeave.bind(this);
};
RootContainer.prototype._bindEvents = function () {
this._unbindEvents = this._eventEmitter.bindEvents([
[
constants_1.UIEvent.FULL_SCREEN_STATE_CHANGED,
this.view.setFullScreenState,
this.view,
],
], this);
};
RootContainer.prototype._initUI = function (config) {
this.view = new root_container_view_1.default({
callbacks: {
onMouseEnter: this._broadcastMouseEnter,
onMouseLeave: this._broadcastMouseLeave,
onMouseMove: this._broadcastMouseMove,
},
width: config.width || null,
height: config.height || null,
fillAllSpace: config.fillAllSpace || DEFAULT_CONFIG.fillAllSpace,
rtl: config.rtl || DEFAULT_CONFIG.rtl,
});
this._elementQueries = new element_queries_1.default(this.getElement());
this._resizeObserver = new resize_observer_polyfill_1.default(this._onResized);
this._resizeObserver.observe(this.getElement());
};
RootContainer.prototype.appendComponentElement = function (element) {
this.view.appendComponentElement(element);
};
RootContainer.prototype._broadcastMouseEnter = function () {
this._eventEmitter.emitAsync(constants_1.UIEvent.MOUSE_ENTER_ON_PLAYER);
};
RootContainer.prototype._broadcastMouseMove = function () {
this._eventEmitter.emitAsync(constants_1.UIEvent.MOUSE_MOVE_ON_PLAYER);
};
RootContainer.prototype._broadcastMouseLeave = function () {
this._eventEmitter.emitAsync(constants_1.UIEvent.MOUSE_LEAVE_ON_PLAYER);
};
RootContainer.prototype._broadcastFocusEnter = function () {
this._eventEmitter.emitAsync(constants_1.UIEvent.FOCUS_ENTER_ON_PLAYER);
};
RootContainer.prototype._broadcastFocusLeave = function () {
this._eventEmitter.emitAsync(constants_1.UIEvent.FOCUS_LEAVE_ON_PLAYER);
};
RootContainer.prototype._enableFocusInterceptors = function () {
if (!this._disengageFocusWithin) {
this._disengageFocusWithin = (0, focus_within_1.default)(this.getElement(), this._broadcastFocusEnter, this._broadcastFocusLeave);
}
if (!this._disengageFocusSource) {
focus_source_1.default.engage();
this._disengageFocusSource = focus_source_1.default.disengage;
}
};
RootContainer.prototype._disableFocusInterceptors = function () {
if (this._disengageFocusSource) {
this._disengageFocusSource();
this._disengageFocusSource = null;
}
if (this._disengageFocusWithin) {
this._disengageFocusWithin();
this._disengageFocusWithin = null;
}
};
RootContainer.prototype._onResized = function () {
var width = this.view.getWidth();
var height = this.view.getHeight();
this._elementQueries.setWidth(width);
this._eventEmitter.emitAsync(constants_1.UIEvent.RESIZE, { width: width, height: height });
};
/**
* Method for attaching player node to your container
*
* @example
* document.addEventListener('DOMContentLoaded', function() {
* const config = { src: 'http://my-url/video.mp4' }
* const player = Playable.create(config);
*
* player.attachToElement(document.getElementById('content'));
* });
*/
RootContainer.prototype.attachToElement = function (element) {
this._enableFocusInterceptors();
element.appendChild(this.getElement());
this._elementQueries.getQueries();
};
/**
* Method for setting width of player
* @param width - Desired width of player in pixels
* @example
* player.setWidth(400);
*/
RootContainer.prototype.setWidth = function (width) {
this.view.setWidth(width);
};
/**
* Return current width of player in pixels
* @example
* player.getWidth(); // 400
*/
RootContainer.prototype.getWidth = function () {
return this.view.getWidth();
};
/**
* Method for setting width of player
* @param height - Desired height of player in pixels
* @example
* player.setHeight(225);
*/
RootContainer.prototype.setHeight = function (height) {
this.view.setHeight(height);
};
/**
* Return current height of player in pixels
* @example
* player.getHeight(); // 225
*/
RootContainer.prototype.getHeight = function () {
return this.view.getHeight();
};
/**
* Method for allowing player fill all available space
* @param flag - `true` for allowing
* @example
* player.setFillAllSpace(true);
*/
RootContainer.prototype.setFillAllSpace = function (flag) {
this.view.setFillAllSpaceFlag(flag);
};
/**
* Method for allowing player rtl direction
* @param rtl - `true` for allowing
* @example
* player.setRtl(boolean);
*/
RootContainer.prototype.setRtl = function (rtl) {
this.view.setRtl(rtl);
};
/**
* Hide whole ui
* @example
* player.hide();
*/
RootContainer.prototype.hide = function () {
this.isHidden = true;
this.view.hide();
};
/**
* Show whole ui
* @example
* player.show();
*/
RootContainer.prototype.show = function () {
this.isHidden = false;
this.view.show();
};
RootContainer.prototype.destroy = function () {
this._unbindEvents();
this._disableFocusInterceptors();
this._resizeObserver.unobserve(this.getElement());
this._elementQueries.destroy();
this.view.destroy();
};
RootContainer.moduleName = 'rootContainer';
RootContainer.dependencies = ['eventEmitter', 'config'];
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "getElement", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "attachToElement", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "setWidth", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "getWidth", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "setHeight", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "getHeight", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "setFillAllSpace", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "setRtl", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "hide", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], RootContainer.prototype, "show", null);
return RootContainer;
}());
exports.default = RootContainer;
//# sourceMappingURL=root-container.js.map