Debug playActive and small screen player

diff --git a/panikweb_templates/static/css/specifics.css b/panikweb_templates/static/css/specifics.css
index 5f5fdf5d543756c2137416ad43132a5e1ade975a..f29e2fc843d405763dab8605d05fc499449ed8d5 100644 (file)
--- a/panikweb_templates/static/css/specifics.css
+++ b/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%;
+       }
+}
 
 
 

diff --git a/panikweb_templates/static/js/audioPlayer.js b/panikweb_templates/static/js/audioPlayer.js
index 751801bd5edec695ecefdcc067981dcd85631eaf..d27f35fc2b52ebae3dbfd99b1a0e2bd6b7e5cbe8 100644 (file)
--- a/panikweb_templates/static/js/audioPlayer.js
+++ b/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);

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index 4974fecc268df585f5600de052b792f455865e93..1f9ff947cf22bcd8efe534cf1f81c63d5aff9d7a 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/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();

diff --git a/panikweb_templates/templates/includes/player.html b/panikweb_templates/templates/includes/player.html
index b1b7f7cb138043515488937704c99754af63d252..d83c9b74dfc54a6be56e1f94317e00cc28d19d53 100644 (file)
--- a/panikweb_templates/templates/includes/player.html
+++ b/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>