panikweb_templates/templates/includes/player.html

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