CC-5108 : Waveform Editor UI

putting on the timescale for time reference.

fade editor now has cursor playback info.

airtime_mvc/public/js/waveformplaylist/playlist.js

@@ -56,6 +56,16 @@ PlaylistEditor.prototype.init = function(tracks) {
         trackEditor.on("deactivateSelection", "onAudioDeselection", audioControls);
         trackEditor.on("changecursor", "onCursorSelection", audioControls);
         trackEditor.on("changecursor", "onSelectUpdate", this);
+
+        trackEditor.on("unregister", (function() {
+            var editor = this;
+
+            audioControls.remove("trackedit", "onTrackEdit", editor);
+            audioControls.remove("changeresolution", "onResolutionChange", editor);
+
+            that.removeTrack(editor);
+
+        }).bind(trackEditor));
     }
 
     div.innerHTML = '';
@@ -79,7 +89,27 @@ PlaylistEditor.prototype.init = function(tracks) {
     audioControls.on("trimaudio", "onTrimAudio", this);
     audioControls.on("removeaudio", "onRemoveAudio", this);
     audioControls.on("changestate", "onStateChange", this);
-    audioControls.on("changeselection", "onSelectionChange", this);  
+    audioControls.on("changeselection", "onSelectionChange", this); 
+};
+
+PlaylistEditor.prototype.removeTrack = function(trackEditor) {
+    var i, 
+        len, 
+        editor,
+        editors = this.trackEditors;
+    
+    for (i = 0, len = editors.length; i < len; i++) {
+        editor = editors[i];
+
+        if (editor === trackEditor) {
+            editors.splice(i, 1);
+            return;
+        }
+    }
+};
+
+PlaylistEditor.prototype.resize = function() {
+    this.timeScale.onResize();
 };
 
 PlaylistEditor.prototype.onTrimAudio = function() {

airtime_mvc/public/js/waveformplaylist/playout.js

@@ -83,7 +83,8 @@ AudioPlayout.prototype.loadData = function (audioData, cb) {
             cb(buffer);
         },
         function(err) { 
-            console.log("err(decodeAudioData): "+err); 
+            console.log("err(decodeAudioData): "+err);
+            cb(null, err);
         }
     );
 };

airtime_mvc/public/js/waveformplaylist/time_scale.js

@@ -8,7 +8,8 @@ TimeScale.prototype.init = function(config) {
 
     var that = this,
         canv,
-        div;
+        div,
+        resizeTimer;
 
     makePublisher(this);
 
@@ -36,6 +37,24 @@ TimeScale.prototype.init = function(config) {
 
     this.prevScrollPos = 0; //checking the horizontal scroll (must update timeline above in case of change)
 
+    //TODO check scroll adjust.
+    function doneResizing() {
+        that.width = that.container.clientWidth;
+        that.height = that.container.clientHeight;
+
+        canv.setAttribute('width', that.width);
+        canv.setAttribute('height', that.height);
+
+        that.drawScale();
+    };
+
+    function onResize() {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(doneResizing, 100);
+    };
+
+    TimeScale.prototype.onResize = onResize;
+
     this.drawScale();
 };
 

airtime_mvc/public/js/waveformplaylist/track.js

@@ -208,11 +208,20 @@ TrackEditor.prototype.drawTrack = function(buffer) {
     this.drawer.drawFades(this.fades);
 };
 
-TrackEditor.prototype.onTrackLoad = function(buffer) {
+TrackEditor.prototype.onTrackLoad = function(buffer, err) {
     var res,
         startTime,
         endTime;
 
+    if (err !== undefined) {
+        this.container.innerHTML = "";
+        this.container.classList.add("error");
+
+        this.fire('unregister');
+
+        return;
+    }
+
     if (this.cues === undefined) {
         this.setCuePoints(0, buffer.length - 1);
     }
@@ -282,6 +291,8 @@ TrackEditor.prototype.deactivate = function() {
 /* start of state methods */
 
 TrackEditor.prototype.timeShift = function(e) {
+    e.preventDefault();
+
     var el = e.currentTarget, //want the events placed on the channel wrapper.
         startX = e.pageX, 
         diffX = 0, 
@@ -296,6 +307,8 @@ TrackEditor.prototype.timeShift = function(e) {
     
     //dynamically put an event on the element.
     el.onmousemove = function(e) {
+        e.preventDefault();
+
         var endX = e.pageX;
         
         diffX = endX - startX;
@@ -303,7 +316,9 @@ TrackEditor.prototype.timeShift = function(e) {
         editor.drawer.setTimeShift(updatedX);
         editor.leftOffset = editor.pixelsToSamples(updatedX);
     };
-    el.onmouseup = function() {
+    el.onmouseup = function(e) {
+        e.preventDefault();
+
         var delta;
 
         el.onmousemove = el.onmouseup = null;
@@ -453,6 +468,8 @@ TrackEditor.prototype.findLayerOffset = function(e) {
 };
 
 TrackEditor.prototype.selectStart = function(e) {
+    e.preventDefault();
+
     var el = e.currentTarget, //want the events placed on the channel wrapper.
         editor = this,
         startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
@@ -475,6 +492,8 @@ TrackEditor.prototype.selectStart = function(e) {
 
     //dynamically put an event on the element.
     el.onmousemove = function(e) {
+        e.preventDefault();
+
         var currentX = layerOffset + (e.layerX || e.offsetX),
             delta = currentX - prevX,
             minX = Math.min(prevX, currentX, startX),
@@ -500,6 +519,8 @@ TrackEditor.prototype.selectStart = function(e) {
         prevX = currentX;
     };
     el.onmouseup = function(e) {
+        e.preventDefault();
+
         var endX = layerOffset + (e.layerX || e.offsetX),
             minX, maxX,
             startTime, endTime;
@@ -555,6 +576,8 @@ TrackEditor.prototype.selectCursorPos = function(e) {
 };
 
 TrackEditor.prototype.selectFadeIn = function(e) {
+    e.preventDefault();
+
     var startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
         layerOffset,
         FADETYPE = "FadeIn",
@@ -572,6 +595,8 @@ TrackEditor.prototype.selectFadeIn = function(e) {
 };
 
 TrackEditor.prototype.selectFadeOut = function(e) {
+    e.preventDefault();
+
     var startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
         layerOffset,
         FADETYPE = "FadeOut",