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

New template structure

parent 22810023
<div id="metaNav">
<!--<input id="search-form" type="text" />-->
<nav class="contextual-menu">
<ul>
<!--<li><a href="{% url 'get' %}">☰</a></li>-->
<li><a href="{% url 'home' %}">
<span class="icon-home" ></span>
<span class="iconLabel">Home</span>
</a></li>
<li><a href="{% url 'player' %}">
<span class="icon-bullhorn" ></span>
<span class="iconLabel">Listen</span>
</a></li>
<li><a href="{% url 'program' %}">
<span class="icon-calendar" ></span>
<span class="iconLabel">Program</span>
</a></li>
<li><a href="{% url 'grid' %}">
<span class="icon-th-large" ></span>
<span class="iconLabel">Grid</span>
</a></li>
<!--<li><a href="#">Media</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Search</a></li>-->
<li><a href="#">
<span class="icon-info-sign" ></span>
<span class="iconLabel">About</span>
</a></li>
</ul>
</nav>
</div>
<div id="player" class="simple">
<div class="content">
<div class="direct">
<button data-audio-id="DirectStreamPanik" >
<span class="control icon-volume-up resymbol huge"></span>
<span class="label">&nbsp;en direct</span>
</button>
<div id="WhatsOnAir"></div>
<audio
id="DirectStreamPanik"
preload="none"
class="hidden"
tabindex="0"
src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ player.unique }}"
controls="controls"
></audio>
<ul class="inline metas small">
<li class="right">
<button id="BufferStateTODO"></button>
<button class="icon-refresh" id="RefreshWhatsOnAir"></button>
</li>
<li><a title="Get the stream on your player!" class="button 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 title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
</ul>
<article id="PlayerHelp" class="hidden help">
<p>Le contenu des émissions n&#8217;étant pas limité à un niveau local, le stream permet de les écouter aux quatre coins du monde. Mais aussi et surtout, à Bruxelles, dans les zones où la radio n&#8217;est pas captée facilement.</p>
<p>Le serveur de streaming a été mis en place par l&#8217;asbl A.C.T.I.C et est hébergé par <a href="http://www.domainepublic.net/" class='spip_out' rel='external'>Domainepublic.net</a> . Il fonctionne exclusivement grâce à des logiciels libres.</p>
<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>
</article>
<style>#RefreshWhatsOnAir {display:block !important;float:right;position:relative;}</style>
<script type="text/javascript">
$(function() {
var timer = null,
interval = 5000;
$('#WhatsOnAir').on('load',function(){
var self = $(this);
self.fadeOut();
$.getJSON('onair.json', function(data) {
if(data.episode || data.emission){
self.html('<strong>'+data.emission.title+'<strong>'+'&nbsp;<span>'+data.emission.title+'<span>');
}
else{self.html('<strong>Unknown (Probably Non-Stop)<strong>');}
self.fadeIn();
});
}).trigger('load');
$('#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();
var song = $('#'+$(this).attr('data-audio-id')).get(0);
if (song.paused){
song.play();$('#RefreshWhatsOnAir').trigger('activate');
}else{
song.pause();$('#RefreshWhatsOnAir').trigger('deactivate');
}
$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
});
});
</script>
</div>
<!--
<div class="direct">
<button class="control play symbol huge" onclick="$('#DirectStreamPanik').play();">G</button>
<div class="label relative">en direct</div>
<div class="playlist img">
<img src="http://placehold.it/210X130"/>
</div>
<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
</audio>
</div>
<div class="current">
<h5>Elles en parlent encore</h5>
<div class="date">
<div class="day">Mardi 2 février 2013</div>
<div class="time">07:00 - 09:00</div>
</div>
</div>
<div class="playlist">
<div class="controls">
<a class="icon-link" href="http://streaming.domainepublic.net:8000/radiopanik.ogg"></a>
<a class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
<button class="symbol">H</button>
<button class="resymbol icon-step-forward">E</button>
<button class="resymbol icon-play"></button>
<button class="resymbol icon-step-backward"></button>
<button class="resymbol icon-volume-up"></button>
<span class="resymbol icon-volume-off"></span>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
<div class="item">
<img src="http://placehold.it/50X50" />
<h5>The croissant fertile</h5>
<p>The sound of the RCA electronic music synthesizer</p>
</div>
</div>
-->
</div>
</div>
{% extends "base.html" %}
{% block main %}
<div id="Program">
<h1>Programme</h1>
<div class="program tabs">
<ul class="custom">
{% for day in days %}
<li><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</a></li>
{% endfor %}
</ul>
{% for day in days %}
<div id="Program-tabs-{{ day.datetime|date:"w" }}">
<ul class="custom emission-list list">
{% if day.schedules %}
{% for schedule in day.schedules %}
<li >
<div class="date dateBloc">
<div class="time">{{ schedule.datetime|date:"H:i" }}</div>
</div>
{% include "emissions/inline.html" with emission=schedule.emission %}
</li>
{% endfor %}
{% else %}
<li>Non stop</li>
{% endif %}
</ul>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Supports Markdown
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