@visactor/vrender-components/es/player/continuous-player.js

components library for dp visualization

var __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))((function(resolve, reject) {
        function fulfilled(value) {
            try {
                step(generator.next(value));
            } catch (e) {
                reject(e);
            }
        }
        function rejected(value) {
            try {
                step(generator.throw(value));
            } catch (e) {
                reject(e);
            }
        }
        function step(result) {
            var value;
            result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P((function(resolve) {
                resolve(value);
            }))).then(fulfilled, rejected);
        }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    }));
};

import { vglobal } from "@visactor/vrender-core";

import { BasePlayer } from "./base-player";

import { PlayerEventEnum } from "./type";

import { ControllerEventEnum } from "./controller/constant";

import { loadContinuousPlayerComponent } from "./register";

loadContinuousPlayerComponent();

export class ContinuousPlayer extends BasePlayer {
    constructor(attributes) {
        super(attributes), this._isPlaying = !1, this._startTime = Date.now(), this._initAttributes = () => {
            var _a;
            super._initAttributes(), this._maxIndex = this._data.length, this._slider.setAttribute("max", this._maxIndex), 
            this._isPlaying = !1, this._elapsed = 0, this._interval = null !== (_a = this.attribute.interval) && void 0 !== _a ? _a : 1e3;
            const frames = this._data.length;
            this.attribute.totalDuration && this._data.length ? (this._totalDuration = this.attribute.totalDuration, 
            this._interval = this._totalDuration / (null != frames ? frames : 1)) : (this._totalDuration = this._interval * frames, 
            this._interval = this.attribute.interval);
        }, this._initDataIndex = () => {
            var _a;
            this._dataIndex = null !== (_a = this.attribute.dataIndex) && void 0 !== _a ? _a : this._minIndex;
        }, this._initEvents = () => {
            this.attribute.disableTriggerEvent || (this._controller.addEventListener(ControllerEventEnum.OnPlay, (e => {
                e.stopPropagation(), this.play();
            })), this._controller.addEventListener(ControllerEventEnum.OnPause, (e => {
                e.stopPropagation(), this.pause();
            })), this._controller.addEventListener(ControllerEventEnum.OnForward, (e => {
                e.stopPropagation(), this.forward();
            })), this._controller.addEventListener(ControllerEventEnum.OnBackward, (e => {
                e.stopPropagation(), this.backward();
            })), this._slider.addEventListener("change", (e => {
                var _a;
                e.stopPropagation();
                const value = null === (_a = e.detail) || void 0 === _a ? void 0 : _a.value, progress = value / this._maxIndex;
                this._elapsed = progress * this._totalDuration, this._startTime = Date.now() - this._elapsed, 
                this._dispatchChange(value);
            })));
        }, this._getSliderValue = () => {
            const progress = this._elapsed / this._totalDuration;
            return Math.min(progress * this._maxIndex, this._maxIndex);
        }, this._updateSlider = () => {
            const value = this._getSliderValue();
            this._dataIndex = Math.floor(value), this._slider.setValue(Math.min(value, this._maxIndex)), 
            this._dispatchChange(Math.floor(value));
        }, this._dispatchChange = value => {
            const index = Math.floor(value);
            index !== this._activeIndex && (this._dataIndex = index, this._activeIndex = index, 
            index !== this._maxIndex && this.dispatchCustomEvent(PlayerEventEnum.change));
        }, this.play = () => __awaiter(this, void 0, void 0, (function*() {
            this._isPlaying || (this._controller.togglePause(), this._isPlaying = !0, this._elapsed >= this._totalDuration && (this._elapsed = 0), 
            this._startTime = Date.now() - this._elapsed, this.dispatchCustomEvent(PlayerEventEnum.play), 
            this._rafId = vglobal.getRequestAnimationFrame()(this._play.bind(this)));
        })), this._play = () => {
            this._elapsed = Date.now() - this._startTime;
            const value = this._getSliderValue();
            this._updateSlider(), value >= this._maxIndex ? this._playEnd() : this._rafId = vglobal.getRequestAnimationFrame()(this._play.bind(this));
        }, this._playEnd = () => {
            this._isPlaying = !1, vglobal.getCancelAnimationFrame()(this._rafId), this._controller.togglePlay(), 
            this.dispatchCustomEvent(PlayerEventEnum.end);
        }, this.pause = () => {
            this._isPlaying && (this._isPlaying = !1, this._elapsed = Date.now() - this._startTime, 
            vglobal.getCancelAnimationFrame()(this._rafId), this._controller.togglePlay(), this.dispatchCustomEvent(PlayerEventEnum.pause));
        }, this.backward = () => {
            const now = Date.now(), interval = 1 * this._interval, elapsed = this._elapsed - interval;
            elapsed <= 0 ? (this._elapsed = 0, this._startTime = now) : (this._elapsed = elapsed, 
            this._startTime = this._startTime + this._interval), this._updateSlider(), this.dispatchCustomEvent(PlayerEventEnum.backward);
        }, this.forward = () => {
            const now = Date.now(), interval = 1 * this._interval, elapsed = this._elapsed + interval;
            elapsed >= this._totalDuration ? (this._startTime = now - this._totalDuration, this._elapsed = this._totalDuration) : (this._startTime = this._startTime - interval, 
            this._elapsed = elapsed), this._updateSlider(), this.dispatchCustomEvent(PlayerEventEnum.forward);
        }, this._initAttributes(), this._initDataIndex(), this._initEvents();
    }
    dispatchCustomEvent(eventType) {
        super.dispatchCustomEvent(eventType, this._dataIndex);
    }
    render() {
        super.render();
    }
}
//# sourceMappingURL=continuous-player.js.map