recit player fadeout bug fix #2240

src/components/MapConcernements.vue

@@ -106,7 +106,7 @@ export default {
 
     // use the paper.view mousemouve to removed mappopup
     this.paper.view.onMouseMove = function(event) {
-      console.log("view onMouseMove", event.target);
+      // console.log("view onMouseMove", event.target);
       if(event.target._id === "paper-view-0") {
         this.setHoverElmt(null);
       }

src/components/RecitPlayer.vue

@@ -10,7 +10,8 @@ export default {
     return {
       plyr_options: {
         controls: ['play', 'progress', 'current-time', 'mute', 'volume']
-      }
+      },
+      fadeOutInterval: null
     }
   },
   computed: {
@@ -27,75 +28,70 @@ export default {
 
     this.recit_plyr_player.volume = 0.6;
     if (this.opened_recit) {
-      this.recit_plyr_player.play();
+      if (!this.fadeOutInterval) {
+        this.recit_plyr_player.play();
+      }
     }
   },
   watch: {
     opened_recit: {
       handler (n,o){
         console.log('recitPlayer watch opened_recit o, n', o, n);
-        if(o){
-          let fadeInterval = setInterval(()=>{
+        this.recitTransition(n,o);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer']),
+    recitTransition(n, o){
+      
+      
+      if(o){
+          this.fadeOutInterval = setInterval(()=>{
             if (this.recit_plyr_player.volume > 0.05) {
-              console.log(`recitPlayer fading volume:${this.recit_plyr_player.volume}`);
+              // console.log(`recitPlayer fading volume:${this.recit_plyr_player.volume}`);
               this.recit_plyr_player.volume *= 0.9;
             }else{
-              if(n){
-                if(n.file.url){
-                  // console.log(`switching source`);
-                  this.recit_plyr_player.source = {
-                    type: 'audio',
-                    sources: [
-                      {
-                        src: n.file.url,
-                        type: n.file.filemine,
-                      }
-                    ]
-                  }
-                  this.recit_plyr_player.volume = 0.6;
-                  this.recit_plyr_player.play();
+              this.recit_plyr_player.volume = 0.6;
+              this.recit_plyr_player.stop();
+              clearInterval(this.fadeOutInterval);
+                
+              // if during the the fadeout we opened an other recit, play it
+              if (this.opened_recit) {  
+                this.recit_plyr_player.source = {
+                  type: 'audio',
+                  sources: [
+                    {
+                      src: this.opened_recit.file.url,
+                      type: this.opened_recit.file.filemine,
+                    }
+                  ]
                 }
-              }else{
                 this.recit_plyr_player.volume = 0.6;
-                this.recit_plyr_player.stop();
+                this.recit_plyr_player.play();  
               }
-              clearInterval(fadeInterval);
             }
           }, 1);
-        } else {
-          if (n) {
-            if(n.file.url){
-              // console.log(`switching source`);
-              this.recit_plyr_player.source = {
-                type: 'audio',
-                sources: [
-                  {
-                    src: n.file.url,
-                    type: n.file.filemine,
-                  }
-                ]
-              }
-              this.recit_plyr_player.volume = 0.6;
-              this.recit_plyr_player.play();
+        } 
+        if (n && !this.fadeOutInterval) { // if new and we are not in in a fadeout
+          if(n.file.url){
+            // console.log(`switching source`);
+            this.recit_plyr_player.source = {
+              type: 'audio',
+              sources: [
+                {
+                  src: n.file.url,
+                  type: n.file.filemine,
+                }
+              ]
             }
+            this.recit_plyr_player.volume = 0.6;
+            this.recit_plyr_player.play();
           }
         }
-        
-      },
-      deep: true
     }
   },
-  methods: {
-    ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer']),
-    //
-    // onLeave(el, done){
-    //   console.log('onLeave', el, done);
-    //   setTimeout(() => {
-    //     console.log('onLeave timeout done', done);
-    //     done();
-    //   }, 5000);
-    // }
-  },
 
 }
 </script>