playable
Version:
Video player based on HTML5Video
163 lines • 5.57 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 overlay_view_1 = (0, tslib_1.__importDefault)(require("./overlay.view"));
var Overlay = /** @class */ (function () {
function Overlay(_a) {
var eventEmitter = _a.eventEmitter, engine = _a.engine, rootContainer = _a.rootContainer, theme = _a.theme, config = _a.config, mainUIBlock = _a.mainUIBlock, loader = _a.loader;
this.isHidden = false;
this._eventEmitter = eventEmitter;
this._engine = engine;
this._theme = theme;
this._mainUIBlock = mainUIBlock;
this._loader = loader;
this._bindEvents();
this._initUI();
this.setPoster(config.poster);
if (config.hideOverlay) {
this.hide();
}
rootContainer.appendComponentElement(this.getElement());
}
Overlay.prototype.getElement = function () {
return this.view.getElement();
};
Overlay.prototype._initUI = function () {
var viewConfig = {
callbacks: {
onPlayClick: this._playVideo.bind(this),
},
theme: this._theme,
};
this.view = new Overlay.View(viewConfig);
};
Overlay.prototype._bindEvents = function () {
this._unbindEvents = this._eventEmitter.bindEvents([
[constants_1.VideoEvent.STATE_CHANGED, this._updatePlayingState],
[constants_1.VideoEvent.RESET, this._tryShowContent],
], this);
};
Overlay.prototype._updatePlayingState = function (_a) {
var nextState = _a.nextState;
if (nextState === constants_1.EngineState.PLAY_REQUESTED) {
this._tryHideContent();
}
else if (nextState === constants_1.EngineState.ENDED ||
nextState === constants_1.EngineState.SRC_SET) {
this._tryShowContent();
}
};
Overlay.prototype._playVideo = function () {
this._engine.play();
this._eventEmitter.emitAsync(constants_1.UIEvent.PLAY_OVERLAY_CLICK);
};
Overlay.prototype._tryShowContent = function () {
if (this.isHidden) {
return;
}
if (this._engine.isPaused) {
this._showContent();
}
};
Overlay.prototype._tryHideContent = function () {
if (this.isHidden) {
return;
}
this._hideContent();
};
Overlay.prototype._hideContent = function () {
this.view.hideContent();
this._loader.show();
this._mainUIBlock.enableShowingContent();
};
Overlay.prototype._showContent = function () {
this.view.showContent();
this._loader.hide();
this._mainUIBlock.disableShowingContent();
};
/**
* Method for completely hiding player overlay. It's not gonna appear on initial state of player and when video is ended.
* @example
* player.showOverlay();
*/
Overlay.prototype.hide = function () {
this.isHidden = true;
this.view.hide();
};
/**
* Method for showing player overlay after it was completely hidden with `player.hideOverlay()`.
* @example
* player.showOverlay();
*/
Overlay.prototype.show = function () {
this.isHidden = false;
this.view.show();
};
/**
* Method for setting overlay poster
* @param src - Source of image
* @example
* player.setPoster('https://example.com/poster.png');
*
*/
Overlay.prototype.setPoster = function (src) {
this.view.setPoster(src);
};
/**
* After initialisation player has by default an overlay that is black;
*
* The `.turnOnOverlayTransparency()` method makes this overlay transparent.
* @example
* player.turnOnOverlayTransparency();
*
*/
Overlay.prototype.turnOnOverlayTransparency = function () {
this.view.turnOnOverlayTransparency();
};
/**
* The `.turnOffOverlayTransparency()` method returns player's overlay to default settings.
* It becomes black again.
*
* @example
* player.turnOffOverlayTransparency();
*
*/
Overlay.prototype.turnOffOverlayTransparency = function () {
this.view.turnOffOverlayTransparency();
};
Overlay.prototype.destroy = function () {
this._unbindEvents();
this.view.destroy();
};
Overlay.moduleName = 'overlay';
Overlay.View = overlay_view_1.default;
Overlay.dependencies = [
'engine',
'eventEmitter',
'rootContainer',
'theme',
'config',
'mainUIBlock',
'loader',
];
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('hideOverlay')
], Overlay.prototype, "hide", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)('showOverlay')
], Overlay.prototype, "show", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Overlay.prototype, "setPoster", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Overlay.prototype, "turnOnOverlayTransparency", null);
(0, tslib_1.__decorate)([
(0, player_api_decorator_1.default)()
], Overlay.prototype, "turnOffOverlayTransparency", null);
return Overlay;
}());
exports.default = Overlay;
//# sourceMappingURL=overlay.js.map