give the player the hability to keep focus on sound when closing browser etc...

panikweb_templates/static/css/specifics.css

@@ -278,36 +278,31 @@ body{
 #player-container{background-color:#ff6633; border-color:#fff;color:white !important;}
 #player-container *{border-color:#fff; color:white !important;background-color:transparent;}
 #player-container .metas, #player-container img{border-color:#fff;}
-#player-container .metas{padding-left:0.5em;border-width:0 0 0 2px;border-style:solid;}
 #player-container .padded{padding:1em;}
 #player-container{
-	fon-size:90%;
 	border-top:2px solid black;
 	border-bottom:2px solid black;
 }
 #player #CurrentlyPlaying{
 	margin-top:0.5em;
-	font-size:0.8em;
 }
 #player-container.fixed{
 	z-index:500;
 	position:fixed;
 	width:100%;
 	top:2em;
+	font-size:90%;
 }
 #player-container.fixed .padded{
-	padding:0.2em;
-	font-size:90%;
+	padding:0.5em;
 }
 #Listen.withPlaylist #player-container #audioPlayer{
 	float:left;
-	width:45%;
-	padding-right:5%;
+	width:50%;
 	border-right:2px solid white;
 }
 #Listen.withPlaylist #player-container #Playlist{
-	float:right;
-	width:45%;
+	margin-left:51%;
 	text-align:left;
 }
 #PlayerHelp{
@@ -329,7 +324,8 @@ body{
 #Playlist{
 }
 
-#Playlist button{font-size:1em;
+#Playlist button{
+	font-size:1em;
 }
 #Playlist .label{
 	float:right;
@@ -359,20 +355,25 @@ body{
 #Playlist .active .title{
 	font-weight:bold;
 }
+#Playlist [data-player-focus]{
+	text-transform:uppercase;
+}
 
 #player-container #Playlist ol{
-	font-size:0.8em;
 }
 #player-container #Playlist ol{
-	margin-top:1em;
+	margin-top:0.8em;
+	clear:right;
 	padding:0 0 0 2em;
 }
 #player-container #Playlist ol{
-	height:2em;
+	height:1.5em;
 	overflow:hidden;
 }
 #player-container #Playlist ol li{
-	height:2em !important;
+	line-height:1.5em;
+	padding:0;
+	margin:0;
 }
 #Playlist ol li .title{
 	max-width:70%;

panikweb_templates/static/js/audioPlayer.js

@@ -50,10 +50,10 @@
 			this.playlistContainer.find('audio').each(function(){
 				thePlaylist.playlist.push(thePlaylist.jsonifyAudio($(this)));
 			});
-			this.savePlaylist();
 			this.debugContainer.text(
 		 		JSON.stringify(this.playlist, null, '\t')
 			);
+			this.savePlaylist();
 			this.options.onUpdate(this);
 			return this.playlist;
 		},
@@ -72,13 +72,24 @@
 			var sound = {
 				source :{},
 				title: audio.attr('title'),
-				id:audio.attr('id')
+				id:audio.attr('id'),
+				focus:audio.attr('data-player-focus')
 			};
 			audio.children('source').each(function(){
 				sound.source[$(this).attr('type')] = $(this).attr('src');
 			});
 			return sound;
 		},
+		// Play next sound
+		setFocus: function(element) {
+			this.isActive = element;
+			this.playlistContainer.find('li').each(function(){
+				$(this).removeClass('active');
+				$(this).find('audio').removeAttr('data-player-focus');
+			});
+			this.isActive.addClass('active').find('audio').attr('data-player-focus',true);
+			this._update();
+		},
 		// Transform JSON sound object to HTML container for playlist.
 		_htmlifyJsonSound: function(sound) {
 			var container = $('<li>');
@@ -90,9 +101,8 @@
 			audio.attr('title',sound.title)
 			.attr('data-origin',sound.id)
 			.on('play',function(){
-				thePlaylist.isActive = container;
+				thePlaylist.setFocus(container);
 				container.addClass('playing');
-				container.addClass('active');
 				playpause.addClass('icon-pause').removeClass('icon-play');
 				thePlaylist.playpause.removeClass('icon-play').addClass('icon-pause');
 				thePlaylist.afterPlay();
@@ -101,16 +111,13 @@
 				playpause.addClass('icon-play').removeClass('icon-pause');
 				thePlaylist.playpause.removeClass('icon-pause').addClass('icon-play');
 			}).on('stop',function(){
-				container.removeClass('active');
 				$(this).trigger('pause');
 				$(this)[0].currentTime = 0;
-				container.removeClass('active');
 			}).on("ended", function(){
 				thePlaylist.playNext();
 			}).on('beforePause',function(){
 				return this;
 			}).on('beforePlay',function(){
-				thePlaylist.playlistContainer.find('.active').removeClass('active');
 				thePlaylist.pauseSounds();
 				return this;
 			});
@@ -138,6 +145,7 @@
 				return false;
 			}});
 			container.append(controls).append(title).append(audio);
+			if(sound.focus){thePlaylist.setFocus(container);}
 			return container;
 		},
 		// Create a public method.
@@ -145,7 +153,7 @@
 			var htmlAudio = this._htmlifyJsonSound(this.jsonifyAudio(audio));
 			this.playlistContainer.append(htmlAudio);
 			this.isLastAdd = htmlAudio;
-			if(!this.isActive){this.isActive=this.isLastAdd;}
+			if(!this.isActive){this.setFocus(this.isLastAdd);}
 			this.options.onAdd(this);
 			if(success){success();}
 			this._update();
@@ -155,7 +163,12 @@
 			this.controls = $('<div>',{class:'playlistControls controls'});
 			this.toggleList = $('<button>',{class:"icon-list",click:function(){
 				thePlaylist.playlistContainer.toggle();
+			}}).hide();
+			this.clearList = $('<button>',{class:"icon-trash",click:function(){
+				thePlaylist.playlistContainer.empty();
+				thePlaylist._update();
 			}});
+ 
 			this.playpause = $('<button>',{class:"icon-play",click:function(){
 				thePlaylist.playPauseList();
 			}});
@@ -168,7 +181,7 @@
 			this.previous = $('<button>',{class:"icon-step-backward",click:function(){
 				thePlaylist.playPrevious();
 			}});
-			this.controls.append(this.toggleList).append(this.previous).append(this.stop).append(this.playpause).append(this.next);
+			this.controls.append(this.toggleList).append(this.clearList).append(this.previous).append(this.stop).append(this.playpause).append(this.next);
 			this.controlContainer.append(this.controls);
 			return true;
 		},
@@ -183,24 +196,24 @@
 		// Play next sound
 		playPauseList: function() {
 			if(this.playpause.hasClass('icon-play')){
-				if(this.playlistContainer.find('.active')[0]){
-					this.playlistContainer.find('.active').find('audio').trigger('beforePlay').trigger('play');				
+				if(this.isActive){
+					this.isActive.find('audio').trigger('beforePlay').trigger('play');				
 				}else{
 					this.playlistContainer.children('li').first().find('audio').trigger('beforePlay').trigger('play');				
 				}
 			}else{
-				this.playlistContainer.find('.active').find('audio').trigger('pause');	
+				this.isActive.find('audio').trigger('pause');	
 			}
 			return true;
 		},
 		// Play next sound
 		playPrevious: function() {
-			this.playlistContainer.find('.active').prev().find('audio').trigger('beforePlay').trigger('play');
+			this.isActive.prev().find('audio').trigger('beforePlay').trigger('play');
 			return true;
 		},
 		// Play next sound
 		playNext: function() {
-			this.playlistContainer.find('.active').next().find('audio').trigger('beforePlay').trigger('play');
+			this.isActive.next().find('audio').trigger('beforePlay').trigger('play');
 			return true;
 		},
 		// Pause all sounds.

panikweb_templates/static/js/specifics.js

@@ -22,9 +22,10 @@ $(function() {
 		},
 		onAdd:function(self){
 			//self.isLastAdd[0].scrollIntoView();
-			self.playlistContainer.scrollTo(self.isLastAdd, 800).delay(1000).scrollTo(self.isActive, 800 );
+			self.playlistContainer.scrollTo(self.isLastAdd, 800).delay(1000).scrollTo(self.isActive, 800 ).clearQueue();
 		},
-		onUpdate:function(self){	
+		onUpdate:function(self){
+			//doLog(JSON.stringify(self.playlist, null, '\t'));	
 			if(self.playlist.length >= 1){
 				self.element.show();
 				$('#Listen').addClass('withPlaylist');

panikweb_templates/templates/base.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>Radio Panik {% block title %}{% endblock %}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.png" type="image/png">
+    <link rel="icon" href="{{ STATIC_URL }}img/favicon.png" type="image/png">
     <link rel="apple-touch-icon" href="{{ STATIC_URL}}img/touch-icon.png">
     <link rel="apple-touch-icon-precomposed" href="{{ STATIC_URL}}img/touch-icon.png">
     <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>

panikweb_templates/templates/includes/player.html

@@ -3,7 +3,7 @@
 	<div id="player" class="wrapper cf">
 		<div id="audioPlayer" class="cf">
 			<div class="padded">
-				<ul class="metas custom right">
+				<ul class="metas custom inline right">
 					<li><a class="button resymbol icon-download inBlock" title="Get the stream on your player!" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a></li>
 					<!--<li><button class="icon-eye-open " title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button></li>-->
 					<li><button title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>