paysage sonor done #2146

src/components/MapConcernements.vue

@@ -17,6 +17,7 @@ import { ConcernementsStore } from '@/stores/concernements'
 import { CommonStore } from '@/stores/common'
 
 import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';
+import RecitPlayer from '@components/RecitPlayer.vue';
 
 // import iconTerraindevie from "@/assets/icons/terraindevie.svg"
 // import iconProximite from "@/assets/icons/proximite.svg"
@@ -52,10 +53,12 @@ export default {
     }
   },
   computed: {
-    ...mapState(ConcernementsStore,['map_mode']),
-    ...mapState(ConcernementsStore,['concernements']),
-    ...mapState(ConcernementsStore,['concernementsByID']),
-    ...mapState(ConcernementsStore,['opened_concernement']),
+    ...mapState(ConcernementsStore,['map_mode',
+                                    'concernements',
+                                    'concernementsByID',
+                                    'opened_concernement',
+                                    'opened_recit'
+                                  ]),
     ...mapState(CommonStore,['map_item_ray']),
     ...mapState(CommonStore,['hover_elmt']),
     ...mapState(CommonStore,['paper_symbol_definitions'])
@@ -952,7 +955,8 @@ export default {
   },
   components: {
     MapBackground,
-    ConcernementMapPopup
+    ConcernementMapPopup,
+    RecitPlayer
   }
 }
 
@@ -1020,10 +1024,12 @@ export default {
       </li>
     </ul>
   </nav>
+  <RecitPlayer v-if="opened_recit" />
   <ConcernementMapPopup
     v-if="hover_elmt && hover_elmt.type !== 'doleance_step' && !hover_elmt.no_popup"
     :infos="hover_elmt"
-  />  
+  />
+
 </template>
 
 <style lang="css" scoped>

src/components/RecitPlayer.vue

@@ -0,0 +1,75 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { CommonStore } from '@/stores/common'
+
+export default {
+  props: [],
+  data() {
+    return {
+      plyr_options: {
+        controls: ['play', 'progress', 'current-time', 'mute', 'volume']
+      }
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_recit', 'recit_player']),
+    // ...mapState(CommonStore,['hover_elmt'])
+  },
+  mounted() {
+    console.log('RecitPlayer mounted', this.$refs);
+    this.setRecitPlayer(this.$refs.plyr_player.player)
+  },
+  watch: {
+    opened_recit: {
+      handler (n,o){
+        console.log('recitPlayer watch opened_recit o, n', o, n);
+        let fadeInterval = setInterval(()=>{
+          if (this.recit_player.volume > 0) {
+            // console.log(`fading volume:${this.recit_player.volume}`);
+            this.recit_player.volume -= 0.8;
+          }else{
+            // console.log(`switching source`);
+            this.recit_player.source = {
+              type: 'audio',
+              sources: [
+                {
+                  src: n.file.url,
+                  type: n.file.filemine,
+                }
+              ]
+            }
+            this.recit_player.volume = 1;
+            this.recit_player.play();
+            clearInterval(fadeInterval);
+          }
+        }, 1);
+        
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...mapActions(ConcernementsStore, ['setRecitPlayer']),
+    // setPlayer(player){
+    //   console.log('setPlayer', player);
+    //   this.setRecitPlayer(player);
+    // }
+  },
+
+}
+</script>
+
+
+<template>
+    <aside
+      id="recit-player">
+      <vue-plyr ref="plyr_player" :options="plyr_options">
+          <audio playsinline autoplay>
+            <source :src="opened_recit.file.url" :type="opened_recit.file.filemime" />
+          </audio>
+      </vue-plyr>
+    </aside>
+
+</template>