CC-2301 : fade editor now loads currently set fades. Fixing some bugs in the waveform editor.

airtime_mvc/application/views/scripts/playlist/set-fade.phtml

@@ -5,7 +5,8 @@
     <?php if ($this->item1Type == 0) {?>
     <dt><? echo _("Fade out: "); ?><span class='spl_cue_hint'><? echo _("(ss.t)")?></span></dt>
     <dd id="spl_fade_out_<?php echo $this->item1; ?>" class="spl_fade_out" data-fadeout="<?php echo $this->item1Url; ?>"
-    	data-cuein="<?php echo $this->cueIn1; ?>" data-cueout="<?php echo $this->cueOut1; ?>">
+    	data-cuein="<?php echo $this->cueIn1; ?>" data-cueout="<?php echo $this->cueOut1; ?>" data-length="<?php echo $this->fadeOut; ?>"
+    	data-type="logarithmic">
         <span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span>
     </dd>
     <dd class="edit-error"></dd>
@@ -13,7 +14,8 @@
     if ($this->item2Type == 0) {?>
     <dt><? echo _("Fade in: "); ?><span class='spl_cue_hint'><? echo _("(ss.t)")?></span></dt>
     <dd id="spl_fade_in_<?php echo $this->item2; ?>" class="spl_fade_in" data-fadein="<?php echo $this->item2Url; ?>" data-offset="<?php echo $this->offset; ?>"
-    	data-cuein="<?php echo $this->cueIn2; ?>" data-cueout="<?php echo $this->cueOut2; ?>">
+    	data-cuein="<?php echo $this->cueIn2; ?>" data-cueout="<?php echo $this->cueOut2; ?>" data-length="<?php echo $this->fadeIn; ?>"
+    	data-type="logarithmic">
         <span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span>
     </dd>
     <dd class="edit-error"></dd>

airtime_mvc/public/js/airtime/library/spl.js

@@ -1120,16 +1120,29 @@ var AIRTIME = (function(AIRTIME){
 			    	src: $fadeOut.data("fadeout"),
 			    	cuein: $fadeOut.data("cuein"),
 			    	cueout: $fadeOut.data("cueout"),
-			    	moveable: false
+			    	moveable: false,
+			    	fades: [{
+			    	    shape: $fadeOut.data("type"),
+			    	    type: "FadeOut",
+			    	    end: $fadeOut.data("cueout") - $fadeOut.data("cuein"),
+			    	    start: $fadeOut.data("cueout") - $fadeOut.data("cuein") - $fadeOut.data("length")
+			    	}]
 				},
 				{
 			    	src: $fadeIn.data("fadein"),
 			    	start: $fadeIn.data("offset"),
 			    	cuein: $fadeIn.data("cuein"),
-			    	cueout: $fadeIn.data("cueout")
+			    	cueout: $fadeIn.data("cueout"),
+			    	fades: [{
+			    	    shape: $fadeIn.data("type"),
+			    	    type: "FadeIn",
+			    	    end: $fadeIn.data("length"),
+			    	    start: 0
+			    	}]
 				}
 			],
-			dim = AIRTIME.utilities.findViewportDimensions();
+			dim = AIRTIME.utilities.findViewportDimensions(),
+			playlistEditor;
 		
 		$html.dialog({
             modal: true,
@@ -1139,8 +1152,14 @@ var AIRTIME = (function(AIRTIME){
             width: dim.width - 100,
             height: dim.height - 100,
             buttons: [
-                //{text: "Submit", click: function() {doSomething()}},
+                {text: "Save", click: function() {
-                {text: "Cancel", click: function() {$(this).dialog("close");}}
+                	var json = playlistEditor.getJson();
+                	
+                	var x;
+                }},
+                {text: "Cancel", click: function() {
+                	$(this).dialog("close");
+                }}
             ],
             open: function (event, ui) {
             	
@@ -1154,7 +1173,7 @@ var AIRTIME = (function(AIRTIME){
         	        timeFormat: 'hh:mm:ss.u'
         	    });
         		
-        		var playlistEditor = new PlaylistEditor();
+        		playlistEditor = new PlaylistEditor();
         	    playlistEditor.setConfig(config);
         	    playlistEditor.init(tracks);
             }

airtime_mvc/public/js/waveformplaylist/playlist.js

@@ -289,7 +289,7 @@ PlaylistEditor.prototype.updateEditor = function() {
             playbackSec = cursorPos + elapsed;
             cursorPixel = Math.ceil(playbackSec * this.sampleRate / res);
             
-            for(i = 0, len = editors.length; i < len; i++) {
+            for (i = 0, len = editors.length; i < len; i++) {
                 editors[i].updateEditor(cursorPixel, start, end, highlighted);
             }
 
@@ -301,6 +301,10 @@ PlaylistEditor.prototype.updateEditor = function() {
     }
     else {
         clearInterval(this.interval);
+
+        for (i = 0, len = editors.length; i < len; i++) {
+            editors[i].updateEditor(-1, undefined, undefined, true);
+        }
     } 
 };
 

airtime_mvc/public/js/waveformplaylist/track.js

@@ -89,7 +89,13 @@ TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
     this.prevStateEvents = {};
     this.setState(this.config.getState());
 
-    this.fades = fades || {};
+    this.fades = {};
+    if (fades !== undefined && fades.length > 0) {
+    
+        for (var i = 0; i < fades.length; i++) {
+            this.fades[this.getFadeId()] = fades[i];
+        }
+    }
     
     if (cues.cuein !== undefined) {
         this.setCuePoints(this.secondsToSamples(cues.cuein), this.secondsToSamples(cues.cueout));
@@ -102,10 +108,6 @@ TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
     this.container.classList.add("channel-wrapper");
     this.container.style.left = this.leftOffset;
 
-    if (this.canShift === false) {
-        this.container.style.position = "static";
-    }
-
     this.drawer.drawLoading();
 
     return this.container;
@@ -238,7 +240,8 @@ TrackEditor.prototype.deactivate = function() {
     this.active = false;
     this.selectedArea = undefined;
     this.container.classList.remove("active");
-    this.drawer.draw(-1, this.getPixelOffset());
+    //this.drawer.draw(-1, this.getPixelOffset());
+    this.updateEditor(-1, undefined, undefined, true);
 };
 
 /* start of state methods */
@@ -313,15 +316,20 @@ TrackEditor.prototype.getSelectedArea = function() {
 };
 
 /*
-    start, end in samples.
+    start, end in samples. (relative to cuein/cueout)
 */
 TrackEditor.prototype.adjustSelectedArea = function(start, end) {
-    var buffer = this.getBuffer();
+    var buffer = this.getBuffer(),
+        cues = this.cues;
 
-    if (start < 0) {
+    if (start === undefined || start < 0) {
         start = 0;
     }
 
+    if (end === undefined) {
+        end = cues.cueout - cues.cuein;
+    }
+
     if (end > buffer.length - 1) {
         end = buffer.length - 1;
     }
@@ -375,8 +383,8 @@ TrackEditor.prototype.setSelectedArea = function(start, end, shiftKey) {
         right = end;
     }
 
-    sampLeft = left === undefined ? 0 : this.pixelsToSamples(left);
+    sampLeft = left === undefined ? undefined : this.pixelsToSamples(left);
-    sampRight = right === undefined ? buffer.length - 1 : this.pixelsToSamples(right);
+    sampRight = right === undefined ? undefined : this.pixelsToSamples(right);
 
     this.prevSelectedArea = this.selectedArea;
     this.selectedArea = this.adjustSelectedArea(sampLeft, sampRight);
@@ -392,21 +400,40 @@ TrackEditor.prototype.deactivateAudioSelection = function() {
     this.fire("deactivateSelection");
 };
 
+TrackEditor.prototype.findLayerOffset = function(e) {
+    var layerOffset = 0,
+        parent;
+
+    if (e.target.tagName !== "CANVAS") {
+        layerOffset = -1;
+    }
+    else {
+        //have to check if a fade canvas was selected. (Must add left offset)
+        parent = e.target.parentNode;
+
+        if (parent.classList.contains('playlist-fade')) {
+            layerOffset = parent.offsetLeft;
+        }
+    }
+
+    return layerOffset;
+};
+
 TrackEditor.prototype.selectStart = function(e) {
     var el = e.currentTarget, //want the events placed on the channel wrapper.
         editor = this,
-        //scroll = this.config.getTrackScroll(),
-        //scrollX = scroll.left,
-        //startX = scrollX + (e.layerX || e.offsetX), //relative to e.target (want the canvas).
-        //prevX = scrollX + (e.layerX || e.offsetX),
         startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
         prevX = e.layerX || e.offsetX,
         offset = this.leftOffset,
-        startTime;
+        startTime,
+        layerOffset;
 
-    if (e.target.tagName !== "CANVAS") {
+    layerOffset = this.findLayerOffset(e);
+    if (layerOffset < 0) {
         return;
     }
+    startX = startX + layerOffset;
+    prevX = prevX + layerOffset;
 
     editor.setSelectedArea(startX, startX);
     startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
@@ -416,8 +443,7 @@ TrackEditor.prototype.selectStart = function(e) {
 
     //dynamically put an event on the element.
     el.onmousemove = function(e) {
-        var currentX = e.layerX || e.offsetX,
+        var currentX = layerOffset + (e.layerX || e.offsetX),
-            //currentX = scrollX + (e.layerX || e.offsetX),
             delta = currentX - prevX,
             minX = Math.min(prevX, currentX, startX),
             maxX = Math.max(prevX, currentX, startX),
@@ -443,7 +469,7 @@ TrackEditor.prototype.selectStart = function(e) {
         prevX = currentX;
     };
     el.onmouseup = function(e) {
-        var endX = e.layerX || e.offsetX,
+        var endX = layerOffset + (e.layerX || e.offsetX),
             minX, maxX,
             startTime, endTime;
 
@@ -479,11 +505,14 @@ TrackEditor.prototype.selectCursorPos = function(e) {
         startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
         offset = this.leftOffset,
         startTime, 
-        endTime;
+        endTime,
+        layerOffset;
 
-    if (e.target.tagName !== "CANVAS") {
+    layerOffset = this.findLayerOffset(e);
+    if (layerOffset < 0) {
         return;
     }
+    startX = startX + layerOffset;
 
     editor.setSelectedArea(startX, startX);
     startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
@@ -501,11 +530,14 @@ TrackEditor.prototype.selectFadeIn = function(e) {
         startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
         offset = this.leftOffset,
         startTime, 
-        endTime;
+        endTime,
+        layerOffset;
 
-    if (e.target.tagName !== "CANVAS") {
+    layerOffset = this.findLayerOffset(e);
+    if (layerOffset < 0) {
         return;
     }
+    startX = startX + layerOffset;
 
     editor.setSelectedArea(undefined, startX);
     startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
@@ -522,11 +554,14 @@ TrackEditor.prototype.selectFadeOut = function(e) {
         startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
         offset = this.leftOffset,
         startTime,
-        endTime;
+        endTime,
+        layerOffset;
 
-    if (e.target.tagName !== "CANVAS") {
+    layerOffset = this.findLayerOffset(e);
+    if (layerOffset < 0) {
         return;
     }
+    startX = startX + layerOffset;
 
     editor.setSelectedArea(startX, undefined);
     startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
@@ -778,12 +813,18 @@ TrackEditor.prototype.updateEditor = function(cursorPos, start, end, highlighted
 
 TrackEditor.prototype.getTrackDetails = function() {
     var d,
-        cues = this.cues;
+        cues = this.cues,
+        fades = [],
+        id;
+
+    for (id in this.fades) {
+        fades.push(this.fades[id]);
+    }
 
     d = {
         start: this.startTime,
         end: this.endTime,
-        fades: this.fades,
+        fades: fades,
         src: this.src,
         cuein: this.samplesToSeconds(cues.cuein),
         cueout: this.samplesToSeconds(cues.cueout)