playable
Version:
Video player based on HTML5Video
81 lines • 4.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var constants_1 = require("../../../../constants");
var view_1 = (0, tslib_1.__importDefault)(require("../../core/view"));
var templates_1 = require("./templates");
var htmlToElement_1 = (0, tslib_1.__importDefault)(require("../../core/htmlToElement"));
var getElementByHook_1 = (0, tslib_1.__importDefault)(require("../../core/getElementByHook"));
var full_screen_theme_1 = (0, tslib_1.__importDefault)(require("./full-screen.theme"));
var full_screen_scss_1 = (0, tslib_1.__importDefault)(require("./full-screen.scss"));
var FullScreenView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(FullScreenView, _super);
function FullScreenView(config) {
var _this = this;
var callbacks = config.callbacks, textMap = config.textMap, tooltipService = config.tooltipService, theme = config.theme;
_this = _super.call(this, theme) || this;
_this._callbacks = callbacks;
_this._textMap = textMap;
_this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.controlTemplate)({
styles: _this.styleNames,
themeStyles: _this.themeStyles,
texts: {
label: _this._textMap.get(constants_1.TextLabel.ENTER_FULL_SCREEN_LABEL),
},
}));
_this._$toggleFullScreenControl = (0, getElementByHook_1.default)(_this._$rootElement, 'full-screen-button');
_this._tooltipReference = tooltipService.createReference(_this._$toggleFullScreenControl, {
text: _this._textMap.get(constants_1.TextLabel.ENTER_FULL_SCREEN_TOOLTIP),
});
_this.setFullScreenState(false);
_this._bindEvents();
return _this;
}
FullScreenView.prototype._bindEvents = function () {
this._onButtonClick = this._onButtonClick.bind(this);
this._$toggleFullScreenControl.addEventListener('click', this._onButtonClick);
};
FullScreenView.prototype._unbindEvents = function () {
this._$toggleFullScreenControl.removeEventListener('click', this._onButtonClick);
};
FullScreenView.prototype._onButtonClick = function () {
this._$toggleFullScreenControl.focus();
this._callbacks.onButtonClick();
};
//TODO: No need to create icons every tims on setState
FullScreenView.prototype.setFullScreenState = function (isInFullScreen) {
if (isInFullScreen) {
this._$toggleFullScreenControl.classList.add(this.styleNames.inFullScreen);
this._$toggleFullScreenControl.setAttribute('aria-label', this._textMap.get(constants_1.TextLabel.EXIT_FULL_SCREEN_LABEL));
this._tooltipReference.setText(this._textMap.get(constants_1.TextLabel.EXIT_FULL_SCREEN_TOOLTIP));
}
else {
this._$toggleFullScreenControl.classList.remove(this.styleNames.inFullScreen);
this._$toggleFullScreenControl.setAttribute('aria-label', this._textMap.get(constants_1.TextLabel.ENTER_FULL_SCREEN_LABEL));
this._tooltipReference.setText(this._textMap.get(constants_1.TextLabel.ENTER_FULL_SCREEN_TOOLTIP));
}
};
FullScreenView.prototype.hide = function () {
this._$rootElement.classList.add(this.styleNames.hidden);
};
FullScreenView.prototype.show = function () {
this._$rootElement.classList.remove(this.styleNames.hidden);
};
FullScreenView.prototype.getElement = function () {
return this._$rootElement;
};
FullScreenView.prototype.destroy = function () {
this._unbindEvents();
this._tooltipReference.destroy();
if (this._$rootElement.parentNode) {
this._$rootElement.parentNode.removeChild(this._$rootElement);
}
this._$toggleFullScreenControl = null;
this._$rootElement = null;
};
return FullScreenView;
}(view_1.default));
FullScreenView.setTheme(full_screen_theme_1.default);
FullScreenView.extendStyleNames(full_screen_scss_1.default);
exports.default = FullScreenView;
//# sourceMappingURL=full-screen.view.js.map