playable/dist/src/modules/ui/preview-full-size/preview-full-size.view.js

Video player based on HTML5Video

"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 preview_full_size_scss_1 = (0, tslib_1.__importDefault)(require("./preview-full-size.scss"));
var PreviewFullSizeView = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(PreviewFullSizeView, _super);
    function PreviewFullSizeView() {
        var _this = _super.call(this) || this;
        _this._initDOM();
        return _this;
    }
    PreviewFullSizeView.prototype._initDOM = function () {
        this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.previewTemplate)({
            styles: this.styleNames,
        }));
        this._$frame = (0, getElementByHook_1.default)(this._$rootElement, 'preview-full-size-frame');
    };
    PreviewFullSizeView.prototype.getElement = function () {
        return this._$rootElement;
    };
    PreviewFullSizeView.prototype.setPreview = function (data) {
        this._applyFrame(data);
    };
    PreviewFullSizeView.prototype._applyFrame = function (frameData) {
        var viewWidth = this._$frame.offsetWidth;
        var viewHeight = this._$frame.offsetHeight;
        var backgroudWidth = viewWidth * frameData.framesInSprite.horz;
        var backgroundHeight = viewHeight * frameData.framesInSprite.vert;
        this._$frame.style.background = "url('".concat(frameData.spriteUrl, "') -").concat(viewWidth * frameData.framePositionInSprite.horz, "px -").concat(viewHeight *
            frameData.framePositionInSprite
                .vert, "px / ").concat(backgroudWidth, "px ").concat(backgroundHeight, "px");
    };
    PreviewFullSizeView.prototype.clear = function () {
        this._$frame.style.background = '';
    };
    PreviewFullSizeView.prototype.show = function () {
        this._$rootElement.classList.remove(this.styleNames.hidden);
    };
    PreviewFullSizeView.prototype.hide = function () {
        this._$rootElement.classList.add(this.styleNames.hidden);
    };
    PreviewFullSizeView.prototype.destroy = function () {
        if (this._$rootElement.parentNode) {
            this._$rootElement.parentNode.removeChild(this._$rootElement);
        }
        this._$frame = null;
        this._$rootElement = null;
    };
    return PreviewFullSizeView;
}(view_1.default));
PreviewFullSizeView.extendStyleNames(preview_full_size_scss_1.default);
exports.default = PreviewFullSizeView;
//# sourceMappingURL=preview-full-size.view.js.map