Complete rewrite of audioPlayer

diff --git a/panikweb_templates/static/css/general.css b/panikweb_templates/static/css/general.css
index eb8aeebfc60994d5cf838899f0736ce8e789a907..2a7c25e0c9f69dc722306d4b31db5533a8a095b8 100644 (file)
--- a/panikweb_templates/static/css/general.css
+++ b/panikweb_templates/static/css/general.css
@@ -14,6 +14,7 @@ audio {
        width: 90%; 
        margin:0.5em auto 1em auto;
 }
+
 a {
        color:inherit;
        text-decoration: none;

diff --git a/panikweb_templates/static/js/audioPlayer.js b/panikweb_templates/static/js/audioPlayer.js
index 83ae84d6f4f2a551cc024cced51f78135f30afb3..a7da3ee352b08418453b95b29d33c45fff3e3515 100644 (file)
--- a/panikweb_templates/static/js/audioPlayer.js
+++ b/panikweb_templates/static/js/audioPlayer.js
@@ -1,30 +1,32 @@
 (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);
 

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index cf02e7b285bd932b5c963877bea634700b45f8a6..66469dc7c30e5181cd64fa44a0c8a3061456cf79 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -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() {

diff --git a/panikweb_templates/templates/includes/audio.html b/panikweb_templates/templates/includes/audio.html
index 3fc22a9b4c36b3cbc06985199410fc317540e878..c0effd7da45439f50bd4e2b85a6ded64b14d7380 100644 (file)
--- a/panikweb_templates/templates/includes/audio.html
+++ b/panikweb_templates/templates/includes/audio.html
@@ -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%}"