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