Commit 379bb8ea authored by Simon Daron's avatar Simon Daron

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

parent 760ad2b2
......@@ -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%;
......
......@@ -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.
......
......@@ -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');
......
......@@ -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>
......
......@@ -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>
......
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