Debug playActive and small screen player

panikweb_templates/static/css/specifics.css

@@ -288,9 +288,9 @@ body{
 	-webkit-box-shadow:  0px 5px 5px #000;
 	box-shadow: 0px 5px 10px #000;
 background-color:#ff6633; border-color:#fff;color:white !important;}
-#player-container *{border-color:#fff; color:white !important;background-color:transparent;}
+#player-container *{border-color:#fff; color:white;background-color:transparent;}
 #player-container .metas, #player-container img{border-color:#fff;}
-#player-container .padded{padding:1em;}
+#player-container .padded{padding:1%;}
 #player-container{
 	border-top:2px solid black;
 	border-bottom:2px solid black;
@@ -321,7 +321,7 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
 	clear:both;
 }
 #player-container.normal #player{
-	padding:2em;
+	padding:5%;
 }
 #player-container #audioPlayer{
 	max-width:50%;
@@ -356,10 +356,6 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
 #Playlist .playlistControls button{
 	margin:0 0.1em 0 0.1em;
 }
-#Playlist .soundControls{
-	clear:right;
-	float:right;
-}
 #Playlist li{
 	clear:right;
 }
@@ -367,14 +363,10 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
 #Playlist .active .title{
 	font-weight:bold;
 }
-#Playlist [data-player-focus]{
-	text-transform:uppercase;
-}
 
 #player-container #Playlist ol{
 }
 #player-container #Playlist ol{
-	margin-top:0.8em;
 	clear:right;
 	padding:0 0 0 2em;
 }
@@ -392,16 +384,32 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
 	padding:0;
 	margin:0;
 }
+#Playlist ol li .soundControls{
+	line-height:1.5em;
+	height:1.5em;
+	clear:right;
+	float:right;
+}
 #Playlist ol li .title{
-	max-width:70%;
-	display:inline-block;
+	margin-right:70px;
+	display:block;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
+#Playlist ol li.active{
+	text-transform:uppercase;
+}
+@media screen and (max-width: 400px) {
 
-#Listen.small-player ul.metas { display: none; }
-#Listen.small-player div.content { padding: 5px 5%; }
+	#player-container .label{
+		font-size:1em;
+		color:#333 !important;
+	}
+	#player-container.normal #player{
+		padding:3%;
+	}
+}
 
 
 

panikweb_templates/static/js/audioPlayer.js

@@ -96,14 +96,12 @@
 		// 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).hide();
+			var audio = $('<audio>',this.options.html5audioOptions).attr('title',sound.title).hide();
 			$.each(sound.source,function(k,v){
 				var source = $('<source>',{src:v,type:k});
 				audio.append(source);
 			});
-			audio.attr('title',sound.title)
-			
-			.on('play',function(){
+			audio.on('play',function(){
 				thePlaylist.setFocus(container);
 				container.addClass('playing');
 				playpause.addClass('icon-pause').removeClass('icon-play');
@@ -115,7 +113,7 @@
 				thePlaylist.controlButtons['playpause'].removeClass('icon-pause').addClass('icon-play');
 			}).on('stop',function(){
 				$(this).trigger('pause');
-				$(this)[0].currentTime = 0;
+				if($(this)[0].currentTime){$(this)[0].currentTime = 0;}
 			}).on("ended", function(){
 				thePlaylist.playNext();
 			}).on('beforePause',function(){
@@ -206,26 +204,34 @@
 			this.stopSounds();
 		},
 		// Play next sound
+		getActive: function() {
+			if(!this.isActive){
+				this.isActive = this.playlistContainer.children('li').first();				
+			}
+			return this.isActive;
+		},
+		// Play next sound
 		playPauseList: function() {
 			if(this.controlButtons['playpause'].hasClass('icon-play')){
-				if(this.isActive){
-					this.isActive.find('audio').trigger('beforePlay').trigger('play');				
-				}else{
-					this.playlistContainer.children('li').first().find('audio').trigger('beforePlay').trigger('play');				
-				}
+				this.getActive().find('audio').trigger('beforePlay').trigger('play');
 			}else{
-				this.isActive.find('audio').trigger('pause');	
+				this.getActive().find('audio').trigger('pause');	
 			}
 			return true;
 		},
 		// Play next sound
 		playPrevious: function() {
-			this.isActive.prev().find('audio').trigger('beforePlay').trigger('play');
+			this.getActive().prev().find('audio').trigger('beforePlay').trigger('play');
 			return true;
 		},
 		// Play next sound
 		playNext: function() {
-			this.isActive.next().find('audio').trigger('beforePlay').trigger('play');
+			this.getActive().next().find('audio').trigger('beforePlay').trigger('play');
+			return true;
+		},
+		// Play next sound
+		playFirst: function() {
+			this.playlistContainer.find('audio').first().trigger('beforePlay').trigger('play');
 			return true;
 		},
 		// Play next sound
@@ -234,15 +240,12 @@
 			return true;
 		},
 		// Pause all sounds.
-		pauseSounds: function(selector) {
+		pauseSounds: function() {
 			this.playlistContainer.find('audio').each(function(){$(this).trigger('pause');});	
 		},
 		// stop all sounds.
-		stopSounds: function(rewind) {
-			this.playlistContainer.find('audio').each(function(){
-				$(this).trigger('stop');
-			});	
-			return true;
+		stopSounds: function() {
+			this.playlistContainer.find('audio').each(function(){$(this).trigger('stop');});	
 		},
 	});
 })(jQuery);

panikweb_templates/static/js/specifics.js

@@ -12,10 +12,10 @@ $(function() {
 		controlContainer: $('<div>',{class:""}).sortable(),
 		playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
 		onLoad:function(self){
-			self.registerControl('showList',{class:"icon-list",click:	function(){ 
+			$('#localList').children('.label').on('click',function(){ 
 				self.playlistContainer.toggleClass('deploy');
-			}});
-			self.controlButtons['showList'].appendTo($('#localList .label'));
+			});
+			if(self.isActive){self.playlistContainer.scrollTo(self.isActive, 800 );}
 		},
 		onPlay:function(self){
 			$('#DirectStreamPanik')[0].pause();

panikweb_templates/templates/includes/player.html

@@ -28,7 +28,7 @@
 		</div>
 		<div id="Playlist" class="sub cf">
 			<div id="localList" class="padded">
-				<div class="label"><span class="icon-headphones" ></span>&nbsp;Playlist</div>
+				<div class="label button">Playlist</div>
 			
 			</div>
 		</div>