wavesurfer.js 7.0.0-alpha.2 → 7.0.0-alpha.21

package/dist/plugins/regions.js

@@ -0,0 +1,231 @@
+import BasePlugin from '../base-plugin.js';
+const MIN_WIDTH = 10;
+const defaultOptions = {
+    dragSelection: true,
+    draggable: true,
+    resizable: true,
+};
+const style = (element, styles) => {
+    for (const key in styles) {
+        element.style[key] = styles[key] || '';
+    }
+};
+const el = (tagName, css) => {
+    const element = document.createElement(tagName);
+    style(element, css);
+    return element;
+};
+class RegionsPlugin extends BasePlugin {
+    dragStart = NaN;
+    regionsContainer;
+    regions = [];
+    createdRegion = null;
+    modifiedRegion = null;
+    isResizingLeft = false;
+    isMoving = false;
+    /** Create an instance of RegionsPlugin */
+    constructor(params, options) {
+        super(params, options);
+        this.options = Object.assign({}, defaultOptions, options);
+        this.regionsContainer = this.initRegionsContainer();
+        this.subscriptions.push(this.wavesurfer.once('decode', () => {
+            this.wrapper.appendChild(this.regionsContainer);
+        }));
+        this.wrapper.addEventListener('mousedown', this.handleMouseDown);
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    }
+    /** Unmount */
+    destroy() {
+        this.wrapper.removeEventListener('mousedown', this.handleMouseDown);
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp, true);
+        this.regionsContainer.remove();
+        super.destroy();
+    }
+    initRegionsContainer() {
+        return el('div', {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            zIndex: '3',
+            pointerEvents: 'none',
+        });
+    }
+    handleMouseDown = (e) => {
+        if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
+            this.dragStart = e.clientX - this.wrapper.getBoundingClientRect().left;
+        }
+    };
+    handleMouseMove = (e) => {
+        const box = this.wrapper.getBoundingClientRect();
+        const { width } = box;
+        const dragEnd = e.clientX - box.left;
+        if (this.options.draggable && this.modifiedRegion && this.isMoving) {
+            this.moveRegion(this.modifiedRegion, (dragEnd - this.dragStart) / width);
+            this.dragStart = dragEnd;
+            return;
+        }
+        if (this.options.resizable && this.modifiedRegion) {
+            this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd / width : undefined, this.isResizingLeft ? undefined : dragEnd / width);
+            return;
+        }
+        if (this.options.dragSelection && !isNaN(this.dragStart)) {
+            const dragEnd = e.clientX - this.regionsContainer.getBoundingClientRect().left;
+            if (dragEnd - this.dragStart >= MIN_WIDTH) {
+                if (!this.createdRegion) {
+                    this.wrapper.style.pointerEvents = 'none';
+                    this.createdRegion = this.createRegion(this.dragStart / width, dragEnd / width);
+                }
+                else {
+                    this.updateRegion(this.createdRegion, this.dragStart / width, dragEnd / width);
+                }
+            }
+        }
+    };
+    handleMouseUp = () => {
+        if (this.createdRegion) {
+            this.addRegion(this.createdRegion);
+            this.createdRegion = null;
+        }
+        this.modifiedRegion = null;
+        this.isMoving = false;
+        this.dragStart = NaN;
+        this.wrapper.style.pointerEvents = '';
+    };
+    createRegionElement(start, end, title = '') {
+        const noWidth = start === end;
+        const div = el('div', {
+            position: 'absolute',
+            left: `${start * 100}%`,
+            width: `${(end - start) * 100}%`,
+            height: '100%',
+            backgroundColor: noWidth ? '' : 'rgba(0, 0, 0, 0.1)',
+            borderRadius: '2px',
+            boxSizing: 'border-box',
+            borderLeft: noWidth ? '2px solid rgba(0, 0, 0, 0.5)' : '',
+            transition: 'background-color 0.2s ease',
+            cursor: this.options.draggable ? 'move' : '',
+            pointerEvents: 'all',
+            whiteSpace: noWidth ? 'nowrap' : '',
+            padding: '0.2em',
+        });
+        div.textContent = title;
+        const leftHandle = el('div', {
+            position: 'absolute',
+            left: '0',
+            top: '0',
+            width: '6px',
+            height: '100%',
+            cursor: this.options.resizable ? 'ew-resize' : '',
+            pointerEvents: 'all',
+            borderLeft: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
+            borderRadius: '2px 0 0 2px',
+        });
+        div.appendChild(leftHandle);
+        const rightHandle = leftHandle.cloneNode();
+        style(rightHandle, {
+            left: '',
+            right: '0',
+            borderLeft: '',
+            borderRight: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
+            borderRadius: '0 2px 2px 0',
+        });
+        div.appendChild(rightHandle);
+        leftHandle.addEventListener('mousedown', (e) => {
+            if (!this.options.resizable)
+                return;
+            e.stopPropagation();
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
+            this.isResizingLeft = true;
+            this.isMoving = false;
+        });
+        rightHandle.addEventListener('mousedown', (e) => {
+            if (!this.options.resizable)
+                return;
+            e.stopPropagation();
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
+            this.isResizingLeft = false;
+            this.isMoving = false;
+        });
+        div.addEventListener('mousedown', () => {
+            if (!this.options.draggable)
+                return;
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
+            this.isMoving = true;
+        });
+        div.addEventListener('click', () => {
+            const region = this.regions.find((r) => r.element === div);
+            if (region) {
+                this.emit('region-clicked', { region });
+            }
+        });
+        this.regionsContainer.appendChild(div);
+        // Check that the label doesn't overlap with other labels
+        // If it does, push it down
+        const labelLeft = div.getBoundingClientRect().left;
+        const labelWidth = div.scrollWidth;
+        const overlap = this.regions
+            .filter((reg) => {
+            const { left } = reg.element.getBoundingClientRect();
+            const width = reg.element.scrollWidth;
+            return labelLeft < left + width && left < labelLeft + labelWidth;
+        })
+            .map((reg) => parseFloat(reg.element.style.paddingTop))
+            .reduce((sum, val) => sum + val, 0);
+        if (overlap > 0) {
+            div.style.paddingTop = `${overlap + 1}em`;
+        }
+        return div;
+    }
+    createRegion(start, end, title = '') {
+        const duration = this.wavesurfer.getDuration();
+        return {
+            element: this.createRegionElement(start, end, title),
+            start,
+            end,
+            startTime: start * duration,
+            endTime: end * duration,
+            title,
+        };
+    }
+    addRegion(region) {
+        this.regions.push(region);
+        this.emit('region-created', { region });
+    }
+    updateRegion(region, start, end) {
+        if (start != null) {
+            region.start = start;
+            region.element.style.left = `${region.start * 100}%`;
+            region.element.style.width = `${(region.end - region.start) * 100}%`;
+            region.startTime = start * this.wavesurfer.getDuration();
+        }
+        if (end != null) {
+            region.end = end;
+            region.element.style.width = `${(region.end - region.start) * 100}%`;
+            region.endTime = end * this.wavesurfer.getDuration();
+        }
+        this.emit('region-updated', { region });
+    }
+    moveRegion(region, delta) {
+        this.updateRegion(region, region.start + delta, region.end + delta);
+    }
+    /** Create a region at a given start and end time, with an optional title */
+    add(startTime, endTime, title = '', color = '') {
+        const duration = this.wavesurfer.getDuration();
+        const start = startTime / duration;
+        const end = endTime / duration;
+        const region = this.createRegion(start, end, title);
+        this.addRegion(region);
+        if (color)
+            this.setRegionColor(region, color);
+        return region;
+    }
+    /** Set the background color of a region */
+    setRegionColor(region, color) {
+        region.element.style[region.startTime === region.endTime ? 'borderColor' : 'backgroundColor'] = color;
+    }
+}
+export default RegionsPlugin;

package/dist/plugins/timeline.d.ts

@@ -0,0 +1,36 @@
+import BasePlugin from '../base-plugin.js';
+import type { WaveSurferPluginParams } from '../index.js';
+export type TimelinePluginOptions = {
+    /** The height of the timeline in pixels, defaults to 20 */
+    height?: number;
+    /** HTML container for the timeline, defaults to wavesufer's container */
+    container?: HTMLElement;
+    /** The duration of the timeline in seconds, defaults to wavesurfer's duration */
+    duration?: number;
+    /** Interval between ticks in seconds */
+    timeInterval?: number;
+    /** Interval between numeric labels */
+    primaryLabelInterval?: number;
+    /** Interval between secondary numeric labels */
+    secondaryLabelInterval?: number;
+};
+declare const defaultOptions: {
+    height: number;
+};
+export type TimelinePluginEvents = {
+    ready: void;
+};
+declare class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOptions> {
+    private timelineWrapper;
+    protected options: TimelinePluginOptions & typeof defaultOptions;
+    constructor(params: WaveSurferPluginParams, options: TimelinePluginOptions);
+    /** Unmount */
+    destroy(): void;
+    private initTimelineWrapper;
+    private formatTime;
+    private defaultTimeInterval;
+    defaultPrimaryLabelInterval(pxPerSec: number): number;
+    defaultSecondaryLabelInterval(pxPerSec: number): number;
+    private initTimeline;
+}
+export default TimelinePlugin;

package/dist/plugins/timeline.js

@@ -0,0 +1,125 @@
+import BasePlugin from '../base-plugin.js';
+const defaultOptions = {
+    height: 20,
+};
+class TimelinePlugin extends BasePlugin {
+    timelineWrapper;
+    options;
+    constructor(params, options) {
+        super(params, options);
+        this.options = Object.assign({}, defaultOptions, options);
+        this.container = this.options.container ?? this.wrapper;
+        this.timelineWrapper = this.initTimelineWrapper();
+        this.container.appendChild(this.timelineWrapper);
+        if (this.options.duration) {
+            this.initTimeline(this.options.duration);
+        }
+        else {
+            this.subscriptions.push(this.wavesurfer.on('decode', ({ duration }) => {
+                this.initTimeline(duration);
+            }));
+        }
+    }
+    /** Unmount */
+    destroy() {
+        this.timelineWrapper.remove();
+        super.destroy();
+    }
+    initTimelineWrapper() {
+        return document.createElement('div');
+    }
+    formatTime(seconds) {
+        if (seconds / 60 > 1) {
+            // calculate minutes and seconds from seconds count
+            const minutes = Math.round(seconds / 60);
+            seconds = Math.round(seconds % 60);
+            const paddedSeconds = `${seconds < 10 ? '0' : ''}${seconds}`;
+            return `${minutes}:${paddedSeconds}`;
+        }
+        const rounded = Math.round(seconds * 1000) / 1000;
+        return `${rounded}`;
+    }
+    // Return how many seconds should be between each notch
+    defaultTimeInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 1;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 15;
+        }
+        return Math.ceil(0.5 / pxPerSec) * 60;
+    }
+    // Return the cadence of notches that get labels in the primary color.
+    defaultPrimaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 10;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 6;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 4;
+        }
+        return 4;
+    }
+    // Return the cadence of notches that get labels in the secondary color.
+    defaultSecondaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 2;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 2;
+        }
+        return 2;
+    }
+    initTimeline(duration) {
+        const width = Math.round(this.timelineWrapper.scrollWidth * devicePixelRatio);
+        const pxPerSec = width / duration;
+        const timeInterval = this.options.timeInterval ?? this.defaultTimeInterval(pxPerSec);
+        const primaryLabelInterval = this.options.primaryLabelInterval ?? this.defaultPrimaryLabelInterval(pxPerSec);
+        const secondaryLabelInterval = this.options.secondaryLabelInterval ?? this.defaultSecondaryLabelInterval(pxPerSec);
+        const timeline = document.createElement('div');
+        timeline.setAttribute('style', `
+      height: ${this.options.height}px;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      font-size: ${this.options.height / 2}px;
+      white-space: nowrap;
+    `);
+        const notchEl = document.createElement('div');
+        notchEl.setAttribute('style', `
+      width: 1px;
+      height: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      overflow: visible;
+      border-left: 1px solid currentColor;
+      opacity: 0.25;
+    `);
+        for (let i = 0; i < duration; i += timeInterval) {
+            const notch = notchEl.cloneNode();
+            const isPrimary = i % primaryLabelInterval === 0;
+            const isSecondary = i % secondaryLabelInterval === 0;
+            if (isPrimary || isSecondary) {
+                notch.style.height = '100%';
+                notch.style.textIndent = '3px';
+                notch.textContent = this.formatTime(i);
+                if (isPrimary)
+                    notch.style.opacity = '1';
+            }
+            timeline.appendChild(notch);
+        }
+        this.timelineWrapper.appendChild(timeline);
+        this.emit('ready');
+    }
+}
+export default TimelinePlugin;

package/dist/renderer.d.ts

@@ -4,10 +4,14 @@ type RendererOptions = {
     height: number;
     waveColor: string;
     progressColor: string;
+    cursorColor?: string;
+    cursorWidth: number;
     minPxPerSec: number;
+    fillParent: boolean;
     barWidth?: number;
     barGap?: number;
     barRadius?: number;
+    noScrollbar?: boolean;
 };
 type RendererEvents = {
     click: {
@@ -17,18 +21,20 @@ type RendererEvents = {
 declare class Renderer extends EventEmitter<RendererEvents> {
     private options;
     private container;
-    private shadowRoot;
-    private mainCanvas;
-    private progressCanvas;
-    private cursor;
-    private ctx;
+    private scrollContainer;
+    private wrapper;
+    private canvasWrapper;
+    private progressWrapper;
+    private timeout;
+    private isScrolling;
     constructor(options: RendererOptions);
+    getContainer(): HTMLElement;
+    getWrapper(): HTMLElement;
     destroy(): void;
-    private renderLinePeaks;
-    private renderBarPeaks;
-    render(channelData: Float32Array[], duration: number, minPxPerSec?: number): void;
-    private createProgressMask;
+    private delay;
+    private renderPeaks;
+    render(audioData: AudioBuffer): void;
+    zoom(audioData: AudioBuffer, minPxPerSec: number): void;
     renderProgress(progress: number, autoCenter?: boolean): void;
-    getContainer(): HTMLElement;
 }
 export default Renderer;

package/dist/renderer.js

@@ -0,0 +1,239 @@
+import EventEmitter from './event-emitter.js';
+class Renderer extends EventEmitter {
+    options;
+    container;
+    scrollContainer;
+    wrapper;
+    canvasWrapper;
+    progressWrapper;
+    timeout = null;
+    isScrolling = false;
+    constructor(options) {
+        super();
+        this.options = options;
+        let container = null;
+        if (typeof this.options.container === 'string') {
+            container = document.querySelector(this.options.container);
+        }
+        else if (this.options.container instanceof HTMLElement) {
+            container = this.options.container;
+        }
+        if (!container) {
+            throw new Error('Container not found');
+        }
+        const div = document.createElement('div');
+        const shadow = div.attachShadow({ mode: 'open' });
+        shadow.innerHTML = `
+      <style>
+        :host {
+          user-select: none;
+        }
+        :host .scroll {
+          overflow-x: auto;
+          overflow-y: hidden;
+          width: 100%;
+          position: relative;
+          ${this.options.noScrollbar ? 'scrollbar-color: transparent;' : ''}
+        }
+        :host ::-webkit-scrollbar {
+          display: ${this.options.noScrollbar ? 'none' : 'auto'};
+        }
+        :host .wrapper {
+          position: relative;
+          min-width: 100%;
+          z-index: 2;
+        }
+        :host .canvases {
+          position: relative;
+          height: ${this.options.height}px;
+        }
+        :host canvas {
+          display: block;
+          position: absolute;
+          top: 0;
+          height: ${this.options.height}px;
+          image-rendering: pixelated;
+        }
+        :host .progress {
+          pointer-events: none;
+          position: absolute;
+          z-index: 2;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: ${this.options.height}px;
+          overflow: hidden;
+          box-sizing: border-box;
+          border-right-style: solid;
+          border-right-width: ${this.options.cursorWidth}px;
+          border-right-color: ${this.options.cursorColor || this.options.progressColor};
+        }
+      </style>
+
+      <div class="scroll">
+        <div class="wrapper">
+          <div class="canvases"></div>
+          <div class="progress"></div>
+        </div>
+      </div>
+    `;
+        this.container = div;
+        this.scrollContainer = shadow.querySelector('.scroll');
+        this.wrapper = shadow.querySelector('.wrapper');
+        this.canvasWrapper = shadow.querySelector('.canvases');
+        this.progressWrapper = shadow.querySelector('.progress');
+        container.appendChild(div);
+        this.wrapper.addEventListener('click', (e) => {
+            const rect = this.wrapper.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const relativeX = x / rect.width;
+            this.emit('click', { relativeX });
+        });
+    }
+    getContainer() {
+        return this.scrollContainer;
+    }
+    getWrapper() {
+        return this.wrapper;
+    }
+    destroy() {
+        this.container.remove();
+    }
+    delay(fn, delayMs = 10) {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+        }
+        return new Promise((resolve) => {
+            this.timeout = setTimeout(() => {
+                resolve(fn());
+            }, delayMs);
+        });
+    }
+    async renderPeaks(channelData, width, height, pixelRatio) {
+        const barWidth = this.options.barWidth != null ? this.options.barWidth * pixelRatio : 1;
+        const barGap = this.options.barGap != null ? this.options.barGap * pixelRatio : this.options.barWidth ? barWidth / 2 : 0;
+        const barRadius = this.options.barRadius ?? 0;
+        const leftChannel = channelData[0];
+        const len = leftChannel.length;
+        const barCount = Math.floor(width / (barWidth + barGap));
+        const barIndexScale = barCount / len;
+        const halfHeight = height / 2;
+        const isMono = channelData.length === 1;
+        const rightChannel = isMono ? leftChannel : channelData[1];
+        const useNegative = isMono && rightChannel.some((v) => v < 0);
+        const draw = (start, end) => {
+            let prevX = 0;
+            let prevLeft = 0;
+            let prevRight = 0;
+            const canvas = document.createElement('canvas');
+            canvas.width = Math.round((width * (end - start)) / len);
+            canvas.height = this.options.height;
+            canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;
+            canvas.style.left = `${Math.floor((start * width) / pixelRatio / len)}px`;
+            this.canvasWrapper.appendChild(canvas);
+            const ctx = canvas.getContext('2d', {
+                desynchronized: true,
+            });
+            ctx.beginPath();
+            ctx.fillStyle = this.options.waveColor;
+            // Firefox shim until 2023.04.11
+            if (!ctx.roundRect)
+                ctx.roundRect = ctx.fillRect;
+            for (let i = start; i < end; i++) {
+                const barIndex = Math.round((i - start) * barIndexScale);
+                if (barIndex > prevX) {
+                    const leftBarHeight = Math.round(prevLeft * halfHeight);
+                    const rightBarHeight = Math.round(prevRight * halfHeight);
+                    ctx.roundRect(prevX * (barWidth + barGap), halfHeight - leftBarHeight, barWidth, leftBarHeight + rightBarHeight || 1, barRadius);
+                    prevX = barIndex;
+                    prevLeft = 0;
+                    prevRight = 0;
+                }
+                const leftValue = useNegative ? leftChannel[i] : Math.abs(leftChannel[i]);
+                const rightValue = useNegative ? rightChannel[i] : Math.abs(rightChannel[i]);
+                if (leftValue > prevLeft) {
+                    prevLeft = leftValue;
+                }
+                // If stereo, both channels are drawn as max values
+                // If mono with negative values, the bottom channel will be the min negative values
+                if (useNegative ? rightValue < -prevRight : rightValue > prevRight) {
+                    prevRight = rightValue < 0 ? -rightValue : rightValue;
+                }
+            }
+            ctx.fill();
+            ctx.closePath();
+            // Draw a progress canvas
+            const progressCanvas = canvas.cloneNode();
+            this.progressWrapper.appendChild(progressCanvas);
+            const progressCtx = progressCanvas.getContext('2d', {
+                desynchronized: true,
+            });
+            progressCtx.drawImage(canvas, 0, 0);
+            // Set the composition method to draw only where the waveform is drawn
+            progressCtx.globalCompositeOperation = 'source-in';
+            progressCtx.fillStyle = this.options.progressColor;
+            // This rectangle acts as a mask thanks to the composition method
+            progressCtx.fillRect(0, 0, canvas.width, canvas.height);
+        };
+        // Clear the canvas
+        this.canvasWrapper.innerHTML = '';
+        this.progressWrapper.innerHTML = '';
+        // Draw the currently visible part of the waveform
+        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+        const scale = len / scrollWidth;
+        const start = Math.floor(scrollLeft * scale);
+        const end = Math.ceil(Math.min(scrollWidth, scrollLeft + clientWidth) * scale);
+        draw(start, end);
+        // Draw the rest of the waveform with a timeout for better performance
+        const step = end - start;
+        for (let i = end; i < len; i += step) {
+            await this.delay(() => {
+                draw(i, Math.min(len, i + step));
+            });
+        }
+        for (let i = start - 1; i >= 0; i -= step) {
+            await this.delay(() => {
+                draw(Math.max(0, i - step), i);
+            });
+        }
+    }
+    render(audioData) {
+        // Determine the width of the canvas
+        const pixelRatio = window.devicePixelRatio || 1;
+        const parentWidth = this.options.fillParent ? this.scrollContainer.clientWidth * pixelRatio : 0;
+        const scrollWidth = audioData.duration * this.options.minPxPerSec;
+        this.isScrolling = scrollWidth > parentWidth;
+        const width = Math.max(1, this.isScrolling ? scrollWidth : parentWidth);
+        const { height } = this.options;
+        // Remember the current cursor position
+        const oldCursorPosition = this.progressWrapper.clientWidth;
+        this.scrollContainer.style.overflowX = this.isScrolling ? 'auto' : 'hidden';
+        this.wrapper.style.width = `${Math.floor(width / pixelRatio)}px`;
+        // Adjust the scroll position so that the cursor stays in the same place
+        const newCursortPosition = this.progressWrapper.clientWidth;
+        this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
+        // First two channels are used
+        const channelData = [audioData.getChannelData(0)];
+        if (audioData.numberOfChannels > 1) {
+            channelData.push(audioData.getChannelData(1));
+        }
+        this.renderPeaks(channelData, width, height, pixelRatio);
+    }
+    zoom(audioData, minPxPerSec) {
+        this.options.minPxPerSec = minPxPerSec;
+        this.render(audioData);
+    }
+    renderProgress(progress, autoCenter = false) {
+        this.progressWrapper.style.width = `${progress * 100}%`;
+        if (this.isScrolling) {
+            const containerWidth = this.scrollContainer.clientWidth;
+            const center = containerWidth / 2;
+            const progressWidth = this.progressWrapper.clientWidth;
+            const minScroll = autoCenter ? center : containerWidth;
+            if (progressWidth > this.scrollContainer.scrollLeft + minScroll) {
+                this.scrollContainer.scrollLeft = progressWidth - center;
+            }
+        }
+    }
+}
+export default Renderer;

package/dist/timer.d.ts

@@ -4,7 +4,8 @@ type TimerEvents = {
 };
 declare class Timer extends EventEmitter<TimerEvents> {
     private unsubscribe;
-    constructor();
+    start(): void;
+    stop(): void;
     destroy(): void;
 }
 export default Timer;