Commit 933a7863 authored by Simon Daron's avatar Simon Daron
Browse files

Styling player

parent 4a0399c6
......@@ -284,20 +284,31 @@ body{
/**** PLAYER ****/
/*#Home #player{ float: left; } */
#player-container{
color:white;
-moz-box-shadow: 0px 5px 5px #000;
-webkit-box-shadow: 0px 5px 5px #000;
box-shadow: 0px 5px 10px #000;
background-color:#ff6633; border-color:#fff;color:white !important;}
#player-container *{border-color:#fff; color:white;background-color:transparent;}
background-color:#ff6633; border-color:#fff;}
#player-container button{
border-color:#fff;
color:white;
background-color:transparent;
}
#player-container .metas, #player-container img{border-color:#fff;}
#player-container .padded{padding:1%;}
#player-container *.label{
padding:0.2em;
}
#player-container button,#player-container a{
color:#cc3300 !important;
}
#player-container .label{
color:white !important;
}
#player-container{
border-top:2px solid black;
border-bottom:2px solid black;
}
#player #CurrentlyPlaying{
margin-top:0.5em;
}
#player-container.fixed{
z-index:500;
position:fixed;
......@@ -314,7 +325,8 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
border-right:2px solid white;
}
#Listen.withPlaylist #player-container #Playlist{
margin-left:51%;
float:right;
width:49%;
text-align:left;
}
#PlayerHelp{
......@@ -323,14 +335,6 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
#player-container.normal #player{
padding:5%;
}
#player-container #audioPlayer{
max-width:50%;
margin:auto;
}
#player-container #PlayerHelp{
border-top:2px solid white;
}
/*Playlist*/
#Playlist{
......@@ -360,27 +364,17 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
clear:right;
}
#Playlist .soundControls button{}
#Playlist .active .title{
font-weight:bold;
}
#player-container #Playlist ol{
}
#player-container #Playlist ol{
clear:right;
padding:0 0 0 2em;
padding:0 0 0 1.5em;
}
#player-container #Playlist ol{
height:1.5em;
height:1.3em;
overflow:hidden;
}
#player-container #Playlist ol.deploy{
height:auto;
max-height:12em;
overflow:auto;
}
#player-container #Playlist ol li{
line-height:1.5em;
line-height:1.3em;
padding:0;
margin:0;
}
......@@ -397,17 +391,41 @@ background-color:#ff6633; border-color:#fff;color:white !important;}
text-overflow: ellipsis;
overflow: hidden;
}
#Playlist ol li.active{
#player .active{
text-transform:uppercase;
font-weight:bold;
}
/*limit height of playlist*/
#PlayerHelp,#player-container #Playlist ol.deploy{
height:auto;
max-height:12em;
overflow:auto;
}
@media screen and (max-width: 400px) {
#player #CurrentlyPlaying,
#player-container #Playlist ol{
padding-top:0.2em;
}
@media screen and (max-width: 600px) {
#player-container .label{
font-size:1em;
color:#333 !important;
#Listen.withPlaylist #player-container #audioPlayer,
#Listen.withPlaylist #player-container #audioPlayer,
#Listen.withPlaylist #player-container #Playlist{
float:none !important;
width:auto !important;
border:none;
max-width:auto !important;
}
#Listen.withPlaylist #player-container #Playlist{
border-top:2px solid white;
margin-top:0.5em;
padding-top:0.5em;
}
#player-container.normal #player{
padding:3%;
}
@media screen and (min-width: 600px) {
#Listen.withPlaylist #player-container #audioPlayer{
max-width:50%;
margin:auto;
}
}
......
......@@ -8,9 +8,9 @@
<!--<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>-->
<li><button title="Need some help?" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
</ul>
<button id="DirectStreamPanikControler" class="label">
<span class="control icon-volume-up resymbol"></span>
<span class="">&nbsp;en direct</span>
<button id="DirectStreamPanikControler" class="label cf">
<span class="icon-volume-up resymbol"></span>
<span class="">en direct</span>
</button>
<div id="CurrentlyPlaying" class="ellipsis">
<button class="icon-refresh" id="RefreshWhatsOnAir"></button>
......@@ -24,20 +24,19 @@
src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
controls="controls"
></audio>
<div id="PlayerHelp" class="sub padded 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 class="ellipsis"><a href="http://streaming.domainepublic.net:8000/radiopanik.ogg">http://streaming.domainepublic.net:8000/radiopanik.ogg</a></dd></p>
</div>
</div>
</div>
<div id="Playlist" class="sub cf">
<div id="localList" class="padded">
<div class="label button">Playlist</div>
<div class="label button">Playlist&nbsp;<span class="icon-list"></span></div>
</div>
</div>
<div id="PlayerHelp" class="sub padded 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 class="ellipsis"><a href="http://streaming.domainepublic.net:8000/radiopanik.ogg">http://streaming.domainepublic.net:8000/radiopanik.ogg</a></dd></p>
</div>
<script type="text/javascript">
$(function() {
var timer = null,
......@@ -48,25 +47,27 @@
WhatsOnAir.fadeOut();
if(onair.data.episode || onair.data.emission){
var result = '';
result = result + ($.type(onair.data.emission) == 'object'?'<strong>'+onair.data.emission.title+'</strong>&nbsp;':'');
result = result + ($.type(onair.data.emission) == 'object'?'<span>'+onair.data.emission.title+'</span>&nbsp;|&nbsp;':'');
result = result + ($.type(onair.data.episode) == 'object'?'<span>'+onair.data.episode.title+'</span>':'');
//var container = $('<a>',{class:"intercepted",href:onair.data.emission.url,html:result});
var container = $('<span>').html(result);
WhatsOnAir.append(container);
} else if (onair.data.nonstop) {
result = onair.data.nonstop.title;
WhatsOnAir.html('<strong>' + result + '</strong>');
WhatsOnAir.html('<span>' + result + '</span>');
}
else{WhatsOnAir.html('<strong>Unknown (Probably Non-Stop)</strong>');}
else{WhatsOnAir.html('<span>Unknown (Probably Non-Stop)</span>');}
WhatsOnAir.fadeIn();
});
}).trigger('load');
$('#RefreshWhatsOnAir').on('activate',function(e){
$(this).addClass('spinning');
$('#WhatsOnAir').addClass('active');
$('#WhatsOnAir').trigger('load');
timer = setInterval( "$('#WhatsOnAir').trigger('load');", interval);
}).on('deactivate',function(e){
$(this).removeClass('spinning');
$('#WhatsOnAir').removeClass('active');
clearInterval(timer);
}).on('click',function(e){
$(this).toggleClass('spinning');
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment