playable/dist/src/modules/ui/controls/progress/progress.view.js

Video player based on HTML5Video

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var constants_1 = require("../../../../constants");
var view_1 = (0, tslib_1.__importDefault)(require("../../core/view"));
var getProgressTimeTooltipPosition_1 = (0, tslib_1.__importDefault)(require("./utils/getProgressTimeTooltipPosition"));
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 toggleElementClass_1 = (0, tslib_1.__importDefault)(require("../../core/toggleElementClass"));
var progress_theme_1 = (0, tslib_1.__importDefault)(require("./progress.theme"));
var progress_scss_1 = (0, tslib_1.__importDefault)(require("./progress.scss"));
var DATA_PLAYED = 'data-playable-played-percent';
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 getSupportedDragEventNames = function () {
    if ('onpointerdown' in window) {
        return {
            mouseDown: 'pointerdown',
            mouseMove: 'pointermove',
            mouseOut: 'pointerout',
            mouseUp: 'pointerup',
        };
    }
    if ('ontouchstart' in window) {
        return {
            mouseDown: 'touchstart',
            mouseMove: 'touchmove',
            mouseOut: 'mouseout',
            mouseUp: 'touchend',
        };
    }
    return {
        mouseDown: 'mousedown',
        mouseMove: 'mousemove',
        mouseOut: 'mouseout',
        mouseUp: 'mouseup',
    };
};
var ProgressView = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(ProgressView, _super);
    function ProgressView(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._dragEvents = getSupportedDragEventNames();
        _this._initDOM();
        _this._bindCallbacks();
        _this._bindEvents();
        _this._setPlayedDOMAttributes(0);
        _this._setBufferedDOMAttributes(0);
        _this.setUsualMode();
        return _this;
    }
    ProgressView.prototype._initDOM = function () {
        this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.progressTemplate)({
            styles: this.styleNames,
            themeStyles: this.themeStyles,
        }));
        this._$played = (0, getElementByHook_1.default)(this._$rootElement, 'progress-played');
        this._$buffered = (0, getElementByHook_1.default)(this._$rootElement, 'progress-buffered');
        this._$seekTo = (0, getElementByHook_1.default)(this._$rootElement, 'progress-seek-to');
        this._$timeIndicators = (0, getElementByHook_1.default)(this._$rootElement, 'progress-time-indicators');
        this._$seekButton = (0, getElementByHook_1.default)(this._$rootElement, 'progress-seek-button');
        this._$syncButton = (0, getElementByHook_1.default)(this._$rootElement, 'progress-sync-button');
        this._syncButtonTooltipReference = this._tooltipService.createReference(this._$syncButton, {
            text: this._textMap.get(constants_1.TextLabel.LIVE_SYNC_TOOLTIP),
        });
        this._$hitbox = (0, getElementByHook_1.default)(this._$rootElement, 'progress-hitbox');
    };
    ProgressView.prototype._bindCallbacks = function () {
        this._setPlayedByDrag = this._setPlayedByDrag.bind(this);
        this._startDragOnMouseDown = this._startDragOnMouseDown.bind(this);
        this._stopDragOnMouseUp = this._stopDragOnMouseUp.bind(this);
        this._startSeekToByMouse = this._startSeekToByMouse.bind(this);
        this._stopSeekToByMouse = this._stopSeekToByMouse.bind(this);
        this._syncWithLive = this._syncWithLive.bind(this);
    };
    ProgressView.prototype._bindEvents = function () {
        this._$seekButton.addEventListener(this._dragEvents.mouseDown, this._startDragOnMouseDown);
        this._$seekButton.addEventListener(this._dragEvents.mouseMove, this._startSeekToByMouse);
        this._$seekButton.addEventListener(this._dragEvents.mouseOut, this._stopSeekToByMouse);
        this._$hitbox.addEventListener(this._dragEvents.mouseDown, this._startDragOnMouseDown);
        this._$hitbox.addEventListener(this._dragEvents.mouseMove, this._startSeekToByMouse);
        this._$hitbox.addEventListener(this._dragEvents.mouseOut, this._stopSeekToByMouse);
        window.addEventListener(this._dragEvents.mouseMove, this._setPlayedByDrag);
        window.addEventListener(this._dragEvents.mouseUp, this._stopDragOnMouseUp);
        this._$syncButton.addEventListener('click', this._syncWithLive);
        this._$syncButton.addEventListener('mouseenter', this._callbacks.onSyncWithLiveMouseEnter);
        this._$syncButton.addEventListener('mouseleave', this._callbacks.onSyncWithLiveMouseLeave);
    };
    ProgressView.prototype._unbindEvents = function () {
        this._$seekButton.removeEventListener(this._dragEvents.mouseDown, this._startDragOnMouseDown);
        this._$seekButton.removeEventListener(this._dragEvents.mouseMove, this._startSeekToByMouse);
        this._$seekButton.removeEventListener(this._dragEvents.mouseOut, this._stopSeekToByMouse);
        this._$hitbox.removeEventListener(this._dragEvents.mouseDown, this._startDragOnMouseDown);
        this._$hitbox.removeEventListener(this._dragEvents.mouseMove, this._startSeekToByMouse);
        this._$hitbox.removeEventListener(this._dragEvents.mouseOut, this._stopSeekToByMouse);
        window.removeEventListener(this._dragEvents.mouseMove, this._setPlayedByDrag);
        window.removeEventListener(this._dragEvents.mouseUp, this._stopDragOnMouseUp);
        this._$syncButton.removeEventListener('click', this._syncWithLive);
        this._$syncButton.removeEventListener('mouseenter', this._callbacks.onSyncWithLiveMouseEnter);
        this._$syncButton.removeEventListener('mouseleave', this._callbacks.onSyncWithLiveMouseLeave);
    };
    ProgressView.prototype._startDragOnMouseDown = function (event) {
        if (event.button > 1) {
            return;
        }
        var percent = getPercentBasedOnXPosition(event, this._$hitbox);
        this._setPlayedDOMAttributes(percent);
        this._callbacks.onChangePlayedPercent(percent);
        this._startDrag();
    };
    ProgressView.prototype._stopDragOnMouseUp = function (event) {
        if (event.button > 1) {
            return;
        }
        this._stopDrag();
    };
    ProgressView.prototype._startSeekToByMouse = function (event) {
        var percent = getPercentBasedOnXPosition(event, this._$hitbox);
        this._setSeekToDOMAttributes(percent);
        this._callbacks.onSeekToByMouseStart(percent);
    };
    ProgressView.prototype._stopSeekToByMouse = function () {
        this._setSeekToDOMAttributes(0);
        this._callbacks.onSeekToByMouseEnd();
    };
    ProgressView.prototype._setPlayedByDrag = function (event) {
        if (this._isDragging) {
            var percent = getPercentBasedOnXPosition(event, this._$hitbox);
            this._setPlayedDOMAttributes(percent);
            this._callbacks.onChangePlayedPercent(percent);
        }
    };
    ProgressView.prototype._startDrag = function () {
        this._isDragging = true;
        this._callbacks.onDragStart();
        this._$rootElement.classList.add(this.styleNames.isDragging);
    };
    ProgressView.prototype._stopDrag = function () {
        if (this._isDragging) {
            this._isDragging = false;
            this._callbacks.onDragEnd();
            this._$rootElement.classList.remove(this.styleNames.isDragging);
        }
    };
    ProgressView.prototype._setSeekToDOMAttributes = function (percent) {
        this._$seekTo.setAttribute('style', "width:".concat(percent, "%;"));
    };
    ProgressView.prototype._setPlayedDOMAttributes = function (percent) {
        this._$rootElement.setAttribute('aria-valuetext', this._textMap.get(constants_1.TextLabel.PROGRESS_CONTROL_VALUE, { percent: percent }));
        this._$rootElement.setAttribute('aria-valuenow', percent.toFixed(2));
        this._$rootElement.setAttribute(DATA_PLAYED, percent.toFixed(2));
        this._setPlayedDOMPosition(percent);
    };
    ProgressView.prototype._setPlayedDOMPosition = function (percent) {
        var scaleValue = percent / 100;
        var translateValue = this._$rootElement.getBoundingClientRect().width * scaleValue;
        this._$played.style.transform = "scaleX(".concat(scaleValue.toFixed(3), ")");
        this._$seekButton.style.transform = "translateX(".concat(translateValue.toFixed(3), "px)");
    };
    ProgressView.prototype._setBufferedDOMAttributes = function (percent) {
        this._$buffered.setAttribute('style', "width:".concat(percent, "%;"));
    };
    ProgressView.prototype._syncWithLive = function () {
        this._callbacks.onSyncWithLiveClick();
    };
    ProgressView.prototype.updateOnResize = function () {
        this._setPlayedDOMPosition(this._currentPlayedPercent);
    };
    ProgressView.prototype.showSyncWithLive = function () {
        this._$syncButton.classList.remove(this.styleNames.hidden);
    };
    ProgressView.prototype.hideSyncWithLive = function () {
        this._$syncButton.classList.add(this.styleNames.hidden);
    };
    ProgressView.prototype.setLiveSyncState = function (isSync) {
        (0, toggleElementClass_1.default)(this._$syncButton, this.styleNames.liveSync, isSync);
        (0, toggleElementClass_1.default)(this._$seekButton, this.styleNames.liveSync, isSync);
        if (isSync) {
            this._syncButtonTooltipReference.disable();
            this._$played.setAttribute('style', "width:100%;");
        }
        else {
            this._syncButtonTooltipReference.enable();
        }
    };
    ProgressView.prototype.showProgressTimeTooltip = function (element, percent) {
        var _this = this;
        this._tooltipService.show({
            element: element,
            position: function (tooltipContainer) {
                return (0, getProgressTimeTooltipPosition_1.default)(percent, _this._$hitbox, tooltipContainer);
            },
        });
    };
    ProgressView.prototype.hideProgressTimeTooltip = function () {
        this._tooltipService.hide();
    };
    ProgressView.prototype.setLiveMode = function () {
        this._$rootElement.classList.add(this.styleNames.inLive);
        this.showSyncWithLive();
    };
    ProgressView.prototype.setUsualMode = function () {
        this._$rootElement.classList.remove(this.styleNames.inLive);
        this.hideSyncWithLive();
    };
    ProgressView.prototype.setPlayed = function (percent) {
        this._currentPlayedPercent = percent;
        this._setPlayedDOMAttributes(percent);
    };
    ProgressView.prototype.setBuffered = function (percent) {
        this._setBufferedDOMAttributes(percent);
    };
    ProgressView.prototype.addTimeIndicator = function (percent) {
        this._$timeIndicators.appendChild((0, htmlToElement_1.default)((0, templates_1.progressTimeIndicatorTemplate)({
            percent: percent,
            styles: this.styleNames,
        })));
    };
    ProgressView.prototype.clearTimeIndicators = function () {
        this._$timeIndicators.innerHTML = '';
    };
    ProgressView.prototype.hide = function () {
        this._$rootElement.classList.add(this.styleNames.hidden);
    };
    ProgressView.prototype.show = function () {
        this._$rootElement.classList.remove(this.styleNames.hidden);
    };
    ProgressView.prototype.getElement = function () {
        return this._$rootElement;
    };
    ProgressView.prototype.destroy = function () {
        this._unbindEvents();
        this._syncButtonTooltipReference.destroy();
        if (this._$rootElement.parentNode) {
            this._$rootElement.parentNode.removeChild(this._$rootElement);
        }
        this._$rootElement = null;
        this._$buffered = null;
        this._$hitbox = null;
        this._$played = null;
        this._$seekTo = null;
        this._$seekButton = null;
        this._$syncButton = null;
        this._$timeIndicators = null;
    };
    return ProgressView;
}(view_1.default));
ProgressView.setTheme(progress_theme_1.default);
ProgressView.extendStyleNames(progress_scss_1.default);
exports.default = ProgressView;
//# sourceMappingURL=progress.view.js.map