wavesurfer.js 7.0.0-alpha.17 → 7.0.0-alpha.19

package/dist/plugins/regions.js

@@ -16,60 +16,21 @@ const el = (tagName, 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.dragStart = NaN;
-        this.regions = [];
-        this.createdRegion = null;
-        this.modifiedRegion = null;
-        this.isResizingLeft = false;
-        this.isMoving = false;
-        this.handleMouseDown = (e) => {
-            if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
-                this.dragStart = e.clientX - this.wrapper.getBoundingClientRect().left;
-            }
-        };
-        this.handleMouseMove = (e) => {
-            const dragEnd = e.clientX - this.wrapper.getBoundingClientRect().left;
-            if (this.options.draggable && this.modifiedRegion && this.isMoving) {
-                this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart);
-                this.dragStart = dragEnd;
-                return;
-            }
-            if (this.options.resizable && this.modifiedRegion) {
-                this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd : undefined, this.isResizingLeft ? undefined : dragEnd);
-                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, dragEnd);
-                    }
-                    else {
-                        this.updateRegion(this.createdRegion, this.dragStart, dragEnd);
-                    }
-                }
-            }
-        };
-        this.handleMouseUp = () => {
-            if (this.createdRegion) {
-                this.addRegion(this.createdRegion);
-                this.createdRegion = null;
-            }
-            this.modifiedRegion = null;
-            this.isMoving = false;
-            this.dragStart = NaN;
-            this.wrapper.style.pointerEvents = '';
-        };
         this.options = Object.assign({}, defaultOptions, options);
         this.regionsContainer = this.initRegionsContainer();
-        const unsubscribe = this.wavesurfer.once('decode', () => {
+        this.subscriptions.push(this.wavesurfer.once('decode', () => {
             this.wrapper.appendChild(this.regionsContainer);
-        });
-        this.subscriptions.push(unsubscribe);
+        }));
         this.wrapper.addEventListener('mousedown', this.handleMouseDown);
         document.addEventListener('mousemove', this.handleMouseMove);
         document.addEventListener('mouseup', this.handleMouseUp);
@@ -93,12 +54,53 @@ class RegionsPlugin extends BasePlugin {
             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}px`,
-            width: `${end - start}px`,
+            left: `${start * 100}%`,
+            width: `${(end - start) * 100}%`,
             height: '100%',
             backgroundColor: noWidth ? '' : 'rgba(0, 0, 0, 0.1)',
             borderRadius: '2px',
@@ -165,15 +167,12 @@ class RegionsPlugin extends BasePlugin {
     }
     createRegion(start, end, title = '') {
         const duration = this.wavesurfer.getDuration();
-        const width = this.regionsContainer.clientWidth;
-        start = Math.max(0, Math.min(start, width - 1));
-        end = Math.max(0, Math.min(end, width - 1));
         return {
             element: this.createRegionElement(start, end, title),
             start,
             end,
-            startTime: (start / width) * duration,
-            endTime: (end / width) * duration,
+            startTime: start * duration,
+            endTime: end * duration,
             title,
         };
     }
@@ -182,19 +181,16 @@ class RegionsPlugin extends BasePlugin {
         this.emit('region-created', { region });
     }
     updateRegion(region, start, end) {
-        const width = this.regionsContainer.clientWidth;
         if (start != null) {
-            start = Math.max(0, Math.min(start, width));
             region.start = start;
-            region.element.style.left = `${region.start}px`;
-            region.element.style.width = `${region.end - region.start}px`;
-            region.startTime = (start / this.regionsContainer.clientWidth) * this.wavesurfer.getDuration();
+            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) {
-            end = Math.max(0, Math.min(end, width));
             region.end = end;
-            region.element.style.width = `${region.end - region.start}px`;
-            region.endTime = (end / this.regionsContainer.clientWidth) * this.wavesurfer.getDuration();
+            region.element.style.width = `${(region.end - region.start) * 100}%`;
+            region.endTime = end * this.wavesurfer.getDuration();
         }
         this.emit('region-updated', { region });
     }
@@ -204,9 +200,8 @@ class RegionsPlugin extends BasePlugin {
     /** 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 width = this.regionsContainer.clientWidth;
-        const start = (startTime / duration) * width;
-        const end = (endTime / duration) * width;
+        const start = startTime / duration;
+        const end = endTime / duration;
         const region = this.createRegion(start, end, title);
         this.addRegion(region);
         if (color)

package/dist/plugins/timeline.js

@@ -3,11 +3,12 @@ const defaultOptions = {
     height: 20,
 };
 class TimelinePlugin extends BasePlugin {
+    timelineWrapper;
+    options;
     constructor(params, options) {
-        var _a;
         super(params, options);
         this.options = Object.assign({}, defaultOptions, options);
-        this.container = (_a = this.options.container) !== null && _a !== void 0 ? _a : this.wrapper;
+        this.container = this.options.container ?? this.wrapper;
         this.timelineWrapper = this.initTimelineWrapper();
         this.container.appendChild(this.timelineWrapper);
         if (this.options.duration) {
@@ -78,12 +79,11 @@ class TimelinePlugin extends BasePlugin {
         return 2;
     }
     initTimeline(duration) {
-        var _a, _b, _c;
         const width = Math.round(this.timelineWrapper.scrollWidth * devicePixelRatio);
         const pxPerSec = width / duration;
-        const timeInterval = (_a = this.options.timeInterval) !== null && _a !== void 0 ? _a : this.defaultTimeInterval(pxPerSec);
-        const primaryLabelInterval = (_b = this.options.primaryLabelInterval) !== null && _b !== void 0 ? _b : this.defaultPrimaryLabelInterval(pxPerSec);
-        const secondaryLabelInterval = (_c = this.options.secondaryLabelInterval) !== null && _c !== void 0 ? _c : this.defaultSecondaryLabelInterval(pxPerSec);
+        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;

package/dist/renderer.d.ts

@@ -11,6 +11,7 @@ type RendererOptions = {
     barWidth?: number;
     barGap?: number;
     barRadius?: number;
+    noScrollbar?: boolean;
 };
 type RendererEvents = {
     click: {
@@ -22,18 +23,15 @@ declare class Renderer extends EventEmitter<RendererEvents> {
     private container;
     private scrollContainer;
     private wrapper;
-    private mainCanvas;
-    private progressCanvas;
-    private cursor;
-    private ctx;
+    private canvasWrapper;
+    private progressWrapper;
     private timeout;
     constructor(options: RendererOptions);
-    getContainer(): ShadowRoot;
+    getContainer(): HTMLElement;
     getWrapper(): HTMLElement;
     destroy(): void;
     private delay;
     private renderPeaks;
-    private createProgressMask;
     render(audioData: AudioBuffer): void;
     zoom(audioData: AudioBuffer, minPxPerSec: number): void;
     renderProgress(progress: number, autoCenter?: boolean): void;

package/dist/renderer.js

@@ -1,17 +1,14 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    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) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
+    options;
+    container;
+    scrollContainer;
+    wrapper;
+    canvasWrapper;
+    progressWrapper;
+    timeout = null;
     constructor(options) {
         super();
-        this.timeout = null;
         this.options = options;
         let container = null;
         if (typeof this.options.container === 'string') {
@@ -35,64 +32,65 @@ class Renderer extends EventEmitter {
           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;
-          width: fit-content;
           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;
-          min-width: 100%;
           image-rendering: pixelated;
         }
         :host .progress {
-          position: absolute;
-          z-index: 2;
-          top: 0;
-          left: 0;
-          width: 100%;
           pointer-events: none;
-          clip-path: inset(0px 100% 0px 0px);
-        }
-        :host .cursor {
           position: absolute;
-          z-index: 3;
+          z-index: 2;
           top: 0;
           left: 0;
-          height: 100%;
-          width: ${this.options.cursorWidth}px;
-          background: ${this.options.cursorColor || this.options.progressColor};
+          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">
-          <canvas></canvas>
-          <canvas class="progress"></canvas>
-          <div class="cursor"></div>
+          <div class="canvases"></div>
+          <div class="progress"></div>
         </div>
       </div>
     `;
         this.container = div;
         this.scrollContainer = shadow.querySelector('.scroll');
         this.wrapper = shadow.querySelector('.wrapper');
-        this.mainCanvas = shadow.querySelector('canvas');
-        this.ctx = this.mainCanvas.getContext('2d', { desynchronized: true });
-        this.progressCanvas = shadow.querySelector('.progress');
-        this.cursor = shadow.querySelector('.cursor');
+        this.canvasWrapper = shadow.querySelector('.canvases');
+        this.progressWrapper = shadow.querySelector('.progress');
         container.appendChild(div);
-        this.mainCanvas.addEventListener('click', (e) => {
-            const rect = this.mainCanvas.getBoundingClientRect();
+        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.container.shadowRoot;
+        return this.scrollContainer;
     }
     getWrapper() {
         return this.wrapper;
@@ -100,7 +98,7 @@ class Renderer extends EventEmitter {
     destroy() {
         this.container.remove();
     }
-    delay(fn, delayMs = 100) {
+    delay(fn, delayMs = 10) {
         if (this.timeout) {
             clearTimeout(this.timeout);
         }
@@ -110,139 +108,128 @@ class Renderer extends EventEmitter {
             }, delayMs);
         });
     }
-    renderPeaks(channelData, width, height) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const { devicePixelRatio } = window;
-            const { ctx } = this;
-            const barWidth = this.options.barWidth != null ? this.options.barWidth * devicePixelRatio : 1;
-            const barGap = this.options.barGap != null ? this.options.barGap * devicePixelRatio : this.options.barWidth ? barWidth / 2 : 0;
-            const barRadius = (_a = this.options.barRadius) !== null && _a !== void 0 ? _a : 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;
-                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 * 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;
-                    }
+    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();
-            };
-            // Clear the canvas
-            ctx.clearRect(0, 0, width, height);
-            // 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((scrollLeft + clientWidth) * scale);
-            draw(start, end);
-            // Draw the progress mask
-            this.createProgressMask();
-            // Draw the rest of the waveform with a timeout for better performance
-            if (start > 0) {
-                yield this.delay(() => {
-                    draw(0, start);
-                });
-            }
-            if (end < len) {
-                yield this.delay(() => {
-                    draw(end, len);
-                });
             }
-            // Redraw the progress mask
-            this.delay(() => {
-                this.createProgressMask();
+            ctx.fill();
+            ctx.closePath();
+            // Draw a progress canvas
+            const progressCanvas = canvas.cloneNode();
+            this.progressWrapper.appendChild(progressCanvas);
+            const progressCtx = progressCanvas.getContext('2d', {
+                desynchronized: true,
             });
-        });
-    }
-    createProgressMask() {
-        const progressCtx = this.progressCanvas.getContext('2d', { desynchronized: true });
-        // Set the canvas to the same size as the main canvas
-        this.progressCanvas.width = this.mainCanvas.width;
-        this.progressCanvas.height = this.mainCanvas.height;
-        // Copy the waveform image to the progress canvas
-        // The main canvas itself is used as the source image
-        progressCtx.drawImage(this.mainCanvas, 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, this.progressCanvas.width, this.progressCanvas.height);
+            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 { devicePixelRatio } = window;
-        const parentWidth = this.options.fillParent ? this.scrollContainer.clientWidth * devicePixelRatio : 0;
+        const pixelRatio = window.devicePixelRatio || 1;
+        const parentWidth = this.options.fillParent ? this.scrollContainer.clientWidth * pixelRatio : 0;
         const scrollWidth = audioData.duration * this.options.minPxPerSec;
         const isScrolling = scrollWidth > parentWidth;
         const width = Math.max(1, isScrolling ? scrollWidth : parentWidth);
         const { height } = this.options;
-        this.mainCanvas.width = width;
-        this.mainCanvas.height = height;
-        this.mainCanvas.style.width = Math.floor(scrollWidth / devicePixelRatio) + 'px';
+        // Remember the current cursor position
+        const oldCursorPosition = this.progressWrapper.clientWidth;
+        this.scrollContainer.style.overflowX = 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);
+        this.renderPeaks(channelData, width, height, pixelRatio);
     }
     zoom(audioData, minPxPerSec) {
-        // Remember the current cursor position
-        const oldCursorPosition = this.cursor.getBoundingClientRect().left;
         this.options.minPxPerSec = minPxPerSec;
         this.render(audioData);
-        // Adjust the scroll position so that the cursor stays in the same place
-        const newCursortPosition = this.cursor.getBoundingClientRect().left;
-        this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
     }
     renderProgress(progress, autoCenter = false) {
-        this.progressCanvas.style.clipPath = `inset(0 ${100 - progress * 100}% 0 0)`;
-        this.cursor.style.left = `${progress * 100}%`;
-        this.cursor.style.marginLeft =
-            progress > 0
-                ? Math.round(progress * 100) === 100
-                    ? `-${this.cursor.offsetWidth}px`
-                    : `-${this.cursor.offsetWidth / 2}px`
-                : '';
-        this.cursor.scrollIntoView();
-        if (autoCenter) {
-            const center = this.container.clientWidth / 2;
-            const fullWidth = this.mainCanvas.clientWidth;
-            if (fullWidth * progress >= center) {
-                this.scrollContainer.scrollLeft = fullWidth * progress - center;
-            }
+        this.progressWrapper.style.width = `${progress * 100}%`;
+        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;
         }
     }
 }

package/dist/timer.js

@@ -1,9 +1,6 @@
 import EventEmitter from './event-emitter.js';
 class Timer extends EventEmitter {
-    constructor() {
-        super(...arguments);
-        this.unsubscribe = () => undefined;
-    }
+    unsubscribe = () => undefined;
     start() {
         this.unsubscribe = this.on('tick', () => {
             requestAnimationFrame(() => {