playable/dist/src/modules/root-container/root-container.view.js

Video player based on HTML5Video

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var htmlToElement_1 = (0, tslib_1.__importDefault)(require("../ui/core/htmlToElement"));
var templates_1 = require("./templates");
var view_1 = (0, tslib_1.__importDefault)(require("../ui/core/view"));
var root_container_scss_1 = (0, tslib_1.__importDefault)(require("./root-container.scss"));
var RootContainerView = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(RootContainerView, _super);
    function RootContainerView(config) {
        var _this = _super.call(this) || this;
        var width = config.width, height = config.height, fillAllSpace = config.fillAllSpace, callbacks = config.callbacks, rtl = config.rtl;
        _this._callbacks = callbacks;
        _this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.containerTemplate)({ styles: _this.styleNames }));
        _this.setFillAllSpaceFlag(fillAllSpace);
        _this.setRtl(rtl);
        _this.setWidth(width);
        _this.setHeight(height);
        _this._bindEvents();
        return _this;
    }
    RootContainerView.prototype._bindEvents = function () {
        this._$rootElement.addEventListener('mouseenter', this._callbacks.onMouseEnter);
        this._$rootElement.addEventListener('mousemove', this._callbacks.onMouseMove);
        this._$rootElement.addEventListener('mouseleave', this._callbacks.onMouseLeave);
    };
    RootContainerView.prototype._unbindEvents = function () {
        this._$rootElement.removeEventListener('mouseenter', this._callbacks.onMouseEnter);
        this._$rootElement.removeEventListener('mousemove', this._callbacks.onMouseMove);
        this._$rootElement.removeEventListener('mouseleave', this._callbacks.onMouseLeave);
    };
    RootContainerView.prototype.setWidth = function (width) {
        if (!width) {
            return;
        }
        var widthStyle = "".concat(width, "px");
        this._$rootElement.style.width = widthStyle;
        this._$rootElement.style.minWidth = widthStyle;
    };
    RootContainerView.prototype.setHeight = function (height) {
        if (!height) {
            return;
        }
        var heightStyle = "".concat(height, "px");
        this._$rootElement.style.height = heightStyle;
        this._$rootElement.style.minHeight = heightStyle;
    };
    RootContainerView.prototype.getWidth = function () {
        return this._$rootElement.offsetWidth;
    };
    RootContainerView.prototype.getHeight = function () {
        return this._$rootElement.offsetHeight;
    };
    RootContainerView.prototype.show = function () {
        this._$rootElement.classList.remove(this.styleNames.hidden);
    };
    RootContainerView.prototype.hide = function () {
        this._$rootElement.classList.add(this.styleNames.hidden);
    };
    RootContainerView.prototype.appendComponentElement = function (element) {
        this._$rootElement.appendChild(element);
    };
    RootContainerView.prototype.getElement = function () {
        return this._$rootElement;
    };
    RootContainerView.prototype.setFullScreenState = function (isFullScreen) {
        if (isFullScreen) {
            this._$rootElement.setAttribute('data-playable-in-full-screen', 'true');
            this._$rootElement.classList.add(this.styleNames.fullScreen);
        }
        else {
            this._$rootElement.setAttribute('data-playable-in-full-screen', 'false');
            this._$rootElement.classList.remove(this.styleNames.fullScreen);
        }
    };
    RootContainerView.prototype.setFillAllSpaceFlag = function (isFillAllSpace) {
        if (isFillAllSpace === void 0) { isFillAllSpace = false; }
        if (isFillAllSpace) {
            this._$rootElement.classList.add(this.styleNames.fillAllSpace);
        }
        else {
            this._$rootElement.classList.remove(this.styleNames.fillAllSpace);
        }
    };
    RootContainerView.prototype.setRtl = function (rtl) {
        this._$rootElement.setAttribute('data-playable-dir', rtl ? 'rtl' : 'ltr');
    };
    RootContainerView.prototype.destroy = function () {
        this._unbindEvents();
        if (this._$rootElement.parentNode) {
            this._$rootElement.parentNode.removeChild(this._$rootElement);
        }
        this._$rootElement = null;
    };
    return RootContainerView;
}(view_1.default));
RootContainerView.extendStyleNames(root_container_scss_1.default);
exports.default = RootContainerView;
//# sourceMappingURL=root-container.view.js.map