playable
Version:
Video player based on HTML5Video
195 lines • 8.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var constants_1 = require("../../../../constants");
var templates_1 = require("./templates");
var view_1 = (0, tslib_1.__importDefault)(require("../../core/view"));
var htmlToElement_1 = (0, tslib_1.__importDefault)(require("../../core/htmlToElement"));
var getElementByHook_1 = (0, tslib_1.__importDefault)(require("../../core/getElementByHook"));
var volume_theme_1 = (0, tslib_1.__importDefault)(require("./volume.theme"));
var volume_scss_1 = (0, tslib_1.__importDefault)(require("./volume.scss"));
var DATA_IS_MUTED = 'data-playable-is-muted';
var DATA_VOLUME = 'data-playable-volume-percent';
var MAX_VOLUME_ICON_RANGE = 50;
var getPercentBasedOnXPosition = function (event, element) {
var boundingRect = element.getBoundingClientRect();
var positionX = event.clientX;
if (positionX < boundingRect.left) {
return 0;
}
if (positionX > boundingRect.left + boundingRect.width) {
return 100;
}
return ((event.clientX - boundingRect.left) / boundingRect.width) * 100;
};
var VolumeView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(VolumeView, _super);
function VolumeView(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._tooltipService = tooltipService;
_this._bindCallbacks();
_this._initDOM();
_this._bindEvents();
return _this;
}
VolumeView.prototype._initDOM = function () {
this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.controlTemplate)({
styles: this.styleNames,
themeStyles: this.themeStyles,
texts: {
muteLabel: this._textMap.get(constants_1.TextLabel.MUTE_CONTROL_LABEL),
volumeLabel: this._textMap.get(constants_1.TextLabel.VOLUME_CONTROL_LABEL),
},
}));
this._$muteToggle = (0, getElementByHook_1.default)(this._$rootElement, 'mute-button');
this._$volumeContainer = (0, getElementByHook_1.default)(this._$rootElement, 'volume-input-block');
this._$hitbox = (0, getElementByHook_1.default)(this._$rootElement, 'volume-hitbox');
this._$volume = (0, getElementByHook_1.default)(this._$rootElement, 'volume-input');
this._muteToggleTooltipReference = this._tooltipService.createReference(this._$muteToggle, {
text: this._textMap.get(constants_1.TextLabel.MUTE_CONTROL_TOOLTIP),
});
};
VolumeView.prototype._bindCallbacks = function () {
this._onButtonClick = this._onButtonClick.bind(this);
this._startDragOnMouseDown = this._startDragOnMouseDown.bind(this);
this._stopDragOnMouseUp = this._stopDragOnMouseUp.bind(this);
this._setVolumeByWheel = this._setVolumeByWheel.bind(this);
this._setVolumeByClick = this._setVolumeByClick.bind(this);
this._setVolumeByDrag = this._setVolumeByDrag.bind(this);
};
VolumeView.prototype._bindEvents = function () {
this._$hitbox.addEventListener('wheel', this._setVolumeByWheel);
this._$hitbox.addEventListener('mousedown', this._startDragOnMouseDown);
window.addEventListener('mousemove', this._setVolumeByDrag);
window.addEventListener('mouseup', this._stopDragOnMouseUp);
this._$muteToggle.addEventListener('click', this._onButtonClick);
};
VolumeView.prototype._unbindEvents = function () {
this._$hitbox.removeEventListener('wheel', this._setVolumeByWheel);
this._$hitbox.removeEventListener('mousedown', this._startDragOnMouseDown);
window.removeEventListener('mousemove', this._setVolumeByDrag);
window.removeEventListener('mouseup', this._stopDragOnMouseUp);
this._$muteToggle.removeEventListener('click', this._onButtonClick);
};
VolumeView.prototype._startDragOnMouseDown = function (event) {
if (event.button > 1) {
return;
}
this._setVolumeByClick(event);
this._startDrag();
};
VolumeView.prototype._stopDragOnMouseUp = function (event) {
if (event.button > 1) {
return;
}
this._stopDrag();
};
VolumeView.prototype._setVolumeByClick = function (event) {
this._$volumeContainer.focus();
var percent = getPercentBasedOnXPosition(event, this._$hitbox);
this._callbacks.onVolumeLevelChangeFromInput(percent);
};
VolumeView.prototype._setVolumeByDrag = function (event) {
var percent = getPercentBasedOnXPosition(event, this._$hitbox);
if (this._isDragging) {
this._callbacks.onVolumeLevelChangeFromInput(percent);
}
};
VolumeView.prototype._setVolumeByWheel = function (e) {
e.preventDefault();
var value = e.deltaX || e.deltaY * -1;
if (!value) {
return;
}
this._callbacks.onVolumeLevelChangeFromWheel(value);
};
VolumeView.prototype._startDrag = function () {
this._isDragging = true;
this._$rootElement.classList.add(this.styleNames.isDragging);
this._callbacks.onDragStart();
};
VolumeView.prototype._stopDrag = function () {
if (this._isDragging) {
this._isDragging = false;
this._$rootElement.classList.remove(this.styleNames.isDragging);
this._callbacks.onDragEnd();
}
};
VolumeView.prototype._setVolumeDOMAttributes = function (percent) {
this._$volumeContainer.setAttribute('value', String(percent));
this._$volumeContainer.setAttribute('aria-valuetext', this._textMap.get(constants_1.TextLabel.VOLUME_CONTROL_VALUE, { percent: percent }));
this._$volumeContainer.setAttribute('aria-valuenow', String(percent));
this._$volume.setAttribute('style', "width:".concat(percent, "%;"));
this._$rootElement.setAttribute(DATA_VOLUME, String(percent));
this._$muteToggle.classList.remove(this.styleNames.volume0);
this._$muteToggle.classList.remove(this.styleNames.volume50);
this._$muteToggle.classList.remove(this.styleNames.volume100);
if (percent >= MAX_VOLUME_ICON_RANGE) {
this._$muteToggle.classList.add(this.styleNames.volume100);
}
else if (percent > 0) {
this._$muteToggle.classList.add(this.styleNames.volume50);
}
else {
this._$muteToggle.classList.add(this.styleNames.volume0);
}
};
VolumeView.prototype._onButtonClick = function () {
this._$muteToggle.focus();
this._callbacks.onToggleMuteClick();
};
VolumeView.prototype.setVolume = function (volume) {
this._setVolumeDOMAttributes(volume);
};
VolumeView.prototype.setMute = function (isMuted) {
this._setMuteDOMAttributes(isMuted);
};
VolumeView.prototype._setMuteDOMAttributes = function (isMuted) {
if (isMuted) {
this._$muteToggle.classList.add(this.styleNames.muted);
}
else {
this._$muteToggle.classList.remove(this.styleNames.muted);
}
this._$muteToggle.setAttribute('aria-label', isMuted
? this._textMap.get(constants_1.TextLabel.UNMUTE_CONTROL_LABEL)
: this._textMap.get(constants_1.TextLabel.MUTE_CONTROL_LABEL));
this._muteToggleTooltipReference.setText(isMuted
? this._textMap.get(constants_1.TextLabel.UNMUTE_CONTROL_TOOLTIP)
: this._textMap.get(constants_1.TextLabel.MUTE_CONTROL_TOOLTIP));
this._$rootElement.setAttribute(DATA_IS_MUTED, String(isMuted));
};
VolumeView.prototype.show = function () {
this._$rootElement.classList.remove(this.styleNames.hidden);
};
VolumeView.prototype.hide = function () {
this._$rootElement.classList.add(this.styleNames.hidden);
};
VolumeView.prototype.getElement = function () {
return this._$rootElement;
};
VolumeView.prototype.getButtonElement = function () {
return this._$muteToggle;
};
VolumeView.prototype.getInputElement = function () {
return this._$volumeContainer;
};
VolumeView.prototype.destroy = function () {
this._unbindEvents();
this._muteToggleTooltipReference.destroy();
if (this._$rootElement.parentNode) {
this._$rootElement.parentNode.removeChild(this._$rootElement);
}
this._$muteToggle = null;
this._$rootElement = null;
};
return VolumeView;
}(view_1.default));
VolumeView.setTheme(volume_theme_1.default);
VolumeView.extendStyleNames(volume_scss_1.default);
exports.default = VolumeView;
//# sourceMappingURL=volume.view.js.map