wavesurfer.js 4.5.0 → 5.1.0

package/src/plugin/regions/region.js

@@ -15,6 +15,7 @@ export class Region {
         this.util = ws.util;
         this.style = this.util.style;
         this.regionsUtil = regionsUtils;
+        this.vertical = ws.drawer.params.vertical;
 
         this.id = params.id == null ? ws.util.getId() : params.id;
         this.start = Number(params.start) || 0;
@@ -42,6 +43,7 @@ export class Region {
         this.handleRightEl = null;
         this.data = params.data || {};
         this.attributes = params.attributes || {};
+        this.showTooltip = params.showTooltip ?? true;
 
         this.maxLength = params.maxLength;
         // It assumes the minLength parameter value, or the regionsMinLength parameter value, if the first one not provided
@@ -129,7 +131,7 @@ export class Region {
     /* Remove a single region. */
     remove() {
         if (this.element) {
-            this.wrapper.removeChild(this.element);
+            this.wrapper.removeChild(this.element.domElement);
             this.element = null;
             this.fireEvent('remove');
             this.wavesurfer.un('zoom', this._onRedraw);
@@ -168,20 +170,25 @@ export class Region {
 
     /* Render a region as a DOM element. */
     render() {
-        const regionEl = document.createElement('region');
+        this.element = this.util.withOrientation(
+            this.wrapper.appendChild(document.createElement('region')),
+            this.vertical
+        );
 
-        regionEl.className = 'wavesurfer-region';
-        regionEl.title = this.formatTime(this.start, this.end);
-        regionEl.setAttribute('data-id', this.id);
+        this.element.className = 'wavesurfer-region';
+        if (this.showTooltip) {
+            this.element.title = this.formatTime(this.start, this.end);
+        }
+        this.element.setAttribute('data-id', this.id);
 
         for (const attrname in this.attributes) {
-            regionEl.setAttribute(
+            this.element.setAttribute(
                 'data-region-' + attrname,
                 this.attributes[attrname]
             );
         }
 
-        this.style(regionEl, {
+        this.style(this.element, {
             position: 'absolute',
             zIndex: 2,
             height: this.regionHeight,
@@ -190,11 +197,13 @@ export class Region {
 
         /* Resize handles */
         if (this.resize) {
-            this.handleLeftEl = regionEl.appendChild(
-                document.createElement('handle')
+            this.handleLeftEl = this.util.withOrientation(
+                this.element.appendChild(document.createElement('handle')),
+                this.vertical
             );
-            this.handleRightEl = regionEl.appendChild(
-                document.createElement('handle')
+            this.handleRightEl = this.util.withOrientation(
+                this.element.appendChild(document.createElement('handle')),
+                this.vertical
             );
 
             this.handleLeftEl.className = 'wavesurfer-handle wavesurfer-handle-start';
@@ -202,7 +211,7 @@ export class Region {
 
             // Default CSS properties for both handles.
             const css = {
-                cursor: 'col-resize',
+                cursor: this.vertical ? 'row-resize' : 'col-resize',
                 position: 'absolute',
                 top: '0px',
                 width: '2px',
@@ -213,7 +222,11 @@ export class Region {
             // Merge CSS properties per handle.
             const handleLeftCss =
                 this.handleStyle.left !== 'none'
-                    ? Object.assign({ left: '0px' }, css, this.handleStyle.left)
+                    ? Object.assign(
+                        { left: '0px' },
+                        css,
+                        this.handleStyle.left
+                    )
                     : null;
             const handleRightCss =
                 this.handleStyle.right !== 'none'
@@ -233,9 +246,8 @@ export class Region {
             }
         }
 
-        this.element = this.wrapper.appendChild(regionEl);
         this.updateRender();
-        this.bindEvents(regionEl);
+        this.bindEvents();
     }
 
     formatTime(start, end) {
@@ -301,7 +313,9 @@ export class Region {
                 );
             }
 
-            this.element.title = this.formatTime(this.start, this.end);
+            if (this.showTooltip) {
+                this.element.title = this.formatTime(this.start, this.end);
+            }
         }
     }
 
@@ -407,20 +421,21 @@ export class Region {
         let regionRightHalfTime;
 
         // Scroll when the user is dragging within the threshold
-        const edgeScroll = (e) => {
+        const edgeScroll = (event) => {
+            let orientedEvent = this.util.withOrientation(event, this.vertical);
             const duration = this.wavesurfer.getDuration();
             if (!scrollDirection || (!drag && !resize)) {
                 return;
             }
 
-            const x = e.clientX;
+            const x = orientedEvent.clientX;
             let distanceBetweenCursorAndWrapperEdge = 0;
             let regionHalfTimeWidth = 0;
             let adjustment = 0;
 
             // Get the currently selected time according to the mouse position
             let time = this.regionsUtil.getRegionSnapToGridValue(
-                this.wavesurfer.drawer.handleEvent(e) * duration
+                this.wavesurfer.drawer.handleEvent(event) * duration
             );
 
             if (drag) {
@@ -461,26 +476,28 @@ export class Region {
             }
 
             // Don't edgescroll if region has reached min or max limit
+            const wrapperScrollLeft = this.wrapper.scrollLeft;
+
             if (scrollDirection === -1) {
-                if (Math.round(this.wrapper.scrollLeft) === 0) {
+                if (Math.round(wrapperScrollLeft) === 0) {
                     return;
                 }
 
-                if (Math.round(this.wrapper.scrollLeft - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge) <= 0) {
+                if (Math.round(wrapperScrollLeft - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge) <= 0) {
                     return;
                 }
             } else {
-                if (Math.round(this.wrapper.scrollLeft) === maxScroll) {
+                if (Math.round(wrapperScrollLeft) === maxScroll) {
                     return;
                 }
 
-                if (Math.round(this.wrapper.scrollLeft + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge) >= maxScroll) {
+                if (Math.round(wrapperScrollLeft + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge) >= maxScroll) {
                     return;
                 }
             }
 
             // Update scroll position
-            let scrollLeft = this.wrapper.scrollLeft - adjustment + scrollSpeed * scrollDirection;
+            let scrollLeft = wrapperScrollLeft - adjustment + scrollSpeed * scrollDirection;
 
             if (scrollDirection === -1) {
                 const calculatedLeft = Math.max(0 + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge, scrollLeft);
@@ -498,26 +515,26 @@ export class Region {
 
             // Repeat
             window.requestAnimationFrame(() => {
-                edgeScroll(e);
+                edgeScroll(event);
             });
         };
 
-        const onDown = (e) => {
+        const onDown = (event) => {
             const duration = this.wavesurfer.getDuration();
-            if (e.touches && e.touches.length > 1) {
+            if (event.touches && event.touches.length > 1) {
                 return;
             }
-            touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
+            touchId = event.targetTouches ? event.targetTouches[0].identifier : null;
 
             // stop the event propagation, if this region is resizable or draggable
             // and the event is therefore handled here.
             if (this.drag || this.resize) {
-                e.stopPropagation();
+                event.stopPropagation();
             }
 
             // Store the selected startTime we begun dragging or resizing
             startTime = this.regionsUtil.getRegionSnapToGridValue(
-                this.wavesurfer.drawer.handleEvent(e, true) * duration
+                this.wavesurfer.drawer.handleEvent(event, true) * duration
             );
 
             // Store the selected point of contact when we begin dragging
@@ -526,13 +543,17 @@ export class Region {
 
             // Store for scroll calculations
             maxScroll = this.wrapper.scrollWidth - this.wrapper.clientWidth;
-            wrapperRect = this.wrapper.getBoundingClientRect();
+
+            wrapperRect = this.util.withOrientation(
+                this.wrapper.getBoundingClientRect(),
+                this.vertical
+            );
 
             this.isResizing = false;
             this.isDragging = false;
-            if (e.target.tagName.toLowerCase() === 'handle') {
+            if (event.target.tagName.toLowerCase() === 'handle') {
                 this.isResizing = true;
-                resize = e.target.classList.contains('wavesurfer-handle-start')
+                resize = event.target.classList.contains('wavesurfer-handle-start')
                     ? 'start'
                     : 'end';
             } else {
@@ -541,8 +562,8 @@ export class Region {
                 resize = false;
             }
         };
-        const onUp = (e) => {
-            if (e.touches && e.touches.length > 1) {
+        const onUp = (event) => {
+            if (event.touches && event.touches.length > 1) {
                 return;
             }
 
@@ -557,17 +578,18 @@ export class Region {
             if (updated) {
                 updated = false;
                 this.util.preventClick();
-                this.fireEvent('update-end', e);
-                this.wavesurfer.fireEvent('region-update-end', this, e);
+                this.fireEvent('update-end', event);
+                this.wavesurfer.fireEvent('region-update-end', this, event);
             }
         };
-        const onMove = (e) => {
+        const onMove = (event) => {
             const duration = this.wavesurfer.getDuration();
+            let orientedEvent = this.util.withOrientation(event, this.vertical);
 
-            if (e.touches && e.touches.length > 1) {
+            if (event.touches && event.touches.length > 1) {
                 return;
             }
-            if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
+            if (event.targetTouches && event.targetTouches[0].identifier != touchId) {
                 return;
             }
             if (!drag && !resize) {
@@ -576,7 +598,7 @@ export class Region {
 
             const oldTime = startTime;
             let time = this.regionsUtil.getRegionSnapToGridValue(
-                this.wavesurfer.drawer.handleEvent(e) * duration
+                this.wavesurfer.drawer.handleEvent(event) * duration
             );
 
             if (drag) {
@@ -634,36 +656,22 @@ export class Region {
             }
 
             if (
-                this.scroll &&
-                container.clientWidth < this.wrapper.scrollWidth
+                this.scroll && container.clientWidth < this.wrapper.scrollWidth
             ) {
                 // Triggering edgescroll from within edgeScrollWidth
-                if (drag) {
-                    let x = e.clientX;
-
-                    // Check direction
-                    if (x < wrapperRect.left + this.edgeScrollWidth) {
-                        scrollDirection = -1;
-                    } else if (x > wrapperRect.right - this.edgeScrollWidth) {
-                        scrollDirection = 1;
-                    } else {
-                        scrollDirection = null;
-                    }
+                let x = orientedEvent.clientX;
+
+                // Check direction
+                if (x < wrapperRect.left + this.edgeScrollWidth) {
+                    scrollDirection = -1;
+                } else if (x > wrapperRect.right - this.edgeScrollWidth) {
+                    scrollDirection = 1;
                 } else {
-                    let x = e.clientX;
-
-                    // Check direction
-                    if (x < wrapperRect.left + this.edgeScrollWidth) {
-                        scrollDirection = -1;
-                    } else if (x > wrapperRect.right - this.edgeScrollWidth) {
-                        scrollDirection = 1;
-                    } else {
-                        scrollDirection = null;
-                    }
+                    scrollDirection = null;
                 }
 
                 if (scrollDirection) {
-                    edgeScroll(e);
+                    edgeScroll(event);
                 }
             }
         };
@@ -672,20 +680,20 @@ export class Region {
         this.element.addEventListener('touchstart', onDown);
 
         document.body.addEventListener('mousemove', onMove);
-        document.body.addEventListener('touchmove', onMove);
+        document.body.addEventListener('touchmove', onMove, {passive: false});
 
-        document.body.addEventListener('mouseup', onUp);
+        document.addEventListener('mouseup', onUp);
         document.body.addEventListener('touchend', onUp);
 
         this.on('remove', () => {
-            document.body.removeEventListener('mouseup', onUp);
+            document.removeEventListener('mouseup', onUp);
             document.body.removeEventListener('touchend', onUp);
             document.body.removeEventListener('mousemove', onMove);
             document.body.removeEventListener('touchmove', onMove);
         });
 
         this.wavesurfer.on('destroy', () => {
-            document.body.removeEventListener('mouseup', onUp);
+            document.removeEventListener('mouseup', onUp);
             document.body.removeEventListener('touchend', onUp);
         });
     }
@@ -750,7 +758,12 @@ export class Region {
     }
 
     updateHandlesResize(resize) {
-        const cursorStyle = resize ? 'col-resize' : 'auto';
+        let cursorStyle;
+        if (resize) {
+            cursorStyle = this.vertical ? 'row-resize' : 'col-resize';
+        } else {
+            cursorStyle = 'auto';
+        }
 
         this.handleLeftEl && this.style(this.handleLeftEl, { cursor: cursorStyle });
         this.handleRightEl && this.style(this.handleRightEl, { cursor: cursorStyle });

package/src/plugin/spectrogram/index.js

@@ -254,30 +254,32 @@ export default class SpectrogramPlugin {
         const width = my.width;
         const pixels = my.resample(frequenciesData);
         const heightFactor = my.buffer ? 2 / my.buffer.numberOfChannels : 1;
-        const imageData = spectrCc.createImageData(width, height);
-        let i;
-        let j;
-        let k;
-
-        for (i = 0; i < pixels.length; i++) {
-            for (j = 0; j < pixels[i].length; j++) {
-                const colorMap = my.colorMap[pixels[i][j]];
-                /* eslint-disable max-depth */
-                for (k = 0; k < heightFactor; k++) {
-                    let y = height - j * heightFactor;
-                    if (heightFactor === 2 && k === 1) {
-                        y--;
+        if (spectrCc) {
+            const imageData = spectrCc.createImageData(width, height);
+            let i;
+            let j;
+            let k;
+
+            for (i = 0; i < pixels.length; i++) {
+                for (j = 0; j < pixels[i].length; j++) {
+                    const colorMap = my.colorMap[pixels[i][j]];
+                    /* eslint-disable max-depth */
+                    for (k = 0; k < heightFactor; k++) {
+                        let y = height - j * heightFactor;
+                        if (heightFactor === 2 && k === 1) {
+                            y--;
+                        }
+                        const redIndex = y * (width * 4) + i * 4;
+                        imageData.data[redIndex] = colorMap[0] * 255;
+                        imageData.data[redIndex + 1] = colorMap[1] * 255;
+                        imageData.data[redIndex + 2] = colorMap[2] * 255;
+                        imageData.data[redIndex + 3] = colorMap[3] * 255;
                     }
-                    const redIndex = y * (width * 4) + i * 4;
-                    imageData.data[redIndex] = colorMap[0] * 255;
-                    imageData.data[redIndex + 1] = colorMap[1] * 255;
-                    imageData.data[redIndex + 2] = colorMap[2] * 255;
-                    imageData.data[redIndex + 3] = colorMap[3] * 255;
+                    /* eslint-enable max-depth */
                 }
-                /* eslint-enable max-depth */
             }
+            spectrCc.putImageData(imageData, 0, 0);
         }
-        spectrCc.putImageData(imageData, 0, 0);
     }
 
     getFrequencies(callback) {
@@ -378,47 +380,49 @@ export default class SpectrogramPlugin {
         this.labelsEl.height = this.height;
         this.labelsEl.width = bgWidth;
 
-        // fill background
-        ctx.fillStyle = bgFill;
-        ctx.fillRect(0, 0, bgWidth, getMaxY);
-        ctx.fill();
-        let i;
-
-        // render labels
-        for (i = 0; i <= labelIndex; i++) {
-            ctx.textAlign = textAlign;
-            ctx.textBaseline = 'middle';
-
-            const freq = freqStart + step * i;
-            const index = Math.round(
-                (freq / (this.sampleRate / 2)) * this.fftSamples
-            );
-            const label = this.freqType(freq);
-            const units = this.unitType(freq);
-            const yLabelOffset = 2;
-            const x = 16;
-            let y;
-
-            if (i == 0) {
-                y = getMaxY + i - 10;
-                // unit label
-                ctx.fillStyle = textColorUnit;
-                ctx.font = fontSizeUnit + ' ' + fontType;
-                ctx.fillText(units, x + 24, y);
-                // freq label
-                ctx.fillStyle = textColorFreq;
-                ctx.font = fontSizeFreq + ' ' + fontType;
-                ctx.fillText(label, x, y);
-            } else {
-                y = getMaxY - i * 50 + yLabelOffset;
-                // unit label
-                ctx.fillStyle = textColorUnit;
-                ctx.font = fontSizeUnit + ' ' + fontType;
-                ctx.fillText(units, x + 24, y);
-                // freq label
-                ctx.fillStyle = textColorFreq;
-                ctx.font = fontSizeFreq + ' ' + fontType;
-                ctx.fillText(label, x, y);
+        if (ctx) {
+            // fill background
+            ctx.fillStyle = bgFill;
+            ctx.fillRect(0, 0, bgWidth, getMaxY);
+            ctx.fill();
+            let i;
+
+            // render labels
+            for (i = 0; i <= labelIndex; i++) {
+                ctx.textAlign = textAlign;
+                ctx.textBaseline = 'middle';
+
+                const freq = freqStart + step * i;
+                const index = Math.round(
+                    (freq / (this.sampleRate / 2)) * this.fftSamples
+                );
+                const label = this.freqType(freq);
+                const units = this.unitType(freq);
+                const yLabelOffset = 2;
+                const x = 16;
+                let y;
+
+                if (i == 0) {
+                    y = getMaxY + i - 10;
+                    // unit label
+                    ctx.fillStyle = textColorUnit;
+                    ctx.font = fontSizeUnit + ' ' + fontType;
+                    ctx.fillText(units, x + 24, y);
+                    // freq label
+                    ctx.fillStyle = textColorFreq;
+                    ctx.font = fontSizeFreq + ' ' + fontType;
+                    ctx.fillText(label, x, y);
+                } else {
+                    y = getMaxY - i * 50 + yLabelOffset;
+                    // unit label
+                    ctx.fillStyle = textColorUnit;
+                    ctx.font = fontSizeUnit + ' ' + fontType;
+                    ctx.fillText(units, x + 24, y);
+                    // freq label
+                    ctx.fillStyle = textColorFreq;
+                    ctx.font = fontSizeFreq + ' ' + fontType;
+                    ctx.fillText(label, x, y);
+                }
             }
         }
     }

package/src/plugin/timeline/index.js

@@ -434,7 +434,10 @@ export default class TimelinePlugin {
      */
     setFillStyles(fillStyle) {
         this.canvases.forEach(canvas => {
-            canvas.getContext('2d').fillStyle = fillStyle;
+            const context = canvas.getContext('2d');
+            if (context) {
+                context.fillStyle = fillStyle;
+            }
         });
     }
 
@@ -445,7 +448,10 @@ export default class TimelinePlugin {
      */
     setFonts(font) {
         this.canvases.forEach(canvas => {
-            canvas.getContext('2d').font = font;
+            const context = canvas.getContext('2d');
+            if (context) {
+                context.font = font;
+            }
         });
     }
 
@@ -471,14 +477,17 @@ export default class TimelinePlugin {
             };
 
             if (intersection.x1 < intersection.x2) {
-                canvas
-                    .getContext('2d')
-                    .fillRect(
-                        intersection.x1 - leftOffset,
-                        intersection.y1,
-                        intersection.x2 - intersection.x1,
-                        intersection.y2 - intersection.y1
-                    );
+                const context = canvas
+                    .getContext('2d');
+                if (context) {
+                    context
+                        .fillRect(
+                            intersection.x1 - leftOffset,
+                            intersection.y1,
+                            intersection.x2 - intersection.x1,
+                            intersection.y2 - intersection.y1
+                        );
+                }
             }
         });
     }
@@ -502,7 +511,7 @@ export default class TimelinePlugin {
                 return;
             }
 
-            if (xOffset + canvasWidth > x) {
+            if (xOffset + canvasWidth > x && context) {
                 textWidth = context.measureText(text).width;
                 context.fillText(text, x - xOffset, y);
             }

package/src/util/index.js

@@ -10,3 +10,4 @@ export { default as debounce } from 'debounce';
 export { default as preventClick } from './prevent-click';
 export { default as fetchFile } from './fetch';
 export { default as clamp } from './clamp';
+export { default as withOrientation } from './orientation';

package/src/util/orientation.js

@@ -0,0 +1,98 @@
+const verticalPropMap = {
+    width: 'height',
+    height: 'width',
+
+    overflowX: 'overflowY',
+    overflowY: 'overflowX',
+
+    clientWidth: 'clientHeight',
+    clientHeight: 'clientWidth',
+
+    clientX: 'clientY',
+    clientY: 'clientX',
+
+    scrollWidth: 'scrollHeight',
+    scrollLeft: 'scrollTop',
+
+    offsetLeft: 'offsetTop',
+    offsetTop: 'offsetLeft',
+    offsetHeight: 'offsetWidth',
+    offsetWidth: 'offsetHeight',
+
+    left: 'top',
+    right: 'bottom',
+    top: 'left',
+    bottom: 'right',
+
+    borderRightStyle: 'borderBottomStyle',
+    borderRightWidth: 'borderBottomWidth',
+    borderRightColor: 'borderBottomColor'
+};
+
+/**
+ * Convert a horizontally-oriented property name to a vertical one.
+ *
+ * @param {string} prop A property name
+ * @param {bool} vertical Whether the element is oriented vertically
+ * @returns {string} prop, converted appropriately
+ */
+function mapProp(prop, vertical) {
+    if (Object.prototype.hasOwnProperty.call(verticalPropMap, prop)) {
+        return vertical ? verticalPropMap[prop] : prop;
+    } else {
+        return prop;
+    }
+}
+
+const isProxy = Symbol("isProxy");
+
+/**
+ * Returns an appropriately oriented object based on vertical.
+ * If vertical is true, attribute getting and setting will be mapped through
+ * verticalPropMap, so that e.g. getting the object's .width will give its
+ * .height instead.
+ * Certain methods of an oriented object will return oriented objects as well.
+ * Oriented objects can't be added to the DOM directly since they are Proxy objects
+ * and thus fail typechecks. Use domElement to get the actual element for this.
+ *
+ * @param {object} target The object to be wrapped and oriented
+ * @param {bool} vertical Whether the element is oriented vertically
+ * @returns {Proxy} An oriented object with attr translation via verticalAttrMap
+ * @since 5.0.0
+ */
+export default function withOrientation(target, vertical) {
+    if (target[isProxy]) {
+        return target;
+    } else {
+        return new Proxy(
+            target, {
+                get: function(obj, prop, receiver) {
+                    if (prop === isProxy) {
+                        return true;
+                    } else if (prop === 'domElement') {
+                        return obj;
+                    } else if (prop === 'style') {
+                        return withOrientation(obj.style, vertical);
+                    } else if (prop === 'canvas') {
+                        return withOrientation(obj.canvas, vertical);
+                    } else if (prop === 'getBoundingClientRect') {
+                        return function(...args) {
+                            return withOrientation(obj.getBoundingClientRect(...args), vertical);
+                        };
+                    } else if (prop === 'getContext') {
+                        return function(...args) {
+                            return withOrientation(obj.getContext(...args), vertical);
+                        };
+                    } else {
+                        let value = obj[mapProp(prop, vertical)];
+                        return typeof value == 'function' ? value.bind(obj) : value;
+                    }
+                },
+                set: function(obj, prop, value) {
+                    obj[mapProp(prop, vertical)] = value;
+                    return true;
+                }
+            }
+        );
+    }
+}