@checksub_team/peaks_timeline 1.11.0 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checksub_team/peaks_timeline",
-  "version": "1.11.0",
+  "version": "1.12.1",
   "description": "JavaScript UI component for displaying audio waveforms",
   "main": "./peaks.js",
   "types": "./peaks.js.d.ts",

package/peaks.js

@@ -17675,7 +17675,8 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         this._width = this._view.timeToPixels(source.endTime - source.startTime);
         this._unwrappedHeight = source.binaryHeight && source.previewHeight ? source.binaryHeight + source.previewHeight : this._peaks.options.lineHeight;
         this._wrappedHeight = this._peaks.options.wrappedLineHeight;
-        this._borderWidth = this._source.borderWidth;
+        this._borderWidth = this._source.borderWidth || 0;
+        this._height = this._unwrappedHeight;
         this._previewList = [];
         this._markersGroup = this._createMarkers();
         this._group = new Konva.Group({
@@ -17688,8 +17689,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         this._group.on('dragstart', this._layer.onSourcesGroupDragStart.bind(this._layer));
         this._group.on('dragend', this._layer.onSourcesGroupDragEnd.bind(this._layer));
+        this._cursor = null;
         this._group.on('mouseover', function () {
             self._view.setHoveredElement(self);
+            if (self._source.draggable) {
+                self._view.setCursor(self._cursor || 'pointer');
+            }
             if (self._view.getCurrentMode() === 'cut') {
                 self.toggleDragging(false);
                 self.toggleResizing(false);
@@ -17697,6 +17702,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         });
         this._group.on('mouseout', function () {
             self._view.setHoveredElement(null);
+            self._view.setCursor('default');
             if (self._view.getCurrentMode() === 'cut') {
                 self.toggleDragging(true);
                 self.toggleResizing(true);
@@ -17752,12 +17758,12 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
     SourceGroup.prototype.setWrapping = function (wrap, forceCreate, notify) {
         if (wrap) {
             this._removeUnwrap();
-            this._addWrap(forceCreate);
             this._height = this._wrappedHeight;
+            this._addWrap(forceCreate);
         } else {
             this._removeWrap();
-            this._addUnwrap(forceCreate);
             this._height = this._unwrappedHeight;
+            this._addUnwrap(forceCreate);
         }
         this.setHandlesWrapping(wrap);
         if (notify) {
@@ -17789,10 +17795,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             });
             if (this._source.resizable) {
                 this._leftHandle.on('mouseover', function () {
-                    self._view.setCursor('ew-resize');
+                    self._cursor = 'ew-resize';
                 });
                 this._leftHandle.on('mouseout', function () {
-                    self._view.setCursor('default');
+                    self._cursor = null;
                 });
             }
         }
@@ -17809,10 +17815,10 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
             });
             if (this._source.resizable) {
                 this._rightHandle.on('mouseover', function () {
-                    self._view.setCursor('ew-resize');
+                    self._cursor = 'ew-resize';
                 });
                 this._rightHandle.on('mouseout', function () {
-                    self._view.setCursor('default');
+                    self._cursor = null;
                 });
             }
         }
@@ -17847,7 +17853,7 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }
     };
     SourceGroup.prototype.drawSourceShape = function (ctx, shape, addBorderWidth) {
-        var offset = addBorderWidth && this._borderWidth ? this._borderWidth : 0;
+        var offset = addBorderWidth ? this._borderWidth : 0;
         var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ? this._source.borderRadius : Math.max(1, Math.min(this._width / 2, Math.min(CORNER_RADIUS, this._height / 2)));
         var x = Math.max(0, this._view.getFrameOffset() - this._x - radius);
         var width = Math.min(this._width - x, this._view.getOriginalWidth() + radius - Math.max(0, this._x - this._view.getFrameOffset()));
@@ -17882,14 +17888,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.drawSourceShape(ctx, null, true);
             }
         });
-        if (this._source.draggable) {
-            unwrap.on('mouseenter', function () {
-                self._view.setCursor('pointer');
-            });
-            unwrap.on('mouseout', function () {
-                self._view.setCursor('default');
-            });
-        }
         var background = new Konva.Group();
         background.add(new Konva.Shape({
             fill: this._source.backgroundColor,
@@ -17899,6 +17897,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }));
         unwrap.add(background);
         unwrap.add(this._markersGroup);
+        if (this._source.volumeRange && this._source.volume !== undefined) {
+            unwrap.add(this._getVolumeSlider());
+        }
         unwrap.add(this._createTitle(false));
         return unwrap;
     };
@@ -17929,14 +17930,6 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
                 self.drawSourceShape(ctx, null, true);
             }
         });
-        if (this._source.draggable) {
-            wrap.on('mouseenter', function () {
-                self._view.setCursor('pointer');
-            });
-            wrap.on('mouseout', function () {
-                self._view.setCursor('default');
-            });
-        }
         var background = new Konva.Group();
         background.add(new Konva.Shape({
             fill: this._source.backgroundColor,
@@ -17946,6 +17939,9 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }));
         wrap.add(background);
         wrap.add(this._markersGroup);
+        if (this._source.volumeRange && this._source.volume !== undefined) {
+            wrap.add(this._getVolumeSlider());
+        }
         wrap.add(this._createTitle(true));
         return wrap;
     };
@@ -18397,6 +18393,97 @@ module.exports = function (WaveformBuilder, WaveformShape, Utils, Konva) {
         }.bind(this));
         return markersGroup;
     };
+    SourceGroup.prototype._getYFromVolume = function (volume) {
+        return this._borderWidth + (this._height - 2 * this._borderWidth) * (this._source.volumeRange[1] - volume) / (this._source.volumeRange[1] - this._source.volumeRange[0]);
+    };
+    SourceGroup.prototype._getVolumeFromY = function (y) {
+        return this._source.volumeRange[1] - (y - this._borderWidth) / (this._height - 2 * this._borderWidth) * (this._source.volumeRange[1] - this._source.volumeRange[0]);
+    };
+    SourceGroup.prototype._getVolumeSlider = function () {
+        if (!this._volumeSliderGroup) {
+            this._volumeSliderGroup = this._createVolumeSlider();
+        }
+        return this._volumeSliderGroup;
+    };
+    SourceGroup.prototype._createVolumeSlider = function () {
+        var self = this;
+        var volumeY = this._getYFromVolume(this._source.volume);
+        var volumeGroup = new Konva.Group({
+            x: 0,
+            y: 0,
+            width: this._width,
+            height: this._height
+        });
+        var volumeText = new Konva.Text({
+            x: 0,
+            y: volumeY - 20,
+            text: '100%',
+            fontSize: 12,
+            fill: this._source.volumeSliderColor,
+            visible: false
+        });
+        var maxTextWidth = volumeText.width();
+        var maxTextHeight = volumeText.height();
+        var volumeSliderGroup = new Konva.Group({
+            x: 0,
+            y: volumeY,
+            draggable: true,
+            dragBoundFunc: function (pos) {
+                var y = Math.min(volumeGroup.absolutePosition().y + self._height - self._borderWidth, Math.max(volumeGroup.absolutePosition().y + self._borderWidth, pos.y));
+                var textX = Math.min(volumeGroup.absolutePosition().x + self._width - maxTextWidth - self._borderWidth, Math.max(volumeGroup.absolutePosition().x + self._borderWidth, self._view.getPointerPosition().x - maxTextWidth));
+                var textY = y - self._source.volumeSliderWidth / 2 - maxTextHeight;
+                volumeText.absolutePosition({
+                    x: textX,
+                    y: textY < volumeGroup.absolutePosition().y + self._borderWidth ? y + self._source.volumeSliderWidth : textY
+                });
+                return {
+                    x: this.absolutePosition().x,
+                    y: y
+                };
+            }
+        });
+        var volumeSliderLine = new Konva.Line({
+            points: [
+                0,
+                0,
+                this._width,
+                0
+            ],
+            stroke: this._source.volumeSliderColor,
+            strokeWidth: this._source.volumeSliderWidth
+        });
+        var volumeSliderRect = new Konva.Rect({
+            x: 0,
+            y: -this._source.volumeSliderDraggingWidth / 2,
+            width: this._width,
+            height: this._source.volumeSliderDraggingWidth,
+            opacity: 0
+        });
+        volumeSliderGroup.add(volumeSliderRect);
+        volumeSliderGroup.add(volumeSliderLine);
+        volumeSliderGroup.on('dragstart', function () {
+            volumeText.visible(true);
+        });
+        volumeSliderGroup.on('dragmove', function () {
+            var volume = self._getVolumeFromY(volumeSliderGroup.y());
+            volumeText.text((volume * 100).toFixed(0) + '%');
+            self._source.volume = Math.max(self._source.volumeRange[0], Math.min(volume, self._source.volumeRange[1]));
+            self._peaks.emit('source.volumeChanged', self._source);
+            self._group.draw();
+        });
+        volumeSliderGroup.on('dragend', function () {
+            volumeText.visible(false);
+        });
+        volumeSliderGroup.on('mouseover', function () {
+            self._cursor = 'ns-resize';
+        });
+        volumeSliderGroup.on('mouseout', function () {
+            self._cursor = null;
+        });
+        volumeGroup.add(volumeSliderGroup);
+        volumeGroup.add(volumeText);
+        return volumeGroup;
+    };
     return SourceGroup;
 }(_dereq_('./waveform-builder'), _dereq_('./waveform-shape'), _dereq_('./utils'), _dereq_('konva'));
 },{"./utils":112,"./waveform-builder":113,"./waveform-shape":114,"konva":43}],105:[function(_dereq_,module,exports){
@@ -18482,6 +18569,21 @@ module.exports = function (Utils) {
         } else if (!Utils.isValidColor(options.selectedColor)) {
             throw new TypeError('peaks.sources.' + context + ': selectedColor should be a valid CSS color');
         }
+        if (Utils.isNullOrUndefined(options.volumeSliderColor)) {
+            options.volumeSliderColor = '#000000';
+        } else if (!Utils.isValidColor(options.volumeSliderColor)) {
+            throw new TypeError('peaks.sources.' + context + ': volumeSliderColor should be a valid CSS color');
+        }
+        if (Utils.isNullOrUndefined(options.volumeSliderWidth)) {
+            options.volumeSliderWidth = 2;
+        } else if (!Utils.isNumber(options.volumeSliderWidth)) {
+            throw new TypeError('peaks.sources.' + context + ': volumeSliderWidth should be a number');
+        }
+        if (Utils.isNullOrUndefined(options.volumeSliderDraggingWidth)) {
+            options.volumeSliderDraggingWidth = options.volumeSliderWidth;
+        } else if (!Utils.isNumber(options.volumeSliderDraggingWidth)) {
+            throw new TypeError('peaks.sources.' + context + ': volumeSliderDraggingWidth should be a number');
+        }
         if (Utils.isNullOrUndefined(options.textFont)) {
             options.textFont = 'Arial';
         }
@@ -18582,8 +18684,22 @@ module.exports = function (Utils) {
         if (Utils.isNullOrUndefined(options.markerWidth)) {
             options.markerWidth = 2;
         }
+        if (!Utils.isNullOrUndefined(options.volumeRange)) {
+            if (!Array.isArray(options.volumeRange) || options.volumeRange.length !== 2 || !options.volumeRange.every(Utils.isNumber)) {
+                throw new TypeError('peaks.sources.' + context + ': volumeRange must be an array of two numbers');
+            } else if (options.volumeRange[0] > options.volumeRange[1]) {
+                throw new RangeError('peaks.sources.' + context + ': volumeRange[0] should be less than volumeRange[1]');
+            }
+        }
+        if (!Utils.isNullOrUndefined(options.volume)) {
+            if (!Utils.isNumber(options.volume)) {
+                throw new TypeError('peaks.sources.' + context + ': volume must be a number');
+            } else {
+                options.volume = Utils.clamp(options.volume, options.volumeRange[0], options.volumeRange[1]);
+            }
+        }
     }
-    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth) {
+    function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind, subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor, borderColor, selectedColor, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth, textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth, volume, volumeRange) {
         var opts = {
             title: title,
             url: url,
@@ -18604,6 +18720,9 @@ module.exports = function (Utils) {
             textFontSize: textFontSize,
             textColor: textColor,
             textBackgroundColor: textBackgroundColor,
+            volumeSliderColor: volumeSliderColor,
+            volumeSliderWidth: volumeSliderWidth,
+            volumeSliderDraggingWidth: volumeSliderDraggingWidth,
             textPosition: textPosition,
             textAutoScroll: textAutoScroll,
             borderWidth: borderWidth,
@@ -18621,7 +18740,9 @@ module.exports = function (Utils) {
             indicators: indicators,
             markers: markers,
             markerColor: markerColor,
-            markerWidth: markerWidth
+            markerWidth: markerWidth,
+            volume: volume,
+            volumeRange: volumeRange
         };
         validateSource(peaks, opts, 'add()');
         this._peaks = peaks;
@@ -18643,6 +18764,9 @@ module.exports = function (Utils) {
         this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._volumeSliderColor = opts.volumeSliderColor;
+        this._volumeSliderWidth = opts.volumeSliderWidth;
+        this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
         this._textFont = opts.textFont;
         this._textFontSize = opts.textFontSize;
         this._textColor = opts.textColor;
@@ -18665,6 +18789,8 @@ module.exports = function (Utils) {
         this._markers = opts.markers;
         this._markerColor = opts.markerColor;
         this._markerWidth = opts.markerWidth;
+        this._volume = opts.volume;
+        this._volumeRange = opts.volumeRange;
         this._minSize = peaks.options.minSourceSize;
         this._selected = false;
     }
@@ -18804,6 +18930,24 @@ module.exports = function (Utils) {
                 this._selectedColor = selectedColor;
             }
         },
+        volumeSliderColor: {
+            enumerable: true,
+            get: function () {
+                return this._volumeSliderColor;
+            }
+        },
+        volumeSliderWidth: {
+            enumerable: true,
+            get: function () {
+                return this._volumeSliderWidth;
+            }
+        },
+        volumeSliderDraggingWidth: {
+            enumerable: true,
+            get: function () {
+                return this._volumeSliderDraggingWidth;
+            }
+        },
         textFont: {
             enumerable: true,
             get: function () {
@@ -18981,6 +19125,21 @@ module.exports = function (Utils) {
                 return this._markerWidth;
             }
         },
+        volume: {
+            enumerable: true,
+            get: function () {
+                return this._volume;
+            },
+            set: function (volume) {
+                this._volume = volume;
+            }
+        },
+        volumeRange: {
+            enumerable: true,
+            get: function () {
+                return this._volumeRange;
+            }
+        },
         minSize: {
             enumerable: true,
             get: function () {
@@ -19098,6 +19257,9 @@ module.exports = function (Utils) {
             backgroundColor: this.backgroundColor,
             borderColor: this.borderColor,
             selectedColor: this.selectedColor,
+            volumeSliderColor: this.volumeSliderColor,
+            volumeSliderWidth: this.volumeSliderWidth,
+            volumeSliderDraggingWidth: this.volumeSliderDraggingWidth,
             textFont: this.textFont,
             textFontSize: this.textFontSize,
             textColor: this.textColor,
@@ -19119,7 +19281,9 @@ module.exports = function (Utils) {
             indicators: this.indicators,
             markers: this.markers,
             markerColor: this.markerColor,
-            markerWidth: this.markerWidth
+            markerWidth: this.markerWidth,
+            volume: this.volume,
+            volumeRange: this.volumeRange
         };
         Utils.extend(opts, options);
         validateSource(this._peaks, opts, 'update()');
@@ -19138,6 +19302,9 @@ module.exports = function (Utils) {
         this._backgroundColor = opts.backgroundColor;
         this._borderColor = opts.borderColor;
         this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+        this._volumeSliderColor = opts.volumeSliderColor;
+        this._volumeSliderWidth = opts.volumeSliderWidth;
+        this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
         this._textFont = opts.textFont;
         this._textFontSize = opts.textFontSize;
         this._textColor = opts.textColor;
@@ -19160,6 +19327,8 @@ module.exports = function (Utils) {
         this._markers = opts.markers;
         this._markerColor = opts.markerColor;
         this._markerWidth = opts.markerWidth;
+        this._volume = opts.volume;
+        this._volumeRange = opts.volumeRange;
         this._peaks.emit('source.update', this);
     };
     Source.prototype.isVisible = function (startTime, endTime) {
@@ -19968,6 +20137,9 @@ module.exports = function (Source, Utils) {
                 backgroundColor: sourceToCut.backgroundColor,
                 borderColor: sourceToCut.borderColor,
                 selectedColor: sourceToCut.selectedColor,
+                volumeSliderColor: sourceToCut.volumeSliderColor,
+                volumeSliderWidth: sourceToCut.volumeSliderWidth,
+                volumeSliderDraggingWidth: sourceToCut.volumeSliderDraggingWidth,
                 textFont: sourceToCut.textFont,
                 textFontSize: sourceToCut.textFontSize,
                 textColor: sourceToCut.textColor,
@@ -19988,7 +20160,9 @@ module.exports = function (Source, Utils) {
                 binaryHeight: sourceToCut.binaryHeight,
                 markers: sourceToCut.markers,
                 markerColor: sourceToCut.markerColor,
-                markerWidth: sourceToCut.markerWidth
+                markerWidth: sourceToCut.markerWidth,
+                volume: sourceToCut.volume,
+                volumeRange: sourceToCut.volumeRange
             }])[0];
         this._peaks.emit('sources.updated', [
             sourceToCut,
@@ -20006,7 +20180,7 @@ module.exports = function (Source, Utils) {
         if (!Utils.isObject(options)) {
             throw new TypeError('peaks.sources.add(): expected a Source object parameter');
         }
-        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.markerColor, options.markerWidth);
+        var source = new Source(this._peaks, options.id || this._getNextSourceId(), options.originId, options.elementId, options.title, options.url, options.previewUrl, options.binaryUrl, options.kind, options.subkind, options.duration, options.startTime, options.endTime, options.mediaStartTime, options.mediaEndTime, options.color, options.backgroundColor, options.borderColor, options.selectedColor, options.volumeSliderColor, options.volumeSliderWidth, options.volumeSliderDraggingWidth, options.textFont, options.textFontSize, options.textColor, options.textBackgroundColor, options.textPosition, options.textAutoScroll, options.borderWidth, options.borderRadius, options.wrapped, options.position, options.draggable, options.orderable, options.resizable, options.cuttable, options.deletable, options.wrapping, options.previewHeight, options.binaryHeight, options.indicators, options.markers, options.markerColor, options.markerWidth, options.volume, options.volumeRange);
         return source;
     };
     TimelineSources.prototype.getSources = function () {

package/src/source-group.js

@@ -52,7 +52,8 @@ define([
                             source.binaryHeight + source.previewHeight :
                             this._peaks.options.lineHeight;
     this._wrappedHeight = this._peaks.options.wrappedLineHeight;
-    this._borderWidth = this._source.borderWidth;
+    this._borderWidth = this._source.borderWidth || 0;
+    this._height = this._unwrappedHeight;
 
     this._previewList = [];
 
@@ -70,8 +71,12 @@ define([
     this._group.on('dragstart', this._layer.onSourcesGroupDragStart.bind(this._layer));
     this._group.on('dragend', this._layer.onSourcesGroupDragEnd.bind(this._layer));
 
+    this._cursor = null;
     this._group.on('mouseover', function() {
       self._view.setHoveredElement(self);
+      if (self._source.draggable) {
+        self._view.setCursor(self._cursor || 'pointer');
+      }
       if (self._view.getCurrentMode() === 'cut') {
         self.toggleDragging(false);
         self.toggleResizing(false);
@@ -79,6 +84,7 @@ define([
     });
     this._group.on('mouseout', function() {
       self._view.setHoveredElement(null);
+      self._view.setCursor('default');
       if (self._view.getCurrentMode() === 'cut') {
         self.toggleDragging(true);
         self.toggleResizing(true);
@@ -179,13 +185,13 @@ define([
   SourceGroup.prototype.setWrapping = function(wrap, forceCreate, notify) {
     if (wrap) {
       this._removeUnwrap();
-      this._addWrap(forceCreate);
       this._height = this._wrappedHeight;
+      this._addWrap(forceCreate);
     }
     else {
       this._removeWrap();
-      this._addUnwrap(forceCreate);
       this._height = this._unwrappedHeight;
+      this._addUnwrap(forceCreate);
     }
 
     this.setHandlesWrapping(wrap);
@@ -224,11 +230,11 @@ define([
 
       if (this._source.resizable) {
         this._leftHandle.on('mouseover', function() {
-          self._view.setCursor('ew-resize');
+          self._cursor = 'ew-resize';
         });
 
         this._leftHandle.on('mouseout', function() {
-          self._view.setCursor('default');
+          self._cursor = null;
         });
       }
     }
@@ -247,11 +253,11 @@ define([
 
       if (this._source.resizable) {
         this._rightHandle.on('mouseover', function() {
-          self._view.setCursor('ew-resize');
+          self._cursor = 'ew-resize';
         });
 
         this._rightHandle.on('mouseout', function() {
-          self._view.setCursor('default');
+          self._cursor = null;
         });
       }
     }
@@ -293,7 +299,7 @@ define([
   };
 
   SourceGroup.prototype.drawSourceShape = function(ctx, shape, addBorderWidth) {
-    var offset = addBorderWidth && this._borderWidth ? this._borderWidth : 0;
+    var offset = addBorderWidth ? this._borderWidth : 0;
     var radius = this._source.borderRadius !== undefined && this._source.borderRadius !== null ?
     this._source.borderRadius :
     Math.max(
@@ -360,15 +366,6 @@ define([
       }
     });
 
-    if (this._source.draggable) {
-      unwrap.on('mouseenter', function() {
-        self._view.setCursor('pointer');
-      });
-      unwrap.on('mouseout', function() {
-        self._view.setCursor('default');
-      });
-    }
-
     var background = new Konva.Group();
 
     background.add(new Konva.Shape({
@@ -380,6 +377,9 @@ define([
 
     unwrap.add(background);
     unwrap.add(this._markersGroup);
+    if (this._source.volumeRange && this._source.volume !== undefined) {
+      unwrap.add(this._getVolumeSlider());
+    }
     unwrap.add(this._createTitle(false));
 
     return unwrap;
@@ -419,15 +419,6 @@ define([
       }
     });
 
-    if (this._source.draggable) {
-      wrap.on('mouseenter', function() {
-        self._view.setCursor('pointer');
-      });
-      wrap.on('mouseout', function() {
-        self._view.setCursor('default');
-      });
-    }
-
     var background = new Konva.Group();
 
     background.add(new Konva.Shape({
@@ -439,6 +430,9 @@ define([
 
     wrap.add(background);
     wrap.add(this._markersGroup);
+    if (this._source.volumeRange && this._source.volume !== undefined) {
+      wrap.add(this._getVolumeSlider());
+    }
     wrap.add(this._createTitle(true));
 
     return wrap;
@@ -1031,5 +1025,136 @@ define([
     return markersGroup;
   };
 
+  SourceGroup.prototype._getYFromVolume = function(volume) {
+    return this._borderWidth + (this._height - 2 * this._borderWidth) * (
+      this._source.volumeRange[1] - volume
+    ) / (
+      this._source.volumeRange[1] - this._source.volumeRange[0]
+    );
+  };
+
+  SourceGroup.prototype._getVolumeFromY = function(y) {
+    return this._source.volumeRange[1] - (
+      (y - this._borderWidth) / (this._height - 2 * this._borderWidth)
+    ) * (
+      this._source.volumeRange[1] - this._source.volumeRange[0]
+    );
+  };
+
+  SourceGroup.prototype._getVolumeSlider = function() {
+    if (!this._volumeSliderGroup) {
+      this._volumeSliderGroup = this._createVolumeSlider();
+    }
+
+    return this._volumeSliderGroup;
+  };
+
+  SourceGroup.prototype._createVolumeSlider = function() {
+    var self = this;
+
+    var volumeY = this._getYFromVolume(this._source.volume);
+
+    var volumeGroup = new Konva.Group({
+      x: 0,
+      y: 0,
+      width: this._width,
+      height: this._height
+    });
+
+    var volumeText = new Konva.Text({
+      x: 0,
+      y: volumeY - 20,
+      text: '100%',
+      fontSize: 12,
+      fill: this._source.volumeSliderColor,
+      visible: false
+    });
+
+    var maxTextWidth = volumeText.width();
+    var maxTextHeight = volumeText.height();
+
+    var volumeSliderGroup = new Konva.Group({
+      x: 0,
+      y: volumeY,
+      draggable: true,
+      dragBoundFunc: function(pos) {
+        var y = Math.min(
+          volumeGroup.absolutePosition().y + self._height - self._borderWidth,
+          Math.max(
+            volumeGroup.absolutePosition().y + self._borderWidth,
+            pos.y
+          )
+        );
+
+        var textX = Math.min(
+          volumeGroup.absolutePosition().x + self._width - maxTextWidth - self._borderWidth,
+          Math.max(
+            volumeGroup.absolutePosition().x + self._borderWidth,
+            self._view.getPointerPosition().x - maxTextWidth
+          )
+        );
+        var textY = y - (self._source.volumeSliderWidth / 2) - maxTextHeight;
+
+        volumeText.absolutePosition({
+          x: textX,
+          y: textY < volumeGroup.absolutePosition().y + self._borderWidth ?
+            y + self._source.volumeSliderWidth :
+            textY
+        });
+
+        return { x: this.absolutePosition().x, y: y };
+      }
+    });
+
+    var volumeSliderLine = new Konva.Line({
+      points: [0, 0, this._width, 0],
+      stroke: this._source.volumeSliderColor,
+      strokeWidth: this._source.volumeSliderWidth
+    });
+
+    var volumeSliderRect = new Konva.Rect({
+      x: 0,
+      y: -this._source.volumeSliderDraggingWidth / 2,
+      width: this._width,
+      height: this._source.volumeSliderDraggingWidth,
+      opacity: 0
+    });
+
+    volumeSliderGroup.add(volumeSliderRect);
+    volumeSliderGroup.add(volumeSliderLine);
+
+    volumeSliderGroup.on('dragstart', function() {
+      volumeText.visible(true);
+    });
+
+    volumeSliderGroup.on('dragmove', function() {
+      var volume = self._getVolumeFromY(volumeSliderGroup.y());
+
+      volumeText.text((volume * 100).toFixed(0) + '%');
+
+      self._source.volume = Math.max(self._source.volumeRange[0], Math.min(volume, self._source.volumeRange[1]));
+      self._peaks.emit('source.volumeChanged', self._source);
+
+      self._group.draw();
+    });
+
+    volumeSliderGroup.on('dragend', function() {
+      volumeText.visible(false);
+    });
+
+    volumeSliderGroup.on('mouseover', function() {
+      self._cursor = 'ns-resize';
+    });
+
+    volumeSliderGroup.on('mouseout', function() {
+      self._cursor = null;
+    });
+
+    volumeGroup.add(volumeSliderGroup);
+    volumeGroup.add(volumeText);
+
+    return volumeGroup;
+  };
+
   return SourceGroup;
 });

package/src/source.js

@@ -127,6 +127,31 @@ define([
       );
     }
 
+    if (Utils.isNullOrUndefined(options.volumeSliderColor)) {
+      options.volumeSliderColor = '#000000';
+    }
+    else if (!Utils.isValidColor(options.volumeSliderColor)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': volumeSliderColor should be a valid CSS color'
+      );
+    }
+
+    if (Utils.isNullOrUndefined(options.volumeSliderWidth)) {
+      options.volumeSliderWidth = 2;
+    }
+    else if (!Utils.isNumber(options.volumeSliderWidth)) {
+      throw new TypeError('peaks.sources.' + context + ': volumeSliderWidth should be a number');
+    }
+
+    if (Utils.isNullOrUndefined(options.volumeSliderDraggingWidth)) {
+      options.volumeSliderDraggingWidth = options.volumeSliderWidth;
+    }
+    else if (!Utils.isNumber(options.volumeSliderDraggingWidth)) {
+      throw new TypeError(
+        'peaks.sources.' + context + ': volumeSliderDraggingWidth should be a number'
+      );
+    }
+
     if (Utils.isNullOrUndefined(options.textFont)) {
       options.textFont = 'Arial';
     }
@@ -267,6 +292,26 @@ define([
     if (Utils.isNullOrUndefined(options.markerWidth)) {
       options.markerWidth = 2;
     }
+
+    if (!Utils.isNullOrUndefined(options.volumeRange)) {
+      if (!Array.isArray(options.volumeRange)
+        || options.volumeRange.length !== 2
+        || !options.volumeRange.every(Utils.isNumber)) {
+        throw new TypeError('peaks.sources.' + context + ': volumeRange must be an array of two numbers');
+      }
+      else if (options.volumeRange[0] > options.volumeRange[1]) {
+        throw new RangeError('peaks.sources.' + context + ': volumeRange[0] should be less than volumeRange[1]');
+      }
+    }
+
+    if (!Utils.isNullOrUndefined(options.volume)) {
+      if (!Utils.isNumber(options.volume)) {
+        throw new TypeError('peaks.sources.' + context + ': volume must be a number');
+      }
+      else {
+        options.volume = Utils.clamp(options.volume, options.volumeRange[0], options.volumeRange[1]);
+      }
+    }
   }
 
   /**
@@ -292,10 +337,10 @@ define([
 
   function Source(peaks, id, originId, elementId, title, url, previewUrl, binaryUrl, kind,
     subkind, duration, startTime, endTime, mediaStartTime, mediaEndTime, color, backgroundColor,
-    borderColor, selectedColor, textFont, textFontSize, textColor, textBackgroundColor,
-    textPosition, textAutoScroll, borderWidth, borderRadius, wrapped, position, draggable, orderable,
-    resizable, cuttable, deletable, wrapping, previewHeight, binaryHeight, indicators, markers,
-    markerColor, markerWidth) {
+    borderColor, selectedColor, volumeSliderColor, volumeSliderWidth, volumeSliderDraggingWidth,
+    textFont, textFontSize, textColor, textBackgroundColor, textPosition, textAutoScroll, borderWidth,
+    borderRadius, wrapped, position, draggable, orderable, resizable, cuttable, deletable, wrapping,
+    previewHeight, binaryHeight, indicators, markers, markerColor, markerWidth, volume, volumeRange) {
     var opts = {
       title: title,
       url: url,
@@ -316,6 +361,9 @@ define([
       textFontSize: textFontSize,
       textColor: textColor,
       textBackgroundColor: textBackgroundColor,
+      volumeSliderColor: volumeSliderColor,
+      volumeSliderWidth: volumeSliderWidth,
+      volumeSliderDraggingWidth: volumeSliderDraggingWidth,
       textPosition: textPosition,
       textAutoScroll: textAutoScroll,
       borderWidth: borderWidth,
@@ -333,7 +381,9 @@ define([
       indicators: indicators,
       markers: markers,
       markerColor: markerColor,
-      markerWidth: markerWidth
+      markerWidth: markerWidth,
+      volume: volume,
+      volumeRange: volumeRange
     };
 
     validateSource(peaks, opts, 'add()');
@@ -357,6 +407,9 @@ define([
     this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._volumeSliderColor = opts.volumeSliderColor;
+    this._volumeSliderWidth = opts.volumeSliderWidth;
+    this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
     this._textFont = opts.textFont;
     this._textFontSize = opts.textFontSize;
     this._textColor = opts.textColor;
@@ -379,6 +432,8 @@ define([
     this._markers = opts.markers;
     this._markerColor = opts.markerColor;
     this._markerWidth = opts.markerWidth;
+    this._volume = opts.volume;
+    this._volumeRange = opts.volumeRange;
     this._minSize = peaks.options.minSourceSize;
     this._selected = false;
   }
@@ -528,6 +583,24 @@ define([
         this._selectedColor = selectedColor;
       }
     },
+    volumeSliderColor: {
+      enumerable: true,
+      get: function() {
+        return this._volumeSliderColor;
+      }
+    },
+    volumeSliderWidth: {
+      enumerable: true,
+      get: function() {
+        return this._volumeSliderWidth;
+      }
+    },
+    volumeSliderDraggingWidth: {
+      enumerable: true,
+      get: function() {
+        return this._volumeSliderDraggingWidth;
+      }
+    },
     textFont: {
       enumerable: true,
       get: function() {
@@ -718,6 +791,22 @@ define([
         return this._markerWidth;
       }
     },
+    volume: {
+      enumerable: true,
+      get: function() {
+        return this._volume;
+      },
+
+      set: function(volume) {
+        this._volume = volume;
+      }
+    },
+    volumeRange: {
+      enumerable: true,
+      get: function() {
+        return this._volumeRange;
+      }
+    },
     minSize: {
       enumerable: true,
       get: function() {
@@ -868,6 +957,9 @@ define([
       backgroundColor: this.backgroundColor,
       borderColor: this.borderColor,
       selectedColor: this.selectedColor,
+      volumeSliderColor: this.volumeSliderColor,
+      volumeSliderWidth: this.volumeSliderWidth,
+      volumeSliderDraggingWidth: this.volumeSliderDraggingWidth,
       textFont: this.textFont,
       textFontSize: this.textFontSize,
       textColor: this.textColor,
@@ -889,7 +981,9 @@ define([
       indicators: this.indicators,
       markers: this.markers,
       markerColor: this.markerColor,
-      markerWidth: this.markerWidth
+      markerWidth: this.markerWidth,
+      volume: this.volume,
+      volumeRange: this.volumeRange
     };
 
     Utils.extend(opts, options);
@@ -911,6 +1005,9 @@ define([
     this._backgroundColor = opts.backgroundColor;
     this._borderColor = opts.borderColor;
     this._selectedColor = opts.selectedColor || Utils.shadeColor(opts.backgroundColor, 30);
+    this._volumeSliderColor = opts.volumeSliderColor;
+    this._volumeSliderWidth = opts.volumeSliderWidth;
+    this._volumeSliderDraggingWidth = opts.volumeSliderDraggingWidth;
     this._textFont = opts.textFont;
     this._textFontSize = opts.textFontSize;
     this._textColor = opts.textColor;
@@ -933,6 +1030,8 @@ define([
     this._markers = opts.markers;
     this._markerColor = opts.markerColor;
     this._markerWidth = opts.markerWidth;
+    this._volume = opts.volume;
+    this._volumeRange = opts.volumeRange;
 
     this._peaks.emit('source.update', this);
   };

package/src/timeline-sources.js

@@ -81,6 +81,9 @@ define([
       backgroundColor: sourceToCut.backgroundColor,
       borderColor: sourceToCut.borderColor,
       selectedColor: sourceToCut.selectedColor,
+      volumeSliderColor: sourceToCut.volumeSliderColor,
+      volumeSliderWidth: sourceToCut.volumeSliderWidth,
+      volumeSliderDraggingWidth: sourceToCut.volumeSliderDraggingWidth,
       textFont: sourceToCut.textFont,
       textFontSize: sourceToCut.textFontSize,
       textColor: sourceToCut.textColor,
@@ -101,7 +104,9 @@ define([
       binaryHeight: sourceToCut.binaryHeight,
       markers: sourceToCut.markers,
       markerColor: sourceToCut.markerColor,
-      markerWidth: sourceToCut.markerWidth
+      markerWidth: sourceToCut.markerWidth,
+      volume: sourceToCut.volume,
+      volumeRange: sourceToCut.volumeRange
     }])[0];
 
     this._peaks.emit('sources.updated', [sourceToCut, newSource]);
@@ -167,6 +172,9 @@ define([
       options.backgroundColor,
       options.borderColor,
       options.selectedColor,
+      options.volumeSliderColor,
+      options.volumeSliderWidth,
+      options.volumeSliderDraggingWidth,
       options.textFont,
       options.textFontSize,
       options.textColor,
@@ -188,7 +196,9 @@ define([
       options.indicators,
       options.markers,
       options.markerColor,
-      options.markerWidth
+      options.markerWidth,
+      options.volume,
+      options.volumeRange
     );
 
     return source;