Commit 84328e0a authored by Simon Daron's avatar Simon Daron
Browse files

playlist add habilities to play next/previous stop all ...

parent f2ce0968
......@@ -39,8 +39,7 @@ button:hover {
button, .button{
margin:0 0 0 0;
padding: 0 0 0 0;
display:inline-block;
cursor:pointer;
cursor:pointer ;
background:none;
}
img {max-width:100%;}
......@@ -231,8 +230,13 @@ ul.distributed.by7 li{
a.active, button.active{
font-weight:bold;
text-decoration:none;
}
nav .active{
border-bottom:2px solid black;
}
.active *{
font-weight:inherit;
}
.todo:hover, .todo *:hover{
text-decoration: line-through;
......
......@@ -273,6 +273,34 @@ body{
}
#player .playlist .item img{ float:left;}
#Playlist .playlistControls{
font-size:150%;
text-align:center;
}
#Playlist .playing{
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
}
#Playlist .playlistControls button{
margin:0 0.5em 0 0.5em;
}
#Playlist .soundControls{
font-size:8px;
clear:right;
float:right;
}
#Playlist .active .title{
font-weight:bold;
}
#Playlist ol li .title{
max-width:70%;
display:inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#Listen.small-player ul.metas { display: none; }
#Listen.small-player div.content { padding: 5px 5%; }
......
(function($) {
var self;
(function($) {
var thePlaylist;
$.widget( "panik.playlist", {
/*
sound = {
......@@ -14,20 +14,23 @@
*/
options: {
playlist: [],
html5audioOptions:{class:"hidden", controls:false,preload:true},
classes: "small",
html5audioOptions:{controls:true,preload:true},
classes: "",
itemClasses: "",
playlistContainer: $('<ol>'),
},
_create: function() {
// Initialization logic here
self = this;
thePlaylist = this;
this.debugContainer = $('<pre>').hide();
this.controlContainer = $('<div>');
this.playlistContainer = this.options.playlistContainer;
this.element.addClass(this.options.classes);
this.element.append(this.controlContainer);
this.element.append(this.playlistContainer);
this.element.append(this.debugContainer);
this.playlist = this.options.playlist;
this.buildPlaylistControls();
this.loadPlaylist();
this._update();
},
......@@ -40,7 +43,7 @@
this.playlist = [];
this.playlistContainer.find('audio').each(function(){
self.playlist.push(self.jsonifyAudio($(this)));
thePlaylist.playlist.push(thePlaylist.jsonifyAudio($(this)));
});
this.savePlaylist();
this.debugContainer.text(
......@@ -54,7 +57,7 @@
loadPlaylist: function(){
this.playlist = localStorage['playlist']?JSON.parse(localStorage['playlist']):this.playlist;
$.each(this.playlist,function(k,v){
self.playlistContainer.append(self._htmlifyJsonSound(v));
thePlaylist.playlistContainer.append(thePlaylist._htmlifyJsonSound(v));
});
return this.playlist;
},
......@@ -72,31 +75,58 @@
},
// Transform JSON sound object to HTML container for playlist.
_htmlifyJsonSound: function(sound) {
var container = $('<div>',{class:"ellipsis"});
var audio = $('<audio>',this.options.html5audioOptions);
var container = $('<li>');
var audio = $('<audio>',this.options.html5audioOptions).hide();
$.each(sound.source,function(k,v){
var source = $('<source>',{src:v,type:k});
audio.append(source);
});
audio.attr('title',sound.title);
audio.attr('data-origin',sound.id);
var title = $('<button>',{html:sound.title,click:function(){
if (audio[0].paused == false) {
audio[0].pause();
$(this).removeClass('active');
} else {
self.playlistContainer.find('.active').removeClass('active');
$(this).addClass('active');
self.pauseSounds();
audio[0].play();
}
return false;
audio.attr('title',sound.title)
.attr('data-origin',sound.id)
.on('play',function(){
$(this).addClass('playing');
container.addClass('active');
playpause.addClass('icon-pause').removeClass('icon-play');
thePlaylist.playpause.addClass('icon-pause').removeClass('icon-play');
thePlaylist.playlistContainer.find('audio:not(.playing)').trigger('stop');
}).on('pause',function(){
$(this).removeClass('playing');
playpause.addClass('icon-play').removeClass('icon-pause');
thePlaylist.playpause.addClass('icon-play').removeClass('icon-pause');
}).on('stop',function(){
$(this).trigger('pause');
$(this)[0].currentTime = 0;
container.removeClass('active');
}).on("ended", function(){
thePlaylist.playNext();
}).on('beforePlay',function(){
thePlaylist.stopSounds();
return this;
});
var controls = $('<span>',{class:'soundControls controls'});
var html5 = $('<button>',{class:'icon-html5',click:function(){
audio.toggle();
}});
var remover = $('<button>',{class:'icon-remove',click:function(){
var remove = $('<button>',{class:'icon-remove',click:function(){
container.remove();
self._update();
thePlaylist._update();
}});
var stop = $('<button>',{class:'icon-stop',click:function(){
audio.trigger('stop');
}});
var playpause = $('<button>',{class:'icon-play',click:function(){
if (audio[0].paused == false) { audio.trigger('pause');
} else {
audio.trigger('beforePlay').trigger('play');
}
}});
controls.append(playpause).append(stop).append(remove).append(html5);
var title = $('<span>',{class:"button title",html:sound.title,click:function(){
playpause.trigger('click');
return false;
}});
container.append(remover).append(title).append(audio);
container.append(controls).append(title).append(audio);
return container;
},
// Create a public method.
......@@ -105,49 +135,62 @@
this.playlistContainer.append(htmlAudio);
this._update();
},
registerSound: function(sound) {
this.playlist.push(sound);
this._update();
// Build controls
buildPlaylistControls: function() {
this.controls = $('<div>',{class:'playlistControls controls'});
this.playpause = $('<button>',{class:"icon-play",click:function(){
thePlaylist.playPauseList();
}});
this.stop = $('<button>',{class:"icon-stop",click:function(){
thePlaylist.stopSounds();
}});
this.next = $('<button>',{class:"icon-step-forward",click:function(){
thePlaylist.playNext();
}});
this.previous = $('<button>',{class:"icon-step-backward",click:function(){
thePlaylist.playPrevious();
}});
this.controls.append(this.previous).append(this.stop).append(this.playpause).append(this.next);
this.controlContainer.append(this.controls);
return true;
},
removeSound: function(k) {
this.playlist.splice(k, 1);
this._update();
// Play next sound
beforePlay: function() {
this.stopSounds();
},
pauseSounds: function() {
this.playlistContainer.find('audio').each(function(){$(this)[0].pause();});
// 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');
}else{
this.playlistContainer.first('li').trigger('beforePlay').trigger('play');
}
}else{
this.playlistContainer.find('.active').find('audio').trigger('pause');
}
return true;
},
_buildhtmlSound: function(sound,k) {
var container = $('<div>');
var audio = $('<audio>',this.options.html5audioOptions);
$.each(sound.source,function(k,v){
var source = $('<source>',{src:v,type:k});
audio.append(source);
});
var title = $('<button>',{html:sound.title,click:function(){
if (audio[0].paused == false) {
audio[0].pause();
$(this).removeClass('active');
} else {
self.playlistContainer.find('.active').removeClass('active');
$(this).addClass('active');
self.pauseSounds();
audio[0].play();
}
}});
var remover = $('<button>',{class:'icon-remove',click:function(){
self.removeSound(k);
}});
return container.append(remover).append(title).append(audio);
// Play next sound
playPrevious: function() {
this.playlistContainer.find('.active').prev().find('audio').trigger('beforePlay').trigger('play');
return true;
},
_buildhtmlPlaylist: function( argument ) {
var self = this;
self.playlistContainer.empty();
$.each(this.playlist,function(k,v){
var soundHtml = self._buildhtmlSound(v,k);
var listItem = $('<li>',{html:soundHtml});
self.playlistContainer.append(listItem);
});
// Play next sound
playNext: function() {
this.playlistContainer.find('.active').next().find('audio').trigger('beforePlay').trigger('play');
return true;
},
// Pause all sounds.
pauseSounds: function(selector) {
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;
},
});
})(jQuery);
......
$(function() {
var $main = $("#Changing");
var $log = $("#userLog");
var $localList = $('#localList').playlist();
var $localList = $('#localList').playlist({playlistContainer: $('<ol>',{class:"custom"}).sortable()});
doLog = function(aTextToLog, type){
var aLog = $('<div>',{class:"log",html:'<div class='+type+'>'+aTextToLog+'</div>'});
aLog.hide().prependTo($log).show('fast').delay(10000).hide('fast', function() {
......
Supports Markdown
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