random player ready

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -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();
         });

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -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();
         });

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.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 = $('<a>').html('&#x1f500;').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();
       }
     };
 

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; }
+      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; }
+    pointer-events: all;
+    margin-left: 0.5em; }
     footer .block.random-player a {
-      background-color: inherit;
+      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;

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 = $('<a>').html('&#x1f500;').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();
       }
     };
 

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;
+      }
     }
   }