fixed recit player transition #2183

src/assets/main.scss

@@ -443,6 +443,9 @@ body{
         // border: #fff 1px solid;
       }
     }
+    &:not(.visible){
+      display: none;
+    }
   }
 
   #map-popup{

src/components/ConcernementMapItem.vue

@@ -181,7 +181,8 @@ export default {
     ...mapActions(ConcernementsStore,['openCloseConcernements',
                                       'hideShowConcernement',
                                       'setBesoinPaperId',
-                                      'setOpenedDoleanceField']),
+                                      'setOpenedDoleanceField',
+                                      'setOpenedRecit']),
     
     // getResponsiveRay(){
     //   return Math.min(this.canvas.width, this.canvas.height) * 0.08;
@@ -1356,6 +1357,8 @@ export default {
 
         this.handlePaperVisibilityOnBeforeClose();
 
+        // this.setOpenedRecit(null);
+
         this.tween = new Tween.Tween({s: this.scale, o: 1})
           .to({s: 1, o: 0}, 500)
           .onUpdate((obj) => {

src/components/MapConcernements.vue

@@ -1058,7 +1058,7 @@ export default {
       </li>
     </ul>
   </nav>
-  <RecitPlayer v-if="opened_recit" />
+  <RecitPlayer />
   <ConcernementMapPopup
     v-if="hover_elmt && hover_elmt.type !== 'doleance_step' && !hover_elmt.no_popup"
     :infos="hover_elmt"

src/components/RecitPlayer.vue

@@ -18,46 +18,83 @@ export default {
     // ...mapState(CommonStore,['hover_elmt'])
   },
   mounted() {
-    console.log('RecitPlayer mounted', this.$refs);
+    console.log('RecitPlayer mounted', this.$refs, this.opened_recit);
     this.setRecitPlayer(this.$refs.plyr_player.player);
 
     this.recit_plyr_player.on('ended', ()=>{
       this.setOpenedRecit(null);
     })
 
-    this.recit_plyr_player.play();
+    this.recit_plyr_player.volume = 1;
+    if (this.opened_recit) {
+      this.recit_plyr_player.play();
+    }
   },
   watch: {
     opened_recit: {
       handler (n,o){
         console.log('recitPlayer watch opened_recit o, n', o, n);
-        let fadeInterval = setInterval(()=>{
-          if (this.recit_plyr_player.volume > 0) {
-            // console.log(`fading volume:${this.recit_plyr_player.volume}`);
-            this.recit_plyr_player.volume -= 0.8;
-          }else{
-            // console.log(`switching source`);
-            this.recit_plyr_player.source = {
-              type: 'audio',
-              sources: [
-                {
-                  src: n.file.url,
-                  type: n.file.filemine,
+        if(o){
+          let fadeInterval = setInterval(()=>{
+            if (this.recit_plyr_player.volume > 0.05) {
+              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 = 1;
+                  this.recit_plyr_player.play();
                 }
-              ]
+              }else{
+                this.recit_plyr_player.volume = 1;
+                this.recit_plyr_player.stop();
+              }
+              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 = 1;
+              this.recit_plyr_player.play();
             }
-            this.recit_plyr_player.volume = 1;
-            this.recit_plyr_player.play();
-            clearInterval(fadeInterval);
           }
-        }, 1);
+        }
         
       },
       deep: true
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer'])
+    ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer']),
+    //
+    // onLeave(el, done){
+    //   console.log('onLeave', el, done);
+    //   setTimeout(() => {
+    //     console.log('onLeave timeout done', done);
+    //     done();
+    //   }, 5000);
+    // }
   },
 
 }
@@ -65,13 +102,19 @@ export default {
 
 
 <template>
+  <!-- <Transition
+    @leave="onLeave"
+    > -->
     <aside
+      :class="{visible: opened_recit}"
       id="recit-player">
       <vue-plyr ref="plyr_player" :options="plyr_options">
           <audio playsinline>
-            <source :src="opened_recit.file.url" :type="opened_recit.file.filemime" />
+            <source v-if="opened_recit" :src="opened_recit.file.url" :type="opened_recit.file.filemime" />
           </audio>
       </vue-plyr>
     </aside>
+  <!-- </Transition> -->
+    
 
 </template>

src/stores/concernements.js

@@ -238,6 +238,8 @@ export const ConcernementsStore = defineStore({
     openCloseConcernements (id) {
       console.log(`openCloseConcernements id: ${id}`);
       var state;
+      this.opened_concernement = null;
+      this.opened_recit = null;
       this.concernements.forEach((c, i) => {
         state = id === c.id;
         // console.log(`openCloseConcernements foreach id: ${id}, c.id: ${c.id}, state: ${state}`, id, c.id);