@twilio/player - npm Package Compare versions

Comparing version 1.0.0-beta.8 to 1.0.0-beta.9

dist/index.d.ts

@@ -22,3 +22,3 @@ /// <reference types="react" />
 type PlaybackRate = number | "very_fast" | "fast" | "normal" | "slow" | "very_slow";
-type PlayerOptions = Pick<WaveSurferParams, "audioRate" | "backgroundColor" | "barGap" | "barHeight" | "barWidth" | "cursorColor" | "cursorWidth" | "height" | "hideScrollbar" | "progressColor" | "splitChannels" | "waveColor"> & {
+type PlayerOptions = Pick<WaveSurferParams, "audioRate" | "backgroundColor" | "barGap" | "barHeight" | "barWidth" | "cursorColor" | "cursorWidth" | "height" | "hideScrollbar" | "progressColor" | "waveColor"> & {
     progressBackgroundColor?: string | null;
@@ -87,5 +87,4 @@ timeline?: TimelineOptions;
     params: Required<PlayerParams>;
-    _splitChannels: boolean;
-    set splitChannels(split: boolean);
-    get splitChannels(): boolean;
+    cursorCanvas?: HTMLCanvasElement;
+    currentPosition: number;
     constructor(container: HTMLElement, params: WaveSurferParams$0);
@@ -97,15 +96,3 @@ init(): void;
     drawBars(peaks: number[][] | number[], channelIndex: number, start?: number, end?: number): void;
-    drawChannels(peaks: number[][] | number[], start: number, end: number): void;
-    prepareChannelForDraw(peaks: number[], channelIndex: number, start: number, end: number): void;
-    drawBarsForChannel({ start, end, absmax, hasMinVals, channelIndex, offsetY, halfH, peaks }: {
-        start: number;
-        end: number;
-        absmax: number;
-        hasMinVals: boolean;
-        height: number;
-        offsetY: number;
-        halfH: number;
-        peaks: number[];
-        channelIndex: number;
-    }): void;
+    prepareForDraw(peaks: number[][] | number[], start: number, end: number): void;
     fillRect(channelIndex: number, x: number, y: number, width: number, height: number, radius?: number): void;
@@ -116,2 +103,4 @@ setFillStyles(entry: CanvasEntry, channelIndex: number): void;
     updateCursor(): void;
+    updateProgress(position: number): void;
+    drawCursor(position: number): void;
 }
@@ -118,0 +107,0 @@ type PlayerEvents = {

dist/index.js

@@ -29,2 +29,4 @@ 'use strict';
     fontSize: 10,
+    primaryLabelInterval: 10,
+    secondaryLabelInterval: 0,
     formatTimeCallback: defaultTimeFormatter,
@@ -73,23 +75,2 @@ };
 };
-const getCursorheadStyles = (color) => ({
-    position: "absolute",
-    top: "0",
-    right: "-5px",
-    width: "0",
-    height: "0",
-    borderWidth: "10px 5px 0 5px",
-    borderStyle: "solid",
-    borderColor: "transparent",
-    borderTopColor: color,
-    zIndex: "4",
-});
-const getCursorStyles = (color, width) => ({
-    position: "absolute",
-    top: "0",
-    right: "0",
-    width: `${width}px`,
-    height: "100%",
-    background: color,
-    zIndex: "4",
-});
 const waveStyles = {
@@ -111,2 +92,3 @@ position: "absolute",
         this.channels = [];
+        this.currentPosition = 0;
         this.handleWindowResize = () => {
@@ -120,16 +102,5 @@ this.fireEvent("redraw");
         this.params = params;
-        this._splitChannels = this.params.splitChannels || false;
         window.addEventListener("resize", this.handleWindowResize);
         this.hasProgressCanvas = true;
     }
-    set splitChannels(split) {
-        if (split !== this._splitChannels) {
-            this._splitChannels = split;
-            this.setHeight(this.params.pixelRatio * this.params.height);
-            this.fireEvent("redraw");
-        }
-    }
-    get splitChannels() {
-        return this._splitChannels;
-    }
     init() {
@@ -151,43 +122,20 @@ super.createWrapper();
         }
-        return util.frame(this.drawChannels.bind(this))(peaks, start, end);
+        return util.frame(this.prepareForDraw.bind(this))(peaks, start, end);
     }
-    drawChannels(peaks, start, end) {
-        if (peaks[0] instanceof Array) {
-            const channels = peaks;
-            if (this.splitChannels) {
-                this.setHeight(channels.length * this.params.height * this.params.pixelRatio);
-            }
-            channels.forEach((channelPeaks, i) => this.prepareChannelForDraw(channelPeaks, i, start, end));
-        }
-        else {
-            peaks = peaks;
-            this.prepareChannelForDraw(peaks, 0, start, end);
-        }
-    }
-    prepareChannelForDraw(peaks, channelIndex, start, end) {
+    prepareForDraw(peaks, start, end) {
+        const hasMultipleChannels = Array.isArray(peaks[0]);
         let absmax = 1 / this.params.barHeight;
         if (this.params.normalize) {
-            const max = util.max(peaks);
-            const min = util.min(peaks);
+            const allValues = hasMultipleChannels
+                ? peaks.reduce((acc, peaks) => acc.concat(peaks), [])
+                : peaks;
+            const max = util.max(allValues);
+            const min = util.min(allValues);
             absmax = -min > max ? -min : max;
         }
-        const hasMinVals = [].some.call(peaks, val => val < 0);
         const height = this.params.height * this.params.pixelRatio;
-        const offsetY = (this.splitChannels && height * channelIndex) || 0;
         const halfH = height / 2;
-        return this.drawBarsForChannel({
-            absmax: absmax,
-            hasMinVals: hasMinVals,
-            height: height,
-            offsetY: offsetY,
-            halfH: halfH,
-            peaks: peaks,
-            channelIndex: channelIndex,
-            start: start,
-            end: end,
-        });
-    }
-    drawBarsForChannel({ start, end, absmax, hasMinVals, channelIndex, offsetY, halfH, peaks, }) {
-        const peakIndexScale = hasMinVals ? 2 : 1;
-        const length = peaks.length / peakIndexScale;
+        const length = hasMultipleChannels
+            ? peaks[0].length
+            : peaks.length;
         const bar = this.params.barWidth * this.params.pixelRatio;
@@ -203,18 +151,20 @@ const gap = this.params.barGap === null || this.params.barGap === undefined
         for (i; i < last; i += step) {
-            const peakIndex = Math.floor(i * scale * peakIndexScale);
-            const peakAverageValue = this.getPeakAverageValue(peaks, peakIndex, step);
-            let h = Math.round((peakAverageValue / absmax) * halfH);
-            if (h === 0 && this.params.barMinHeight)
-                h = this.params.barMinHeight;
-            let y;
-            if (this.splitChannels && this.channels.length > 2) {
-                y = halfH - h + offsetY;
+            const peakIndex = Math.floor(i * scale);
+            let heights;
+            if (hasMultipleChannels) {
+                const peakAverageValues = peaks.map(p => this.getPeakAverageValue(p, peakIndex, step));
+                heights = peakAverageValues.map(v => Math.round((v / absmax) * halfH));
             }
-            else if (this.splitChannels && channelIndex === 0) {
-                y = 0;
-            }
             else {
-                y = this.height - h * 2;
+                const peakAverageValue = this.getPeakAverageValue(peaks, peakIndex, step);
+                heights = [Math.round((peakAverageValue / absmax) * halfH)];
             }
-            this.fillRect(channelIndex, i + this.halfPixel, y, bar + this.halfPixel, h * 2, 0);
+            let channelsSortedByBarHeight = Array.from(heights.keys());
+            channelsSortedByBarHeight = channelsSortedByBarHeight.sort((a, b) => heights[b] - heights[a]);
+            channelsSortedByBarHeight.forEach(channelIndex => {
+                let h = heights[channelIndex];
+                if (h === 0 && this.params.barMinHeight)
+                    h = this.params.barMinHeight;
+                this.fillRect(channelIndex, i + this.halfPixel, this.height - h * 2, bar + this.halfPixel, h * 2, 0);
+            });
         }
@@ -279,6 +229,47 @@ }
             }
-            this.progressWave.appendChild(this.style(document.createElement("cursorhead"), getCursorheadStyles(this.params.cursorColor)));
-            this.progressWave.appendChild(this.style(document.createElement("cursor"), getCursorStyles(this.params.cursorColor, this.params.cursorWidth)));
+            this.cursorCanvas = this.style(document.createElement("canvas"), {
+                position: "absolute",
+                top: "0",
+                left: "0",
+                height: "100%",
+                width: "100%",
+                zIndex: "5",
+                pointerEvents: "none",
+            });
+            this.cursorCanvas.classList.add("twilio-player-cursor");
+            this.container.appendChild(this.cursorCanvas);
+            const ctx = this.cursorCanvas.getContext("2d");
+            if (ctx) {
+                ctx.imageSmoothingEnabled = false;
+                this.drawCursor(0);
+            }
         }
     }
+    updateProgress(position) {
+        position = Math.floor(position);
+        if (this.progressWave) {
+            this.style(this.progressWave, { width: position + "px" });
+        }
+        this.drawCursor(position);
+    }
+    drawCursor(position) {
+        if (this.cursorCanvas) {
+            const ctx = this.cursorCanvas.getContext("2d");
+            if (ctx && this.cursorCanvas) {
+                ctx.imageSmoothingEnabled = false;
+                this.cursorCanvas.width = this.container.clientWidth;
+                this.cursorCanvas.height = this.container.clientHeight;
+                ctx.clearRect(0, 0, this.cursorCanvas.width, this.cursorCanvas.height);
+                ctx.fillStyle = this.params.cursorColor;
+                ctx.beginPath();
+                ctx.moveTo(position - 3 * this.params.cursorWidth + 0.5, -0.5);
+                ctx.lineTo(position + 0.5, 8.5);
+                ctx.lineTo(position + 0.5, this.cursorCanvas.height + 0.5);
+                ctx.lineTo(position + this.params.cursorWidth + 0.5, this.cursorCanvas.height + 0.5);
+                ctx.lineTo(position + this.params.cursorWidth + 0.5, 8.5);
+                ctx.lineTo(position + 4 * this.params.cursorWidth + 0.5, -0.5);
+                ctx.fill();
+            }
+        }
+    }
 }
@@ -316,2 +307,3 @@
     cursorWidth: 2,
+    cursorColor: "#000",
     height: 56,
@@ -321,3 +313,2 @@ hideScrollbar: true,
     waveColor: "#14972e",
-    splitChannels: false,
     regionColor: "#FEE1CC",
@@ -343,2 +334,8 @@ };
         this.wsHandleReady = () => {
+            var _a;
+            const duration = (_a = this.ws) === null || _a === void 0 ? void 0 : _a.getDuration();
+            if (duration && this.ws && this.ws.timeline && this.ws.timeline.params) {
+                this.ws.timeline.params.timeInterval =
+                    Math.floor(duration / 60) + (duration % 60) / 60;
+            }
             this.waveform = this.waveformContainer.querySelector("wave");
@@ -345,0 +342,0 @@ this.waveform.appendChild(this.regionsContainer);

package.json

 {
   "name": "@twilio/player",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

No alert changes

Worsened metrics

Total package byte prevSize

412826

decreased by-0.03%

Lines of code

1690

decreased by-0.47%

No dependency changes