panikweb_templates/templates/includes/player.html

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