Skip to content
GitLab
Commit 69bb4e92 authored by Simon Daron's avatar Simon Daron
Browse files

WIP First attempt to inline-player

parent 789253e7
Hide whitespace changes
Inline Side-by-side
panikweb_templates/static/css/specifics.css
View file @ 69bb4e92
......@@ -267,12 +267,12 @@ body{
/****************************************************/
/**** PLAYER ****/
/*#Home #player{ float: left; } */
#player .metas, #player img{border-color:#fff;}
#player .metas{padding-left:0.5em;border-width:0 0 0 2px;border-style:solid;}
#player{background-color:#ff6633; border-color:#fff;color:white !important;}
#player *{border-color:#fff; color:white !important;background-color:transparent;}
#player{
#player-container{background-color:#ff6633; border-color:#fff;color:white !important;}
#player-container *{border-color:#fff; color:white !important;background-color:transparent;}
#player-container .metas, #player-container img{border-color:#fff;}
#player-container .metas{padding-left:0.5em;border-width:0 0 0 2px;border-style:solid;}
#player-container .padded{padding:1em;}
#player-container{
border-top:2px solid black;
border-bottom:2px solid black;
}
......@@ -280,14 +280,28 @@ body{
margin-top:0.5em;
font-size:0.8em;
}
#player #player-container{
#player-container.fixed{
z-index:500;
position:fixed;
width:100%;
top:2em;
}
#player-container.fixed #audioPlayer{
float:left;
width:45%;
border-right:2px solid white;
}
#player-container.fixed #Playlist{
margin-left:45%;
text-align:left;
}
#player-container.normal #player{
padding:2em;
max-width:350px;
margin:auto;
}
#player #audioPlayer{
}
#player #player-container .sub{
#player-container.normal .sub{
padding:0.5em;
border-top:2px solid white;
}
......@@ -295,9 +309,16 @@ body{
#Playlist{
}
#Playlist .playlistControls{
padding:0.5em;
text-align:center;
#Playlist button{font-size:1em;
}
#Playlist .label{
float:right;
}
#Playlist .playlistControls{
font-size:120%;
text-align:left;
}
#Playlist .playing .icon-pause{
-webkit-animation: loading 1s infinite linear;
......@@ -306,16 +327,33 @@ body{
animation: loading 1s infinite linear;
}
#Playlist .playlistControls button{
margin:0 0.5em 0 0.5em;
margin:0 0.1em 0 0.1em;
}
#Playlist .soundControls{
clear:right;
float:right;
}
#Playlist li{
clear:right;
}
#Playlist .soundControls button{}
#Playlist .active .title{
font-weight:bold;
}
#player-container #Playlist ol{
}
#player-container #Playlist ol{
margin-top:1em;
padding:0 0 0 2em;
}
#player-container.fixed #Playlist ol{
height:1em;
overflow:auto;
}
#player-container #Playlist ol li{
height:1em !important;
}
#Playlist ol li .title{
max-width:70%;
display:inline-block;
......@@ -324,10 +362,6 @@ body{
overflow: hidden;
}
#Playlist ol{
}
#Playlist ol .active{
}
#Listen.small-player ul.metas { display: none; }
#Listen.small-player div.content { padding: 5px 5%; }
......
panikweb_templates/static/js/audioPlayer.js
View file @ 69bb4e92
......@@ -14,9 +14,10 @@
*/
options: {
playlist: [],
html5audioOptions:{controls:true,preload:true},
html5audioOptions:{},
classes: "",
itemClasses: "",
controlContainer: $('<div>'),
playlistContainer: $('<ol>'),
onAdd: function(){},
onPlay: function(){},
......@@ -24,8 +25,10 @@
_create: function() {
// Initialization logic here
thePlaylist = this;
this.isActive = false;
this.isLastAdd = false;
this.debugContainer = $('<pre>').hide();
this.controlContainer = $('<div>');
this.controlContainer = this.options.controlContainer;
this.playlistContainer = this.options.playlistContainer;
this.element.addClass(this.options.classes);
this.element.append(this.controlContainer);
......@@ -92,6 +95,7 @@
audio.attr('title',sound.title)
.attr('data-origin',sound.id)
.on('play',function(){
thePlaylist.isActive = container;
container.addClass('playing');
container.addClass('active');
playpause.addClass('icon-pause').removeClass('icon-play');
......@@ -145,7 +149,8 @@
registerAudio: function(audio,success) {
var htmlAudio = this._htmlifyJsonSound(this.jsonifyAudio(audio));
this.playlistContainer.append(htmlAudio);
this.options.onAdd();
this.isLastAdd = htmlAudio;
this.options.onAdd(this);
if(success){success();}
this._update();
},
......@@ -173,7 +178,7 @@
},
// Play next sound
afterPlay: function() {
this.options.onPlay();
this.options.onPlay(this);
},
// Play next sound
beforePlay: function() {
......
panikweb_templates/static/js/specifics.js
View file @ 69bb4e92
......@@ -9,9 +9,44 @@ $(function() {
var $main = $("#Changing");
var $log = $("#userLog");
var $localList = $('#localList').playlist({
playlistContainer: $('<ol>',{class:"custom"}).sortable(),
onPlay:function(){$('#DirectStreamPanik')[0].pause();}
controlContainer: $('<div>',{class:""}).sortable(),
playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
onPlay:function(self){
$('#DirectStreamPanik')[0].pause();
self.playlistContainer.scrollTo(self.isActive, 800 );
/*self.isPlaying[0].scrollIntoView();
var posScroll = self.playlistContainer.scrollTop() + self.isPlaying.position().top - self.playlistContainer.height()/2 + self.isPlaying.height()/2;
self.playlistContainer.animate({
scrollTop:posScroll
}, 'slow'); */
},
onAdd:function(self){
//self.isLastAdd[0].scrollIntoView();
self.playlistContainer.scrollTo(self.isLastAdd, 800).delay(1000).scrollTo(self.isActive, 800 );
}
});
/****************************************************/
/**** AUDIOPLAYER ****/
/****************************************************/
if($('#player-container').offset()){
var topPosition = 0;
topPosition = $('#player-container').offset().top - $('#metaNav').height() + $('#Listen').height();
$(window).bind('scroll load',function (event) {
$('#player-container').removeClass('fixed');
var y = $(this).scrollTop();
if (topPosition!== 0 && y >= topPosition) {
$('#Listen').css({'min-height':$('#Listen').height()});
$('#player-container').addClass('fixed').removeClass('normal');
} else {
$('#Listen').css({'min-height':'auto'});
$('#player-container').removeClass('fixed').addClass('normal');
}
});
}
/****************************************************/
/**** AJAX REQUESTS ****/
/****************************************************/
String.prototype.decodeHTML = function() {
return $("<div>", {html: "" + this}).html();
};
......@@ -43,6 +78,7 @@ $(function() {
*/
var bodyID = html.match(/<body id="(.*?)">/);
if(bodyID){$('body').attr('id',bodyID[1].trim());}
$("#Changing").css({'min-height':$('body').height()});
$('html, body').animate({scrollTop: $main.offset().top-$('#metaNav').height()+2}, 500);
init();
};
......@@ -106,14 +142,6 @@ $(function() {
$('[data-playlist-add]').on('click',function(){
var audio = $($(this).attr('data-playlist-add'));
$localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' has been added to your playlist.','ok'));
/*
try {
soundObj = JSON.parse(audio.children('code.json').html());
$localList.playlist("registerSound",soundObj);
}catch (e) { doLog('Sorry! audio is not well encoded in template'+e,'error'); }
return false;
*/
});
$('[data-highlight]').on('check',function(){
$($(this).attr('data-about')).find($(this).attr('data-highlight')).addClass('highlighted').removeClass('normal');
......
panikweb_templates/templates/base.html
View file @ 69bb4e92
......@@ -7,6 +7,7 @@
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/audioPlayer.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/specifics.js"></script>
......
panikweb_templates/templates/includes/player.html
View file @ 69bb4e92
<div id="player" class="simple cf">
<div id="player-container">
<div id="audioPlayer">
<ul class="metas custom right">
<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>
<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">
<span class="control icon-volume-up resymbol big"></span>
<span class="label">&nbsp;en direct</span>
</button>
<div id="CurrentlyPlaying" class="ellipsis">
<button class="icon-refresh" id="RefreshWhatsOnAir"></button>
<span id="WhatsOnAir"></span>
<div id="player-container" class="normal">
<div id="player">
<div id="audioPlayer" class="cf">
<div class="padded">
<ul class="metas custom right">
<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>
<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>
<div id="CurrentlyPlaying" class="ellipsis">
<button class="icon-refresh" id="RefreshWhatsOnAir"></button>
<span id="WhatsOnAir"></span>
</div>
<audio
id="DirectStreamPanik"
preload="none"
class="hidden"
tabindex="0"
src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
controls="controls"
></audio>
</div>
</div>
<div id="Playlist" class="sub cf">
<div class="padded">
<span class="label"><span class="icon-headphones" ></span>&nbsp;Playlist</span>
<div id="localList"></div>
</div>
<audio
id="DirectStreamPanik"
preload="none"
class="hidden"
tabindex="0"
src="http://streaming.domainepublic.net:8000/radiopanik.ogg?&unique={{ uuid }}"
controls="controls"
></audio>
</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>
......@@ -29,10 +38,6 @@
<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 id="Playlist" class="sub">
<div id="localList">
</div>
</div>
<script type="text/javascript">
$(function() {
var timer = null,
......
Supports Markdown
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