player display first part of cartel
This commit is contained in:
Bachir Soussi Chiadmi
@@ -81,6 +81,10 @@ edlp_vars = {
|
||||
this.$time = $('<div>').addClass('time').appendTo(this.$container);
|
||||
this.$currentTime = $('<div>').addClass('current-time').html('00:00').appendTo(this.$time);
|
||||
this.$duration = $('<div>').addClass('duration').html('00:00').appendTo(this.$time);
|
||||
// favoris
|
||||
this.$fav = $('<div>').addClass('favoris').appendTo(this.$container);
|
||||
// cartel
|
||||
this.$cartel = $('<div>').addClass('cartel').appendTo(this.$container);
|
||||
|
||||
// hiding
|
||||
this.hideTimer = false;
|
||||
@@ -109,8 +113,28 @@ edlp_vars = {
|
||||
this.$playpause.on('click', this.togglePlayPause.bind(this));
|
||||
// TODO: previous and next btns
|
||||
},
|
||||
openDocument(node){
|
||||
this.setSRC(node.audio_url);
|
||||
this.loadNode(node.nid);
|
||||
},
|
||||
// cartel functions
|
||||
loadNode(nid){
|
||||
this.$cartel.addClass('loading');
|
||||
$.getJSON('/edlp/node/'+nid+'/ajax/player_cartel', {})
|
||||
.done(this.onNodeLoaded.bind(this))
|
||||
.fail(this.onNodeLoadFail.bind(this));
|
||||
},
|
||||
onNodeLoaded(data){
|
||||
console.log('AudioPlayer node loaded', data);
|
||||
this.$cartel.html(data.rendered);
|
||||
this.$cartel.removeClass('loading');
|
||||
},
|
||||
onNodeLoadFail(jqxhr, textStatus, error){
|
||||
console.warn('AudioPlayer node load failed', jqxhr.responseText);
|
||||
},
|
||||
// audio functions
|
||||
setSRC(url){
|
||||
console.log('AudioPlayer setSRC : url', url);
|
||||
// console.log('AudioPlayer setSRC : url', url);
|
||||
this.clearTimeOutToHide();
|
||||
this.audio.src = url;
|
||||
this.show();
|
||||
@@ -168,6 +192,7 @@ edlp_vars = {
|
||||
this.$container.removeClass('is-playing');
|
||||
this.timeOutToHide();
|
||||
},
|
||||
// global
|
||||
show(){
|
||||
this.$container.addClass('visible');
|
||||
},
|
||||
@@ -182,8 +207,12 @@ edlp_vars = {
|
||||
},
|
||||
hide(){
|
||||
this.$container.removeClass('visible');
|
||||
// TODO: trigger highlighted node remove on corpus map
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ___ _ _ ___
|
||||
// / __| __ _ _ ___| | | _ ) __ _ _ _ ___
|
||||
// \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
|
||||
@@ -256,7 +285,7 @@ edlp_vars = {
|
||||
};
|
||||
|
||||
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
|
||||
console.warn('ajaxlink load failed', jqxhr.responseText);
|
||||
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
|
||||
$link.removeClass('ajax-loading');
|
||||
_$body.removeClass('ajax-loading');
|
||||
};
|
||||
@@ -311,7 +340,7 @@ edlp_vars = {
|
||||
})
|
||||
.on('corpus-cliked-on-node', function(e) {
|
||||
console.log('theme : corpus-cliked-on-node', e);
|
||||
_audio_player.setSRC(e.target_node.audio_url);
|
||||
_audio_player.openDocument(e.target_node);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1099,7 +1099,7 @@ div.layout-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1em;
|
||||
padding: 0.5em 1em;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
@@ -1135,9 +1135,10 @@ footer[role="contentinfo"] {
|
||||
|
||||
header[role="banner"] {
|
||||
position: relative;
|
||||
padding: 0 0 1em 0;
|
||||
padding: 0 0 0.5em 0;
|
||||
border-bottom: 1px solid red;
|
||||
pointer-events: all; }
|
||||
pointer-events: all;
|
||||
height: 70px; }
|
||||
|
||||
#block-edlptheme-branding {
|
||||
display: inline-block; }
|
||||
@@ -1297,7 +1298,7 @@ body.ajax-loading main[role="main"]:before {
|
||||
left: 0;
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
z-index: 20;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@@ -1306,10 +1307,11 @@ body.ajax-loading main[role="main"]:before {
|
||||
#audio-player.visible {
|
||||
opacity: 1;
|
||||
pointer-events: all; }
|
||||
#audio-player .btns, #audio-player .time-line-container, #audio-player .time {
|
||||
#audio-player > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 1em 0 0; }
|
||||
padding: 0;
|
||||
max-height: 100%; }
|
||||
#audio-player .btns {
|
||||
cursor: pointer; }
|
||||
#audio-player .btns > * {
|
||||
@@ -1358,6 +1360,69 @@ body.ajax-loading main[role="main"]:before {
|
||||
#audio-player .time .duration {
|
||||
font-size: 0.75em;
|
||||
font-weight: 400; }
|
||||
#audio-player .favoris {
|
||||
height: 100%; }
|
||||
#audio-player .cartel {
|
||||
max-width: 400px;
|
||||
margin-left: 1em;
|
||||
background-color: white;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.5s ease-in-out;
|
||||
transition: opacity 0.5s ease-in-out; }
|
||||
#audio-player .cartel.loading {
|
||||
opacity: 0; }
|
||||
#audio-player .cartel .entrees {
|
||||
line-height: 0; }
|
||||
#audio-player .cartel .entrees span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: black;
|
||||
margin-right: 3px; }
|
||||
#audio-player .cartel .entrees span[tid='134'] {
|
||||
background-color: #2b8f2f; }
|
||||
#audio-player .cartel .entrees span[tid='121'] {
|
||||
background-color: #3a33b6; }
|
||||
#audio-player .cartel .entrees span[tid='125'] {
|
||||
background-color: #2c9f57; }
|
||||
#audio-player .cartel .entrees span[tid='119'] {
|
||||
background-color: #c48978; }
|
||||
#audio-player .cartel .entrees span[tid='132'] {
|
||||
background-color: #5270bb; }
|
||||
#audio-player .cartel .entrees span[tid='122'] {
|
||||
background-color: #fb54d3; }
|
||||
#audio-player .cartel .entrees span[tid='129'] {
|
||||
background-color: #e07483; }
|
||||
#audio-player .cartel .entrees span[tid='120'] {
|
||||
background-color: #655845; }
|
||||
#audio-player .cartel .entrees span[tid='130'] {
|
||||
background-color: #7e0868; }
|
||||
#audio-player .cartel .entrees span[tid='118'] {
|
||||
background-color: #0e7121; }
|
||||
#audio-player .cartel .entrees span[tid='127'] {
|
||||
background-color: #dabd42; }
|
||||
#audio-player .cartel .entrees span[tid='133'] {
|
||||
background-color: #0399bb; }
|
||||
#audio-player .cartel .entrees span[tid='128'] {
|
||||
background-color: #399a1c; }
|
||||
#audio-player .cartel .entrees span[tid='124'] {
|
||||
background-color: #708540; }
|
||||
#audio-player .cartel .entrees span[tid='116'] {
|
||||
background-color: #191bff; }
|
||||
#audio-player .cartel .entrees span[tid='117'] {
|
||||
background-color: #279d84; }
|
||||
#audio-player .cartel .entrees span[tid='131'] {
|
||||
background-color: #5219ab; }
|
||||
#audio-player .cartel .entrees span[tid='126'] {
|
||||
background-color: #d49cb6; }
|
||||
#audio-player .cartel .entrees span[tid='123'] {
|
||||
background-color: #497715; }
|
||||
#audio-player .cartel h2.node-title {
|
||||
margin: 0.2em 0 0;
|
||||
font-size: 1em; }
|
||||
#audio-player .cartel p {
|
||||
margin: 0;
|
||||
font-size: 0.75em; }
|
||||
#audio-player.is-playing .btns .play-pause {
|
||||
background-image: url(../img/audio-player-pause.svg); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user