playable
Version:
Video player based on HTML5Video
71 lines • 3.59 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 preview_thumbnail_scss_1 = (0, tslib_1.__importDefault)(require("./preview-thumbnail.scss"));
var PreviewThumbnailView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PreviewThumbnailView, _super);
function PreviewThumbnailView() {
var _this = _super.call(this) || this;
_this._initDOM();
return _this;
}
PreviewThumbnailView.prototype._initDOM = function () {
this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.thumbnailTemplate)({
styles: this.styleNames,
}));
this._$timeText = (0, getElementByHook_1.default)(this._$rootElement, 'thumb-text-block');
this._$lowQualityThumb = (0, getElementByHook_1.default)(this._$rootElement, 'thumb-low-quality');
this._$highQualityThumb = (0, getElementByHook_1.default)(this._$rootElement, 'thumb-high-quality');
};
PreviewThumbnailView.prototype.getElement = function () {
return this._$rootElement;
};
PreviewThumbnailView.prototype.showAsEmpty = function () {
this._$rootElement.classList.add(this.styleNames.empty);
};
PreviewThumbnailView.prototype.showWithPreview = function () {
this._$rootElement.classList.remove(this.styleNames.empty);
};
PreviewThumbnailView.prototype.clearLowQualityPreview = function () {
this._$lowQualityThumb.style.background = '';
};
PreviewThumbnailView.prototype.clearHighQualityPreview = function () {
this._$highQualityThumb.style.background = '';
};
PreviewThumbnailView.prototype.setLowQualityPreview = function (qualityData) {
this._applyQualityToThumbElement(this._$lowQualityThumb, qualityData);
};
PreviewThumbnailView.prototype.setHighQualityPreview = function (qualityData) {
this._applyQualityToThumbElement(this._$highQualityThumb, qualityData);
};
PreviewThumbnailView.prototype._applyQualityToThumbElement = function (element, quality) {
var viewWidth = element.offsetWidth;
var viewHeight = element.offsetHeight;
var backgroudWidth = viewWidth * quality.framesInSprite.horz;
var backgroundHeight = viewHeight * quality.framesInSprite.vert;
element.style.background = "url('".concat(quality.spriteUrl, "') -").concat(viewWidth *
quality.framePositionInSprite.horz, "px -").concat(viewHeight *
quality.framePositionInSprite
.vert, "px / ").concat(backgroudWidth, "px ").concat(backgroundHeight, "px");
};
PreviewThumbnailView.prototype.setTime = function (time) {
this._$timeText.innerText = time;
};
PreviewThumbnailView.prototype.destroy = function () {
if (this._$rootElement.parentNode) {
this._$rootElement.parentNode.removeChild(this._$rootElement);
}
this._$timeText = null;
this._$lowQualityThumb = null;
this._$highQualityThumb = null;
this._$rootElement = null;
};
return PreviewThumbnailView;
}(view_1.default));
PreviewThumbnailView.extendStyleNames(preview_thumbnail_scss_1.default);
exports.default = PreviewThumbnailView;
//# sourceMappingURL=preview-thumbnail.view.js.map