playable
Version:
Video player based on HTML5Video
84 lines • 3.76 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 formatTime_1 = (0, tslib_1.__importDefault)(require("../../core/utils/formatTime"));
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 time_theme_1 = (0, tslib_1.__importDefault)(require("./time.theme"));
var time_scss_1 = (0, tslib_1.__importDefault)(require("./time.scss"));
var DATA_DURATION = 'data-playable-duration';
var DATA_CURRENT_TIME = 'data-playable-current-time';
var TimeView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TimeView, _super);
function TimeView(config) {
var _this = this;
var theme = config.theme;
_this = _super.call(this, theme) || this;
_this._initDOM();
return _this;
}
TimeView.prototype._initDOM = function () {
this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.timeTemplate)({ styles: this.styleNames, themeStyles: this.themeStyles }));
this._$currentTime = (0, getElementByHook_1.default)(this._$rootElement, 'current-time-indicator');
this._$durationTime = (0, getElementByHook_1.default)(this._$rootElement, 'duration-time-indicator');
};
TimeView.prototype.setDurationTime = function (duration) {
if (duration !== this._duration) {
this._duration = duration;
this._updateDurationTime();
}
};
TimeView.prototype.setCurrentTime = function (current) {
if (current !== this._current) {
this._current = current;
this._updateCurrentTime();
}
};
TimeView.prototype.setCurrentTimeBackward = function (_isBackward) {
this._isBackward = _isBackward;
this._updateCurrentTime();
};
TimeView.prototype._updateDurationTime = function () {
this._$durationTime.innerHTML = (0, formatTime_1.default)(this._duration);
this._$rootElement.setAttribute(DATA_DURATION, this._duration ? this._duration.toString() : '0');
};
TimeView.prototype._updateCurrentTime = function () {
if (this._isBackward) {
this._$currentTime.innerHTML = (0, formatTime_1.default)(this._current - this._duration);
}
else {
this._$currentTime.innerHTML = (0, formatTime_1.default)(this._current);
}
this._$rootElement.setAttribute(DATA_CURRENT_TIME, this._current ? this._current.toString() : '0');
};
TimeView.prototype.showDuration = function () {
this._$durationTime.classList.remove(this.styleNames.hidden);
};
TimeView.prototype.hideDuration = function () {
this._$durationTime.classList.add(this.styleNames.hidden);
};
TimeView.prototype.show = function () {
this._$rootElement.classList.remove(this.styleNames.hidden);
};
TimeView.prototype.hide = function () {
this._$rootElement.classList.add(this.styleNames.hidden);
};
TimeView.prototype.getElement = function () {
return this._$rootElement;
};
TimeView.prototype.destroy = function () {
if (this._$rootElement.parentNode) {
this._$rootElement.parentNode.removeChild(this._$rootElement);
}
this._$currentTime = null;
this._$durationTime = null;
this._$rootElement = null;
};
return TimeView;
}(view_1.default));
TimeView.setTheme(time_theme_1.default);
TimeView.extendStyleNames(time_scss_1.default);
exports.default = TimeView;
//# sourceMappingURL=time.view.js.map