panikweb_templates/templates/includes/player.html

   1 <div id="player" class="simple cf">
   2         <div id="player-container">
   3                 <div id="audioPlayer">
   4                         <ul class="metas custom right">
   5                                 <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>
   6                                 <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>
   7                                 <li><button title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
   8                         </ul>
   9                         <button id="DirectStreamPanikControler">
  10                                 <span class="control icon-volume-up resymbol huge"></span>
  11                                 <span class="label">&nbsp;en direct</span>
  12                         </button>
  13                         <div id="CurrentlyPlaying" class="ellipsis">
  14                                 <button class="icon-refresh" id="RefreshWhatsOnAir"></button>
  15                                 <span id="WhatsOnAir"></span>
  16                         </div>
  17                         <audio
  18                                 id="DirectStreamPanik"
  19                                 preload="none"
  20                                 class="hidden"
  21                                 tabindex="0"
  22                                 src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
  23                                 controls="controls"
  24                                 ></audio>
  25                 </div>
  26                 <div id="PlayerHelp" class="sub padded hidden help">
  27                         <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>
  28                         <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>
  29                         <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>
  30                         <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>
  31                 </div>
  32                 <div id="Playlist" class="sub">
  33                         <div id="localList">
  34                         </div>
  35                 </div>
  36                 <script type="text/javascript">
  37                         $(function() {
  38                                 var timer = null,
  39                                 interval = 5000;
  40                                 $('#WhatsOnAir').on('load',function(){
  41                                         var WhatsOnAir = $(this);
  42                                         $.getJSON('/onair.json', function(onair) {
  43                                                 WhatsOnAir.fadeOut();
  44                                                 if(onair.data.episode || onair.data.emission){
  45                                                         var result = '';
  46                                                         result = result + ($.type(onair.data.emission) == 'object'?'<strong>'+onair.data.emission.title+'</strong>&nbsp;':'');
  47                                                         result = result +  ($.type(onair.data.episode) == 'object'?'<span>'+onair.data.episode.title+'</span>':'');
  48                                                         //var container = $('<a>',{class:"intercepted",href:onair.data.emission.url,html:result});
  49                                                         var container = $('<span>').html(result);
  50                                                         WhatsOnAir.append(container);
  51                                                 } else if (onair.data.nonstop) {
  52                                                         result = onair.data.nonstop.title;
  53                                                         WhatsOnAir.html('<strong>' + result + '</strong>');
  54                                                 }
  55                                                 else{WhatsOnAir.html('<strong>Unknown (Probably Non-Stop)</strong>');}
  56                                                 WhatsOnAir.fadeIn();
  57                                         });
  58                                 }).trigger('load');
  59                                 $('#RefreshWhatsOnAir').on('activate',function(e){
  60                                         $(this).addClass('spinning');
  61                                         $('#WhatsOnAir').trigger('load');
  62                                         timer = setInterval( "$('#WhatsOnAir').trigger('load');", interval);
  63                                 }).on('deactivate',function(e){
  64                                         $(this).removeClass('spinning');
  65                                         clearInterval(timer);
  66                                 }).on('click',function(e){
  67                                         $(this).toggleClass('spinning');
  68                                         if($(this).is('.spinning')){
  69                                                 $(this).trigger('activate');
  70                                         }else{$(this).trigger('deactivate');}
  71                                         return false;
  72                                 });
  73                                 $("#DirectStreamPanikControler").on('click',function(e) {
  74                                         e.preventDefault();
  75                                         var stream = $('#DirectStreamPanik').get(0);
  76                                         if (stream.paused == false){
  77                                                 stream.pause();
  78                                         }else{
  79                                                 stream.play();
  80                                         }
  81                                 });
  82                                 $('#DirectStreamPanik').on('play',function(){
  83                                         $('audio:not(#DirectStreamPanik)').each(function(){this.pause();});
  84                                         $('#DirectStreamPanikControler').find('.control').removeClass('icon-volume-up').addClass('icon-pause');
  85                                         $('#RefreshWhatsOnAir').trigger('activate');
  86                                 }).on('pause',function(){
  87                                         //$('audio:not(#DirectStreamPanik)').each(function(){this.pause();});
  88                                         $('#DirectStreamPanikControler').find('.control').addClass('icon-volume-up').removeClass('icon-pause');
  89                                         $('#RefreshWhatsOnAir').trigger('deactivate');
  90                                 });
  91                         });
  92                 </script>
  93         </div>
  94 </div>