detail.html 5.5 KB
Newer Older
1
<div id="player" class="simple">
laron's avatar
laron committed
2
3
	<div class="content">
		<div class="direct">
Simon Daron's avatar
Simon Daron committed
4
			<button data-audio-id="DirectStreamPanik" >
laron's avatar
laron committed
5
6
7
				<span class="control icon-volume-up resymbol huge"></span>
				<span class="label">&nbsp;en direct</span>
			</button>
Simon Daron's avatar
Simon Daron committed
8
			<div id="WhatsOnAir"></div>
9
10
			<audio id="DirectStreamPanik" class="hidden" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
			</audio>  
11
			<ul class="inline metas small">
Simon Daron's avatar
Player    
Simon Daron committed
12
13
14
15
				<li class="right">
					<button id="BufferStateTODO"></button>
					<button class="icon-refresh" id="RefreshWhatsOnAir"></button>
				</li>
16
				<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>
Simon Daron's avatar
Simon Daron committed
17
				<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>
Simon Daron's avatar
Simon Daron committed
18
				<li><button onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
Simon Daron's avatar
Simon Daron committed
19
			</ul>
Simon Daron's avatar
Simon Daron committed
20
21
22
23
24
25
			<article id="PlayerHelp" class="hidden help">
				<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>
				<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>
				<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>
				<p><dt>URL du stream</dt><dd><a href="http://streaming.domainepublic.net:8000/radiopanik.ogg">http://streaming.domainepublic.net:8000/radiopanik.ogg</a></dd></p>
			</article>
Simon Daron's avatar
Simon Daron committed
26
			<style>#RefreshWhatsOnAir {display:block !important;float:right;position:relative;}</style>
laron's avatar
laron committed
27
28
			<script type="text/javascript">
				$(function() {
Simon Daron's avatar
Player    
Simon Daron committed
29
30
					var timer = null, 
					interval = 5000;
Simon Daron's avatar
Simon Daron committed
31
					$('#WhatsOnAir').on('load',function(){
Simon Daron's avatar
Simon Daron committed
32
33
34
35
36
37
						var self = $(this);
						self.fadeOut();
						$.getJSON('onair.json', function(data) {
							if(data.episode || data.emission){
								self.html('<strong>'+data.emission.title+'<strong>'+'&nbsp;<span>'+data.emission.title+'<span>');
							}
Simon Daron's avatar
Simon Daron committed
38
							else{self.html('<strong>Unknown (Probably Non-Stop)<strong>');}
Simon Daron's avatar
Simon Daron committed
39
40
41
							self.fadeIn();
						});
					}).trigger('load');
Simon Daron's avatar
Simon Daron committed
42
43
44
45
46
47
48
49
50
51
52
53
54
55
					$('#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;
					});
laron's avatar
laron committed
56
57
58
59
					$("[data-audio-id]").click(function(e) {
						e.preventDefault();
						var song = $('#'+$(this).attr('data-audio-id')).get(0);
						if (song.paused){
Simon Daron's avatar
Simon Daron committed
60
							song.play();$('#RefreshWhatsOnAir').trigger('activate');
laron's avatar
laron committed
61
						}else{
Simon Daron's avatar
Simon Daron committed
62
							song.pause();$('#RefreshWhatsOnAir').trigger('deactivate');
laron's avatar
laron committed
63
64
65
66
67
						}
						$(this).children('.icon-volume-up,.icon-pause').toggleClass('icon-volume-up').toggleClass('icon-pause');
					});
				});
			</script>  
Simon Daron's avatar
Simon Daron committed
68
		</div>
laron's avatar
laron committed
69
70
71
72
73
74
75
76
77
		<!--
		<div class="direct">
			<button class="control play symbol huge" onclick="$('#DirectStreamPanik').play();">G</button>
			<div class="label relative">en direct</div>
			<div class="playlist img">
				<img src="http://placehold.it/210X130"/>
			</div>
			<audio id="DirectStreamPanik" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
			</audio>
Simon Daron's avatar
Simon Daron committed
78
		</div>
laron's avatar
laron committed
79
80
81
82
83
84
		<div class="current">
			<h5>Elles en parlent encore</h5>
			<div class="date">
				<div class="day">Mardi 2 février 2013</div>
				<div class="time">07:00 - 09:00</div>
			</div>
Simon Daron's avatar
Simon Daron committed
85
		</div>
laron's avatar
laron committed
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
		<div class="playlist">
			<div class="controls">
				<a  class="icon-link" href="http://streaming.domainepublic.net:8000/radiopanik.ogg"></a>
				<a  class="resymbol icon-download" href="http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"></a>
				<button class="symbol">H</button>
				<button class="resymbol icon-step-forward">E</button>
				<button class="resymbol icon-play"></button>
				<button class="resymbol icon-step-backward"></button>
				<button class="resymbol icon-volume-up"></button>
				<span class="resymbol icon-volume-off"></span>
			</div>    
			<div class="item">
				<img src="http://placehold.it/50X50" />
				<h5>The croissant fertile</h5>
				<p>The sound of the RCA electronic music synthesizer</p>
			</div>
			<div class="item">
				<img src="http://placehold.it/50X50" />
				<h5>The croissant fertile</h5>
				<p>The sound of the RCA electronic music synthesizer</p>
			</div>
			<div class="item">
				<img src="http://placehold.it/50X50" />
				<h5>The croissant fertile</h5>
				<p>The sound of the RCA electronic music synthesizer</p>
			</div>
Simon Daron's avatar
Simon Daron committed
112
		</div>
laron's avatar
laron committed
113
114
		-->
	</div>
Simon Daron's avatar
Simon Daron committed
115
</div>