Commit 18c807d8 authored by Simon Daron's avatar Simon Daron

Complete rewrite of audioPlayer

parent 97051cfe
......@@ -14,6 +14,7 @@ audio {
width: 90%;
margin:0.5em auto 1em auto;
}
a {
color:inherit;
text-decoration: none;
......
(function($) {
/*
sound = {
ogg:"oggURL",
mp3:"mp3URL",
emission: "episode.slug",
episode: "episode.slug",
id:""
}
*/
var self;
$.widget( "panik.playlist", {
/*
sound = {
source :{
ogg:"oggURL",
mp3:"mp3URL"
},
emission: "episode.slug",
episode: "episode.slug",
id:""
}
*/
options: {
playlist: [],
html5audioOptions:{class:"hidden", controls:false,preload:true},
classes: "small",
playlistContainer: $('<ol>'),
debugContainer: $('<div>').hide(),
},
_create: function() {
// Initialization logic here
var self = this;
this.element.addClass(this.options.classes);
this.element.append(this.options.audioContainer);
this.element.append(this.options.playlistContainer);
this.element.append(this.options.debugContainer);
var previousPlaylist = localStorage['playlist']?JSON.parse(localStorage['playlist']):[];
this.playlist = $.extend([], previousPlaylist);
// Initialization logic here
self = this;
this.debugContainer = $('<div>');
this.playlistContainer = this.options.playlistContainer;
this.element.addClass(this.options.classes);
this.element.append(this.playlistContainer);
this.element.append(this.debugContainer);
this.playlist = this.loadPlaylist();
this._update();
},
......@@ -32,30 +34,86 @@
this.options[ key ] = value;
this._update();
},
_update: function() {
localStorage['playlist'] = JSON.stringify(this.playlist);
this.options.debugContainer.text(
JSON.stringify(this.playlist)
_update: function() {
this.playlist = [];
this.playlistContainer.find('audio').each(function(){
self.playlist.push(self.jsonifyAudio($(this)));
});
this.savePlaylist();
this.debugContainer.text(
JSON.stringify(this.playlist)
);
this._buildhtmlPlaylist();
return this.playlist;
},
savePlaylist: function(){
localStorage['playlist'] = JSON.stringify(this.playlist);
},
loadPlaylist: function(){
this.playlist = localStorage['playlist']?JSON.parse(localStorage['playlist']):this.playlist;
$.each(this.playlist,function(k,v){
self.playlistContainer.append(self._htmlifyJsonSound(v));
});
return this.playlist;
},
// Transform HTML5 <audio> to simple JSON object.
jsonifyAudio: function(audio) {
var sound = {
source :{},
title: audio.attr('title'),
id:audio.attr('id')
};
audio.children('source').each(function(){
sound.source[$(this).attr('type')] = $(this).attr('src');
});
return sound;
},
// Transform JSON sound object to HTML container for playlist.
_htmlifyJsonSound: function(sound) {
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);
});
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();
}
}});
var remover = $('<button>',{class:'icon-remove',click:function(){
container.remove();
self._update();
}});
container.append(remover).append(title).append(audio);
return container;
},
// Create a public method.
registerAudio: function(audio) {
var htmlAudio = this._htmlifyJsonSound(this.jsonifyAudio(audio));
this.playlistContainer.append(htmlAudio);
this._update();
},
registerSound: function(sound) {
this.playlist.push(sound);
this._update();
},
// Create a public method.
removeSound: function(k) {
this.playlist.splice(k, 1);
this._update();
},
// Create a public method.
pauseSounds: function() {
this.options.playlistContainer.find('audio').each(function(){$(this)[0].pause();});
this.playlistContainer.find('audio').each(function(){$(this)[0].pause();});
},
// Create a public method.
_buildhtmlSound: function(sound,k) {
var self = this;
var container = $('<div>');
var audio = $('<audio>',this.options.html5audioOptions);
$.each(sound.source,function(k,v){
......@@ -68,7 +126,7 @@
audio[0].pause();
$(this).removeClass('active');
} else {
self.options.playlistContainer.find('.active').removeClass('active');
self.playlistContainer.find('.active').removeClass('active');
$(this).addClass('active');
self.pauseSounds();
audio[0].play();
......@@ -79,21 +137,15 @@
}});
return container.append(remover).append(title).append(audio);
},
// Create a private method.
_buildhtmlPlaylist: function( argument ) {
var self = this;
self.options.playlistContainer.empty();
self.playlistContainer.empty();
$.each(this.playlist,function(k,v){
var soundHtml = self._buildhtmlSound(v,k);
var listItem = $('<li>',{html:soundHtml});
self.options.playlistContainer.append(listItem);
self.playlistContainer.append(listItem);
});
},
// Create a public method.
showAlert: function( argument ) {
// ...
alert('me');
},
});
})(jQuery);
......@@ -87,12 +87,15 @@ $(function() {
});
$('[data-playlist-add]').on('click',function(){
var audio = $($(this).attr('data-playlist-add'));
$localList.playlist("registerAudio",audio);
/*
try {
soundObj = JSON.parse(audio.children('code.json').html());
$localList.playlist("registerSound",soundObj);
}catch (e) { doLog('Sorry! audio is not well encoded in template'+e,'error'); }
return false;
*/
});
/*
$("[data-audio-control]").each(function() {
......
......@@ -18,7 +18,7 @@
<audio
data-player='true'
data-metas=''
title="{{episode.title}}"
id="Audio-{{ sound.file.url|slugify }}"
preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
......
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