wavesurfer.js 4.5.0 → 5.1.0

package/src/plugin/playhead/index.js

@@ -0,0 +1,226 @@
+
+/**
+ * The playhead plugin separates the notion of the currently playing position from
+ * a 'play-start' position.  Having a playhead enables a listening pattern
+ * (commonly found in DAWs) that involves listening to a section of a track
+ * repeatedly, rather than listening to an entire track in a linear fashion.
+ *
+ * @implements {PluginClass}
+ *
+ * @example
+ * import PlayheadPlugin from 'wavesurfer.playhead.js';
+ *
+ * // if you are using <script> tags
+ * var PlayheadPlugin = window.WaveSurfer.playhead;
+ *
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     PlayheadPlugin.create({
+ *        movePlayheadOnSeek: true,
+ *        drawPlayhead: false,
+ *        movePlayheadOnPause: false
+ *     })
+ *   ]
+ * });
+ */
+
+const DEFAULT_FILL_COLOR = '#CF2F00';
+
+export default class PlayheadPlugin {
+    /**
+     * @typedef {Object} PlayheadPluginParams
+     * @property {?boolean} draw=true Draw the playhead as a triangle/line
+     * @property {?boolean} moveOnSeek=true Seeking (via clicking) while playing moves the playhead
+     * @property {?boolean} returnOnPause=true Pausing the track returns the seek position to the playhead
+     */
+
+    /**
+     * Playhead plugin definition factory
+     *
+     * This function must be used to create a plugin definition which can be
+     * used by wavesurfer to correctly instantiate the plugin.
+     *
+     * @param {PlayheadPluginParams} params parameters use to initialise the plugin
+     * @since 5.0.0
+     * @return {PluginDefinition} an object representing the plugin
+     */
+    static create(params) {
+        return {
+            name: 'playhead',
+            deferInit: params && params.deferInit ? params.deferInit : false,
+            params: params,
+            instance: PlayheadPlugin
+        };
+    }
+
+    constructor(params, ws) {
+        this.params = params;
+        this.options = {};
+
+        ['draw', 'moveOnSeek', 'returnOnPause'].forEach(opt => {
+            if (opt in params) {
+                this.options[opt] = params[opt];
+            } else {
+                this.options[opt] = true;
+            }
+        });
+
+
+        this.wavesurfer = ws;
+        this.util = ws.util;
+        this.style = this.util.style;
+        this.markerWidth = 21;
+        this.markerHeight = 16;
+        this.playheadTime = 0;
+        this.unFuns = [];
+
+        this._onResize = () => {
+            this._updatePlayheadPosition();
+        };
+
+        this._onReady = () => {
+            this.wrapper = this.wavesurfer.drawer.wrapper;
+            this._updatePlayheadPosition();
+        };
+    }
+
+    _onBackendCreated() {
+        this.wrapper = this.wavesurfer.drawer.wrapper;
+
+        if (this.options.draw) {
+            this._createPlayheadElement();
+            window.addEventListener('resize', this._onResize, true);
+            window.addEventListener('orientationchange', this._onResize, true);
+
+            this.wavesurferOn('zoom', this._onResize);
+        }
+
+        this.wavesurferOn('pause', () => {
+            if ( this.options.returnOnPause ) {
+                this.wavesurfer.setCurrentTime(this.playheadTime);
+            }
+        });
+
+        this.wavesurferOn('seek', () => {
+            if ( this.options.moveOnSeek ) {
+                this.playheadTime = this.wavesurfer.getCurrentTime();
+                this._updatePlayheadPosition();
+            }
+        });
+
+        this.playheadTime = this.wavesurfer.getCurrentTime();
+    }
+
+    wavesurferOn(ev, fn) {
+        let ret = this.wavesurfer.on(ev, fn);
+        this.unFuns.push(() => {
+            this.wavesurfer.un(ev, fn);
+        });
+        return ret;
+    }
+
+    init() {
+        if (this.wavesurfer.isReady) {
+            this._onBackendCreated();
+            this._onReady();
+        } else {
+            let r;
+
+            this.wavesurfer.once('ready', () => this._onReady());
+            this.wavesurfer.once('backend-created', () => this._onBackendCreated());
+        }
+    }
+
+    destroy() {
+        this.unFuns.forEach(f => f());
+        this.unFuns = [];
+
+        this.wrapper.removeChild(this.element);
+
+        window.removeEventListener('resize', this._onResize, true);
+        window.removeEventListener('orientationchange', this._onResize, true);
+    }
+
+    setPlayheadTime(time) {
+        this.playheadTime = time;
+
+        if (!this.wavesurfer.isPlaying()) {
+            this.wavesurfer.setCurrentTime(time);
+        }
+        this._updatePlayheadPosition();
+    }
+
+    _createPointerSVG() {
+        const svgNS = 'http://www.w3.org/2000/svg';
+
+        const el = document.createElementNS(svgNS, 'svg');
+        const path = document.createElementNS(svgNS, 'path');
+
+        el.setAttribute('viewBox', '0 0 33 30');
+        path.setAttribute('d', 'M16.75 31 31.705 5.566A3 3 0 0 0 29.146 1H4.354a3 3 0 0 0-2.56 4.566L16.75 31z');
+        path.setAttribute('stroke', '#979797');
+        path.setAttribute('fill', DEFAULT_FILL_COLOR);
+
+        el.appendChild(path);
+
+        this.style(el, {
+            width: this.markerWidth + 'px',
+            height: this.markerHeight + 'px',
+            cursor: 'pointer',
+            'z-index': 5
+        });
+        return el;
+    }
+
+    _createPlayheadElement() {
+        const el = document.createElement('playhead');
+        el.className = 'wavesurfer-playhead';
+
+        this.style(el, {
+            position: 'absolute',
+            height: '100%',
+            display: 'flex',
+            'flex-direction': 'column'
+        });
+
+        const pointer = this._createPointerSVG();
+        el.appendChild(pointer);
+
+        pointer.addEventListener('click', e => {
+            e.stopPropagation();
+            this.wavesurfer.setCurrentTime(this.playheadTime);
+        });
+
+        const line = document.createElement('div');
+        this.style(line, {
+            'flex-grow': 1,
+            'margin-left': (this.markerWidth / 2 - 0.5) + 'px',
+            background: 'black',
+            width: '1px',
+            opacity: 0.1
+        });
+
+        el.appendChild(line);
+
+        this.element = el;
+        this.wrapper.appendChild(el);
+    }
+
+    _updatePlayheadPosition() {
+        if (!this.element) {
+            return;
+        }
+
+        const duration = this.wavesurfer.getDuration();
+        const elementWidth =
+            this.wavesurfer.drawer.width /
+            this.wavesurfer.params.pixelRatio;
+
+        const positionPct = this.playheadTime / duration;
+        this.style(this.element, {
+            left: ((elementWidth * positionPct) - (this.markerWidth / 2)) + 'px'
+        });
+    }
+}

package/src/plugin/regions/index.js

@@ -30,6 +30,7 @@
  * @property {?number} channelIdx Select channel to draw the region on (if there are multiple channel waveforms).
  * @property {?object} handleStyle A set of CSS properties used to style the left and right handle.
  * @property {?boolean} preventContextMenu=false Determines whether the context menu is prevented from being opened.
+ * @property {boolean} showTooltip=true Enable/disable tooltip displaying start and end times when hovering over region.
  */
 
 import {Region} from "./region.js";
@@ -127,11 +128,16 @@ export default class RegionsPlugin {
         });
         this.wavesurfer.Region = Region;
 
+        // By default, scroll the container if the user drags a region
+        // within 5% of its edge
+        const scrollWidthProportion = 0.05;
         this._onBackendCreated = () => {
             this.wrapper = this.wavesurfer.drawer.wrapper;
+            this.orientation = this.wavesurfer.drawer.orientation;
             if (this.params.regions) {
                 this.params.regions.forEach(region => {
-                    region.edgeScrollWidth = this.params.edgeScrollWidth || this.wrapper.clientWidth * 0.05;
+                    region.edgeScrollWidth = this.params.edgeScrollWidth ||
+                        this.wrapper.clientWidth * scrollWidthProportion;
                     this.add(region);
                 });
             }
@@ -141,6 +147,7 @@ export default class RegionsPlugin {
         this.list = {};
         this._onReady = () => {
             this.wrapper = this.wavesurfer.drawer.wrapper;
+            this.vertical = this.wavesurfer.drawer.params.vertical;
             if (this.params.dragSelection) {
                 this.enableDragSelection(this.params);
             }
@@ -186,7 +193,9 @@ export default class RegionsPlugin {
      * @return {Region} The created region
      */
     add(params) {
-        if (this.wouldExceedMaxRegions()) return null;
+        if (this.wouldExceedMaxRegions()) {
+            return null;
+        }
 
         if (!params.minLength && this.regionsMinLength) {
             params = {...params, minLength: this.regionsMinLength};
@@ -268,8 +277,12 @@ export default class RegionsPlugin {
             touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
 
             // Store for scroll calculations
-            maxScroll = this.wrapper.scrollWidth - this.wrapper.clientWidth;
-            wrapperRect = this.wrapper.getBoundingClientRect();
+            maxScroll = this.wrapper.scrollWidth -
+                this.wrapper.clientWidth;
+            wrapperRect = this.util.withOrientation(
+                this.wrapper.getBoundingClientRect(),
+                this.vertical
+            );
 
             drag = true;
             start = this.wavesurfer.drawer.handleEvent(e, true);
@@ -314,7 +327,7 @@ export default class RegionsPlugin {
             this.wrapper.removeEventListener('mouseleave', eventUp);
         });
 
-        const eventMove = e => {
+        const eventMove = event => {
             if (!drag) {
                 return;
             }
@@ -322,20 +335,22 @@ export default class RegionsPlugin {
                 return;
             }
 
-            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;
             }
 
             // auto-create a region during mouse drag, unless region-count would exceed "maxRegions"
             if (!region) {
                 region = this.add(params || {});
-                if (!region) return;
+                if (!region) {
+                    return;
+                }
             }
 
-            const end = this.wavesurfer.drawer.handleEvent(e);
+            const end = this.wavesurfer.drawer.handleEvent(event);
             const startUpdate = this.wavesurfer.regions.util.getRegionSnapToGridValue(
                 start * duration
             );
@@ -347,10 +362,12 @@ export default class RegionsPlugin {
                 end: Math.max(endUpdate, startUpdate)
             });
 
+            let orientedEvent = this.util.withOrientation(event, this.vertical);
+
             // If scrolling is enabled
             if (scroll && container.clientWidth < this.wrapper.scrollWidth) {
                 // Check threshold based on mouse
-                const x = e.clientX - wrapperRect.left;
+                const x = orientedEvent.clientX - wrapperRect.left;
                 if (x <= scrollThreshold) {
                     scrollDirection = -1;
                 } else if (x >= wrapperRect.right - scrollThreshold) {
@@ -358,7 +375,7 @@ export default class RegionsPlugin {
                 } else {
                     scrollDirection = null;
                 }
-                scrollDirection && edgeScroll(e);
+                scrollDirection && edgeScroll(event);
             }
         };
         this.wrapper.addEventListener('mousemove', eventMove);