CC-5768 : jPlayer, make now playing and playlist preview buttons function.

now playing and preview buttons function.

need to filter playlist with lock icons for unplayable media.

airtime_mvc/application/Bootstrap.php

@@ -133,8 +133,7 @@ class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
         $view->headScript()->appendFile($baseUrl.'js/tipsy/jquery.tipsy.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
 
         $view->headScript()->appendFile($baseUrl.'js/airtime/common/common.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
-        $view->headScript()->appendFile($baseUrl.'js/airtime/common/audioplaytest.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
+        
-
         //scripts for the jPlayer preview bar.
         $view->headScript()->appendFile($baseUrl.'js/jplayer/jplayer.playlist.min.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
         $view->headScript()->appendFile($baseUrl.'js/airtime/audiopreview/jPlayerWindow.js?'.$CC_CONFIG['airtime_version'],'text/javascript');

airtime_mvc/application/models/ShowBuilder.php

@@ -290,7 +290,6 @@ class Application_Model_ShowBuilder
     	$rows = array();
     	$row = $this->defaultRowArray;
     	
-    	$position = 0;
     	$instance = $showInstance->getDbId();
     	$showStartDT = $showInstance->getDbStarts(null);
     	$showEndDT = $showInstance->getDbEnds(null);
@@ -326,6 +325,7 @@ class Application_Model_ShowBuilder
     			$row["ends"] = $schedEndDT->format("H:i:s");
     		
     			$mediaItem = $scheduledItem->getMediaItem();
+    			$row["mediaId"] = $mediaItem->getId();
     			$row["title"] = htmlspecialchars($mediaItem->getName());
     			$row["creator"] = htmlspecialchars($mediaItem->getCreator());
     			$row["album"] = htmlspecialchars($mediaItem->getSource());
@@ -341,8 +341,6 @@ class Application_Model_ShowBuilder
     			$row["fadein"] = $scheduledItem->getDbFadeIn();
     			$row["fadeout"] = $scheduledItem->getDbFadeOut();
     			
-    			$row["pos"] = $position++;
-    			
     			self::itemRowCheck($showInstance, $row);
     		
     			$this->contentDT = $schedEndDT;

airtime_mvc/application/models/presentation/JPlayerItemAudioFile.php

@@ -13,8 +13,8 @@ class Presentation_JPlayerItemAudioFile extends Presentation_JPlayerItem
 		$item =  array(
 			"title" => $this->media->getName(),
 			"artist" => $this->media->getCreator(),
-			$mime => $this->media->getURI()
+			$mime => $this->media->getURI(),
-		    //"mp3" => "http://sourcefabric.airtime.pro/airtime_web_241/public/api/get-media/file/6864.mp3"
+			"mime" => $this->media->getMime()
 		);
 
 		return array($item);

airtime_mvc/application/models/presentation/JPlayerItemWebstream.php

@@ -13,10 +13,8 @@ class Presentation_JPlayerItemWebstream extends Presentation_JPlayerItem
 	    $item =  array(
             "title" => $this->media->getName(),
             "artist" => $this->media->getCreator(),
-            $mime => $this->media->getURI()
+            $mime => $this->media->getURI(),
-            //"artist" => "Sourcefabric",
+	    	"mime" => $this->media->getMime()
-            //$mime => "http://sourcefabric.out.airtime.pro:8000/sourcefabric_b"
-	    	//$mime => "http://206.190.135.28:8048/"
 	    );
 
 	    return array($item);

airtime_mvc/public/css/jplayer.airtime.audio.preview.css

@@ -423,7 +423,6 @@ div.jp-playlist {
 	width:100%;
 	height: 75px;
 	background-color: rgba(39, 39, 39, 0.9);
-	text-align: center;
 	overflow: hidden;
 	height: 0px;
 	position: relative;

airtime_mvc/public/js/airtime/audiopreview/jPlayerWindow.js

@@ -6,16 +6,26 @@ var AIRTIME = (function(AIRTIME) {
     var mod = AIRTIME.playerPreview,
     	playlistJPlayer;
     
-    function changePlaylist(data) {
+    function addToPlaylist(data) {
+    	var playNow = false;
     	
-    	playlistJPlayer.setPlaylist(data.playlist);
+    	if (playlistJPlayer.playlist.length === 0) {
-    	playlistJPlayer.play(0);
+    		playNow = true;
+    	}
+    	
+    	data.playlist.forEach(function(mediaObject, index, mediaArray) {
+
+    		if (mod.isAudioSupported(mediaObject.mime)) {
+    			playlistJPlayer.add(mediaObject, playNow);
+        		playNow = false;
+    		}
+    	});
     }
     
     function fetchMedia(mediaId) {
     	var url = baseUrl+"audiopreview/media-preview";
     	
-    	$.get(url, {format: "json", id: mediaId}, changePlaylist);
+    	$.get(url, {format: "json", id: mediaId}, addToPlaylist);
     }
     
     mod.previewMedia = function(mediaId) {
@@ -23,6 +33,28 @@ var AIRTIME = (function(AIRTIME) {
     	fetchMedia(mediaId);
     };
     
+    mod.isAudioSupported = function(mime){
+        var audio = new Audio();
+
+        var bMime = null;
+        if (mime.indexOf("ogg") != -1 || mime.indexOf("vorbis") != -1) {
+           bMime = 'audio/ogg; codecs="vorbis"'; 
+        } else {
+            bMime = mime;
+        }
+
+        var x = audio.canPlayType(bMime);
+        
+        //return a true of the browser can play this file natively, or if the
+        //file is an mp3 and flash is installed (jPlayer will fall back to flash to play mp3s).
+        //Note that checking the navigator.mimeTypes value does not work for IE7, but the alternative
+        //is adding a javascript library to do the work for you, which seems like overkill....
+        return (!!audio.canPlayType && audio.canPlayType(bMime) != "") || 
+            (mime.indexOf("mp3") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) ||
+            (mime.indexOf("mp4") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) ||
+            (mime.indexOf("mpeg") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined);
+    };
+    
     mod.initPlayer = function() {
     	
     	$.jPlayer.timeFormat.showHour = true;
@@ -72,7 +104,6 @@ var AIRTIME = (function(AIRTIME) {
             }
         });
     	
-
     	$( "#open_playlist" ).click(function() {
     	    $(".jp-playlist").toggleClass( "open" );
     	    $( this ).toggleClass( "selected" );

airtime_mvc/public/js/airtime/common/audioplaytest.js

@@ -1,20 +0,0 @@
-
-function isAudioSupported(mime){
-    var audio = new Audio();
-
-    var bMime = null;
-    if (mime.indexOf("ogg") != -1 || mime.indexOf("vorbis") != -1) {
-       bMime = 'audio/ogg; codecs="vorbis"'; 
-    } else {
-        bMime = mime;
-    }
-
-    //return a true of the browser can play this file natively, or if the
-    //file is an mp3 and flash is installed (jPlayer will fall back to flash to play mp3s).
-    //Note that checking the navigator.mimeTypes value does not work for IE7, but the alternative
-    //is adding a javascript library to do the work for you, which seems like overkill....
-    return (!!audio.canPlayType && audio.canPlayType(bMime) != "") || 
-        (mime.indexOf("mp3") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) ||
-        (mime.indexOf("mp4") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) ||
-        (mime.indexOf("mpeg") != -1 && navigator.mimeTypes ["application/x-shockwave-flash"] != undefined);
-}        

airtime_mvc/public/js/airtime/playlist/playlist.js

@@ -748,6 +748,13 @@ var AIRTIME = (function(AIRTIME){
     		});
     	});
 		
+		$playlist.on("click", ".big_play", function(e) {
+			var $li = $(this).parents("li");
+				mediaId = $li.data("mediaId");
+				
+			AIRTIME.playerPreview.previewMedia(mediaId);
+		});
+		
 		$playlist.on("click", ".ui-icon-closethick", function(e) {
 			var $li = $(this).parents("li");
 				$li.remove();

airtime_mvc/public/js/airtime/showbuilder/builder.js

@@ -69,7 +69,7 @@ var AIRTIME = (function(AIRTIME){
                 .find(".fc-event-inner")
                 .append('<span id="'+instance_id+'" title="'+$.i18n._("Show is partially filled")+'" class="small-icon show-partial-filled"></span>');
         }
-    }
+    };
     
     mod.getTimestamp = function() {
         
@@ -605,10 +605,11 @@ var AIRTIME = (function(AIRTIME){
                         $nRow.addClass("lib-audio");
                         if (!isAudioSupported(aData.mime)) {
                             $image.html('<span class="ui-icon ui-icon-locked"></span>');
-                        } else {
+                        } 
+                        else {
                             $image.html('<img title="'+$.i18n._("Track preview")+'" src="'+baseUrl+'css/images/icon_audioclip.png"></img>')
                             .click(function() {
-                                open_show_preview(aData.instance, aData.pos);
+                            	AIRTIME.playerPreview.previewMedia(aData.mediaId);
                                 return false;
                             });
                         }