wavesurfer-rails 0.1.1 → 0.1.2

data/vendor/assets/javascripts/ws-plugins/wavesurfer.minimap.js

@@ -0,0 +1,213 @@
+'use strict';
+
+/* Minimap */
+WaveSurfer.Minimap = WaveSurfer.util.extend({}, WaveSurfer.Drawer, WaveSurfer.Drawer.Canvas, {
+    init: function (wavesurfer, params) {
+        this.wavesurfer = wavesurfer;
+        this.container = this.wavesurfer.drawer.container;
+        this.lastPos = this.wavesurfer.drawer.lastPos;
+        this.params = wavesurfer.util.extend(
+            {}, this.wavesurfer.drawer.params, {
+                showRegions: false,
+                showOverview: false,
+                overviewBorderColor: 'green',
+                overviewBorderSize: 2
+            }, params, {
+                scrollParent: false,
+                fillParent: true
+            }
+        );
+
+        this.width = 0;
+        this.height = this.params.height * this.params.pixelRatio;
+
+        this.createWrapper();
+        this.createElements();
+
+        if (WaveSurfer.Regions && this.params.showRegions) {
+            this.regions();
+        }
+
+        this.bindWaveSurferEvents();
+        this.bindMinimapEvents();
+    },
+    regions: function() {
+        var my = this;
+        this.regions = {};
+
+        this.wavesurfer.on('region-created', function(region) {
+            my.regions[region.id] = region;
+            my.renderRegions();
+        });
+
+        this.wavesurfer.on('region-updated', function(region) {
+            my.regions[region.id] = region;
+            my.renderRegions();
+        });
+
+        this.wavesurfer.on('region-removed', function(region) {
+            delete my.regions[region.id];
+            my.renderRegions();
+        });
+    },
+    renderRegions: function() {
+        var my = this;
+        var regionElements = this.wrapper.querySelectorAll('region');
+        for (var i = 0; i < regionElements.length; ++i) {
+          this.wrapper.removeChild(regionElements[i]);
+        }
+
+        Object.keys(this.regions).forEach(function(id){
+            var region = my.regions[id];
+            var width = (my.width * ((region.end - region.start) / my.wavesurfer.getDuration()));
+            var left = (my.width * (region.start / my.wavesurfer.getDuration()));
+            var regionElement = my.style(document.createElement('region'), {
+                height: 'inherit',
+                backgroundColor: region.color,
+                width: width + 'px',
+                left: left + 'px',
+                display: 'block',
+                position: 'absolute'
+            });
+            regionElement.classList.add(id);
+            my.wrapper.appendChild(regionElement);
+        });
+    },
+    createElements: function() {
+        WaveSurfer.Drawer.Canvas.createElements.call(this);
+
+        if (this.params.showOverview) {
+            this.overviewRegion =  this.style(document.createElement('overview'), {
+                height: (this.wrapper.offsetHeight - (this.params.overviewBorderSize * 2)) + 'px',
+                width: '0px',
+                display: 'block',
+                position: 'absolute',
+                cursor: 'move',
+                border: this.params.overviewBorderSize + 'px solid ' + this.params.overviewBorderColor,
+                zIndex: 2,
+                opacity: this.params.overviewOpacity
+            });
+
+            this.wrapper.appendChild(this.overviewRegion);
+        }
+    },
+
+    bindWaveSurferEvents: function () {
+        var my = this;
+        this.wavesurfer.on('ready', this.render.bind(this));
+        this.wavesurfer.on('audioprocess', function (currentTime) {
+            my.progress(my.wavesurfer.backend.getPlayedPercents());
+        });
+        this.wavesurfer.on('seek', function(progress) {
+            my.progress(my.wavesurfer.backend.getPlayedPercents());
+        });
+
+        if (this.params.showOverview) {
+            this.wavesurfer.on('scroll', function(event) {
+                if (!my.draggingOverview) {
+                    my.moveOverviewRegion(event.target.scrollLeft / my.ratio);
+                }
+            });
+
+            this.wavesurfer.drawer.wrapper.addEventListener('mouseover', function(event) {
+                if (my.draggingOverview)  {
+                    my.draggingOverview = false;
+                }
+            });
+        }
+
+        var prevWidth = 0;
+        var onResize = function () {
+            if (prevWidth != my.wrapper.clientWidth) {
+                prevWidth = my.wrapper.clientWidth;
+                my.render();
+                my.progress(my.wavesurfer.backend.getPlayedPercents());
+            }
+        };
+        window.addEventListener('resize', onResize, true);
+
+        this.wavesurfer.on('destroy', function () {
+            my.destroy.bind(this);
+            window.removeEventListener('resize', onResize, true);
+        });
+    },
+
+    bindMinimapEvents: function () {
+        var my = this;
+        var relativePositionX = 0;
+        var seek = true;
+        var positionMouseDown = {
+            clientX: 0,
+            clientY: 0
+        };
+
+        this.on('click', (function (e, position) {
+            if (seek)  {
+                this.progress(position);
+                this.wavesurfer.seekAndCenter(position);
+            } else {
+                seek = true;
+            }
+        }).bind(this));
+
+        if (this.params.showOverview) {
+            this.overviewRegion.addEventListener('mousedown', function(event) {
+                my.draggingOverview = true;
+                relativePositionX = event.layerX;
+                positionMouseDown.clientX = event.clientX;
+                positionMouseDown.clientY = event.clientY;
+            });
+
+            this.wrapper.addEventListener('mousemove', function(event) {
+                if(my.draggingOverview) {
+                    my.moveOverviewRegion(event.clientX - my.container.getBoundingClientRect().left - relativePositionX);
+                }
+            });
+
+            this.wrapper.addEventListener('mouseup', function(event) {
+                if (positionMouseDown.clientX - event.clientX === 0 && positionMouseDown.clientX - event.clientX === 0) {
+                    seek = true;
+                    my.draggingOverview = false;
+                } else if (my.draggingOverview)  {
+                    seek = false;
+                    my.draggingOverview = false;
+                }
+            });
+        }
+    },
+
+    render: function () {
+        var len = this.getWidth();
+        var peaks = this.wavesurfer.backend.getPeaks(len);
+        this.drawPeaks(peaks, len);
+
+        if (this.params.showOverview) {
+            //get proportional width of overview region considering the respective
+            //width of the drawers
+            this.ratio = this.wavesurfer.drawer.width / this.width;
+            this.waveShowedWidth = this.wavesurfer.drawer.width / this.ratio;
+            this.waveWidth = this.wavesurfer.drawer.width;
+            this.overviewWidth = (this.width / this.ratio);
+            this.overviewPosition = 0;
+            this.overviewRegion.style.width = (this.overviewWidth - (this.params.overviewBorderSize * 2)) + 'px';
+        }
+    },
+    moveOverviewRegion: function(pixels) {
+        if (pixels < 0) {
+            this.overviewPosition = 0;
+        } else if (pixels + this.overviewWidth < this.width) {
+            this.overviewPosition = pixels;
+        } else {
+            this.overviewPosition = (this.width - this.overviewWidth);
+        }
+        this.overviewRegion.style.left = this.overviewPosition + 'px';
+        this.wavesurfer.drawer.wrapper.scrollLeft = this.overviewPosition * this.ratio;
+    }
+});
+
+
+WaveSurfer.initMinimap = function (params) {
+    var map = Object.create(WaveSurfer.Minimap);
+    map.init(this, params);
+    return map;
+};

data/vendor/assets/javascripts/ws-plugins/wavesurfer.regions.js

@@ -0,0 +1,416 @@
+'use strict';
+
+/* Regions manager */
+WaveSurfer.Regions = {
+    init: function (wavesurfer) {
+        this.wavesurfer = wavesurfer;
+        this.wrapper = this.wavesurfer.drawer.wrapper;
+
+        /* Id-based hash of regions. */
+        this.list = {};
+    },
+
+    /* Remove a region. */
+    add: function (params) {
+        var region = Object.create(WaveSurfer.Region);
+        region.init(params, this.wavesurfer);
+
+        this.list[region.id] = region;
+
+        region.on('remove', (function () {
+            delete this.list[region.id];
+        }).bind(this));
+
+        return region;
+    },
+
+    /* Remove all regions. */
+    clear: function () {
+        Object.keys(this.list).forEach(function (id) {
+            this.list[id].remove();
+        }, this);
+    },
+
+    enableDragSelection: function (params) {
+        var my = this;
+        var drag;
+        var start;
+        var region;
+
+        this.wrapper.addEventListener('mousedown', function (e) {
+            drag = true;
+            start = my.wavesurfer.drawer.handleEvent(e);
+            region = null;
+        });
+        this.wrapper.addEventListener('mouseup', function (e) {
+            drag = false;
+
+            if (region) {
+                region.fireEvent('update-end', e);
+                my.wavesurfer.fireEvent('region-update-end', region, e);
+            }
+
+            region = null;
+        });
+        this.wrapper.addEventListener('mousemove', function (e) {
+            if (!drag) { return; }
+
+            if (!region) {
+                region = my.add(params || {});
+            }
+
+            var duration = my.wavesurfer.getDuration();
+            var end = my.wavesurfer.drawer.handleEvent(e);
+            region.update({
+                start: Math.min(end * duration, start * duration),
+                end: Math.max(end * duration, start * duration)
+            });
+        });
+    }
+};
+
+WaveSurfer.Region = {
+    /* Helper function to assign CSS styles. */
+    style: WaveSurfer.Drawer.style,
+
+    init: function (params, wavesurfer) {
+        this.wavesurfer = wavesurfer;
+        this.wrapper = wavesurfer.drawer.wrapper;
+
+        this.id = params.id == null ? WaveSurfer.util.getId() : params.id;
+        this.start = Number(params.start) || 0;
+        this.end = params.end == null ?
+            // small marker-like region
+            this.start + (4 / this.wrapper.scrollWidth) * this.wavesurfer.getDuration() :
+            Number(params.end);
+        this.resize = params.resize === undefined ? true : Boolean(params.resize);
+        this.drag = params.drag === undefined ? true : Boolean(params.drag);
+        this.loop = Boolean(params.loop);
+        this.color = params.color || 'rgba(0, 0, 0, 0.1)';
+        this.data = params.data || {};
+
+        this.maxLength = params.maxLength;
+        this.minLength = params.minLength;
+
+        this.bindInOut();
+        this.render();
+
+        this.wavesurfer.fireEvent('region-created', this);
+    },
+
+    /* Update region params. */
+    update: function (params) {
+        if (null != params.start) {
+            this.start = Number(params.start);
+        }
+        if (null != params.end) {
+            this.end = Number(params.end);
+        }
+        if (null != params.loop) {
+            this.loop = Boolean(params.loop);
+        }
+        if (null != params.color) {
+            this.color = params.color;
+        }
+        if (null != params.data) {
+            this.data = params.data;
+        }
+        if (null != params.resize) {
+            this.resize = Boolean(params.resize);
+        }
+        if (null != params.drag) {
+            this.drag = Boolean(params.drag);
+        }
+        if (null != params.maxLength) {
+            this.maxLength = Number(params.maxLength);
+        }
+        if (null != params.minLength) {
+            this.minLength = Number(params.minLength);
+        }
+
+        this.updateRender();
+        this.fireEvent('update');
+        this.wavesurfer.fireEvent('region-updated', this);
+    },
+
+    /* Remove a single region. */
+    remove: function (region) {
+        if (this.element) {
+            this.wrapper.removeChild(this.element);
+            this.element = null;
+            this.fireEvent('remove');
+            this.wavesurfer.fireEvent('region-removed', this);
+        }
+    },
+
+    /* Play the audio region. */
+    play: function () {
+        this.wavesurfer.play(this.start, this.end);
+        this.fireEvent('play');
+        this.wavesurfer.fireEvent('region-play', this);
+    },
+
+    /* Play the region in loop. */
+    playLoop: function () {
+        this.play();
+        this.once('out', this.playLoop.bind(this));
+    },
+
+    /* Render a region as a DOM element. */
+    render: function () {
+        var regionEl = document.createElement('region');
+        regionEl.className = 'wavesurfer-region';
+        regionEl.title = this.formatTime(this.start, this.end);
+        regionEl.setAttribute('data-id', this.id);
+
+        var width = this.wrapper.scrollWidth;
+        this.style(regionEl, {
+            position: 'absolute',
+            zIndex: 2,
+            height: '100%',
+            top: '0px'
+        });
+
+        /* Resize handles */
+        if (this.resize) {
+            var handleLeft = regionEl.appendChild(document.createElement('handle'));
+            var handleRight = regionEl.appendChild(document.createElement('handle'));
+            handleLeft.className = 'wavesurfer-handle wavesurfer-handle-start';
+            handleRight.className = 'wavesurfer-handle wavesurfer-handle-end';
+            var css = {
+                cursor: 'col-resize',
+                position: 'absolute',
+                left: '0px',
+                top: '0px',
+                width: '1%',
+                maxWidth: '4px',
+                height: '100%'
+            };
+            this.style(handleLeft, css);
+            this.style(handleRight, css);
+            this.style(handleRight, {
+                left: '100%'
+            });
+        }
+
+        this.element = this.wrapper.appendChild(regionEl);
+        this.updateRender();
+        this.bindEvents(regionEl);
+    },
+
+    formatTime: function (start, end) {
+        return (start == end ? [ start ] : [ start, end ]).map(function (time) {
+            return [
+                Math.floor((time % 3600) / 60), // minutes
+                ('00' + Math.floor(time % 60)).slice(-2) // seconds
+            ].join(':');
+        }).join('–');
+    },
+
+    /* Update element's position, width, color. */
+    updateRender: function () {
+        var dur = this.wavesurfer.getDuration();
+        var width = this.wrapper.scrollWidth;
+
+        if (this.start < 0) {
+          this.start = 0;
+          this.end = this.end - this.start;
+        }
+        if (this.end > dur) {
+          this.end = dur;
+          this.start = dur - (this.end - this.start);
+        }
+
+        if (this.minLength != null) {
+            this.end = Math.max(this.start + this.minLength, this.end);
+        }
+
+        if (this.maxLength != null) {
+            this.end = Math.min(this.start + this.maxLength, this.end);
+        }
+
+        this.style(this.element, {
+            left: ~~(this.start / dur * width) + 'px',
+            width: ~~((this.end - this.start) / dur * width) + 'px',
+            backgroundColor: this.color,
+            cursor: this.drag ? 'move' : 'default'
+        });
+        this.element.title = this.formatTime(this.start, this.end);
+    },
+
+    /* Bind audio events. */
+    bindInOut: function () {
+        var my = this;
+
+        var onPlay = function () {
+            my.firedIn = false;
+            my.firedOut = false;
+        };
+
+        var onProcess = function (time) {
+            if (!my.firedIn && my.start <= time && my.end > time) {
+                my.firedIn = true;
+                my.fireEvent('in');
+                my.wavesurfer.fireEvent('region-in', my);
+            }
+            if (!my.firedOut && my.firedIn && my.end <= Math.round(time * 100) / 100) {
+                my.firedOut = true;
+                my.fireEvent('out');
+                my.wavesurfer.fireEvent('region-out', my);
+            }
+        };
+
+        this.wavesurfer.on('play', onPlay);
+        this.wavesurfer.backend.on('audioprocess', onProcess);
+
+        this.on('remove', function () {
+            my.wavesurfer.un('play', onPlay);
+            my.wavesurfer.backend.un('audioprocess', onProcess);
+        });
+
+        /* Loop playback. */
+        this.on('out', function () {
+            if (my.loop) {
+                my.wavesurfer.play(my.start);
+            }
+        });
+    },
+
+    /* Bind DOM events. */
+    bindEvents: function () {
+        var my = this;
+
+        this.element.addEventListener('mouseenter', function (e) {
+            my.fireEvent('mouseenter', e);
+            my.wavesurfer.fireEvent('region-mouseenter', my, e);
+        });
+
+        this.element.addEventListener('mouseleave', function (e) {
+            my.fireEvent('mouseleave', e);
+            my.wavesurfer.fireEvent('region-mouseleave', my, e);
+        });
+
+        this.element.addEventListener('click', function (e) {
+            e.preventDefault();
+            my.fireEvent('click', e);
+            my.wavesurfer.fireEvent('region-click', my, e);
+        });
+
+        this.element.addEventListener('dblclick', function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            my.fireEvent('dblclick', e);
+            my.wavesurfer.fireEvent('region-dblclick', my, e);
+        });
+
+        /* Drag or resize on mousemove. */
+        (this.drag || this.resize) && (function () {
+            var duration = my.wavesurfer.getDuration();
+            var drag;
+            var resize;
+            var startTime;
+
+            var onDown = function (e) {
+                e.stopPropagation();
+                startTime = my.wavesurfer.drawer.handleEvent(e) * duration;
+
+                if (e.target.tagName.toLowerCase() == 'handle') {
+                    if (e.target.classList.contains('wavesurfer-handle-start')) {
+                        resize = 'start';
+                    } else {
+                        resize = 'end';
+                    }
+                } else {
+                    drag = true;
+                }
+            };
+            var onUp = function (e) {
+                if (drag || resize) {
+                    drag = false;
+                    resize = false;
+                    e.stopPropagation();
+                    e.preventDefault();
+
+                    my.fireEvent('update-end', e);
+                    my.wavesurfer.fireEvent('region-update-end', my, e);
+                }
+            };
+            var onMove = function (e) {
+                if (drag || resize) {
+                    var time = my.wavesurfer.drawer.handleEvent(e) * duration;
+                    var delta = time - startTime;
+                    startTime = time;
+
+                    // Drag
+                    if (my.drag && drag) {
+                        my.onDrag(delta);
+                    }
+
+                    // Resize
+                    if (my.resize && resize) {
+                        my.onResize(delta, resize);
+                    }
+                }
+            };
+
+            my.element.addEventListener('mousedown', onDown);
+            my.wrapper.addEventListener('mousemove', onMove);
+            document.body.addEventListener('mouseup', onUp);
+
+            my.on('remove', function () {
+                document.body.removeEventListener('mouseup', onUp);
+                my.wrapper.removeEventListener('mousemove', onMove);
+            });
+
+            my.wavesurfer.on('destroy', function () {
+                document.body.removeEventListener('mouseup', onUp);
+            });
+        }());
+    },
+
+    onDrag: function (delta) {
+        this.update({
+            start: this.start + delta,
+            end: this.end + delta
+        });
+    },
+
+    onResize: function (delta, direction) {
+        if (direction == 'start') {
+            this.update({
+                start: Math.min(this.start + delta, this.end),
+                end: Math.max(this.start + delta, this.end)
+            });
+        } else {
+            this.update({
+                start: Math.min(this.end + delta, this.start),
+                end: Math.max(this.end + delta, this.start)
+            });
+        }
+    }
+};
+
+WaveSurfer.util.extend(WaveSurfer.Region, WaveSurfer.Observer);
+
+
+/* Augment WaveSurfer with region methods. */
+WaveSurfer.initRegions = function () {
+    if (!this.regions) {
+        this.regions = Object.create(WaveSurfer.Regions);
+        this.regions.init(this);
+    }
+};
+
+WaveSurfer.addRegion = function (options) {
+    this.initRegions();
+    return this.regions.add(options);
+};
+
+WaveSurfer.clearRegions = function () {
+    this.regions && this.regions.clear();
+};
+
+WaveSurfer.enableDragSelection = function (options) {
+    this.initRegions();
+    this.regions.enableDragSelection(options);
+};