')
.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();
}
};
diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
index cc6586b50..ccff9fb4f 100644
--- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
+++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
@@ -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;
diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
index 5fd43076a..5ca3f83e2 100644
--- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js
+++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
@@ -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 = $('
').html('🔀').addClass('random-player-btn');
+ this.$btn = $('').html('Shuffle').addClass('random-player-btn');
this.init()
};
RandomPlayer.prototype = {
@@ -482,13 +492,15 @@
$('')
.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();
}
};
diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
index 1fdbfc173..69f4a36a9 100644
--- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss
+++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
@@ -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;
+ }
}
}