-<div id="player" class="simple cf">
- <div id="player-container">
- <div id="audioPlayer">
- <ul class="metas custom 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 data-audio-id="DirectStreamPanik" >
- <span class="control icon-volume-up resymbol huge"></span>
- <span class="label"> en direct</span>
- </button>
- <div id="CurrentlyPlaying">
- <div class="inBlock">
- <span id="BufferStateTODO"></span>
- <button class="icon-refresh" id="RefreshWhatsOnAir"></button>
+{% load i18n paniktags %}
+<div id="player-container" class="normal cf">
+ <div id="player" class="cf">
+ <div id="audioPlayer" class="cf">
+ <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="inBlock ellipsis" id="WhatsOnAir"></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"
+ 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>
- <audio
- id="DirectStreamPanik"
- preload="none"
- class="hidden"
- tabindex="0"
- src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
- controls="controls"
- ></audio>
</div>
- <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 id="localList" class="hidden sub">
- <h5 class="center">Playlist</h5>
- <div id="Playlist">
+ <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>
- <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 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'?'<strong>'+onair.data.emission.title+'</strong> ':'');
- result = result + ($.type(onair.data.episode) == 'object'?'<span>'+onair.data.episode.title+'</span>':'');
- WhatsOnAir.html(result);
- } else if (onair.data.nonstop) {
- result = onair.data.nonstop.title;
- WhatsOnAir.html('<strong>' + result + '</strong>');
- }
- else{WhatsOnAir.html('<strong>Unknown (Probably Non-Stop)</strong>');}
- WhatsOnAir.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>
+
</div>