bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

random player ready

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-18 13:29:34 +01:00
parent d317b85ef3
commit 003b381d6d
6 changed files with 181 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+5 -2
View File
@@ -765,14 +765,17 @@
}, },
}; };
_$canvas.trigger(event); _$canvas.trigger(event);
// TODO: instead of directly opening the doc, create an event listener (e.g. : audio played from random) // instead of directly opening the doc, create an event listener (e.g. : audio played from random)
openNode(_node_hover_id); // openNode(_node_hover_id);
}else{ }else{
// console.log('corpus : click on map'); // console.log('corpus : click on map');
_$canvas.trigger('corpus-cliked-on-map'); _$canvas.trigger('corpus-cliked-on-map');
} }
} }
}) })
.on('audio-node-opened', function(e){
openNode(e.id);
})
.on('audio-node-closed', function(e){ .on('audio-node-closed', function(e){
closeNode(); closeNode();
}); });
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+5 -2
View File
@@ -765,14 +765,17 @@
}, },
}; };
_$canvas.trigger(event); _$canvas.trigger(event);
// TODO: instead of directly opening the doc, create an event listener (e.g. : audio played from random) // instead of directly opening the doc, create an event listener (e.g. : audio played from random)
openNode(_node_hover_id); // openNode(_node_hover_id);
}else{ }else{
// console.log('corpus : click on map'); // console.log('corpus : click on map');
_$canvas.trigger('corpus-cliked-on-map'); _$canvas.trigger('corpus-cliked-on-map');
} }
} }
}) })
.on('audio-node-opened', function(e){
openNode(e.id);
})
.on('audio-node-closed', function(e){ .on('audio-node-closed', function(e){
closeNode(); closeNode();
}); });
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+41 -25
View File
@@ -92,12 +92,13 @@
this.hideTimeMS = 10000; this.hideTimeMS = 10000;
// history // history
this.next_node = null;
this.currentHistoricIndex = null; this.currentHistoricIndex = null;
this.historic = []; this.historic = [];
this.shuffle_is_active = false;
// object events // object events
this.event_handlers = { this.event_handlers = {
'audio-play-next':[],
'audio-ended':[] 'audio-ended':[]
}; };
@@ -126,17 +127,21 @@
this.$next.on('click', this.playNext.bind(this)); this.$next.on('click', this.playNext.bind(this));
// TODO: previous and next btns // TODO: previous and next btns
}, },
openDocument(node, next_node){ openDocument(node){
console.log('AudioPlayer openDocument', node); console.log('AudioPlayer openDocument', node);
this.historic.push(node); this.historic.push(node);
this.currentHistoricIndex = this.historic.length-1; this.currentHistoricIndex = this.historic.length-1;
this.next_node = next_node || null; // this.shuffle_mode = shuffle_mode || false;
// TODO: emmit new playing doc (need for corpus map nowing that audio played from RandomPlayer)
this.launch(); this.launch();
}, },
launch(){ launch(){
this.setSRC(this.historic[this.currentHistoricIndex].audio_url); this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.loadNode(this.historic[this.currentHistoricIndex].nid); this.loadNode(this.historic[this.currentHistoricIndex].nid);
// emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
_$corpus_canvas.trigger({
'type':'audio-node-opened',
'id':this.historic[this.currentHistoricIndex].id
});
this.showHidePreviousBtn(); this.showHidePreviousBtn();
this.showHideNextBtn(); this.showHideNextBtn();
this.show(); this.show();
@@ -173,14 +178,17 @@
this.audio.play(); this.audio.play();
}, },
playPrevious(){ playPrevious(){
if(typeof this.historic[this.currentHistoricIndex-1] !== 'undefined'){ if(this.currentHistoricIndex > 0){
this.currentHistoricIndex -= 1; this.currentHistoricIndex -= 1;
this.launch(); this.launch();
} }
}, },
playNext(){ playNext(){
if(this.next_node){ if(this.currentHistoricIndex < this.historic.length-1){
this.openDocument(this.next_node); this.currentHistoricIndex += 1;
this.launch();
}else{
this.emmit('audio-play-next');
} }
}, },
togglePlayPause(e){ togglePlayPause(e){
@@ -190,6 +198,11 @@
this.audio.pause(); this.audio.pause();
} }
}, },
stop(){
this.audio.pause();
this.timeOutToHide();
},
// audio events
onPlaying(){ onPlaying(){
this.$container.addClass('is-playing'); this.$container.addClass('is-playing');
}, },
@@ -211,10 +224,6 @@
this.emmit('audio-ended'); this.emmit('audio-ended');
this.stop(); this.stop();
}, },
stop(){
this.$container.removeClass('is-playing');
this.timeOutToHide();
},
// cartel functions // cartel functions
loadNode(nid){ loadNode(nid){
this.$cartel.addClass('loading'); this.$cartel.addClass('loading');
@@ -236,15 +245,15 @@
show(){ show(){
this.$container.addClass('visible'); this.$container.addClass('visible');
}, },
showHidePreviousBtn(s){ showHidePreviousBtn(){
if(this.historic.length > 1){ if(this.historic.length > 1 && this.currentHistoricIndex > 0){
this.$previous.addClass('is-active'); this.$previous.addClass('is-active');
}else{ }else{
this.$previous.removeClass('is-active'); this.$previous.removeClass('is-active');
} }
}, },
showHideNextBtn(){ showHideNextBtn(){
if(this.next_node){ if(this.currentHistoricIndex < this.historic.length-1 || this.shuffle_is_active){
this.$next.addClass('is-active'); this.$next.addClass('is-active');
}else{ }else{
this.$next.removeClass('is-active'); this.$next.removeClass('is-active');
@@ -270,6 +279,7 @@
console.warn('AudioPlayer : event '+event_name+' does not exists'); console.warn('AudioPlayer : event '+event_name+' does not exists');
} }
this.event_handlers[event_name].push(handler); this.event_handlers[event_name].push(handler);
return this;
}, },
emmit(event_name){ emmit(event_name){
var handler; var handler;
@@ -473,7 +483,7 @@
function RandomPlayer(playlist){ function RandomPlayer(playlist){
this.active = false; this.active = false;
this.playlist = playlist; this.playlist = playlist;
this.$btn = $('<a>').html('&#x1f500;').addClass('random-player-btn'); this.$btn = $('<a>').html('Shuffle').addClass('random-player-btn');
this.init() this.init()
}; };
RandomPlayer.prototype = { RandomPlayer.prototype = {
@@ -482,13 +492,15 @@
$('<div>') $('<div>')
.addClass('block random-player') .addClass('block random-player')
.append(this.$btn) .append(this.$btn)
.insertAfter('#block-userlogin'); .insertAfter('#block-userlogin, #block-studiolinkblock');
// events // events
this.$btn.on('click', this.toggleActive.bind(this)); this.$btn.on('click', this.toggleActive.bind(this));
// attach an event on AudioPlayer // attach an event on AudioPlayer
_audio_player.on('audio-ended', this.onAudioPlayerEnded.bind(this)); _audio_player
.on('audio-ended', this.onAudioPlayerEnded.bind(this))
.on('audio-play-next', this.onAudioPlayNext.bind(this));
}, },
shuffle(){ shuffle(){
var tempPLaylist = []; var tempPLaylist = [];
@@ -504,30 +516,34 @@
}, },
toggleActive(e){ toggleActive(e){
if (this.active) { if (this.active) {
this.$btn.removeClass('is-active');
this.stop(); this.stop();
}else{ }else{
this.$btn.addClass('is-active');
this.shuffle(); this.shuffle();
this.play(); this.start();
} }
}, },
play(){ start(){
this.active = true; this.active = _audio_player.shuffle_is_active = true;
this.next(); this.next();
}, },
stop(){ stop(){
this.active = false; this.active = _audio_player.shuffle_is_active = false;
// stop audio player // stop audio player
_audio_player.stop(); _audio_player.stop();
}, },
next(){ next(){
if(this.shuffledPlaylist.length > 0) if(this.active && this.shuffledPlaylist.length > 0)
_audio_player.openDocument(this.shuffledPlaylist.splice(0,1)[0]); _audio_player.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
}, },
onAudioPlayNext(){
console.log('RandomPlayer : onAudioPlayNext()');
this.next();
},
onAudioPlayerEnded(){ onAudioPlayerEnded(){
console.log('RandomPlayer : onAudioPlayerEnded()'); console.log('RandomPlayer : onAudioPlayerEnded()');
if(this.active){ this.next();
this.next();
}
} }
}; };
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+52 -24
View File
@@ -1327,24 +1327,29 @@ body.ajax-loading main[role="main"]:before {
vertical-align: middle; vertical-align: middle;
padding: 0; padding: 0;
max-height: 100%; } max-height: 100%; }
#audio-player .btns { #audio-player .btns > * {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 30px;
background-position: center;
background-size: contain; }
#audio-player .btns .play-pause {
background-image: url(../img/audio-player-play.svg);
padding: 0 0.3em;
cursor: pointer; } cursor: pointer; }
#audio-player .btns > * { #audio-player .btns .previous, #audio-player .btns .next {
display: inline-block; opacity: 0.3;
vertical-align: middle; -webkit-transition: opacity 0.3s ease-in-out;
width: 20px; transition: opacity 0.3s ease-in-out;
height: 30px; cursor: auto; }
background-position: center; #audio-player .btns .previous.is-active, #audio-player .btns .next.is-active {
background-size: contain; } opacity: 1;
#audio-player .btns .previous { cursor: pointer; }
background-image: url(../img/audio-player-previous.svg); #audio-player .btns .previous {
opacity: 0.3; } background-image: url(../img/audio-player-previous.svg); }
#audio-player .btns .play-pause { #audio-player .btns .next {
background-image: url(../img/audio-player-play.svg); background-image: url(../img/audio-player-next.svg); }
padding: 0 0.3em; }
#audio-player .btns .next {
background-image: url(../img/audio-player-next.svg);
opacity: 0.3; }
#audio-player .time-line-container .time-line { #audio-player .time-line-container .time-line {
position: relative; position: relative;
width: 70px; width: 70px;
@@ -2026,16 +2031,39 @@ footer {
display: block; display: block;
width: 20px; width: 20px;
height: 20px; height: 20px;
background-image: url(../img/studio.svg);
background-size: contain;
text-indent: 40px; text-indent: 40px;
margin: 0; margin: 0;
overflow: hidden; } overflow: hidden;
footer .block.random-player { -webkit-mask-image: url(../img/studio.svg);
pointer-events: all; } mask-image: url(../img/studio.svg);
footer .block.random-player a { -webkit-mask-size: contain;
background-color: inherit; mask-size: contain;
background-color: #000;
-webkit-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
cursor: pointer; } cursor: pointer; }
footer #block-studiolinkblock a.is-active {
background-color: red; }
footer .block.random-player {
pointer-events: all;
margin-left: 0.5em; }
footer .block.random-player a {
display: block;
width: 20px;
height: 20px;
text-indent: 40px;
margin: 0;
overflow: hidden;
-webkit-mask-image: url(../img/random.svg);
mask-image: url(../img/random.svg);
-webkit-mask-size: contain;
mask-size: contain;
background-color: #000;
-webkit-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
cursor: pointer; }
footer .block.random-player a.is-active {
background-color: red; }
footer #block-userlogin { footer #block-userlogin {
pointer-events: all; pointer-events: all;
position: relative; position: relative;
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+41 -25
View File
@@ -92,12 +92,13 @@
this.hideTimeMS = 10000; this.hideTimeMS = 10000;
// history // history
this.next_node = null;
this.currentHistoricIndex = null; this.currentHistoricIndex = null;
this.historic = []; this.historic = [];
this.shuffle_is_active = false;
// object events // object events
this.event_handlers = { this.event_handlers = {
'audio-play-next':[],
'audio-ended':[] 'audio-ended':[]
}; };
@@ -126,17 +127,21 @@
this.$next.on('click', this.playNext.bind(this)); this.$next.on('click', this.playNext.bind(this));
// TODO: previous and next btns // TODO: previous and next btns
}, },
openDocument(node, next_node){ openDocument(node){
console.log('AudioPlayer openDocument', node); console.log('AudioPlayer openDocument', node);
this.historic.push(node); this.historic.push(node);
this.currentHistoricIndex = this.historic.length-1; this.currentHistoricIndex = this.historic.length-1;
this.next_node = next_node || null; // this.shuffle_mode = shuffle_mode || false;
// TODO: emmit new playing doc (need for corpus map nowing that audio played from RandomPlayer)
this.launch(); this.launch();
}, },
launch(){ launch(){
this.setSRC(this.historic[this.currentHistoricIndex].audio_url); this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.loadNode(this.historic[this.currentHistoricIndex].nid); this.loadNode(this.historic[this.currentHistoricIndex].nid);
// emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
_$corpus_canvas.trigger({
'type':'audio-node-opened',
'id':this.historic[this.currentHistoricIndex].id
});
this.showHidePreviousBtn(); this.showHidePreviousBtn();
this.showHideNextBtn(); this.showHideNextBtn();
this.show(); this.show();
@@ -173,14 +178,17 @@
this.audio.play(); this.audio.play();
}, },
playPrevious(){ playPrevious(){
if(typeof this.historic[this.currentHistoricIndex-1] !== 'undefined'){ if(this.currentHistoricIndex > 0){
this.currentHistoricIndex -= 1; this.currentHistoricIndex -= 1;
this.launch(); this.launch();
} }
}, },
playNext(){ playNext(){
if(this.next_node){ if(this.currentHistoricIndex < this.historic.length-1){
this.openDocument(this.next_node); this.currentHistoricIndex += 1;
this.launch();
}else{
this.emmit('audio-play-next');
} }
}, },
togglePlayPause(e){ togglePlayPause(e){
@@ -190,6 +198,11 @@
this.audio.pause(); this.audio.pause();
} }
}, },
stop(){
this.audio.pause();
this.timeOutToHide();
},
// audio events
onPlaying(){ onPlaying(){
this.$container.addClass('is-playing'); this.$container.addClass('is-playing');
}, },
@@ -211,10 +224,6 @@
this.emmit('audio-ended'); this.emmit('audio-ended');
this.stop(); this.stop();
}, },
stop(){
this.$container.removeClass('is-playing');
this.timeOutToHide();
},
// cartel functions // cartel functions
loadNode(nid){ loadNode(nid){
this.$cartel.addClass('loading'); this.$cartel.addClass('loading');
@@ -236,15 +245,15 @@
show(){ show(){
this.$container.addClass('visible'); this.$container.addClass('visible');
}, },
showHidePreviousBtn(s){ showHidePreviousBtn(){
if(this.historic.length > 1){ if(this.historic.length > 1 && this.currentHistoricIndex > 0){
this.$previous.addClass('is-active'); this.$previous.addClass('is-active');
}else{ }else{
this.$previous.removeClass('is-active'); this.$previous.removeClass('is-active');
} }
}, },
showHideNextBtn(){ showHideNextBtn(){
if(this.next_node){ if(this.currentHistoricIndex < this.historic.length-1 || this.shuffle_is_active){
this.$next.addClass('is-active'); this.$next.addClass('is-active');
}else{ }else{
this.$next.removeClass('is-active'); this.$next.removeClass('is-active');
@@ -270,6 +279,7 @@
console.warn('AudioPlayer : event '+event_name+' does not exists'); console.warn('AudioPlayer : event '+event_name+' does not exists');
} }
this.event_handlers[event_name].push(handler); this.event_handlers[event_name].push(handler);
return this;
}, },
emmit(event_name){ emmit(event_name){
var handler; var handler;
@@ -473,7 +483,7 @@
function RandomPlayer(playlist){ function RandomPlayer(playlist){
this.active = false; this.active = false;
this.playlist = playlist; this.playlist = playlist;
this.$btn = $('<a>').html('&#x1f500;').addClass('random-player-btn'); this.$btn = $('<a>').html('Shuffle').addClass('random-player-btn');
this.init() this.init()
}; };
RandomPlayer.prototype = { RandomPlayer.prototype = {
@@ -482,13 +492,15 @@
$('<div>') $('<div>')
.addClass('block random-player') .addClass('block random-player')
.append(this.$btn) .append(this.$btn)
.insertAfter('#block-userlogin'); .insertAfter('#block-userlogin, #block-studiolinkblock');
// events // events
this.$btn.on('click', this.toggleActive.bind(this)); this.$btn.on('click', this.toggleActive.bind(this));
// attach an event on AudioPlayer // attach an event on AudioPlayer
_audio_player.on('audio-ended', this.onAudioPlayerEnded.bind(this)); _audio_player
.on('audio-ended', this.onAudioPlayerEnded.bind(this))
.on('audio-play-next', this.onAudioPlayNext.bind(this));
}, },
shuffle(){ shuffle(){
var tempPLaylist = []; var tempPLaylist = [];
@@ -504,30 +516,34 @@
}, },
toggleActive(e){ toggleActive(e){
if (this.active) { if (this.active) {
this.$btn.removeClass('is-active');
this.stop(); this.stop();
}else{ }else{
this.$btn.addClass('is-active');
this.shuffle(); this.shuffle();
this.play(); this.start();
} }
}, },
play(){ start(){
this.active = true; this.active = _audio_player.shuffle_is_active = true;
this.next(); this.next();
}, },
stop(){ stop(){
this.active = false; this.active = _audio_player.shuffle_is_active = false;
// stop audio player // stop audio player
_audio_player.stop(); _audio_player.stop();
}, },
next(){ next(){
if(this.shuffledPlaylist.length > 0) if(this.active && this.shuffledPlaylist.length > 0)
_audio_player.openDocument(this.shuffledPlaylist.splice(0,1)[0]); _audio_player.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
}, },
onAudioPlayNext(){
console.log('RandomPlayer : onAudioPlayNext()');
this.next();
},
onAudioPlayerEnded(){ onAudioPlayerEnded(){
console.log('RandomPlayer : onAudioPlayerEnded()'); console.log('RandomPlayer : onAudioPlayerEnded()');
if(this.active){ this.next();
this.next();
}
} }
}; };
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+37 -8
View File
@@ -274,16 +274,26 @@ main[role="main"]{
background-position: center; background-position: center;
background-size: contain; background-size: contain;
} }
.previous{
background-image: url(../img/audio-player-previous.svg);
opacity: 0.3;}
.play-pause{ .play-pause{
background-image: url(../img/audio-player-play.svg); background-image: url(../img/audio-player-play.svg);
padding:0 0.3em;} padding:0 0.3em;
cursor: pointer; cursor: pointer;
}
.previous, .next{
opacity: 0.3;
transition: opacity 0.3s ease-in-out;
cursor: auto;
&.is-active{
opacity: 1;
cursor: pointer;
}
}
.previous{
background-image: url(../img/audio-player-previous.svg);
}
.next{ .next{
background-image: url(../img/audio-player-next.svg); background-image: url(../img/audio-player-next.svg);
opacity: 0.3;} }
} }
.time-line-container{ .time-line-container{
.time-line{ .time-line{
@@ -1038,19 +1048,38 @@ footer{
$wh:$icons_w; $wh:$icons_w;
display: block; display: block;
width:$wh; height:$wh; width:$wh; height:$wh;
background-image: url(../img/studio.svg);
background-size: contain;
text-indent: $wh*2; text-indent: $wh*2;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
mask-image: url(../img/studio.svg);
mask-size: contain;
background-color: #000;
transition: background-color 0.3s ease-in-out;
cursor: pointer;
&.is-active{
background-color: red;
}
} }
} }
.block.random-player{ .block.random-player{
pointer-events: all; pointer-events: all;
margin-left: 0.5em;
a{ a{
background-color: inherit; $wh:$icons_w;
display: block;
width:$wh; height:$wh;
text-indent: $wh*2;
margin: 0;
overflow: hidden;
mask-image: url(../img/random.svg);
mask-size: contain;
background-color: #000;
transition: background-color 0.3s ease-in-out;
cursor: pointer; cursor: pointer;
&.is-active{
background-color: red;
}
} }
} }