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); }
|
||||
|
||||
|
||||
@@ -58,6 +58,10 @@
|
||||
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;
|
||||
@@ -86,8 +90,28 @@
|
||||
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();
|
||||
@@ -145,6 +169,7 @@
|
||||
this.$container.removeClass('is-playing');
|
||||
this.timeOutToHide();
|
||||
},
|
||||
// global
|
||||
show(){
|
||||
this.$container.addClass('visible');
|
||||
},
|
||||
@@ -159,8 +184,12 @@
|
||||
},
|
||||
hide(){
|
||||
this.$container.removeClass('visible');
|
||||
// TODO: trigger highlighted node remove on corpus map
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ___ _ _ ___
|
||||
// / __| __ _ _ ___| | | _ ) __ _ _ _ ___
|
||||
// \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
|
||||
@@ -233,7 +262,7 @@
|
||||
};
|
||||
|
||||
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');
|
||||
};
|
||||
@@ -288,7 +317,7 @@
|
||||
})
|
||||
.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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -13,6 +13,43 @@
|
||||
@import 'base/layout';
|
||||
@import 'base/fonts';
|
||||
|
||||
@mixin spining-loader-square{
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(359deg);}
|
||||
}
|
||||
animation: rotation 2s infinite linear;
|
||||
}
|
||||
|
||||
|
||||
@mixin entrie-micro-square {
|
||||
display:inline-block;
|
||||
$s:8px;
|
||||
width:$s; height:$s;
|
||||
background-color: black;
|
||||
margin-right: 3px;
|
||||
&[tid='134']{background-color: $e_col_134;}
|
||||
&[tid='121']{background-color: $e_col_121;}
|
||||
&[tid='125']{background-color: $e_col_125;}
|
||||
&[tid='119']{background-color: $e_col_119;}
|
||||
&[tid='132']{background-color: $e_col_132;}
|
||||
&[tid='122']{background-color: $e_col_122;}
|
||||
&[tid='129']{background-color: $e_col_129;}
|
||||
&[tid='120']{background-color: $e_col_120;}
|
||||
&[tid='130']{background-color: $e_col_130;}
|
||||
&[tid='118']{background-color: $e_col_118;}
|
||||
&[tid='127']{background-color: $e_col_127;}
|
||||
&[tid='133']{background-color: $e_col_133;}
|
||||
&[tid='128']{background-color: $e_col_128;}
|
||||
&[tid='124']{background-color: $e_col_124;}
|
||||
&[tid='116']{background-color: $e_col_116;}
|
||||
&[tid='117']{background-color: $e_col_117;}
|
||||
&[tid='131']{background-color: $e_col_131;}
|
||||
&[tid='126']{background-color: $e_col_126;}
|
||||
&[tid='123']{background-color: $e_col_123;}
|
||||
}
|
||||
|
||||
|
||||
// header
|
||||
|
||||
.layout-container{
|
||||
@@ -21,17 +58,11 @@
|
||||
|
||||
header[role="banner"]{
|
||||
position: relative;
|
||||
padding:0 0 1em 0;
|
||||
padding:0 0 0.5em 0;
|
||||
border-bottom: 1px solid red;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@mixin spining-loader-square{
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(359deg);}
|
||||
}
|
||||
animation: rotation 2s infinite linear;
|
||||
// TODO: what header height to fit well with player ??
|
||||
height:70px;
|
||||
}
|
||||
|
||||
#block-edlptheme-branding{
|
||||
@@ -192,19 +223,22 @@ main[role="main"]{
|
||||
position: absolute;
|
||||
top:0; left:0;
|
||||
background-color: white;
|
||||
height:100%; width:300px;
|
||||
height:100%; min-width:300px;
|
||||
z-index: 20;
|
||||
opacity: 0;
|
||||
// outline: 1px solid blue;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.7s ease-in-out;
|
||||
&.visible{
|
||||
opacity: 1;
|
||||
pointer-events:all;
|
||||
}
|
||||
.btns, .time-line-container, .time{
|
||||
&>*{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding:0 1em 0 0;
|
||||
padding:0;
|
||||
max-height: 100%;
|
||||
// outline: 1px solid green;
|
||||
}
|
||||
.btns{
|
||||
// outline: 1px dotted orange;
|
||||
@@ -227,13 +261,11 @@ main[role="main"]{
|
||||
opacity: 0.3;}
|
||||
}
|
||||
.time-line-container{
|
||||
// outline: 1px dotted purple;
|
||||
.time-line{
|
||||
position: relative;
|
||||
width:70px; height:1px;
|
||||
background-color: #000;
|
||||
overflow: visible;
|
||||
// border-top: 1px solid #000;
|
||||
transform: rotateZ(-45deg);
|
||||
.loader{
|
||||
width:0; height:100%;
|
||||
@@ -249,11 +281,9 @@ main[role="main"]{
|
||||
}
|
||||
}
|
||||
.time{
|
||||
// outline: 1px dotted brown;
|
||||
&>*{
|
||||
width:70px;
|
||||
text-align: right;
|
||||
// outline: 1px dotted red;
|
||||
}
|
||||
.current-time{
|
||||
font-size: 1.4em;
|
||||
@@ -264,7 +294,33 @@ main[role="main"]{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.favoris{
|
||||
height:100%;
|
||||
}
|
||||
.cartel{
|
||||
// TODO: set max-width regarding responsive
|
||||
max-width: 400px;
|
||||
margin-left: 1em;
|
||||
background-color: white;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
&.loading{opacity: 0;}
|
||||
|
||||
.entrees{
|
||||
line-height: 0;
|
||||
span{
|
||||
@include entrie-micro-square;
|
||||
}
|
||||
}
|
||||
h2.node-title{
|
||||
margin:0.2em 0 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
p{
|
||||
margin:0;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
&.is-playing{
|
||||
.btns .play-pause{background-image: url(../img/audio-player-pause.svg);}
|
||||
}
|
||||
@@ -726,7 +782,6 @@ footer{
|
||||
|
||||
}
|
||||
|
||||
|
||||
// _ _ _ ___
|
||||
// | \| |___ __| |___ | _ \___ _ __ _ _ _ __
|
||||
// | .` / _ \/ _` / -_) | _/ _ \ '_ \ || | '_ \
|
||||
@@ -736,30 +791,7 @@ footer{
|
||||
.inner{
|
||||
.entrees{
|
||||
span{
|
||||
display:inline-block;
|
||||
$s:8px;
|
||||
width:$s; height:$s;
|
||||
background-color: black;
|
||||
margin-right: 3px;
|
||||
&[tid='134']{background-color: $e_col_134;}
|
||||
&[tid='121']{background-color: $e_col_121;}
|
||||
&[tid='125']{background-color: $e_col_125;}
|
||||
&[tid='119']{background-color: $e_col_119;}
|
||||
&[tid='132']{background-color: $e_col_132;}
|
||||
&[tid='122']{background-color: $e_col_122;}
|
||||
&[tid='129']{background-color: $e_col_129;}
|
||||
&[tid='120']{background-color: $e_col_120;}
|
||||
&[tid='130']{background-color: $e_col_130;}
|
||||
&[tid='118']{background-color: $e_col_118;}
|
||||
&[tid='127']{background-color: $e_col_127;}
|
||||
&[tid='133']{background-color: $e_col_133;}
|
||||
&[tid='128']{background-color: $e_col_128;}
|
||||
&[tid='124']{background-color: $e_col_124;}
|
||||
&[tid='116']{background-color: $e_col_116;}
|
||||
&[tid='117']{background-color: $e_col_117;}
|
||||
&[tid='131']{background-color: $e_col_131;}
|
||||
&[tid='126']{background-color: $e_col_126;}
|
||||
&[tid='123']{background-color: $e_col_123;}
|
||||
@include entrie-micro-square;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
|
||||
@@ -13,7 +13,7 @@ body, html{
|
||||
div.layout-container{
|
||||
position: relative;
|
||||
width:100%; height:100%;
|
||||
padding:1em;
|
||||
padding:0.5em 1em;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user