playable/dist/src/modules/ui/controls/play/play.view.js

Video player based on HTML5Video

"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 play_theme_1 = (0, tslib_1.__importDefault)(require("./play.theme"));
var play_scss_1 = (0, tslib_1.__importDefault)(require("./play.scss"));
var DATA_IS_PLAYING = 'data-playable-is-playing';
var PlayView = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(PlayView, _super);
    function PlayView(config) {
        var _this = this;
        var callbacks = config.callbacks, textMap = config.textMap, 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.PLAY_CONTROL_LABEL),
            },
        }));
        _this._$playbackControl = (0, getElementByHook_1.default)(_this._$rootElement, 'playback-control');
        _this.setPlayingState(false);
        _this._bindEvents();
        return _this;
    }
    PlayView.prototype._bindEvents = function () {
        this._onButtonClick = this._onButtonClick.bind(this);
        this._$playbackControl.addEventListener('click', this._onButtonClick);
    };
    PlayView.prototype._unbindEvents = function () {
        this._$playbackControl.removeEventListener('click', this._onButtonClick);
    };
    PlayView.prototype._onButtonClick = function () {
        this._$playbackControl.focus();
        this._callbacks.onButtonClick();
    };
    PlayView.prototype.setPlayingState = function (isPlaying) {
        if (isPlaying) {
            this._$playbackControl.classList.remove(this.styleNames.paused);
            this._$playbackControl.setAttribute('aria-label', this._textMap.get(constants_1.TextLabel.PAUSE_CONTROL_LABEL));
        }
        else {
            this._$playbackControl.classList.add(this.styleNames.paused);
            this._$playbackControl.setAttribute('aria-label', this._textMap.get(constants_1.TextLabel.PLAY_CONTROL_LABEL));
        }
        this._$rootElement.setAttribute(DATA_IS_PLAYING, String(isPlaying));
    };
    PlayView.prototype.show = function () {
        this._$rootElement.classList.remove(this.styleNames.hidden);
    };
    PlayView.prototype.hide = function () {
        this._$rootElement.classList.add(this.styleNames.hidden);
    };
    PlayView.prototype.getElement = function () {
        return this._$rootElement;
    };
    PlayView.prototype.destroy = function () {
        this._unbindEvents();
        if (this._$rootElement.parentNode) {
            this._$rootElement.parentNode.removeChild(this._$rootElement);
        }
        this._$playbackControl = null;
        this._$rootElement = null;
    };
    return PlayView;
}(view_1.default));
PlayView.setTheme(play_theme_1.default);
PlayView.extendStyleNames(play_scss_1.default);
exports.default = PlayView;
//# sourceMappingURL=play.view.js.map