Commit 92652431 authored by Simon Daron's avatar Simon Daron
Browse files

Player refreshing what's on air

parent 72af2ea2
......@@ -205,7 +205,7 @@ class Player(TemplateView):
def get_context_data(self, **kwargs):
context = super(Player, self).get_context_data(**kwargs)
#context['whatsonair'] = WhatsOnAir.as_view() #HOW TO PRELOAD WHATSONAIR?
#context['whatsonair'] = WhatsOnAir.as_view() #HOW TO PRELOAD WHATSONAIR ON PLAYER?
return context
player = Player.as_view()
......
......@@ -5,10 +5,13 @@ a {
color:black;
text-decoration: none;
}
a:hover {
a:hover,button:hover {
opacity:0.8;
text-decoration: underline;
}
a.active, button.active{
opacity:0.2;
}
button{
cursor:pointer;
background:none;
......@@ -106,13 +109,13 @@ dl.metadata dd {
button {display:inline-block;}
ul.custom, ul.custom li{
ul.inline, ul.custom, ul.custom li{
list-style: none;
margin: none;
padding: none;
}
ul.inline li{
display:inline-block;
display:inline;
}
/******************/
......@@ -177,6 +180,32 @@ ul.inline li{
.left{float:left;margin-left:1em;}
.smooth{opacity:0.5;}
.hidden{display:none;}
.spinning {
position:relative;
-webkit-animation: rotation 10s infinite linear;
-moz-animation: rotation 10s infinite linear;
-o-animation: rotation 10s infinite linear;
animation: rotation 10s infinite linear;
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
......
......@@ -11,10 +11,12 @@
#player .label { background-color:#FF6633; }
*/
#player .metas, #player img{border-color:#fff;}
#Player, #player.simple, #player.simple *{
border-color:#fff;
#Player, #player{
background-color:#ff6633;
border-color:#fff;
color:white !important;
}
#player.simple *{
color:white !important;
}
#player.simple .playlist{
......
<div id="player" class="simple">
<div class="content">
<div class="direct">
<button data-audio-id="DirectStreamPanik" >
<button data-audio-id="DirectStreamPanik" >
<span class="control icon-volume-up resymbol huge"></span>
<span class="label">&nbsp;en direct</span>
</button>
<div class="whatsOnAir">{{ whatsonair }}{% include "whatsonair.html" %}
<div id="WhatsOnAir">{% include "whatsonair.html" %}
</div>
<audio id="DirectStreamPanik" class="hidden" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
</audio>
<div class="metas">
<a title="Get the stream on your player!" class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
<button title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;" class="icon-eye-open"></button>
</div>
<ul class="inline metas">
<li><button class="icon-refresh" id="RefreshWhatsOnAir"></button></li>
<li><a title="Get the stream on your player!" class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a></li>
<li><button title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;" class="icon-eye-open"></button></li>
<li><button class="icon-question-sign"></button></li>
</ul>
<style>#RefreshWhatsOnAir {display:block !important;float:right;position:relative;}</style>
<script type="text/javascript">
$(function() {
$('#WhatsOnAir').on('load',function(){
$(this).fadeOut().load('what').fadeIn();
/*$(this).load('test'});*/
});
var timer = null,
interval = 5000;
$('#RefreshWhatsOnAir').on('activate',function(e){
$(this).addClass('spinning');
$('#WhatsOnAir').trigger('load');
timer = setInterval( "$('#WhatsOnAir').trigger('load');", interval);
}).on('deactivate',function(e){
$(this).removeClass('spinning');
clearInterval(timer);
}).on('click',function(e){
$(this).toggleClass('spinning');
if($(this).is('.spinning')){
$(this).trigger('activate');
}else{$(this).trigger('deactivate');}
return false;
});
$("[data-audio-id]").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $('#'+$(this).attr('data-audio-id')).get(0);
if (song.paused){
song.play();
song.play();$('#RefreshWhatsOnAir').trigger('activate');
}else{
song.pause();
song.pause();$('#RefreshWhatsOnAir').trigger('deactivate');
}
$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
});
......
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