Commit 09270903 authored by Simon Daron's avatar Simon Daron

Player add links to go back to the sound page

parent 6fc8608c
......@@ -34,7 +34,7 @@ a.block:hover,nav a:hover{
text-decoration: none;
}
button:hover {
opacity:0.8;
opacity:0.5;
}
button, .button{
margin:0 0 0 0;
......
......@@ -380,7 +380,7 @@ background-color:#ff6633; border-color:#fff;}
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
}
#Playlist .playlistControls button{
#Playlist .playlistControls button,#Playlist .playlistControls .button{
margin:0 0.1em 0 0.1em;
}
#Playlist li{
......@@ -393,6 +393,7 @@ background-color:#ff6633; border-color:#fff;}
padding:0 0 0 1.5em;
}
#player-container #Playlist ol{
margin-top:0.5em;
height:1.3em;
overflow:hidden;
}
......
......@@ -76,6 +76,7 @@
source :{},
title: audio.attr('title'),
id:audio.attr('id'),
url:audio.attr('data-url'),
focus:audio.attr('data-player-focus')
};
audio.children('source').each(function(){
......@@ -96,7 +97,9 @@
// Transform JSON sound object to HTML container for playlist.
_htmlifyJsonSound: function(sound) {
var container = $('<li>').attr('data-origin',sound.id);
var audio = $('<audio>',this.options.html5audioOptions).attr('title',sound.title).hide();
var audio = $('<audio>',this.options.html5audioOptions)
.attr('title',sound.title).hide()
.attr('data-url',sound.url);
$.each(sound.source,function(k,v){
var source = $('<source>',{src:v,type:k});
audio.append(source);
......@@ -123,17 +126,18 @@
return this;
});
var controls = $('<span>',{class:'soundControls controls'});
var html5 = $('<button>',{class:'icon-html5',click:function(){
var link = $('<a>',{href:sound.url,class:'button icon-external-link'});
var html5 = $('<button>',{title:"Display HTML5 audio",class:'icon-html5',click:function(){
audio.toggle();
}}).hide();
var remove = $('<button>',{class:'icon-remove',click:function(){
var remove = $('<button>',{title:"Remove from list",class:'icon-remove',click:function(){
container.remove();
thePlaylist._update();
}});
var stop = $('<button>',{class:'icon-stop',click:function(){
var stop = $('<button>',{title:"Stop",class:'icon-stop',click:function(){
audio.trigger('stop');
}});
var playpause = $('<button>',{class:'icon-play',click:function(){
}}).hide();
var playpause = $('<button>',{title:"Play/Pause",class:'icon-play',click:function(){
if (audio[0].paused == false) { audio.trigger('pause');
} else {
......@@ -141,10 +145,7 @@
}
}});
controls.append(playpause).append(stop).append(remove).append(html5);
var title = $('<span>',{class:"button title",html:sound.title,click:function(){
playpause.trigger('click');
return false;
}});
var title = $('<a>',{title:"More information",href:sound.url,class:"button title",html:sound.title});
container.append(controls).append(title).append(audio);
if(sound.focus){thePlaylist.setFocus(container);}
return container;
......
......@@ -8,60 +8,9 @@ $(function() {
}
var $main = $("#Changing");
var $log = $("#userLog");
var $localList = $('#localList').playlist({
controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
onLoad:function(self){
$('#playlistLabel').on('click',function(){
self.playlistContainer.toggleClass('deploy');
});
if(self.isActive){self.playlistContainer.scrollTo(self.isActive, 800 );}
},
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 ).clearQueue();
},
onUpdate:function(self){
//doLog(JSON.stringify(self.playlist, null, '\t'));
if(self.playlist.length >= 1){
self.element.show();
$('#Player').addClass('withPlaylist');
}else{
self.element.hide();
$('#Player').removeClass('withPlaylist');
}
}
});
/****************************************************/
/**** AUDIOPLAYER ****/
/****************************************************/
if($('#player-container').offset()){
var topPosition = 0;
topPosition = $('#player-container').offset().top;
$(window).bind('scroll load',function (event) {
//$('#player-container').removeClass('fixed');
var y = $(this).scrollTop() - $('#Player').height();
if (topPosition!== 0 && y >= topPosition) {
$('#Player').css({'min-height':$('#Player').height()});
$('#player-container').addClass('fixed').removeClass('normal');
} else {
$('#Player').css({'min-height':'auto'});
$('#player-container').removeClass('fixed').addClass('normal');
}
});
}
/****************************************************/
/**** AJAX REQUESTS ****/
/**** AJAX UTILITIES FOR REQUESTS ****/
/****************************************************/
String.prototype.decodeHTML = function() {
return $("<div>", {html: "" + this}).html();
......@@ -114,29 +63,90 @@ $(function() {
}
loadPage_request = $.get(href, null, afterLoad);
};
init = function() {
$("#All a, #All area").removeClass('loading');
$("#All a, #All area").unbind('click').on('click',function() {
$(this).addClass('loading');
var href = $(this).attr("href");
/* this checks the link points to a local document, be
* it because it's just a path, or because the server
* part points to the same domain */
if (!href) {
doLog('No href attributes, unable to load content','error');
$("#All a, #All area").removeClass('loading');
return false;
}else if (!$(this).attr('target') && (
href.indexOf(document.domain) > -1 ||href.indexOf(':') === -1 || href.indexOf(':') > 5
)) {
loadPage(href);
return false;
}else{
$(this).attr('target','_blanck');
$("#All a, #All area").removeClass('loading');
return true;
$.fn.ajaxifyClick = function(params) {
this.each(function() {
$(this).unbind('click');
$(this).bind('click',function(){
$(this).addClass('loading');
var href = $(this).attr("href");
/* this checks the link points to a local document, be
* it because it's just a path, or because the server
* part points to the same domain */
if (!href) {
doLog('No href attributes, unable to load content','error');
$("#All a, #All area").removeClass('loading');
return false;
}else if (!$(this).attr('target') && (
href.indexOf(document.domain) > -1 ||href.indexOf(':') === -1 || href.indexOf(':') > 5
)) {
loadPage(href);
return false;
}else{
$(this).attr('target','_blanck');
$("#All a, #All area").removeClass('loading');
return true;
}
});
});
};
/****************************************************/
/**** AUDIOPLAYER ****/
/****************************************************/
if($('#player-container').offset()){
var topPosition = 0;
topPosition = $('#player-container').offset().top;
$(window).bind('scroll load',function (event) {
//$('#player-container').removeClass('fixed');
var y = $(this).scrollTop() - $('#Player').height();
if (topPosition!== 0 && y >= topPosition) {
$('#Player').css({'min-height':$('#Player').height()});
$('#player-container').addClass('fixed').removeClass('normal');
} else {
$('#Player').css({'min-height':'auto'});
$('#player-container').removeClass('fixed').addClass('normal');
}
});
}
var $localList = $('#localList').playlist({
controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
onLoad:function(self){
$('#playlistLabel').on('click',function(){
self.playlistContainer.toggleClass('deploy');
});
if(self.isActive){self.playlistContainer.scrollTo(self.isActive, 800 );}
},
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.isLastAdd.find('a').ajaxifyClick();
self.playlistContainer.scrollTo(self.isLastAdd, 800).delay(1000).scrollTo(self.isActive, 800 ).clearQueue();
},
onUpdate:function(self){
//doLog(JSON.stringify(self.playlist, null, '\t'));
if(self.playlist.length >= 1){
self.element.show();
$('#Player').addClass('withPlaylist');
}else{
self.element.hide();
$('#Player').removeClass('withPlaylist');
}
}
});
init = function() {
$("#All a, #All area").removeClass('loading');
$("#All a, #All area").ajaxifyClick();
$("#search-form").unbind('submit').on('submit', function(event) {
event.preventDefault();
$(this).addClass('loading');
......
......@@ -21,6 +21,7 @@
<audio
data-player='true'
class='hidden'
data-url="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}"
title="{{episode.title}}"
id="Audio-{{ sound.file.url|slugify }}"
preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
......
......@@ -34,7 +34,7 @@
</div>
<div id="Playlist" class="sub cf">
<div id="localList" class="padded">
<div id="playlistLabel" class="label button">Playlist&nbsp;<span class="icon-list"></span></div>
<div id="playlistLabel" class="label button">Playlist&nbsp;<span class="icon-list" title="Show/Hide playlist"></span></div>
</div>
</div>
<script type="text/javascript">
......@@ -47,8 +47,8 @@
WhatsOnAir.fadeOut();
if(onair.data.episode || onair.data.emission){
var result = '';
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>':'');
result = result + ($.type(onair.data.emission) == 'object'?'<span>'+onair.data.emission.title+'</span>':'');
result = result + ($.type(onair.data.episode) == 'object'?'&nbsp;|&nbsp;<span>'+onair.data.episode.title+'</span>':'');
//var container = $('<a>',{class:"intercepted",href:onair.data.emission.url,html:result});
WhatsOnAir.html(result);
} else if (onair.data.nonstop) {
......
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