Player add links to go back to the sound page

panikweb_templates/static/css/general.css

@@ -34,7 +34,7 @@ a.block:hover,nav a:hover{
     text-decoration: none;
 }
 button:hover {
-	opacity:0.8;
+	opacity:0.5;
 }
 button, .button{
 	margin:0 0 0 0;

panikweb_templates/static/css/specifics.css

@@ -380,7 +380,7 @@ background-color:#ff6633; border-color:#fff;}
    -o-animation: loading 1s infinite linear;
    animation: loading 1s infinite linear;
 }
-#Playlist .playlistControls button{
+#Playlist .playlistControls button,#Playlist .playlistControls .button{
 	margin:0 0.1em 0 0.1em;
 }
 #Playlist li{
@@ -393,6 +393,7 @@ background-color:#ff6633; border-color:#fff;}
 	padding:0 0 0 1.5em;
 }
 #player-container #Playlist ol{
+	margin-top:0.5em;
 	height:1.3em;
 	overflow:hidden;
 }

panikweb_templates/static/js/audioPlayer.js

@@ -76,6 +76,7 @@
 				source :{},
 				title: audio.attr('title'),
 				id:audio.attr('id'),
+				url:audio.attr('data-url'),
 				focus:audio.attr('data-player-focus')
 			};
 			audio.children('source').each(function(){
@@ -96,7 +97,9 @@
 		// Transform JSON sound object to HTML container for playlist.
 		_htmlifyJsonSound: function(sound) {
 			var container = $('<li>').attr('data-origin',sound.id);
-			var audio = $('<audio>',this.options.html5audioOptions).attr('title',sound.title).hide();
+			var audio = $('<audio>',this.options.html5audioOptions)
+				.attr('title',sound.title).hide()
+				.attr('data-url',sound.url);
 			$.each(sound.source,function(k,v){
 				var source = $('<source>',{src:v,type:k});
 				audio.append(source);
@@ -123,17 +126,18 @@
 				return this;
 			});
 			var controls = $('<span>',{class:'soundControls controls'});
-			var html5 = $('<button>',{class:'icon-html5',click:function(){
+			var link = $('<a>',{href:sound.url,class:'button icon-external-link'});
+			var html5 = $('<button>',{title:"Display HTML5 audio",class:'icon-html5',click:function(){
 				audio.toggle();
 			}}).hide();
-			var remove = $('<button>',{class:'icon-remove',click:function(){
+			var remove = $('<button>',{title:"Remove from list",class:'icon-remove',click:function(){
 				container.remove();
 				thePlaylist._update();
 			}});
-			var stop = $('<button>',{class:'icon-stop',click:function(){
+			var stop = $('<button>',{title:"Stop",class:'icon-stop',click:function(){
 				audio.trigger('stop');
-			}});
-			var playpause = $('<button>',{class:'icon-play',click:function(){
+			}}).hide();
+			var playpause = $('<button>',{title:"Play/Pause",class:'icon-play',click:function(){
 				
 				  if (audio[0].paused == false) { audio.trigger('pause');
 				  } else {
@@ -141,10 +145,7 @@
 				}
 			}});
 			controls.append(playpause).append(stop).append(remove).append(html5);
-			var title = $('<span>',{class:"button title",html:sound.title,click:function(){
-				playpause.trigger('click');
-				return false;
-			}});
+			var title = $('<a>',{title:"More information",href:sound.url,class:"button title",html:sound.title});
 			container.append(controls).append(title).append(audio);
 			if(sound.focus){thePlaylist.setFocus(container);}
 			return container;

panikweb_templates/static/js/specifics.js

@@ -8,60 +8,9 @@ $(function() {
 	}
 	var $main = $("#Changing");
 	var $log = $("#userLog");
-	var $localList = $('#localList').playlist({
-		controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
-		playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
-		onLoad:function(self){
-			$('#playlistLabel').on('click',function(){ 
-				self.playlistContainer.toggleClass('deploy');
-			});
-			if(self.isActive){self.playlistContainer.scrollTo(self.isActive, 800 );}
-		},
-		onPlay:function(self){
-			$('#DirectStreamPanik')[0].pause();
-			self.playlistContainer.scrollTo(self.isActive, 800 );
-			/*self.isPlaying[0].scrollIntoView();
-			var posScroll = self.playlistContainer.scrollTop() + self.isPlaying.position().top - self.playlistContainer.height()/2 + self.isPlaying.height()/2;
-			self.playlistContainer.animate({  
-				scrollTop:posScroll
-			    }, 'slow'); */
-		},
-		onAdd:function(self){
-			//self.isLastAdd[0].scrollIntoView();
-			self.playlistContainer.scrollTo(self.isLastAdd, 800).delay(1000).scrollTo(self.isActive, 800 ).clearQueue();
-		},
-		onUpdate:function(self){
-			//doLog(JSON.stringify(self.playlist, null, '\t'));	
-			if(self.playlist.length >= 1){
-				self.element.show();
-				$('#Player').addClass('withPlaylist');
-			}else{
-				self.element.hide();
-				$('#Player').removeClass('withPlaylist');
-			}
-		}
-	});
 
 	/****************************************************/
-	/**** AUDIOPLAYER ****/
-	/****************************************************/
-	if($('#player-container').offset()){
-		var topPosition = 0;
-		topPosition = $('#player-container').offset().top;
-		$(window).bind('scroll load',function (event) {
-			//$('#player-container').removeClass('fixed');
-			var y = $(this).scrollTop() - $('#Player').height();
-			if (topPosition!== 0 && y >= topPosition) {
-				$('#Player').css({'min-height':$('#Player').height()});
-				$('#player-container').addClass('fixed').removeClass('normal');
-			} else {
-				$('#Player').css({'min-height':'auto'});	
-				$('#player-container').removeClass('fixed').addClass('normal');
-			}
-		});
-	}
-	/****************************************************/
-	/**** AJAX REQUESTS ****/
+	/**** AJAX UTILITIES FOR REQUESTS ****/
 	/****************************************************/
 	String.prototype.decodeHTML = function() {
 		return $("<div>", {html: "" + this}).html();
@@ -114,29 +63,90 @@ $(function() {
 		}
 		loadPage_request = $.get(href, null, afterLoad);
 	};
-	init = function() {
-		$("#All a, #All area").removeClass('loading');
-		$("#All a, #All area").unbind('click').on('click',function() {
-			$(this).addClass('loading');
-			var href = $(this).attr("href");
-			/* this checks the link points to a local document, be
-			 * it because it's just a path, or because the server
-			 * part points to the same domain */
-			if (!href) {
-				doLog('No href attributes, unable to load content','error');
-				$("#All a, #All area").removeClass('loading');
-				return false;
-			}else if (!$(this).attr('target') && (
-					href.indexOf(document.domain) > -1 ||href.indexOf(':') === -1 || href.indexOf(':') > 5
-				)) {
-				loadPage(href);
-				return false;
-			}else{
-				$(this).attr('target','_blanck');
-				$("#All a, #All area").removeClass('loading');
-				return true;
+        $.fn.ajaxifyClick = function(params) {
+		this.each(function() {
+			$(this).unbind('click');
+			$(this).bind('click',function(){
+				$(this).addClass('loading');
+				var href = $(this).attr("href");
+				/* this checks the link points to a local document, be
+				 * it because it's just a path, or because the server
+				 * part points to the same domain */
+				if (!href) {
+					doLog('No href attributes, unable to load content','error');
+					$("#All a, #All area").removeClass('loading');
+					return false;
+				}else if (!$(this).attr('target') && (
+						href.indexOf(document.domain) > -1 ||href.indexOf(':') === -1 || href.indexOf(':') > 5
+					)) {
+					loadPage(href);
+					return false;
+				}else{
+					$(this).attr('target','_blanck');
+					$("#All a, #All area").removeClass('loading');
+					return true;
+				}
+			});
+		});
+	};
+	/****************************************************/
+	/**** AUDIOPLAYER ****/
+	/****************************************************/
+	if($('#player-container').offset()){
+		var topPosition = 0;
+		topPosition = $('#player-container').offset().top;
+		$(window).bind('scroll load',function (event) {
+			//$('#player-container').removeClass('fixed');
+			var y = $(this).scrollTop() - $('#Player').height();
+			if (topPosition!== 0 && y >= topPosition) {
+				$('#Player').css({'min-height':$('#Player').height()});
+				$('#player-container').addClass('fixed').removeClass('normal');
+			} else {
+				$('#Player').css({'min-height':'auto'});	
+				$('#player-container').removeClass('fixed').addClass('normal');
 			}
 		});
+	}
+
+	var $localList = $('#localList').playlist({
+		controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
+		playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
+		onLoad:function(self){
+			$('#playlistLabel').on('click',function(){ 
+				self.playlistContainer.toggleClass('deploy');
+			});
+			if(self.isActive){self.playlistContainer.scrollTo(self.isActive, 800 );}
+		},
+		onPlay:function(self){
+			$('#DirectStreamPanik')[0].pause();
+			self.playlistContainer.scrollTo(self.isActive, 800 );
+			/*self.isPlaying[0].scrollIntoView();
+			var posScroll = self.playlistContainer.scrollTop() + self.isPlaying.position().top - self.playlistContainer.height()/2 + self.isPlaying.height()/2;
+			self.playlistContainer.animate({  
+				scrollTop:posScroll
+			    }, 'slow'); */
+		},
+		onAdd:function(self){
+			//self.isLastAdd[0].scrollIntoView();
+			self.isLastAdd.find('a').ajaxifyClick();
+			self.playlistContainer.scrollTo(self.isLastAdd, 800).delay(1000).scrollTo(self.isActive, 800 ).clearQueue();
+
+		},
+		onUpdate:function(self){
+			//doLog(JSON.stringify(self.playlist, null, '\t'));	
+			if(self.playlist.length >= 1){
+				self.element.show();
+				$('#Player').addClass('withPlaylist');
+			}else{
+				self.element.hide();
+				$('#Player').removeClass('withPlaylist');
+			}
+		}
+	});
+
+	init = function() {
+		$("#All a, #All area").removeClass('loading');
+		$("#All a, #All area").ajaxifyClick();
 		$("#search-form").unbind('submit').on('submit', function(event) {
 			event.preventDefault();
 			$(this).addClass('loading');

panikweb_templates/templates/includes/audio.html

@@ -21,6 +21,7 @@
 	<audio 
 		data-player='true'
 		class='hidden'
+		data-url="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}"
 		title="{{episode.title}}"
 		id="Audio-{{ sound.file.url|slugify }}" 
 		preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"

panikweb_templates/templates/includes/player.html

@@ -34,7 +34,7 @@
 		</div>
 		<div id="Playlist" class="sub cf">
 			<div id="localList" class="padded">
-				<div id="playlistLabel" class="label button">Playlist&nbsp;<span class="icon-list"></span></div>
+				<div id="playlistLabel" class="label button">Playlist&nbsp;<span class="icon-list" title="Show/Hide playlist"></span></div>
 			</div>
 		</div>
 		<script type="text/javascript">
@@ -47,8 +47,8 @@
 						WhatsOnAir.fadeOut();
 						if(onair.data.episode || onair.data.emission){
 							var result = '';
-							result = result + ($.type(onair.data.emission) == 'object'?'<span>'+onair.data.emission.title+'</span>&nbsp;|&nbsp;':'');
-							result = result +  ($.type(onair.data.episode) == 'object'?'<span>'+onair.data.episode.title+'</span>':'');
+							result = result + ($.type(onair.data.emission) == 'object'?'<span>'+onair.data.emission.title+'</span>':'');
+							result = result +  ($.type(onair.data.episode) == 'object'?'&nbsp;|&nbsp;<span>'+onair.data.episode.title+'</span>':'');
 							//var container = $('<a>',{class:"intercepted",href:onair.data.emission.url,html:result});
 							WhatsOnAir.html(result);
 						} else if (onair.data.nonstop) {