-
+{% load i18n paniktags %}
<div id="player-container" class="normal cf">
- <div id="player" class="wrapper cf">
+ <div id="player" class="cf">
<div id="audioPlayer" class="cf">
- <div class="padded">
- <ul class="metas custom inline right">
- <li><a class="button resymbol icon-download inBlock" title="Get the stream on your player!" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a></li>
- <!--<li><button class="icon-eye-open " title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button></li>-->
- <li><button title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
- </ul>
- <button id="DirectStreamPanikControler" class="label cf">
- <span class="icon-volume-up resymbol"></span>
- <span class="">en direct</span>
- </button>
- <div id="CurrentlyPlaying" class="ellipsis">
- <button class="icon-refresh" id="RefreshWhatsOnAir"></button>
+ <div id="Live" class="padded cf">
+ <div class="metas custom">
+ <a id="ogg-m3u" class="button resymbol icon-download inBlock" title="{% trans 'Get the stream on your player!' %}" href="https://streaming.domainepublic.net/radiopanik.ogg.m3u"></a>
+ <a id="aac-m3u" style="display: none;" class="button icon-download inBlock" title="{% trans 'Get the stream on your player!' %}" href="https://streaming.domainepublic.net/radiopanik.aac.m3u"></a>
+ </div>
+ <div class="button" id="DirectStreamPanikControler">
+ <div id="streamSymbol" class="icon-volume-up resymbol"></div>
+ <div class="label">{% trans 'live' %}</div>
+ </div>
+ <div id="CurrentlyPlaying">
<span id="WhatsOnAir"></span>
</div>
+ <div id="CurrentlyChatting" style="display: none;">
+ <a href=""><div id="chatSymbol" class="icon-comments control"></div>
+ <div class="label">CHAT</div></a>
+ <span>La radio est ouverte</span>
+ </div>
<audio
id="DirectStreamPanik"
preload="none"
class="hidden"
tabindex="0"
- src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
- controls="controls"
- ></audio>
- <div id="PlayerHelp" class="sub padded hidden help">
- <p>Le contenu des émissions n’é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’est pas captée facilement.</p>
- <p>Le serveur de streaming a été mis en place par l’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’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>
- </div>
- <div id="Playlist" class="sub cf">
- <div id="localList" class="padded">
- <div class="label button">Playlist <span class="icon-list"></span></div>
+ controls="controls">
+ <source src="https://streaming.domainepublic.net/radiopanik.ogg?{{ unique }}" type="audio/ogg"/>
+ <source src="https://streaming.domainepublic.net/radiopanik.aac?{{ unique }}" type="audio/aac"/>
+ </audio>
</div>
</div>
- <script type="text/javascript">
- $(function() {
- var timer = null,
- interval = 5000;
- $('#WhatsOnAir').on('load',function(){
- var WhatsOnAir = $(this);
- $.getJSON('/onair.json', function(onair) {
- WhatsOnAir.fadeOut();
- if(onair.data.episode || onair.data.emission){
- var result = '';
- result = result + ($.type(onair.data.emission) == 'object'?'<span>'+onair.data.emission.title+'</span> | ':'');
- result = result + ($.type(onair.data.episode) == 'object'?'<span>'+onair.data.episode.title+'</span>':'');
- //var container = $('<a>',{class:"intercepted",href:onair.data.emission.url,html:result});
- var container = $('<span>').html(result);
- WhatsOnAir.append(container);
- } else if (onair.data.nonstop) {
- result = onair.data.nonstop.title;
- WhatsOnAir.html('<span>' + result + '</span>');
- }
- else{WhatsOnAir.html('<span>Unknown (Probably Non-Stop)</span>');}
- WhatsOnAir.fadeIn();
- });
- }).trigger('load');
- $('#RefreshWhatsOnAir').on('activate',function(e){
- $(this).addClass('spinning');
- $('#WhatsOnAir').addClass('active');
- $('#WhatsOnAir').trigger('load');
- timer = setInterval( "$('#WhatsOnAir').trigger('load');", interval);
- }).on('deactivate',function(e){
- $(this).removeClass('spinning');
- $('#WhatsOnAir').removeClass('active');
- clearInterval(timer);
- }).on('click',function(e){
- $(this).toggleClass('spinning');
- if($(this).is('.spinning')){
- $(this).trigger('activate');
- }else{$(this).trigger('deactivate');}
- return false;
- });
- $("#DirectStreamPanikControler").on('click',function(e) {
- e.preventDefault();
- var stream = $('#DirectStreamPanik').get(0);
- if (stream.paused == false){
- stream.pause();
- }else{
- stream.play();
- }
- });
- $('#DirectStreamPanik').on('play',function(){
- $('audio:not(#DirectStreamPanik)').each(function(){this.pause();});
- $('#DirectStreamPanikControler').find('.control').removeClass('icon-volume-up').addClass('icon-pause');
- $('#RefreshWhatsOnAir').trigger('activate');
- }).on('pause',function(){
- //$('audio:not(#DirectStreamPanik)').each(function(){this.pause();});
- $('#DirectStreamPanikControler').find('.control').addClass('icon-volume-up').removeClass('icon-pause');
- $('#RefreshWhatsOnAir').trigger('deactivate');
- });
- });
- </script>
+ <div id="Playlist" class="cf">
+ <div id="localList" class="padded" style="display: none;">
+ <div id="playlistLabel">
+ <button title="{% trans "Empty playlist" %}" id="emptyList" class="icon-trash button" style="float:right;"><span class="sr-only">{% trans "Empty playlist" %}</span></button>
+ </div>
+ </div>
+ </div>
</div>
+
</div>