Merge ZoomView and Overview into a single WaveformView object

README.md

@@ -530,7 +530,7 @@ Then open http://localhost:9000 in a Web browser.
 
 `npm test` should work for simple one time testing.
 
-If you are developing and want to repeatedly run tests in a browser on your machine simply launch `npm run test-watch`.
+If you are developing and want to repeatedly run tests in a browser on your machine simply launch `npm run watch`.
 
 # License
 

karma.conf.js

@@ -6,15 +6,15 @@ function filterBrowsers(browsers, re) {
   });
 }
 
-module.exports = function (config) {
-  var isCI   = Boolean(process.env.CI) && Boolean(process.env.BROWSER_STACK_ACCESS_KEY);
+module.exports = function(config) {
+  var isCI = Boolean(process.env.CI) && Boolean(process.env.BROWSER_STACK_ACCESS_KEY);
 
   // Karma configuration
   config.set({
     // base path, that will be used to resolve files and exclude
     basePath: '',
 
-    frameworks: ['mocha', 'sinon-chai'],
+    frameworks: ['mocha', 'sinon-chai', 'browserify'],
 
     client: {
       chai: {
@@ -25,27 +25,31 @@ module.exports = function (config) {
       }
     },
 
+    browserify: {
+      debug: true,
+      transform: [
+        'deamdify'
+      ]
+    },
+
     // list of files / patterns to load in the browser
     files: [
-      'peaks.js',
       { pattern: 'test/test_img/*', included: false },
       { pattern: 'test_data/*', included: false },
       { pattern: 'test_data/sample.{dat,json}', included: false, served: true },
       { pattern: 'test/*.html' },
       'test/load-fixtures.js',
-      'test/unit/**/*.js',
+      'test/unit/**/*.js'
     ],
 
     preprocessors: {
+      'test/unit/**/*.js': ['browserify'],
       'test/*.html': ['html2js']
     },
 
-    // list of files to exclude
-    //exclude: ['lib/js/main.js'],
-
     // test results reporter to use
     // possible values: dots || progress || growl || spec
-    reporters : isCI ? ['dots'] : ['spec'],
+    reporters: isCI ? ['dots'] : ['spec'],
 
     // web server port
     port: 8080,
@@ -138,16 +142,14 @@ module.exports = function (config) {
     },
 
     // If browser does not capture in given timeout [ms], kill it
-    captureTimeout : 120000,
+    captureTimeout: 120000,
 
     // Continuous Integration mode
     // if true, it capture browsers, run tests and exit
-    singleRun : true
+    singleRun: true
   });
 
   config.set({
-    browsers: isCI
-      ? filterBrowsers(config.customLaunchers, /^BS/)
-      : ['Chrome', 'Safari', 'Firefox', 'IE9 - Win7']
+    browsers: isCI ? filterBrowsers(config.customLaunchers, /^BS/) : ['Chrome']
   });
 };

package.json

@@ -25,11 +25,14 @@
     "peaks/waveform/waveform.core": "./src/main/waveform/waveform.core.js",
     "peaks/waveform/waveform.mixins": "./src/main/waveform/waveform.mixins.js",
     "peaks/waveform/waveform.utils": "./src/main/waveform/waveform.utils.js",
-    "peaks/views/waveform.overview": "./src/main/views/waveform.overview.js",
-    "peaks/views/waveform.zoomview": "./src/main/views/waveform.zoomview.js",
+    "peaks/waveform/waveform.view": "./src/main/waveform/waveform.view.js",
+    "peaks/views/pointers/drag": "./src/main/views/pointers/drag.js",
+    "peaks/views/pointers/seek": "./src/main/views/pointers/seek.js",
+    "peaks/views/ref-segment": "./src/main/views/ref-segment.js",
     "peaks/views/helpers/mousedraghandler": "./src/main/views/helpers/mousedraghandler.js",
     "peaks/views/zooms/animated": "./src/main/views/zooms/animated.js",
     "peaks/views/zooms/static": "./src/main/views/zooms/static.js",
+    "peaks/views/zooms/fixed": "./src/main/views/zooms/fixed",
     "peaks/markers/waveform.points": "./src/main/markers/waveform.points.js",
     "peaks/markers/waveform.segments": "./src/main/markers/waveform.segments.js",
     "peaks/markers/shapes/base": "./src/main/markers/shapes/base.js",
@@ -42,15 +45,17 @@
   },
   "license": "LGPL-3.0",
   "scripts": {
-    "prebuild": "npm run lint",
-    "build": "npm run build:main && npm run build:standalone",
+    "build": "npm-run-all --parallel build:** --serial doc",
     "build:main": "browserify -e ./src/main.js -t deamdify | derequire - > index.js",
     "build:standalone": "browserify -d -e ./src/main.js -t deamdify -s peaks | exorcist peaks.js.map | derequire - > peaks.js",
     "doc": "jsdoc --private --destination docs --recurse src",
     "lint": "eslint src/**/*.js test/**/*.js",
-    "pretest": "npm run build",
     "test": "./node_modules/karma/bin/karma start",
-    "test-watch": "npm test -- --auto-watch --no-single-run",
+    "posttest": "npm run lint",
+    "watch": "npm-run-all --parallel watch:**",
+    "watch:test": "npm test -- --auto-watch --no-single-run",
+    "watch:build": "watchify -vf -e ./src/main.js -t deamdify -s peaks -o peaks.js",
+    "watch:serve": "serve --cors -p 9000",
     "changelog": "github-changes -o bbc -r peaks.js -n ${npm_package_version} --only-pulls --use-commit-body --file CHANGELOG.${npm_package_version}.md",
     "prestart": "npm run build",
     "prepublish": "npm run build",
@@ -63,9 +68,9 @@
     "derequire": "^2.0.3",
     "eslint": "^3.2.2",
     "exorcist": "^0.4.0",
-    "github-changes": "^1.0.0",
     "jsdoc": "~3.4.1",
     "karma": "^1.1.0",
+    "karma-browserify": "^5.1.0",
     "karma-browserstack-launcher": "^1.0.0",
     "karma-chrome-launcher": "^1.0.0",
     "karma-firefox-launcher": "^1.0.0",
@@ -76,9 +81,11 @@
     "karma-sinon-chai": "^1.0.0",
     "karma-spec-reporter": "~0.0.26",
     "mocha": "^2.5.0",
+    "npm-run-all": "^3.1.2",
     "serve": "^1.4.0",
     "sinon": "^1.17.2",
-    "sinon-chai": "^2.8.0"
+    "sinon-chai": "^2.8.0",
+    "watchify": "^3.8.0"
   },
   "dependencies": {
     "eventemitter2": "~1.0.0",

src/main/markers/waveform.points.js

@@ -164,7 +164,7 @@ define([
   };
 
   WaveformPoints.prototype.init = function() {
-    this.peaks.on('zoomview.displaying', this.updatePoints.bind(this));
+    this.peaks.on('waveform.render.zoomview', this.updatePoints.bind(this));
     this.peaks.emit('points.ready');
   };
 

src/main/markers/waveform.segments.js

@@ -253,7 +253,7 @@ define([
   };
 
   WaveformSegments.prototype.init = function() {
-    this.peaks.on('zoomview.displaying', this.updateSegments.bind(this));
+    this.peaks.on('waveform.render.zoomview', this.updateSegments.bind(this));
     this.peaks.emit('segments.ready');
   };
 

src/main/views/pointers/drag.js

@@ -0,0 +1,40 @@
+'use strict';
+
+define(['peaks/views/helpers/mousedraghandler'], function(MouseDragHandler) {
+  return function(view) {
+    return new MouseDragHandler(view.stage, {
+      onMouseDown: function(layerX) {
+        this.initialFrameOffset = view.frameOffset;
+        this.mouseDownLayerX = layerX;
+      },
+
+      onMouseMove: function(layerX) {
+        // Moving the mouse to the left increases the time position of the
+        // left-hand edge of the visible waveform.
+        var diff = this.mouseDownLayerX - layerX;
+
+        var newFrameOffset = this.initialFrameOffset + diff;
+
+        if (newFrameOffset < 0) {
+          newFrameOffset = 0;
+        }
+        else if (newFrameOffset > (view.pixelLength - view.width)) {
+          newFrameOffset = view.pixelLength - view.width;
+        }
+
+        if (newFrameOffset !== this.initialFrameOffset) {
+          view.emit('user_scroll', newFrameOffset);
+        }
+      },
+
+      onMouseUp: function(layerX) {
+        // Set playhead position only on click release, when not dragging
+        if (!view.mouseDragHandler.isDragging()) {
+          var pos = view.frameOffset + this.mouseDownLayerX;
+
+          view.emit('user_seek', view.data.time(pos), pos);
+        }
+      }
+    });
+  };
+});

src/main/views/pointers/seek.js

@@ -0,0 +1,22 @@
+'use strict';
+
+define(['peaks/views/helpers/mousedraghandler'], function(MouseDragHandler) {
+  return function(view) {
+    return new MouseDragHandler(view.stage, {
+      onMouseDown: function(layerX) {
+        view.emit('user_seek', view.data.time(layerX));
+      },
+
+      onMouseMove: function(layerX) {
+        if (layerX < 0) {
+          layerX = 0;
+        }
+        else if (layerX > view.width) {
+          layerX = view.width;
+        }
+
+        view.emit('user_seek', view.data.time(layerX));
+      }
+    });
+  };
+});

src/main/views/ref-segment.js

@@ -0,0 +1,59 @@
+/**
+ * @file
+ *
+ * Defines a zoom view adapter with no animations.
+ *
+ * @module peaks/views/ref-segment
+ */
+define(['konva'], function(Konva) {
+  'use strict';
+
+  return {
+    install: function(view, peaks) {
+      var refLayer = new Konva.Layer();
+      var waveformData = view.data;
+      var highlightRect = new Konva.Rect({
+        x: 0,
+        y: 11,
+        width: 0,
+        stroke: peaks.options.overviewHighlightRectangleColor,
+        strokeWidth: 1,
+        height: view.height - (11 * 2),
+        fill: peaks.options.overviewHighlightRectangleColor,
+        opacity: 0.3,
+        cornerRadius: 2
+      });
+
+      refLayer.add(highlightRect);
+      view.stage.add(refLayer);
+
+      return {
+        subscribeTo: function refSegmentSubscribeTo(renderEventName) {
+          peaks.on(renderEventName, function(timeIn, timeOut) {
+           if (isNaN(timeIn)) {
+             // eslint-disable-next-line max-len
+             throw new Error('WaveformOverview#updateRefWaveform timeIn parameter is not a number: ' + timeIn);
+           }
+
+           if (isNaN(timeOut)) {
+             // eslint-disable-next-line max-len
+             throw new Error('WaveformOverview#updateRefWaveform timeOut parameter is not a number: ' + timeOut);
+           }
+
+           var offsetIn = waveformData.at_time(timeIn);
+           var offsetOut = waveformData.at_time(timeOut);
+
+           waveformData.set_segment(offsetIn, offsetOut, 'zoom');
+
+           highlightRect.setAttrs({
+             x: waveformData.segments.zoom.offset_start - waveformData.offset_start,
+             width: waveformData.at_time(timeOut) - waveformData.at_time(timeIn)
+           });
+
+           refLayer.draw();
+          });
+        }
+      };
+    }
+  };
+});