Commit 4a0399c6 authored by Simon Daron's avatar Simon Daron

Debug playActive and small screen player

parent b9241031
......@@ -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%;
}
}
......
......@@ -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);
......
......@@ -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();
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment