Skip to content

GitLab

Commit 5c332103 authored by Simon Daron's avatar Simon Daron
Browse files
Options

Fixing & styling player/episode

parent 7b512d08
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 63 deletions
panikweb_templates/static/css/specifics.css
View file @ 5c332103
......@@ -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
View file @ 5c332103
......@@ -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
View file @ 5c332103
......@@ -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
View file @ 5c332103
......@@ -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
View file @ 5c332103
......@@ -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
View file @ 5c332103
{% 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%}
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