playable
Version:
Video player based on HTML5Video
145 lines • 7.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var view_1 = (0, tslib_1.__importDefault)(require("../core/view"));
var htmlToElement_1 = (0, tslib_1.__importDefault)(require("../core/htmlToElement"));
var getElementByHook_1 = (0, tslib_1.__importDefault)(require("../core/getElementByHook"));
var toggleElementClass_1 = (0, tslib_1.__importDefault)(require("../core/toggleElementClass"));
var templates_1 = require("./templates");
var bottom_block_scss_1 = (0, tslib_1.__importDefault)(require("./bottom-block.scss"));
var BottomBlockView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(BottomBlockView, _super);
function BottomBlockView(config) {
var _this = _super.call(this) || this;
var callbacks = config.callbacks, elements = config.elements;
_this._callbacks = callbacks;
_this._initDOM(elements);
_this._bindEvents();
return _this;
}
BottomBlockView.prototype._initDOM = function (elements) {
this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.bottomBlockTemplate)({
styles: this.styleNames,
}));
this._$leftControllsContainer = (0, getElementByHook_1.default)(this._$rootElement, 'controls-container-left');
this._$rightControllsContainer = (0, getElementByHook_1.default)(this._$rootElement, 'controls-container-right');
var $playContainer = (0, getElementByHook_1.default)(this._$rootElement, 'play-container');
var $volumeContainer = (0, getElementByHook_1.default)(this._$rootElement, 'volume-container');
var $timeContainer = (0, getElementByHook_1.default)(this._$rootElement, 'time-container');
var $fullScreenContainer = (0, getElementByHook_1.default)(this._$rootElement, 'full-screen-container');
var $logoContainer = (0, getElementByHook_1.default)(this._$rootElement, 'logo-container');
var $progressBarContainer = (0, getElementByHook_1.default)(this._$rootElement, 'progress-bar-container');
var $downloadContainer = (0, getElementByHook_1.default)(this._$rootElement, 'download-container');
var $pictureInPictureContainer = (0, getElementByHook_1.default)(this._$rootElement, 'picture-in-picture-container');
$playContainer.appendChild(elements.play);
$volumeContainer.appendChild(elements.volume);
$timeContainer.appendChild(elements.time);
$fullScreenContainer.appendChild(elements.fullScreen);
$logoContainer.appendChild(elements.logo);
$progressBarContainer.appendChild(elements.progress);
$downloadContainer.appendChild(elements.download);
$pictureInPictureContainer.appendChild(elements.pictureInPicture);
};
BottomBlockView.prototype._preventClickPropagation = function (e) {
e.stopPropagation();
};
BottomBlockView.prototype._bindEvents = function () {
this._$rootElement.addEventListener('click', this._preventClickPropagation);
this._$rootElement.addEventListener('mousemove', this._callbacks.onBlockMouseMove);
this._$rootElement.addEventListener('mouseleave', this._callbacks.onBlockMouseOut);
};
BottomBlockView.prototype._unbindEvents = function () {
this._$rootElement.removeEventListener('click', this._preventClickPropagation);
this._$rootElement.removeEventListener('mousemove', this._callbacks.onBlockMouseMove);
this._$rootElement.removeEventListener('mouseleave', this._callbacks.onBlockMouseOut);
};
BottomBlockView.prototype.addControl = function (key, element, position) {
var wrapper = document.createElement('div');
wrapper.setAttribute('data-playable-hook', "additional-".concat(key));
wrapper.classList.add(this.styleNames.additionalButton);
wrapper.appendChild(element);
if (position === 'left') {
this._$leftControllsContainer.appendChild(wrapper);
return;
}
this._$rightControllsContainer.insertBefore(wrapper, this._$rightControllsContainer.children[0]);
};
BottomBlockView.prototype.setShouldLogoShowAlwaysFlag = function (isShowAlways) {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.showLogoAlways, isShowAlways);
this.showLogo();
};
BottomBlockView.prototype.showPlayControl = function () {
this._$rootElement.classList.remove(this.styleNames.playControlHidden);
};
BottomBlockView.prototype.hidePlayControl = function () {
this._$rootElement.classList.add(this.styleNames.playControlHidden);
};
BottomBlockView.prototype.showTimeControl = function () {
this._$rootElement.classList.remove(this.styleNames.timeControlHidden);
};
BottomBlockView.prototype.hideTimeControl = function () {
this._$rootElement.classList.add(this.styleNames.timeControlHidden);
};
BottomBlockView.prototype.showVolumeControl = function () {
this._$rootElement.classList.remove(this.styleNames.volumeControlHidden);
};
BottomBlockView.prototype.hideVolumeControl = function () {
this._$rootElement.classList.add(this.styleNames.volumeControlHidden);
};
BottomBlockView.prototype.showFullScreenControl = function () {
this._$rootElement.classList.remove(this.styleNames.fullScreenControlHidden);
};
BottomBlockView.prototype.hideFullScreenControl = function () {
this._$rootElement.classList.add(this.styleNames.fullScreenControlHidden);
};
BottomBlockView.prototype.showLogo = function () {
this._$rootElement.classList.remove(this.styleNames.logoHidden);
};
BottomBlockView.prototype.hideLogo = function () {
this._$rootElement.classList.add(this.styleNames.logoHidden);
};
BottomBlockView.prototype.showProgressControl = function () {
this._$rootElement.classList.remove(this.styleNames.progressControlHidden);
};
BottomBlockView.prototype.hideProgressControl = function () {
this._$rootElement.classList.add(this.styleNames.progressControlHidden);
};
BottomBlockView.prototype.showDownloadButton = function () {
this._$rootElement.classList.remove(this.styleNames.downloadButtonHidden);
};
BottomBlockView.prototype.hidePictureInPictureControl = function () {
this._$rootElement.classList.add(this.styleNames.pictureInPictureButtonHidden);
};
BottomBlockView.prototype.showPictureInPictureControl = function () {
this._$rootElement.classList.remove(this.styleNames.pictureInPictureButtonHidden);
};
BottomBlockView.prototype.hideDownloadButton = function () {
this._$rootElement.classList.add(this.styleNames.downloadButtonHidden);
};
BottomBlockView.prototype.show = function () {
this._$rootElement.classList.remove(this.styleNames.hidden);
};
BottomBlockView.prototype.hide = function () {
this._$rootElement.classList.add(this.styleNames.hidden);
};
BottomBlockView.prototype.getElement = function () {
return this._$rootElement;
};
BottomBlockView.prototype.showContent = function () {
this._$rootElement.classList.add(this.styleNames.activated);
};
BottomBlockView.prototype.hideContent = function () {
this._$rootElement.classList.remove(this.styleNames.activated);
};
BottomBlockView.prototype.destroy = function () {
this._unbindEvents();
if (this._$rootElement.parentNode) {
this._$rootElement.parentNode.removeChild(this._$rootElement);
}
this._$rootElement = null;
};
return BottomBlockView;
}(view_1.default));
BottomBlockView.extendStyleNames(bottom_block_scss_1.default);
exports.default = BottomBlockView;
//# sourceMappingURL=bottom-block.view.js.map