playable/dist/src/modules/ui/controls/picture-in-picture/picture-in-picture.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 picture_in_picture_theme_1 = (0, tslib_1.__importDefault)(require("./picture-in-picture.theme"));
var picture_in_picture_scss_1 = (0, tslib_1.__importDefault)(require("./picture-in-picture.scss"));
var PictureInPictureView = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(PictureInPictureView, _super);
    function PictureInPictureView(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_PICTURE_IN_PICTURE_LABEL),
            },
        }));
        _this._$togglePictureInPictureControl = (0, getElementByHook_1.default)(_this._$rootElement, 'picture-in-picture-control');
        _this._tooltipReference = tooltipService.createReference(_this._$togglePictureInPictureControl, {
            text: _this._textMap.get(constants_1.TextLabel.ENTER_PICTURE_IN_PICTURE_TOOLTIP),
        });
        _this.setPictureInPictureState(false);
        _this._bindEvents();
        return _this;
    }
    PictureInPictureView.prototype._bindEvents = function () {
        this._onButtonClick = this._onButtonClick.bind(this);
        this._$togglePictureInPictureControl.addEventListener('click', this._onButtonClick);
    };
    PictureInPictureView.prototype._unbindEvents = function () {
        this._$togglePictureInPictureControl.removeEventListener('click', this._onButtonClick);
    };
    PictureInPictureView.prototype._onButtonClick = function () {
        this._callbacks.onButtonClick();
    };
    PictureInPictureView.prototype.setPictureInPictureState = function (isPictureInPicture) {
        if (isPictureInPicture) {
            this._$togglePictureInPictureControl.classList.add(this.styleNames.inPictureInPicture);
            this._$togglePictureInPictureControl.setAttribute('aria-label', this._textMap.get(constants_1.TextLabel.EXIT_PICTURE_IN_PICTURE_LABEL));
            this._tooltipReference.setText(this._textMap.get(constants_1.TextLabel.EXIT_PICTURE_IN_PICTURE_TOOLTIP));
        }
        else {
            this._$togglePictureInPictureControl.classList.remove(this.styleNames.inPictureInPicture);
            this._$togglePictureInPictureControl.setAttribute('aria-label', this._textMap.get(constants_1.TextLabel.ENTER_PICTURE_IN_PICTURE_LABEL));
            this._tooltipReference.setText(this._textMap.get(constants_1.TextLabel.ENTER_PICTURE_IN_PICTURE_TOOLTIP));
        }
    };
    PictureInPictureView.prototype.hide = function () {
        this._$rootElement.classList.add(this.styleNames.hidden);
    };
    PictureInPictureView.prototype.show = function () {
        this._$rootElement.classList.remove(this.styleNames.hidden);
    };
    PictureInPictureView.prototype.getElement = function () {
        return this._$rootElement;
    };
    PictureInPictureView.prototype.destroy = function () {
        this._unbindEvents();
        this._tooltipReference.destroy();
        if (this._$rootElement.parentNode) {
            this._$rootElement.parentNode.removeChild(this._$rootElement);
        }
        this._$togglePictureInPictureControl = null;
        this._$rootElement = null;
    };
    return PictureInPictureView;
}(view_1.default));
PictureInPictureView.setTheme(picture_in_picture_theme_1.default);
PictureInPictureView.extendStyleNames(picture_in_picture_scss_1.default);
exports.default = PictureInPictureView;
//# sourceMappingURL=picture-in-picture.view.js.map