wavesurfer-rails 0.1.2 → 0.1.11

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

@@ -1,213 +0,0 @@
-'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

@@ -1,416 +0,0 @@
-'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);
-};