fixed sync between audio player, map, audio-links

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

@@ -39,6 +39,7 @@
     var _no_articles_nodes = [];
     var _nodes_by_entries = {};
     var _nodes_by_nid = {};
+    var _nodes_Nid_Id = {};
     var _nodes_centered = [];
     var _nodes_centered_attractions = [];
 
@@ -216,6 +217,7 @@
       _nodes.push(this);
 
       _nodes_by_nid[this.nid] = this;
+      _nodes_Nid_Id[this.nid] = this.id;
 
       if(this.has_article == 1){
         _articles_nodes.push(this);
@@ -590,11 +592,13 @@
       }
     };
     // show opened audio node
-    function openNode(id){
+    function openNodeByNid(nid){
+      console.log('Corpus openNode()', nid);
       closeNode();
-      if(typeof _nodes[id] !== 'undefined'){
-        _node_opened_id = id;
-        _nodes[id].open();
+      if(typeof _nodes_Nid_Id[nid] != 'undefined'){
+        console.log('node exists');
+        _node_opened_id = _nodes_Nid_Id[nid];
+        _nodes[_nodes_Nid_Id[nid]].open();
       }
     }
     function closeNode(){
@@ -802,7 +806,8 @@
           }
         })
         .on('audio-node-opened', function(e){
-          openNode(e.id);
+          console.log('Corpus audio-node-opened', e);
+          openNodeByNid(e.nid);
         })
         .on('audio-node-closed', function(e){
           closeNode();

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

@@ -39,6 +39,7 @@
     var _no_articles_nodes = [];
     var _nodes_by_entries = {};
     var _nodes_by_nid = {};
+    var _nodes_Nid_Id = {};
     var _nodes_centered = [];
     var _nodes_centered_attractions = [];
 
@@ -216,6 +217,7 @@
       _nodes.push(this);
 
       _nodes_by_nid[this.nid] = this;
+      _nodes_Nid_Id[this.nid] = this.id;
 
       if(this.has_article == 1){
         _articles_nodes.push(this);
@@ -590,11 +592,13 @@
       }
     };
     // show opened audio node
-    function openNode(id){
+    function openNodeByNid(nid){
+      console.log('Corpus openNode()', nid);
       closeNode();
-      if(typeof _nodes[id] !== 'undefined'){
-        _node_opened_id = id;
-        _nodes[id].open();
+      if(typeof _nodes_Nid_Id[nid] != 'undefined'){
+        console.log('node exists');
+        _node_opened_id = _nodes_Nid_Id[nid];
+        _nodes[_nodes_Nid_Id[nid]].open();
       }
     }
     function closeNode(){
@@ -802,7 +806,8 @@
           }
         })
         .on('audio-node-opened', function(e){
-          openNode(e.id);
+          console.log('Corpus audio-node-opened', e);
+          openNodeByNid(e.nid);
         })
         .on('audio-node-closed', function(e){
           closeNode();

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -106,7 +106,8 @@
       // object events
       this.event_handlers = {
         'audio-play-next':[],
-        'audio-ended':[]
+        'audio-ended':[],
+        'stop-shuffle':[]
       };
 
       this.init();
@@ -147,7 +148,7 @@
         // 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
+          'nid':this.historic[this.currentHistoricIndex].nid
         });
         this.showHidePreviousBtn();
         this.showHideNextBtn();
@@ -239,7 +240,7 @@
           .fail(this.onNodeLoadFail.bind(this));
       },
       onNodeLoaded(data){
-        console.log('AudioPlayer node loaded', data);
+        console.log('AudioPlayer node loaded');
         this.$cartel.html(data.rendered).removeClass('loading');
         _$body.trigger({'type':'new-audio-cartel-loaded'});
         initAjaxLinks();
@@ -294,6 +295,7 @@
           handler = this.event_handlers[event_name][i];
           setTimeout(handler, 0);
         }
+        return this;
       },
     }
 
@@ -352,10 +354,13 @@
 
       // Audio links
       if($link.is('.audio-link')){
-        _audio_player.openDocument({
-          nid:$link.attr('nid'),
-          audio_url:$link.attr('audio_url')
-        });
+        // TODO: stop randomplayer
+        _audio_player
+          .emmit('stop-shuffle')
+          .openDocument({
+            nid:$link.attr('nid'),
+            audio_url:$link.attr('audio_url')
+          });
         return false;
       }
 
@@ -506,7 +511,9 @@
         })
         .on('corpus-cliked-on-node', function(e) {
           console.log('theme : corpus-cliked-on-node', e);
-          _audio_player.openDocument(e.target_node);
+          _audio_player
+            .emmit('stop-shuffle')
+            .openDocument(e.target_node);
         });
 
       _randomPlayer = new RandomPlayer(e.playlist);
@@ -539,7 +546,8 @@
         // attach an event on AudioPlayer
         _audio_player
           .on('audio-ended', this.onAudioPlayerEnded.bind(this))
-          .on('audio-play-next', this.onAudioPlayNext.bind(this));
+          .on('audio-play-next', this.onAudioPlayNext.bind(this))
+          .on('stop-shuffle', this.stop.bind(this));
       },
       shuffle(){
         var tempPLaylist = [];
@@ -555,20 +563,20 @@
       },
       toggleActive(e){
         if (this.active) {
-          this.$btn.removeClass('is-active');
           this.stop();
         }else{
-          this.$btn.addClass('is-active');
-          this.shuffle();
           this.start();
         }
       },
       start(){
         this.active = _audio_player.shuffle_is_active = true;
+        this.$btn.addClass('is-active');
+        this.shuffle();
         this.next();
       },
       stop(){
         this.active = _audio_player.shuffle_is_active = false;
+        this.$btn.removeClass('is-active');
         // stop audio player
         _audio_player.stop();
       },

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -106,7 +106,8 @@
       // object events
       this.event_handlers = {
         'audio-play-next':[],
-        'audio-ended':[]
+        'audio-ended':[],
+        'stop-shuffle':[]
       };
 
       this.init();
@@ -147,7 +148,7 @@
         // 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
+          'nid':this.historic[this.currentHistoricIndex].nid
         });
         this.showHidePreviousBtn();
         this.showHideNextBtn();
@@ -239,7 +240,7 @@
           .fail(this.onNodeLoadFail.bind(this));
       },
       onNodeLoaded(data){
-        console.log('AudioPlayer node loaded', data);
+        console.log('AudioPlayer node loaded');
         this.$cartel.html(data.rendered).removeClass('loading');
         _$body.trigger({'type':'new-audio-cartel-loaded'});
         initAjaxLinks();
@@ -294,6 +295,7 @@
           handler = this.event_handlers[event_name][i];
           setTimeout(handler, 0);
         }
+        return this;
       },
     }
 
@@ -352,10 +354,13 @@
 
       // Audio links
       if($link.is('.audio-link')){
-        _audio_player.openDocument({
-          nid:$link.attr('nid'),
-          audio_url:$link.attr('audio_url')
-        });
+        // TODO: stop randomplayer
+        _audio_player
+          .emmit('stop-shuffle')
+          .openDocument({
+            nid:$link.attr('nid'),
+            audio_url:$link.attr('audio_url')
+          });
         return false;
       }
 
@@ -506,7 +511,9 @@
         })
         .on('corpus-cliked-on-node', function(e) {
           console.log('theme : corpus-cliked-on-node', e);
-          _audio_player.openDocument(e.target_node);
+          _audio_player
+            .emmit('stop-shuffle')
+            .openDocument(e.target_node);
         });
 
       _randomPlayer = new RandomPlayer(e.playlist);
@@ -539,7 +546,8 @@
         // attach an event on AudioPlayer
         _audio_player
           .on('audio-ended', this.onAudioPlayerEnded.bind(this))
-          .on('audio-play-next', this.onAudioPlayNext.bind(this));
+          .on('audio-play-next', this.onAudioPlayNext.bind(this))
+          .on('stop-shuffle', this.stop.bind(this));
       },
       shuffle(){
         var tempPLaylist = [];
@@ -555,20 +563,20 @@
       },
       toggleActive(e){
         if (this.active) {
-          this.$btn.removeClass('is-active');
           this.stop();
         }else{
-          this.$btn.addClass('is-active');
-          this.shuffle();
           this.start();
         }
       },
       start(){
         this.active = _audio_player.shuffle_is_active = true;
+        this.$btn.addClass('is-active');
+        this.shuffle();
         this.next();
       },
       stop(){
         this.active = _audio_player.shuffle_is_active = false;
+        this.$btn.removeClass('is-active');
         // stop audio player
         _audio_player.stop();
       },