Minor style fixe

panikweb_templates/static/css/general.css

@@ -219,7 +219,7 @@ ul.distributed.by7 li{
 	width:14.285%;
 }
 
-nav a.active, nav button.active{
+a.active, button.active{
 	font-weight:bold;
 	text-decoration:none;
 	border-bottom:2px solid black;

panikweb_templates/static/js/audioPlayer.js

+(function($) {	
+	/*
+		sound = {
+			ogg:"oggURL",
+			mp3:"mp3URL",
+			emission: "episode.slug",
+			episode: "episode.slug",
+			id:""
+		}
+	*/
+	$.widget( "panik.playlist", {
+		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);
+			this._update();
+		},
+
+		_setOption: function( key, value ) {
+			this.options[ key ] = value;
+			this._update();
+		},
+		_update: function() {
+			localStorage['playlist'] = JSON.stringify(this.playlist);
+			this.options.debugContainer.text(
+				JSON.stringify(this.playlist)
+			);
+			this._buildhtmlPlaylist();
+		},
+		// Create a public method.
+		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();});	
+		},
+		// 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){
+				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.options.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);
+		},
+		// Create a private method.
+		_buildhtmlPlaylist: function( argument ) {
+			var self = this;
+			self.options.playlistContainer.empty();	
+			$.each(this.playlist,function(k,v){
+				var soundHtml = self._buildhtmlSound(v,k);
+				var listItem = $('<li>',{html:soundHtml});
+				self.options.playlistContainer.append(listItem);
+			});
+		},
+		// Create a public method.
+		showAlert: function( argument ) {
+			// ...
+			alert('me');
+		},
+	});
+})(jQuery);
+

panikweb_templates/static/js/specifics.js

-$(function() {	
+var localList;
+$(function() {
 	var $main = $("#Changing");
 	var $log = $("#userLog");
+	localList = $('#localList').playlist();
 	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() { 
@@ -10,13 +12,11 @@ $(function() {
 	String.prototype.decodeHTML = function() {
 		return $("<div>", {html: "" + this}).html();
 	};
-
 	var loadPage_request = null;
 	afterLoad = function(html, textStatus, XMLHttpRequest) {
 		loadPage_request = null;
 		if (textStatus == "error") {
 			doLog('Sorry! And error occur when loading page content','error');
-			$("a, area, form").removeClass('loading');
 		}
 		new_content = $($.parseHTML(html)).find('#Changing>*');
 		$main.empty().append(new_content);
@@ -30,6 +30,7 @@ $(function() {
 		var bodyID = html.match(/<body id="(.*?)">/)[1].trim();		
 		$('body').attr('id',bodyID);
 		$('html, body').animate({scrollTop: $main.offset().top-$('#metaNav').height()+2}, 500);
+		$("a, area, form").removeClass('loading');
 		init();
 	};
 
@@ -86,6 +87,16 @@ $(function() {
 			});  
 			activeTab.trigger('load');
 		});
+		$('[data-playlist-add]').on('click',function(){
+			var audio = $($(this).attr('data-playlist-add'));
+			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() {
 			var audio = $('#'+$(this).attr('data-audio-control'));
 			var audioElement = audio[0];
@@ -120,6 +131,7 @@ $(function() {
 				});
 			}
 		});
+		*/
 	}
 	init();
 });

panikweb_templates/templates/base.html

@@ -7,6 +7,7 @@
     <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>
     <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
+    <script type="text/javascript" src="{{ STATIC_URL }}js/audioPlayer.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}js/specifics.js"></script>
 
     <link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" type="text/css" />

panikweb_templates/templates/includes/audio.html

@@ -15,9 +15,10 @@
 		{% endif %}
 	</span>
 	-->
+
 	<audio 
 		data-player='true'
-		data-metas='{"episode":{{episode.title|jsonify}}}'
+		data-metas=''
 		id="Audio-{{ sound.file.url|slugify }}" 
 		preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
 		controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
@@ -38,7 +39,40 @@
 				<a class="icon-headphones" href="{{ sound|format_url:'mp3' }}"> mp3</a>
 			{% endif %}
 		</div>
-	</audio>  
+		<code class="source hidden json">
+		{
+			"source" :{
+				"audio/ogg":{% if sound|is_format_available:'ogg' %}{{ sound|format_url:'ogg'|jsonify|safe }}{% else %}false{% endif %},	
+				"audio/mpeg":{% if sound|is_format_available:'mp3' %}{{ sound|format_url:'mp3'|jsonify|safe }}{% else %}false{% endif %}						
+			},
+			"emission": "{{episode.slug}}",
+			"episode": "{{episode.slug}}",
+			"title": {{episode.title|jsonify|safe}},
+			"id":"{{ sound.file.url|slugify }}"
+		}
+		</code>
+	</audio>
+	<button data-playlist-add="#Audio-{{ sound.file.url|slugify }}" class="icon-plus" id="addToPlaylist-{{ sound.file.url|slugify }}">Add to playlist</button>
+	<script type="text/javascript">
+	$(document).ready(function() {
+
+		
+		var mainSound = {
+			source :{
+			{% if sound|is_format_available:'ogg' %}
+				"audio/ogg":"{{ sound|format_url:'ogg' }}",
+			{% endif %}
+			{% if sound|is_format_available:'mp3' %}
+				"audio/mpeg":"{{ sound|format_url:'mp3' }}",
+			{% endif %}
+			},
+			emission: "{{episode.slug}}",
+			episode: "{{episode.slug}}",
+			title: {{episode.title|jsonify|safe}},
+			id:"{{ sound.file.url|slugify }}"
+		}
+	});
+	</script>
 {% else %}
 	<div class="error">No sound available!</div>
 {% endif%}

panikweb_templates/templates/includes/player.html

@@ -32,9 +32,8 @@
 			<p>Si votre logiciel ne parvient pas à lire le stream de Radio Panik, nous vous conseillons de télécharger  <a href="http://framakey.org/Portables/PortableVLC" class='spip_out' rel='external'>VLC Media Player</a>, un lecteur multimedia impressionnant de par ses nombreuses fonctionnalités (supporte de nombreux formats de stream, d&#8217;audio, de vidéo, peut servir de relais streamcast), qui fonctionne aussi bien sous Linux que sous Windows ou Mac OS.</p>
 			<p><dt>URL du stream</dt><dd class="ellipsis"><a href="http://streaming.domainepublic.net:8000/radiopanik.ogg">http://streaming.domainepublic.net:8000/radiopanik.ogg</a></dd></p>
 		</div> 
-		<div id="localList" class="hidden sub">
-			<h5 class="center">Playlist</h5>
-			<div id="Playlist">
+		<div id="Playlist" class="sub">
+			<div id="localList">
 			</div>
 		</div>
 		<style>#RefreshWhatsOnAir {display:block !important;float:right;position:relative;}</style>