Fixing & styling player/episode

panikweb_templates/static/css/specifics.css

@@ -127,6 +127,7 @@ button.check:before, a.check:before {
 /****************************************************/
 body{
 	background:#333;
+	background: url("data:image/png;base64,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") repeat scroll 0% 0% rgb(51, 51, 51);
 	color:white;
 }
 #Main{
@@ -282,7 +283,11 @@ body{
 /****************************************************/
 /**** PLAYER ****/
 /*#Home #player{   float: left; } */
-#player-container{background-color:#ff6633; border-color:#fff;color:white !important;}
+#player-container{
+	-moz-box-shadow: 0px 5px 5px #000;
+	-webkit-box-shadow:  0px 5px 5px #000;
+	box-shadow: 0px 5px 10px #000;
+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 .padded{padding:1em;}
@@ -377,6 +382,11 @@ body{
 	height:1.5em;
 	overflow:hidden;
 }
+#player-container #Playlist ol.deploy{
+	height:auto;
+	max-height:12em;
+	overflow:auto;
+}
 #player-container #Playlist ol li{
 	line-height:1.5em;
 	padding:0;
@@ -401,6 +411,7 @@ body{
 /**** EMISSIONS ****/
 #Emission .emission-detail .title{}
 /*
+*/
 @media screen and (min-width: 800px) {
 	#Emissions #Changing .wrapper.sided{
 		max-width:1000px;
@@ -425,7 +436,6 @@ body{
 		clear:right;
 	}
 }
-*/
 /**** Detail	****/
 .emission-detail .metas {
     float: left;
@@ -436,7 +446,9 @@ body{
 	font-family: "RegloBold";
 	font-size: 1.3em;
 }
-.emission-detail .logo{max-width:50%;margin-bottom:1em;}
+.emission-detail .logo{
+	max-width:50%;margin-bottom:1em;
+}
 @media screen and (max-width: 300px) {
 	.emission-detail .metas {
 		float: none;
@@ -451,22 +463,6 @@ body{
 	font-size: 17.6px;
 	text-transform: inherit;
 }
-.emission-detail .control {
-    text-transform: uppercase;
-    font-family: "Reglo";
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-.emission-detail .control .symbol{
-	font-size: 6em;
-	line-height: 80%;
-	float:left;
-}
-.emission .control .listen{
-	line-height:5em;
-}
-
 .emission .mainHeader {
     overflow: hidden;
     margin-bottom:1.5em;
@@ -508,10 +504,15 @@ body{
 .episode.resume .title{
 	margin-bottom:0.5em;
 }
-.episode.resume .logo,
- .episode.resume .controls{
+.episode.resume .logo{
 	float: right;
 }
+.episode.resume .sound.right .icon-download{
+	text-align:center;
+}
+.episode.resume .sound.right .icon-download{
+	display:block;
+}
 .episode.detail .logo.right{
 	max-width:50%;
 }

panikweb_templates/static/css/type.css

@@ -61,8 +61,8 @@
 	vertical-align:middle !important;
 	display:inline-block !important;
 	font-family: 'Symbols' !important;
-	font-size:3em;
 	line-height:50% !important;
+	font-size:2em;
 }
 .resymbol.big, .icons.big{
 	font-size:5em;
@@ -70,7 +70,6 @@
 .resymbol.huge, .icons.huge{
 	font-size:8em;
 }
-
 .info:before,.warning:before,.error:before{
 	font-family: FontAwesome;
 	display:inline-block;
@@ -86,7 +85,6 @@
 	content: "\f056 ";
 }
 .checked:before {
-
 	content: "\f056 ";
 }
 

panikweb_templates/static/js/audioPlayer.js

@@ -19,6 +19,7 @@
 			itemClasses: "",
 			controlContainer: $('<div>'),
 			playlistContainer: $('<ol>'),
+			onLoad: function(){},
 			onAdd: function(){},
 			onPlay: function(){},
 			onUpdate: function(){},
@@ -28,6 +29,7 @@
 			thePlaylist = this;	
 			this.isActive = false;
 			this.isLastAdd = false;
+			this.controlButtons = []
 			this.debugContainer = $('<pre>').hide();
 			this.controlContainer = this.options.controlContainer;
 			this.playlistContainer = this.options.playlistContainer;
@@ -38,6 +40,7 @@
 			this.playlist = this.options.playlist;
 			this.buildPlaylistControls();
 			this.loadPlaylist();
+			this.options.onLoad(this);
 			this._update();
 		},
 
@@ -104,12 +107,12 @@
 				thePlaylist.setFocus(container);
 				container.addClass('playing');
 				playpause.addClass('icon-pause').removeClass('icon-play');
-				thePlaylist.playpause.removeClass('icon-play').addClass('icon-pause');
+				thePlaylist.controlButtons['playpause'].removeClass('icon-play').addClass('icon-pause');
 				thePlaylist.afterPlay();
 			}).on('pause',function(){
 				$(this).removeClass('playing');
 				playpause.addClass('icon-play').removeClass('icon-pause');
-				thePlaylist.playpause.removeClass('icon-pause').addClass('icon-play');
+				thePlaylist.controlButtons['playpause'].removeClass('icon-pause').addClass('icon-play');
 			}).on('stop',function(){
 				$(this).trigger('pause');
 				$(this)[0].currentTime = 0;
@@ -158,31 +161,33 @@
 			if(success){success();}
 			this._update();
 		},
+		// Play next sound
+		registerControl: function(name,options) {
+			this.controlButtons[name] = $('<button>',options);
+			this.controlContainer.append(this.controlButtons[name]);
+		},
 		// Build controls
 		buildPlaylistControls: function() {
 			this.controls = $('<div>',{class:'playlistControls controls'});
-			this.toggleList = $('<button>',{class:"icon-list",click:function(){
+			this.registerControl('toggleList',{class:"icon-list hidden",click:	function(){ 
 				thePlaylist.playlistContainer.toggle();
-			}}).hide();
-			this.clearList = $('<button>',{class:"icon-trash",click:function(){
+			}});
+			this.registerControl('clearList',{class:"icon-trash",click:	function(){ 
 				thePlaylist.playlistContainer.empty();
 				thePlaylist._update();
 			}});
- 
-			this.playpause = $('<button>',{class:"icon-play",click:function(){
-				thePlaylist.playPauseList();
+			this.registerControl('previous',{class:"icon-step-backward",click:function(){
+				thePlaylist.playPrevious();
 			}});
-			this.stop = $('<button>',{class:"icon-stop",click:function(){
+			this.registerControl('stop',{class:"icon-stop",click:	function(){ 
 				thePlaylist.stopSounds();
 			}});
-			this.next = $('<button>',{class:"icon-step-forward",click:function(){
-				thePlaylist.playNext();
+			this.registerControl('playpause',{class:"icon-play",click:	function(){ 
+				thePlaylist.playPauseList();
 			}});
-			this.previous = $('<button>',{class:"icon-step-backward",click:function(){
-				thePlaylist.playPrevious();
+			this.registerControl('next',{class:"icon-step-forward",click:	function(){ 
+				thePlaylist.playNext();
 			}});
-			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;
 		},
 		// Play next sound
@@ -195,7 +200,7 @@
 		},
 		// Play next sound
 		playPauseList: function() {
-			if(this.playpause.hasClass('icon-play')){
+			if(this.controlButtons['playpause'].hasClass('icon-play')){
 				if(this.isActive){
 					this.isActive.find('audio').trigger('beforePlay').trigger('play');				
 				}else{

panikweb_templates/static/js/specifics.js

@@ -11,6 +11,11 @@ $(function() {
 	var $localList = $('#localList').playlist({
 		controlContainer: $('<div>',{class:""}).sortable(),
 		playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
+		onLoad:function(self){
+			self.registerControl('showList',{class:"icon-list",click:	function(){ 
+				self.playlistContainer.toggleClass('deploy');
+			}});
+		},
 		onPlay:function(self){
 			$('#DirectStreamPanik')[0].pause();
 			self.playlistContainer.scrollTo(self.isActive, 800 );
@@ -149,8 +154,8 @@ $(function() {
 			});  
 			activeTab.trigger('load');
 		});
-		$('[data-playlist-add]').on('click',function(){
-			var audio = $($(this).attr('data-playlist-add'));
+		$('[data-player-audio]').on('click',function(){
+			var audio = $($(this).attr('data-player-audio'));
 			$localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' has been added to your playlist.','ok'));
 		});
 		$('[data-highlight]').on('check',function(){

panikweb_templates/templates/episodes/resume.html

@@ -29,6 +29,10 @@
 	</div>
 	{% endif %}
 	<div class="content">
+
+		{% if episode.main_sound %}
+			<div class="sound right">{% audio sound=episode.main_sound %}</div>
+		{% endif %}
 		{% if class = "standalone" %}
 			<h5 class="title ellipsis smooth">
 				<a href="{% url 'emission-view' slug=episode.emission.slug %}">{{ episode.emission.title }}</a>
@@ -37,7 +41,6 @@
 		<h5 class="title">
 			<a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">{{ episode.title }}</a>
 		</h5>
-
 		{% if model = "inline" %}
 			{% if episode.description %}
 				<div class="description ellipsis">
@@ -48,13 +51,7 @@
 					{{ episode.text|safe|striptags|truncatewords:20}}
 				</div>
 			{% endif %}
-			{% if episode.main_sound %}
-				{% audio sound=episode.main_sound %}
-			{% endif %}
 		{% else %}
-			{% if episode.main_sound %}
-				{% audio sound=episode.main_sound %}
-			{% endif %}
 			{% if episode.description %}
 			<article class="text userContent">
 				{{ episode.description|safe }}

panikweb_templates/templates/includes/audio.html

 {% load soundfiles %}
 {% load paniktags %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
-	<!--
-	<span class="controls audioControls" data-audio-control="Audio-{{ sound.file.url|slugify }}">
-		<button class="add icon-plus">{{ sound.content_types }}</button>
-		<button class="playpause icon-play">{{ sound.content_types }}</button>
-		<button class="icon-eye-open" title="Show/Hidden HTML5 audio player" onclick="$('#Audio-{{ sound.file.url|slugify }}').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button>
-
+	<div class="controls huge">
+		<button class="icon-plus-sign"
+			title="Add to playlist" 
+			data-player-audio="#Audio-{{ sound.file.url|slugify }}" 
+			data-player-method="add" 
+			id="addToPlaylist-{{ sound.file.url|slugify }}"
+			></button>
+		<button class="icon-play-circle"
+			title="Play" 
+			data-player-audio="#Audio-{{ sound.file.url|slugify }}" 
+			data-player-method="play" 
+			></button>
 		{% if sound|is_format_available:'ogg' %}
-			<a class="icon-download" href="{{ sound.url }}"> ogg</a>
+			<a target="_blanck" class="icon-download button" href="{{ sound|format_url:'ogg' }}"
+				></a>
 		{% endif %}
-		{% if sound|is_format_available:'mp3' %}
-			<a class="icon-download" href="{{ sound.url }}"> mp3</a>
-		{% endif %}
-	</span>
-	-->
-
+	</div>
 	<audio 
 		data-player='true'
 		class='hidden'
@@ -53,7 +55,7 @@
 		}
 		</code>
 	</audio>
-	<button data-playlist-add="#Audio-{{ sound.file.url|slugify }}" class="icon-plus" id="addToPlaylist-{{ sound.file.url|slugify }}">Add to playlist</button>
+	
 {% else %}
 	<div class="error">No sound available!</div>
 {% endif%}