playable
Version:
Video player based on HTML5Video
235 lines • 9.17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var constants_1 = require("../../../constants");
var player_api_decorator_1 = (0, tslib_1.__importDefault)(require("../../../core/player-api-decorator"));
var main_ui_block_view_1 = (0, tslib_1.__importDefault)(require("./main-ui-block.view"));
var HIDE_BLOCK_TIMEOUT = 2000;
var MainUIBlock = /** @class */ (function () {
function MainUIBlock(dependencies) {
this._hideTimeout = null;
this._isContentShowingEnabled = true;
this._isContentShown = false;
this._shouldShowContent = true;
this._shouldAlwaysShow = false;
this._isDragging = false;
var config = dependencies.config, eventEmitter = dependencies.eventEmitter, rootContainer = dependencies.rootContainer, tooltipService = dependencies.tooltipService, topBlock = dependencies.topBlock, bottomBlock = dependencies.bottomBlock, screen = dependencies.screen;
this._config = config;
this._eventEmitter = eventEmitter;
this._topBlock = topBlock;
this._bottomBlock = bottomBlock;
this._screen = screen;
this._tooltipService = tooltipService;
this.isHidden = false;
this._shouldAlwaysShow = false;
this._initUI({
tooltipContainer: tooltipService.tooltipContainerElement,
topBlock: topBlock.getElement(),
bottomBlock: bottomBlock.getElement(),
});
this._bindViewCallbacks();
this._bindEvents();
rootContainer.appendComponentElement(this.view.getElement());
if (config.hideMainUI) {
this.hide();
}
}
MainUIBlock.prototype.getElement = function () {
return this.view.getElement();
};
MainUIBlock.prototype._initUI = function (elements) {
this.view = new MainUIBlock.View({ elements: elements });
};
MainUIBlock.prototype._bindViewCallbacks = function () {
this._startHideBlockTimeout = this._startHideBlockTimeout.bind(this);
this._tryShowContent = this._tryShowContent.bind(this);
this._tryHideContent = this._tryHideContent.bind(this);
};
MainUIBlock.prototype._bindEvents = function () {
this._unbindEvents = this._eventEmitter.bindEvents([
[constants_1.UIEvent.MOUSE_MOVE_ON_PLAYER, this._startHideBlockTimeout],
[constants_1.UIEvent.MOUSE_LEAVE_ON_PLAYER, this._tryHideContent],
[constants_1.UIEvent.FOCUS_ENTER_ON_PLAYER, this._startHideBlockTimeout],
[constants_1.UIEvent.KEYBOARD_KEYDOWN_INTERCEPTED, this._startHideBlockTimeout],
[constants_1.UIEvent.LOADER_HIDE, this._startHideBlockTimeout],
[constants_1.VideoEvent.STATE_CHANGED, this._updatePlayingState],
[constants_1.UIEvent.CONTROL_DRAG_START, this._onControlDragStart],
[constants_1.UIEvent.CONTROL_DRAG_END, this._onControlDragEnd],
], this);
};
MainUIBlock.prototype._updatePlayingState = function (_a) {
var nextState = _a.nextState;
switch (nextState) {
case constants_1.EngineState.PLAY_REQUESTED: {
this._shouldShowContent = false;
this._startHideBlockTimeout();
break;
}
case constants_1.EngineState.ENDED: {
this._shouldShowContent = true;
this._tryShowContent();
break;
}
case constants_1.EngineState.PAUSED: {
this._shouldShowContent = true;
this._tryShowContent();
break;
}
case constants_1.EngineState.SRC_SET: {
this._shouldShowContent = true;
this._tryShowContent();
break;
}
default:
break;
}
};
Object.defineProperty(MainUIBlock.prototype, "_isBlockFocused", {
get: function () {
return this._bottomBlock.isFocused || this._topBlock.isFocused;
},
enumerable: false,
configurable: true
});
MainUIBlock.prototype._startHideBlockTimeout = function () {
this._stopHideBlockTimeout();
this._tryShowContent();
this._hideTimeout = window.setTimeout(this._tryHideContent, HIDE_BLOCK_TIMEOUT);
};
MainUIBlock.prototype._stopHideBlockTimeout = function () {
if (this._hideTimeout) {
window.clearTimeout(this._hideTimeout);
}
};
MainUIBlock.prototype._tryShowContent = function () {
if (this._isContentShowingEnabled) {
this._showContent();
}
};
MainUIBlock.prototype._onControlDragStart = function () {
this._isDragging = true;
};
MainUIBlock.prototype._onControlDragEnd = function () {
this._isDragging = false;
this._tryHideContent();
};
MainUIBlock.prototype._showContent = function () {
this._screen.showCursor();
if (this.isHidden || this._isContentShown) {
return;
}
this._eventEmitter.emitAsync(constants_1.UIEvent.MAIN_BLOCK_SHOW);
this._bottomBlock.showContent();
this._topBlock.showContent();
this._isContentShown = true;
};
MainUIBlock.prototype._tryHideContent = function () {
if (!this._isBlockFocused &&
!this._isDragging &&
!this._shouldShowContent &&
!this._shouldAlwaysShow) {
this._hideContent();
}
};
MainUIBlock.prototype._hideContent = function () {
if (this._isContentShowingEnabled) {
this._screen.hideCursor();
}
if (this.isHidden || !this._isContentShown) {
return;
}
this._eventEmitter.emitAsync(constants_1.UIEvent.MAIN_BLOCK_HIDE);
this._bottomBlock.hideContent();
this._topBlock.hideContent();
this._tooltipService.hide();
this._isContentShown = false;
};
MainUIBlock.prototype.disableShowingContent = function () {
this._isContentShowingEnabled = false;
this._hideContent();
};
MainUIBlock.prototype.enableShowingContent = function () {
this._isContentShowingEnabled = true;
if (this._shouldShowContent) {
this._showContent();
}
};
/**
* Method for hiding main ui
* Important! This overrides the effect of `setMainUIShouldAlwaysShow` method
* @example
* player.hideMainUI();
*/
MainUIBlock.prototype.hide = function () {
this.isHidden = true;
this._topBlock.hide();
this._bottomBlock.hide();
};
/**
* Method for showing main ui in case it was hidden
* @example
* player.showMainUI();
*/
MainUIBlock.prototype.show = function () {
/**
* TODO: fix this part of API
* config.hideMainUI is being forced to be true on IOS because it's common to use native controls for players on IOS
* In that case, main ui is constantly hidden. But if you use 'showMainUI' API it'll show two sets of controls on IOS
* Native and Playable's
* For now, the easiest fix is to take into account the config.hideMainUI property here
* But best solution is to rethink the way we force IOS to use native controls, without rewriting the config property
* on initialization
*/
if (this._config.hideMainUI) {
return;
}
this.isHidden = false;
this._topBlock.show();
this._bottomBlock.show();
};
/**
* Method for allowing main ui to be always shown despite the playback state and the cursor position
* Important! UI would be hidden in case `hideMainUI` is called
* @param flag - `true` for showing always
* @example
* player.setMainUIShouldAlwaysShow(true);
*
*/
MainUIBlock.prototype.setShouldAlwaysShow = function (flag) {
this._shouldAlwaysShow = flag;
if (this._shouldAlwaysShow) {
this._tryShowContent();
}
else {
this._startHideBlockTimeout();
}
};
MainUIBlock.prototype.destroy = function () {
this._stopHideBlockTimeout();
this._unbindEvents();
this.view.destroy();
};
MainUIBlock.moduleName = 'mainUIBlock';
MainUIBlock.View = main_ui_block_view_1.default;
MainUIBlock.dependencies = [
'config',
'screen',
'rootContainer',
'tooltipService',
'eventEmitter',
'topBlock',
'bottomBlock',
];
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('hideMainUI')
], MainUIBlock.prototype, "hide", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('showMainUI')
], MainUIBlock.prototype, "show", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('setMainUIShouldAlwaysShow')
], MainUIBlock.prototype, "setShouldAlwaysShow", null);
return MainUIBlock;
}());
exports.default = MainUIBlock;
//# sourceMappingURL=main-ui-block.js.map