panikweb_templates/templates/includes/player.html

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