CC-2301 : Waveform Editor

Cue editor can save values to the playlist.

airtime_mvc/application/layouts/scripts/layout.phtml

@@ -37,20 +37,25 @@
 <script id="tmpl-pl-cues" type="text/template">
 <div class="waveform-cues">
   <div class="playlist-tracks"></div>
-  <form class="form-inline">
+  <div class="playlist-controls">
     <span class="btn_play ui-state-default">Play</span>
     <span class="btn_stop ui-state-default">Stop</span>
-    <select class="time_format">
+  </div>
-      <option value="seconds">seconds</option>
+  <div>
-      <option value="thousandths">thousandths</option>
+    <input type="text" class="audio_start">
-      <option value="hh:mm:ss">hh:mm:ss</option>
+	<input type="button" class="set-cue-in" value="Set Cue In">
-      <option value="hh:mm:ss.uu">hh:mm:ss + hundredths</option>
+    <input type="text" class="audio_end">
-      <option value="hh:mm:ss.uuu">hh:mm:ss + milliseconds</option>
+    <input type="button" class="set-cue-out" value="Set Cue Out">
-    </select>
+    <input type="text" class="audio_pos">
-    <input type="text" class="audio_start input-small">
+  </div>
-    <input type="text" class="audio_end input-small">
+  <div>
-    <input type="text" class="audio_pos input-small">
+	<label for="editor-cue-in">Cue In</label>
-  </form>
+    <input type="text" id="editor-cue-in" class="editor-cue-in">
+	<span style="display:none" class="cue-in-error"></span>
+    <label for="editor-cue-out">Cue Out</label>
+    <input type="text" id="editor-cue-out" class="editor-cue-out">
+    <span style="display:none" class="cue-out-error"></span>
+  </div>
 </div>
 </script>
 

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

@@ -137,6 +137,54 @@ var AIRTIME = (function(AIRTIME){
                 highlightActive(li.find('.spl_cue'));
             });
         }
+    
+    /* used from waveform pop-up */
+    function changeCues($el, id, cueIn, cueOut) {
+        
+        var url = baseUrl+"Playlist/set-cue",
+            lastMod = getModified(),
+            type = $('#obj_type').val(),
+            li;
+        
+        if (!isTimeValid(cueIn)){
+            $el.find('.cue-in-error').val($.i18n._("please put in a time '00:00:00 (.0)'")).show();
+            return;
+        }
+        else {
+        	$el.find('.cue-in-error').hide();
+        }
+        
+        if (!isTimeValid(cueOut)){
+        	$el.find('.cue-out-error').val($.i18n._("please put in a time '00:00:00 (.0)'")).show();
+            return;
+        }
+        else {
+        	$el.find('.cue-out-error').hide();
+        }
+        
+        $.post(url, 
+            {format: "json", cueIn: cueIn, cueOut: cueOut, id: id, modified: lastMod, type: type}, 
+            function(json){
+            	
+            	$el.dialog('close');
+
+                if (json.error !== undefined){
+                    playlistError(json);
+	            	return;
+                }
+                if (json.cue_error !== undefined) {
+                    showError(span, json.cue_error);
+                    return;
+                }
+
+                setPlaylistContent(json);
+
+                li = $('#side_playlist li[unqid='+id+']');
+                li.find(".cue-edit").toggle();
+                highlightActive(li);
+                highlightActive(li.find('.spl_cue'));
+            });
+    }
 
     function changeFadeIn(event) {
         event.preventDefault();
@@ -1093,7 +1141,8 @@ var AIRTIME = (function(AIRTIME){
         	        mono: true,
         	        waveHeight: 80,
         	        container: $html[0],
-        	        UITheme: "jQueryUI"
+        	        UITheme: "jQueryUI",
+        	        timeFormat: 'hh:mm:ss.u'
         	    });
         		
         		var playlistEditor = new PlaylistEditor();
@@ -1105,6 +1154,7 @@ var AIRTIME = (function(AIRTIME){
 	
 	mod.showCuesWaveform = function(e) {
 		var $el = $(e.target),
+			id = $el.parents("li").attr("unqid"),
 			$parent = $el.parent(),
 			uri = $parent.data("uri"),
 			$html = $($("#tmpl-pl-cues").html()),
@@ -1112,6 +1162,18 @@ var AIRTIME = (function(AIRTIME){
 				src: uri
 			}];
 		
+		$html.on("click", ".set-cue-in", function(e) {
+			var cueIn = $html.find('.audio_start').val();
+			
+			$html.find('.editor-cue-in').val(cueIn);
+		});
+		
+		$html.on("click", ".set-cue-out", function(e) {
+			var cueOut = $html.find('.audio_end').val();
+			
+			$html.find('.editor-cue-out').val(cueOut);
+		});
+		
 		$html.dialog({
             modal: true,
             title: "Cue Editor",
@@ -1120,8 +1182,15 @@ var AIRTIME = (function(AIRTIME){
             width: 900,
             height: 300,
             buttons: [
-                //{text: "Submit", click: function() {doSomething()}},
+                {text: "Save", click: function() {
-                {text: "Cancel", click: function() {$(this).dialog("close");}}
+                	var cueIn = $html.find('.editor-cue-in').val(),
+                		cueOut = $html.find('.editor-cue-out').val();
+                	
+                	changeCues($html, id, cueIn, cueOut);
+                }},
+                {text: "Cancel", click: function() {
+                	$(this).dialog("close");
+                }}
             ],
             open: function (event, ui) {
             	
@@ -1130,7 +1199,8 @@ var AIRTIME = (function(AIRTIME){
         	        mono: true,
         	        waveHeight: 80,
         	        container: $html[0],
-        	        UITheme: "jQueryUI"
+        	        UITheme: "jQueryUI",
+        	        timeFormat: 'hh:mm:ss.u'
         	    });
         		
         		var playlistEditor = new PlaylistEditor();

airtime_mvc/public/js/waveformplaylist/controls.js

@@ -85,6 +85,8 @@ AudioControls.prototype.validateCue = function(value) {
 
         "hh:mm:ss": /^[0-9]{2,}:[0-5][0-9]:[0-5][0-9]$/,
 
+        "hh:mm:ss.u": /^[0-9]{2,}:[0-5][0-9]:[0-5][0-9]\.\d{1}$/,
+
         "hh:mm:ss.uu": /^[0-9]{2,}:[0-5][0-9]:[0-5][0-9]\.\d{2}$/,
 
         "hh:mm:ss.uuu": /^[0-9]{2,}:[0-5][0-9]:[0-5][0-9]\.\d{3}$/
@@ -126,6 +128,10 @@ AudioControls.prototype.cueToSeconds = function(value) {
             return clockConverter(value);
         },
 
+        "hh:mm:ss.u": function(value) {
+            return clockConverter(value);
+        },
+
         "hh:mm:ss.uu": function(value) {
             return clockConverter(value);
         },
@@ -172,6 +178,10 @@ AudioControls.prototype.cueFormatters = function(format) {
             return clockFormat(seconds, 0);   
         },
 
+        "hh:mm:ss.u": function (seconds) {
+            return clockFormat(seconds, 1);   
+        },
+
         "hh:mm:ss.uu": function (seconds) {
             return clockFormat(seconds, 2);   
         },