playable
Version:
Video player based on HTML5Video
95 lines • 4.31 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 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 toggleElementClass_1 = (0, tslib_1.__importDefault)(require("../core/toggleElementClass"));
var live_indicator_scss_1 = (0, tslib_1.__importDefault)(require("./live-indicator.scss"));
var constants_1 = require("../../../constants");
var LiveIndicatorView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LiveIndicatorView, _super);
function LiveIndicatorView(config) {
var _this = _super.call(this) || this;
_this._callbacks = config.callbacks;
_this._textMap = config.textMap;
_this._tooltipService = config.tooltipService;
_this._initDOM();
_this._bindEvents();
return _this;
}
LiveIndicatorView.prototype._initDOM = function () {
this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.liveIndicatorTemplate)({
styles: this.styleNames,
themeStyles: this.themeStyles,
texts: {},
}));
this._$button = (0, getElementByHook_1.default)(this._$rootElement, 'live-indicator-button');
this._tooltipReference = this._tooltipService.createReference(this._$button, {
text: this._textMap.get(constants_1.TextLabel.LIVE_SYNC_TOOLTIP),
});
// NOTE: LIVE indicator is hidden and inactive by default
this.toggle(false);
this.toggleActive(false);
this.toggleEnded(false);
};
LiveIndicatorView.prototype._bindEvents = function () {
this._$rootElement.addEventListener('click', this._callbacks.onClick);
};
LiveIndicatorView.prototype._unbindEvents = function () {
this._$rootElement.removeEventListener('click', this._callbacks.onClick);
};
LiveIndicatorView.prototype.toggleActive = function (shouldActivate) {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.active, shouldActivate);
(0, toggleElementClass_1.default)(this._$button, this.styleNames.clickable, !shouldActivate);
// NOTE: disable tooltip while video is sync with live
if (shouldActivate) {
this._$button.setAttribute('disabled', 'true');
this._tooltipReference.disable();
}
else {
this._$button.removeAttribute('disabled');
this._tooltipReference.enable();
}
};
LiveIndicatorView.prototype.toggleEnded = function (isEnded) {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.ended, isEnded);
this._$button.innerText = this._textMap.get(constants_1.TextLabel.LIVE_INDICATOR_TEXT, {
isEnded: isEnded,
});
this._$button.setAttribute('aria-label', !isEnded ? this._textMap.get(constants_1.TextLabel.LIVE_SYNC_LABEL) : '');
this._$button.setAttribute('disabled', 'true');
if (isEnded) {
this._tooltipReference.disable();
}
else {
this._tooltipReference.enable();
}
};
LiveIndicatorView.prototype.show = function () {
this.toggle(true);
};
LiveIndicatorView.prototype.hide = function () {
this.toggle(false);
};
LiveIndicatorView.prototype.toggle = function (shouldShow) {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.hidden, !shouldShow);
};
LiveIndicatorView.prototype.getElement = function () {
return this._$rootElement;
};
LiveIndicatorView.prototype.destroy = function () {
this._unbindEvents();
this._tooltipReference.destroy();
if (this._$rootElement.parentNode) {
this._$rootElement.parentNode.removeChild(this._$rootElement);
}
this._$rootElement = null;
this._$button = null;
};
return LiveIndicatorView;
}(view_1.default));
LiveIndicatorView.extendStyleNames(live_indicator_scss_1.default);
exports.default = LiveIndicatorView;
//# sourceMappingURL=live-indicator.view.js.map