Skip to content

GitLab

Commit 09270903 authored by Simon Daron's avatar Simon Daron
Browse files
Options

Player add links to go back to the sound page

parent 6fc8608c
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 88 deletions
panikweb_templates/static/css/general.css
View file @ 09270903
......@@ -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;
......
panikweb_templates/static/css/specifics.css
View file @ 09270903
......@@ -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;
}
......
panikweb_templates/static/js/audioPlayer.js
View file @ 09270903
......@@ -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;
......
panikweb_templates/static/js/specifics.js
View file @ 09270903
......@@ -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');
......
panikweb_templates/templates/includes/audio.html
View file @ 09270903
......@@ -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 %}"
......
panikweb_templates/templates/includes/player.html
View file @ 09270903
......@@ -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