playable
Version:
Video player based on HTML5Video
179 lines • 7.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var constants_1 = require("../../../constants");
var screen_view_1 = (0, tslib_1.__importDefault)(require("./screen.view"));
var player_api_decorator_1 = (0, tslib_1.__importDefault)(require("../../../core/player-api-decorator"));
var PLAYBACK_CHANGE_TIMEOUT = 300;
var Screen = /** @class */ (function () {
function Screen(_a) {
var config = _a.config, eventEmitter = _a.eventEmitter, engine = _a.engine, fullScreenManager = _a.fullScreenManager, interactionIndicator = _a.interactionIndicator, rootContainer = _a.rootContainer;
this._eventEmitter = eventEmitter;
this._engine = engine;
this._fullScreenManager = fullScreenManager;
this._interactionIndicator = interactionIndicator;
this.isHidden = false;
this._delayedToggleVideoPlaybackTimeout = null;
this._isClickProcessingDisabled = Boolean(config.disableControlWithClickOnPlayer);
this._bindCallbacks();
this._initUI(config.nativeBrowserControls);
this._bindEvents();
rootContainer.appendComponentElement(this.getElement());
}
Screen.prototype.getElement = function () {
return this.view.getElement();
};
Screen.prototype._bindCallbacks = function () {
this._processClick = this._processClick.bind(this);
this._processDblClick = this._processDblClick.bind(this);
this._toggleVideoPlayback = this._toggleVideoPlayback.bind(this);
};
Screen.prototype._initUI = function (isNativeControls) {
var config = {
nativeControls: isNativeControls,
callbacks: {
onWrapperMouseClick: this._processClick,
onWrapperMouseDblClick: this._processDblClick,
},
playbackViewElement: this._engine.getElement(),
};
this.view = new screen_view_1.default(config);
};
Screen.prototype._bindEvents = function () {
this._unbindEvents = this._eventEmitter.bindEvents([
[constants_1.UIEvent.PLAY_OVERLAY_CLICK, this.view.focusOnNode, this.view],
[constants_1.UIEvent.RESIZE, this._updateSizes],
[constants_1.EngineState.SRC_SET, this.view.resetBackground, this.view],
[constants_1.EngineState.METADATA_LOADED, this.view.resetAspectRatio, this.view],
], this);
};
Screen.prototype._updateSizes = function (_a) {
var width = _a.width, height = _a.height;
this.view.setBackgroundSize(width, height);
this.view.resetAspectRatio();
};
Screen.prototype.showCursor = function () {
this.view.showCursor();
};
Screen.prototype.hideCursor = function () {
this.view.hideCursor();
};
Screen.prototype._processClick = function () {
if (this._isClickProcessingDisabled) {
return;
}
this._showPlaybackChangeIndicator();
if (!this._fullScreenManager.isEnabled) {
this._toggleVideoPlayback();
}
else {
this._setDelayedPlaybackToggle();
}
};
Screen.prototype._processDblClick = function () {
if (this._isClickProcessingDisabled) {
return;
}
if (this._fullScreenManager.isEnabled) {
if (this._isDelayedPlaybackToggleExist) {
this._clearDelayedPlaybackToggle();
this._hideDelayedPlaybackChangeIndicator();
}
this._toggleFullScreen();
}
};
Screen.prototype._showPlaybackChangeIndicator = function () {
var state = this._engine.getCurrentState();
if (state === constants_1.EngineState.PLAY_REQUESTED || state === constants_1.EngineState.PLAYING) {
this._interactionIndicator.showPause();
}
else {
this._interactionIndicator.showPlay();
}
};
Screen.prototype._hideDelayedPlaybackChangeIndicator = function () {
this._interactionIndicator.hideIcons();
};
Screen.prototype._setDelayedPlaybackToggle = function () {
this._clearDelayedPlaybackToggle();
this._delayedToggleVideoPlaybackTimeout = window.setTimeout(this._toggleVideoPlayback, PLAYBACK_CHANGE_TIMEOUT);
};
Screen.prototype._clearDelayedPlaybackToggle = function () {
window.clearTimeout(this._delayedToggleVideoPlaybackTimeout);
this._delayedToggleVideoPlaybackTimeout = null;
};
Object.defineProperty(Screen.prototype, "_isDelayedPlaybackToggleExist", {
get: function () {
return Boolean(this._delayedToggleVideoPlaybackTimeout);
},
enumerable: false,
configurable: true
});
Screen.prototype._toggleVideoPlayback = function () {
this._clearDelayedPlaybackToggle();
var state = this._engine.getCurrentState();
if (state === constants_1.EngineState.PLAY_REQUESTED || state === constants_1.EngineState.PLAYING) {
this._engine.pause();
this._eventEmitter.emitAsync(constants_1.UIEvent.PAUSE_WITH_SCREEN_CLICK);
}
else {
this._engine.play();
this._eventEmitter.emitAsync(constants_1.UIEvent.PLAY_WITH_SCREEN_CLICK);
}
};
Screen.prototype._toggleFullScreen = function () {
if (this._fullScreenManager.isInFullScreen) {
this._fullScreenManager.exitFullScreen();
this._eventEmitter.emitAsync(constants_1.UIEvent.EXIT_FULL_SCREEN_WITH_SCREEN_CLICK);
}
else {
this._fullScreenManager.enterFullScreen();
this._eventEmitter.emitAsync(constants_1.UIEvent.ENTER_FULL_SCREEN_WITH_SCREEN_CLICK);
}
};
Screen.prototype.hide = function () {
if (!this.isHidden) {
this.view.hide();
this.isHidden = true;
}
};
Screen.prototype.show = function () {
if (this.isHidden) {
this.view.show();
this.isHidden = false;
}
};
/**
* Method for setting video view mode.
* @param viewMode Possible values are "REGULAR", "FILL", "BLUR".
* With "REGULAR" video tag would try to be fully shown.
* With "FILL" video tag would fill all space, removing black lines on sides.
* With "BLUR" black lines would be filled with blured pixels from video.
* @example
* player.setVideoViewMode("BLUR");
*/
Screen.prototype.setVideoViewMode = function (viewMode) {
this.view.setViewMode(viewMode);
};
Screen.prototype.destroy = function () {
this._unbindEvents();
this._clearDelayedPlaybackToggle();
this.view.destroy();
};
Screen.moduleName = 'screen';
Screen.View = screen_view_1.default;
Screen.dependencies = [
'engine',
'eventEmitter',
'config',
'fullScreenManager',
'interactionIndicator',
'rootContainer',
];
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Screen.prototype, "setVideoViewMode", null);
return Screen;
}());
exports.default = Screen;
//# sourceMappingURL=screen.js.map