@checksub_team/peaks_timeline 1.16.0-alpha.2 → 2.0.0-alpha.0

package/src/{timeline-zoomview.js → view.js}

@@ -1,17 +1,17 @@
 /**
  * @file
  *
- * Defines the {@link TimelineZoomView} class.
+ * Defines the {@link View} class.
  *
- * @module timeline-zoomview
+ * @module view
  */
 
 define([
-  './mouse-drag-handler',
-  './playhead-layer',
-  './sources-layer',
-  './mode-layer',
-  './timeline-axis',
+  './components/mouse-drag-handler',
+  './components/playhead-layer',
+  './components/sources-layer',
+  './components/mode-layer',
+  './components/axis',
   './utils',
   'konva'
   ], function(
@@ -19,7 +19,7 @@ define([
     PlayheadLayer,
     SourcesLayer,
     ModeLayer,
-    TimelineAxis,
+    Axis,
     Utils,
     Konva) {
   'use strict';
@@ -28,13 +28,13 @@ define([
    * Creates a zoomable timeline view.
    *
    * @class
-   * @alias TimelineZoomView
+   * @alias View
    *
    * @param {HTMLElement} container
    * @param {Peaks} peaks
    */
 
-  function TimelineZoomView(container, peaks) {
+  function View(container, peaks) {
     var self = this;
 
     self._container = container;
@@ -54,20 +54,22 @@ define([
     self._onCutMode = self._onCutMode.bind(self);
 
     // Register event handlers
-    self._peaks.on('timeline.update', self._onTimeUpdate);
-    self._peaks.on('timeline.seek', self._onTimeUpdate);
+    self._peaks.on('main.overrideInteractions', self.overrideInteractions.bind(self));
+    self._peaks.on('main.allowInteractions', self.allowInteractions.bind(self));
+    self._peaks.on('handler.player.update', self._onTimeUpdate);
+    self._peaks.on('handler.player.seek', self._onTimeUpdate);
     self._peaks.on('playhead.drag', self._onTimeUpdate);
     self._peaks.on('playhead.dragend', self._onTimeUpdate);
     self._peaks.on('user_seek', self._onSeek);
     self._peaks.on('timeline.play', self._onPlay);
     self._peaks.on('timeline.pause', self._onPause);
     self._peaks.on('window_resize', self._onWindowResize);
-    self._peaks.on('keyboard.left', self._onKeyboardLeft);
-    self._peaks.on('keyboard.right', self._onKeyboardRight);
-    self._peaks.on('keyboard.shift_left', self._onKeyboardShiftLeft);
-    self._peaks.on('keyboard.shift_right', self._onKeyboardShiftRight);
-    self._peaks.on('default_mode', self._onDefaultMode);
-    self._peaks.on('cut_mode', self._onCutMode);
+    self._peaks.on('handler.keyboard.left', self._onKeyboardLeft);
+    self._peaks.on('handler.keyboard.right', self._onKeyboardRight);
+    self._peaks.on('handler.keyboard.shiftleft', self._onKeyboardShiftLeft);
+    self._peaks.on('handler.keyboard.shiftright', self._onKeyboardShiftRight);
+    self._peaks.on('handler.view.defaultmode', self._onDefaultMode);
+    self._peaks.on('handler.view.cutmode', self._onCutMode);
 
     self._enableAutoScroll = true;
     self._amplitudeScale = 1.0;
@@ -118,9 +120,13 @@ define([
       height: self._height
     });
 
+    self._tempLayer = new Konva.Layer();
+    // self._tempLayer.listening(false);
+    self._stage.add(self._tempLayer);
+
     self._width -= self._peaks.options.lineIndicatorWidth;
 
-    self._axis = new TimelineAxis(self._peaks, self, {
+    self._axis = new Axis(self._peaks, self, {
       axisGridlineColor: this._options.axisGridlineColor,
       axisLabelColor:    this._options.axisLabelColor
     });
@@ -173,7 +179,7 @@ define([
           );
         }
 
-        var height = self._sourcesLayer._lines.height() - self._height;
+        var height = self._sourcesLayer.getFullHeight() - self._height;
         var newFrameOffsetY = 0;
 
         if (self._peaks.options.enableVerticalScrolling && height > 0) {
@@ -182,7 +188,7 @@ define([
           );
         }
         else {
-          self._frameOffsetY = 0;
+          self.setFrameOffsetY(0);
         }
 
         if ((newFrameOffset !== this.initialFrameOffset)
@@ -214,7 +220,7 @@ define([
         return;
       }
 
-      self._peaks.emit('zoomview.click', event);
+      self._peaks.emit('handler.view.click', event);
       // Set playhead position only on click release, when not dragging.
       if (self._modeLayer.getCurrentMode() === 'default' && !self._mouseDragHandler.isDragging()) {
         var mouseDownX = Math.floor(self._stage.getPointerPosition().x);
@@ -229,7 +235,7 @@ define([
           self._peaks.player.seek(time);
         }
 
-        self._peaks.emit('zoomview.updateTime', event, time);
+        self._peaks.emit('handler.view.updateTime', event, time);
       }
     });
 
@@ -240,7 +246,7 @@ define([
 
       var time = self.pixelsToTime(pixelIndex);
 
-      self._peaks.emit('zoomview.dblclick', time);
+      self._peaks.emit('handler.view.dblclick', time);
     });
 
     this._stage.on('wheel', function(e) {
@@ -277,7 +283,7 @@ define([
           );
         }
 
-        var height = self._sourcesLayer._lines.height() - self._height;
+        var height = self._sourcesLayer.getFullHeight() - self._height;
         var newFrameOffsetY = 0;
 
         if (self._peaks.options.enableVerticalScrolling && height > 0) {
@@ -286,7 +292,7 @@ define([
           );
         }
         else {
-          self._frameOffsetY = 0;
+          self.setFrameOffsetY(0);
         }
 
         if ((newFrameOffset !== self.getFrameOffset())
@@ -304,19 +310,23 @@ define([
     window.addEventListener('blur', this._mouseUp.bind(this), false);
   }
 
-  TimelineZoomView.prototype._mouseUp = function() {
+  View.prototype._mouseUp = function() {
     this.clearScrollingInterval();
   };
 
-  TimelineZoomView.prototype.setClickable = function(clickable) {
+  View.prototype.setClickable = function(clickable) {
     this._isClickable = clickable;
   };
 
-  TimelineZoomView.prototype.getSelectedElements = function() {
+  View.prototype.getTempLayer = function() {
+    return this._tempLayer;
+  };
+
+  View.prototype.getSelectedElements = function() {
     return Object.values(this._modeLayer.getSelectedElements());
   };
 
-  TimelineZoomView.prototype.updateWithAutoScroll = function(updateInInterval,
+  View.prototype.updateWithAutoScroll = function(updateInInterval,
     updateOutInterval) {
     var self = this;
     var posX = this.getPointerPosition().x;
@@ -340,12 +350,12 @@ define([
             var newOffset = self.getFrameOffset() + self._limited;
 
             if (newOffset < 0) {
-              self.updateTimeline(0, null, false);
+              self.updateTimeline(0);
               clearInterval(self._scrollingInterval);
               self._scrollingInterval = null;
             }
             else {
-              self.updateTimeline(self.getFrameOffset() + self._limited, null, false);
+              self.updateTimeline(self.getFrameOffset() + self._limited);
             }
 
             updateInInterval();
@@ -366,39 +376,37 @@ define([
     }
   };
 
-  TimelineZoomView.prototype.clearScrollingInterval = function() {
+  View.prototype.clearScrollingInterval = function() {
     if (this._scrollingInterval) {
       clearInterval(this._scrollingInterval);
       this._scrollingInterval = null;
     }
   };
 
-  TimelineZoomView.prototype.getCurrentMode = function() {
+  View.prototype.getCurrentMode = function() {
     return this._modeLayer.getCurrentMode();
   };
 
-  TimelineZoomView.prototype.overrideInteractions = function(bool, areInteractionsAllowed) {
-    this._sourcesLayer._lines.overrideInteractions(bool, areInteractionsAllowed);
+  View.prototype.overrideInteractions = function(areInteractionsAllowed) {
     this._playheadLayer.listening(areInteractionsAllowed);
     this._sourcesLayer.stopDrag();
     this._sourcesLayer.draw();
   };
 
-  TimelineZoomView.prototype.allowInteractions = function(forSources, forSegments) {
-    this._sourcesLayer._lines.allowInteractions(forSources, forSegments);
+  View.prototype.allowInteractions = function() {
     this._sourcesLayer.stopDrag();
     this._sourcesLayer.draw();
   };
 
-  TimelineZoomView.prototype.getSelectedElements = function() {
+  View.prototype.getSelectedElements = function() {
     return this._modeLayer.getSelectedElements();
   };
 
-  TimelineZoomView.prototype.getSourceGroupById = function(sourceId) {
+  View.prototype.getSourceGroupById = function(sourceId) {
     return this._sourcesLayer.getSourceGroupById(sourceId);
   };
 
-  TimelineZoomView.prototype.selectSourceById = function(sourceId) {
+  View.prototype.selectSourceById = function(sourceId) {
     const sourceGroup = this._sourcesLayer.getSourceGroupById(sourceId);
 
     if (sourceGroup) {
@@ -406,7 +414,7 @@ define([
     }
   };
 
-  TimelineZoomView.prototype.selectSourcesOnLineAfter = function(lineId, time) {
+  View.prototype.selectSourcesOnLineAfter = function(lineId, time) {
     const sources = this._sourcesLayer.getSourcesOnLineAfter(lineId, time);
 
     if (sources) {
@@ -414,54 +422,54 @@ define([
     }
   };
 
-  TimelineZoomView.prototype.deselectAll = function(notify) {
+  View.prototype.deselectAll = function(notify) {
     this._modeLayer.deselectDifference([], notify);
   };
 
-  TimelineZoomView.prototype.isListening = function() {
+  View.prototype.isListening = function() {
     return this._stage.listening();
   };
 
-  TimelineZoomView.prototype.isFocused = function() {
+  View.prototype.isFocused = function() {
     return this._isFocused;
   };
 
-  TimelineZoomView.prototype.drawSourcesLayer = function() {
+  View.prototype.drawSourcesLayer = function() {
     this._sourcesLayer.draw();
   };
 
-  TimelineZoomView.prototype.refresh = function() {
+  View.prototype.refresh = function() {
     this._sourcesLayer.refresh();
   };
 
-  TimelineZoomView.prototype.getSegmentsGroup = function() {
+  View.prototype.getSegmentsGroup = function() {
     return this._sourcesLayer.getSegmentsGroup();
   };
 
-  TimelineZoomView.prototype.getTimeToPixelsScale = function() {
+  View.prototype.getTimeToPixelsScale = function() {
     return this._timeToPixelsScale;
   };
 
-  TimelineZoomView.prototype.getTimeToPixelsMaxZoom = function() {
+  View.prototype.getTimeToPixelsMaxZoom = function() {
     return this._options.zoomRange[1];
   };
 
-  TimelineZoomView.prototype.setTimeToPixelsMaxZoom = function(value) {
+  View.prototype.setTimeToPixelsMaxZoom = function(value) {
     this._options.zoomRange[1] = value;
     if (value < this._timeToPixelsScale) {
       this.setZoom(value);
     }
   };
 
-  TimelineZoomView.prototype.getTimeToPixelsMinScale = function() {
+  View.prototype.getTimeToPixelsMinScale = function() {
     return this._timeToPixelsMinScale;
   };
 
-  TimelineZoomView.prototype.getName = function() {
+  View.prototype.getName = function() {
     return 'zoomview';
   };
 
-  TimelineZoomView.prototype._onTimeUpdate = function(time) {
+  View.prototype._onTimeUpdate = function(time) {
     if (this._mouseDragHandler.isDragging()) {
       return;
     }
@@ -469,24 +477,24 @@ define([
     this._syncPlayhead(time);
   };
 
-  TimelineZoomView.prototype._onSeek = function(time) {
+  View.prototype._onSeek = function(time) {
     var frameIndex = this.timeToPixels(time);
 
     this.updateTimeline(frameIndex - Math.floor(this._width / 2));
     this._playheadLayer.updatePlayheadTime(time);
   };
 
-  TimelineZoomView.prototype._onPlay = function(time) {
+  View.prototype._onPlay = function(time) {
     this._playheadLayer.updatePlayheadTime(time);
     this.enableAutoScroll(true);
   };
 
-  TimelineZoomView.prototype._onPause = function(time) {
+  View.prototype._onPause = function(time) {
     this._playheadLayer.stop(time);
     this.enableAutoScroll(true);
   };
 
-  TimelineZoomView.prototype._onWindowResize = function() {
+  View.prototype._onWindowResize = function() {
     var self = this;
 
     var width = self._container.clientWidth;
@@ -496,57 +504,57 @@ define([
     self.updateTimeline(self._frameOffset, self._frameOffsetY);
   };
 
-  TimelineZoomView.prototype._onKeyboardLeft = function() {
+  View.prototype._onKeyboardLeft = function() {
     if (this.isFocused()) {
       this._keyboardScroll(-1, false);
     }
   };
 
-  TimelineZoomView.prototype._onKeyboardRight = function() {
+  View.prototype._onKeyboardRight = function() {
     if (this.isFocused()) {
       this._keyboardScroll(1, false);
     }
   };
 
-  TimelineZoomView.prototype._onKeyboardShiftLeft = function() {
+  View.prototype._onKeyboardShiftLeft = function() {
     if (this.isFocused()) {
       this._keyboardScroll(-1, true);
     }
   };
 
-  TimelineZoomView.prototype._onKeyboardShiftRight = function() {
+  View.prototype._onKeyboardShiftRight = function() {
     if (this.isFocused()) {
       this._keyboardScroll(1, true);
     }
   };
 
-  TimelineZoomView.prototype._onDefaultMode = function() {
+  View.prototype._onDefaultMode = function() {
     this.preventWrappingChange(false);
     this._modeLayer.setMode('default');
   };
 
-  TimelineZoomView.prototype._onCutMode = function() {
+  View.prototype._onCutMode = function() {
     this.preventWrappingChange(true);
     this._modeLayer.setMode('cut');
   };
 
-  TimelineZoomView.prototype.preventWrappingChange = function(bool) {
+  View.prototype.preventWrappingChange = function(bool) {
     this._preventWrappingChange = bool;
   };
 
-  TimelineZoomView.prototype.isPreventingWrappingChange = function() {
+  View.prototype.isPreventingWrappingChange = function() {
     return this._preventWrappingChange;
   };
 
-  TimelineZoomView.prototype.getHoveredElement = function() {
+  View.prototype.getHoveredElement = function() {
     return this._hoveredElement;
   };
 
-  TimelineZoomView.prototype.setHoveredElement = function(element) {
+  View.prototype.setHoveredElement = function(element) {
     this._hoveredElement = element;
   };
 
-  TimelineZoomView.prototype._keyboardScroll = function(direction, large) {
+  View.prototype._keyboardScroll = function(direction, large) {
     var increment;
 
     if (large) {
@@ -559,7 +567,7 @@ define([
     this.updateTimeline(this._frameOffset + increment);
   };
 
-  TimelineZoomView.prototype._syncPlayhead = function(time) {
+  View.prototype._syncPlayhead = function(time) {
     this._playheadLayer.updatePlayheadTime(time);
 
     if (this._enableAutoScroll) {
@@ -582,7 +590,7 @@ define([
     }
   };
 
-  TimelineZoomView.prototype.showPlayhead = function() {
+  View.prototype.showPlayhead = function() {
     var newFrameOffset = this._playheadLayer.getPlayheadPixel() - Math.round(0.1 * this._width);
 
     this.setFrameOffset(newFrameOffset);
@@ -596,11 +604,11 @@ define([
    * @param {Number} scale The new zoom level, in samples per pixel.
    */
 
-  TimelineZoomView.prototype._getScale = function(duration) {
+  View.prototype._getScale = function(duration) {
     return duration * this._data.sample_rate / this._width;
   };
 
-  TimelineZoomView.prototype.setZoom = function(newScale) {
+  View.prototype.setZoom = function(newScale) {
     newScale = Math.min(Math.max(this._options.zoomRange[0], newScale), this._options.zoomRange[1]);
 
     if (newScale === this._timeToPixelsScale) {
@@ -634,14 +642,14 @@ define([
     // Block interactions while updating the view.
     this.overrideInteractions(true, true);
 
-    this.updateTimeline(this._frameOffset, undefined, undefined, true);
+    this.updateTimeline(this._frameOffset);
 
     this._sourcesLayer.rescale(true);
 
     // Update the playhead position after zooming.
     this._playheadLayer.updatePlayheadTime(currentTime);
 
-    this._peaks.emit('zoom.update', newScale, prevScale);
+    this._peaks.emit('handler.view.updatezoom', newScale, prevScale);
 
     // Re-enable interactions after updating the view.
     this.overrideInteractions(false, true);
@@ -649,35 +657,35 @@ define([
     return true;
   };
 
-  TimelineZoomView.prototype.getTimelineLength = function() {
+  View.prototype.getTimelineLength = function() {
     return this._timelineLength;
   };
 
-  TimelineZoomView.prototype.updateTimelineLength = function() {
+  View.prototype.updateTimelineLength = function() {
     this._timelineLength = this._sourcesLayer.getLength() + this._peaks.options.horizontalPadding;
   };
 
-  TimelineZoomView.prototype.setTimelineLength = function(length) {
+  View.prototype.setTimelineLength = function(length) {
     this._timelineLength = length;
   };
 
-  TimelineZoomView.prototype.getPointerPosition = function() {
+  View.prototype.getPointerPosition = function() {
     return this._stage.getPointerPosition();
   };
 
-  TimelineZoomView.prototype.getStartTime = function() {
+  View.prototype.getStartTime = function() {
     return this.pixelsToTime(this._frameOffset);
   };
 
-  TimelineZoomView.prototype.getEndTime = function() {
+  View.prototype.getEndTime = function() {
     return this.pixelsToTime(this._frameOffset + this._width);
   };
 
-  TimelineZoomView.prototype.getLineByPosition = function(pos) {
+  View.prototype.getLineByPosition = function(pos) {
     return this._sourcesLayer.getLineByPosition(pos);
   };
 
-  TimelineZoomView.prototype.setStartTime = function(time) {
+  View.prototype.setStartTime = function(time) {
     if (time < 0) {
       time = 0;
     }
@@ -692,7 +700,7 @@ define([
    * @returns {Number} Pixel index.
    */
 
-  TimelineZoomView.prototype.timeToPixels = function(time) {
+  View.prototype.timeToPixels = function(time) {
     return Math.round(time * this._timeToPixelsScale);
   };
 
@@ -703,7 +711,7 @@ define([
    * @returns {Number} Time, in seconds.
    */
 
-  TimelineZoomView.prototype.pixelsToTime = function(pixels) {
+  View.prototype.pixelsToTime = function(pixels) {
     return Utils.roundTime(pixels / this._timeToPixelsScale);
   };
 
@@ -712,21 +720,21 @@ define([
    *   in pixels.
    */
 
-  TimelineZoomView.prototype.getFrameOffset = function() {
+  View.prototype.getFrameOffset = function() {
     return this._frameOffset;
   };
 
-  TimelineZoomView.prototype.setFrameOffset = function(newFrameOffset) {
+  View.prototype.setFrameOffset = function(newFrameOffset) {
     newFrameOffset = Math.max(0, newFrameOffset);
     this._frameOffset = Math.round(newFrameOffset);
     this._timeOffset = this.pixelsToTime(this._frameOffset);
   };
 
-  TimelineZoomView.prototype.getTimeOffset = function() {
+  View.prototype.getTimeOffset = function() {
     return this._timeOffset;
   };
 
-  TimelineZoomView.prototype.setTimeOffset = function(newTimeOffset) {
+  View.prototype.setTimeOffset = function(newTimeOffset) {
     this._timeOffset = Utils.roundTime(newTimeOffset);
     this._frameOffset = this.timeToPixels(this._timeOffset);
   };
@@ -736,7 +744,7 @@ define([
    *   in pixels.
    */
 
-  TimelineZoomView.prototype.getFrameOffsetY = function() {
+  View.prototype.getFrameOffsetY = function() {
     return this._frameOffsetY;
   };
 
@@ -744,7 +752,7 @@ define([
    * @returns {Number} The width of the stage, in pixels.
    */
 
-  TimelineZoomView.prototype.getWidth = function() {
+  View.prototype.getWidth = function() {
     return this._width;
   };
 
@@ -752,7 +760,7 @@ define([
    * @returns {Number} The width of the whole view, in pixels.
    */
 
-  TimelineZoomView.prototype.getOriginalWidth = function() {
+  View.prototype.getOriginalWidth = function() {
     return this._originalWidth;
   };
 
@@ -760,7 +768,7 @@ define([
    * @returns {Number} The height of the view, in pixels.
    */
 
-  TimelineZoomView.prototype.getHeight = function() {
+  View.prototype.getHeight = function() {
     return this._height;
   };
 
@@ -771,7 +779,7 @@ define([
    * @param {Number} scale The new amplitude scale factor
    */
 
-  TimelineZoomView.prototype.setAmplitudeScale = function(scale) {
+  View.prototype.setAmplitudeScale = function(scale) {
     if (!Utils.isNumber(scale) || !Number.isFinite(scale)) {
       throw new Error('view.setAmplitudeScale(): Scale must be a valid number');
     }
@@ -779,7 +787,7 @@ define([
     this._amplitudeScale = scale;
   };
 
-  TimelineZoomView.prototype.getAmplitudeScale = function() {
+  View.prototype.getAmplitudeScale = function() {
     return this._amplitudeScale;
   };
 
@@ -789,49 +797,36 @@ define([
    * @param {Number} frameOffset The new frame offset, in pixels.
    */
 
-  TimelineZoomView.prototype.updateTimeline = function(frameOffset, frameOffsetY, fixPlayhead,
-    ignoreRescale) {
-    var frameStartTime = null;
-    var frameEndTime = null;
-
-    if (frameOffset !== undefined && frameOffset !== null) {
+  View.prototype.updateTimeline = function(frameOffset, frameOffsetY) {
+    if (!Utils.isNullOrUndefined(frameOffset)) {
       this.setFrameOffset(frameOffset);
 
-      frameStartTime = this.pixelsToTime(this._frameOffset);
-      frameEndTime   = this.pixelsToTime(this._frameOffset + this._width);
-
-      if (!fixPlayhead) {
-        // Display playhead if it is within the zoom frame width.
-        var playheadPixel = this._playheadLayer.getPlayheadPixel();
-
-        this._playheadLayer.updatePlayheadTime(this.pixelsToTime(playheadPixel));
-      }
+      const playheadPixel = this._playheadLayer.getPlayheadPixel();
 
+      this._playheadLayer.updatePlayheadTime(this.pixelsToTime(playheadPixel));
       this._axis.draw();
-
-      this._peaks.emit('zoomview.displaying', frameStartTime, frameEndTime);
     }
 
-    if (frameOffsetY !== undefined && frameOffsetY !== null) {
-      this._frameOffsetY = frameOffsetY;
-    }
+    const frameStartTime = this.pixelsToTime(this._frameOffset);
+    const frameEndTime = this.pixelsToTime(this._frameOffset + this._width);
 
-    if (frameStartTime === null) {
-      frameStartTime = this.pixelsToTime(this._frameOffset);
+    if (!Utils.isNullOrUndefined(frameOffsetY)) {
+      this.setFrameOffsetY(frameOffsetY);
     }
 
-    if (frameEndTime === null) {
-      frameEndTime = this.pixelsToTime(this._frameOffset + this._width);
-    }
+    this._sourcesLayer.updateSources(frameStartTime, frameEndTime);
+  };
 
-    if (!ignoreRescale) {
-      this._sourcesLayer.rescale();
+  View.prototype.setFrameOffsetY = function(frameOffsetY) {
+    if (frameOffsetY === this._frameOffsetY) {
+      return;
     }
 
-    this._sourcesLayer.updateSources(frameStartTime, frameEndTime);
+    this._frameOffsetY = frameOffsetY;
+    this._peaks.emit('handler.view.setFrameOffsetY', frameOffsetY);
   };
 
-  TimelineZoomView.prototype.toggleMainCursor = function(on, type) {
+  View.prototype.toggleMainCursor = function(on, type) {
     this._isMainCursorToggled = on;
 
     this._stage.container().style.cursor = on ?
@@ -839,26 +834,26 @@ define([
         this._nativeCursor;
   };
 
-  TimelineZoomView.prototype.setCursor = function(type) {
+  View.prototype.setCursor = function(type) {
     this._nativeCursor = type;
     if (!this._isMainCursorToggled) {
       this._stage.container().style.cursor = type;
     }
   };
 
-  TimelineZoomView.prototype.getCursor = function() {
+  View.prototype.getCursor = function() {
     return this._stage.container().style.cursor;
   };
 
-  TimelineZoomView.prototype.showPlayheadTime = function(show) {
+  View.prototype.showPlayheadTime = function(show) {
     this._playheadLayer.showPlayheadTime(show);
   };
 
-  TimelineZoomView.prototype.enableAutoScroll = function(enable) {
+  View.prototype.enableAutoScroll = function(enable) {
     this._enableAutoScroll = enable;
   };
 
-  TimelineZoomView.prototype.fitToContainer = function() {
+  View.prototype.fitToContainer = function() {
     if (this._container.clientWidth === 0 && this._container.clientHeight === 0) {
       return;
     }
@@ -887,11 +882,11 @@ define([
     }
   };
 
-  TimelineZoomView.prototype.getFullHeight = function() {
+  View.prototype.getFullHeight = function() {
     return this._sourcesLayer.getFullHeight();
   };
 
-  TimelineZoomView.prototype.destroy = function() {
+  View.prototype.destroy = function() {
     if (this._resizeTimeoutId) {
       clearTimeout(this._resizeTimeoutId);
       this._resizeTimeoutId = null;
@@ -903,12 +898,12 @@ define([
     this._peaks.off('player_play', this._onPlay);
     this._peaks.off('player_pause', this._onPause);
     this._peaks.off('window_resize', this._onWindowResize);
-    this._peaks.off('keyboard.left', this._onKeyboardLeft);
-    this._peaks.off('keyboard.right', this._onKeyboardRight);
-    this._peaks.off('keyboard.shift_left', this._onKeyboardShiftLeft);
-    this._peaks.off('keyboard.shift_right', this._onKeyboardShiftRight);
-    this._peaks.off('default_mode', this._onDefaultMode);
-    this._peaks.off('cut_mode', this._onCutMode);
+    this._peaks.off('handler.keyboard.left', this._onKeyboardLeft);
+    this._peaks.off('handler.keyboard.right', this._onKeyboardRight);
+    this._peaks.off('handler.keyboard.shiftleft', this._onKeyboardShiftLeft);
+    this._peaks.off('handler.keyboard.shiftright', this._onKeyboardShiftRight);
+    this._peaks.off('handler.view.defaultmode', this._onDefaultMode);
+    this._peaks.off('handler.view.cutmode', this._onCutMode);
 
     if (this._stage) {
       this._stage.destroy();
@@ -916,5 +911,5 @@ define([
     }
   };
 
-  return TimelineZoomView;
+  return View;
 });