paysage sonor done #2146

src/App.vue

@@ -22,9 +22,9 @@ export default {
   },
   computed: {
     ...mapState(UserStore,['isloggedin']),
-    ...mapState(ConcernementsStore,['concernements']),
+    ...mapState(ConcernementsStore,['concernements',
-    ...mapState(ConcernementsStore,['concernementsByID']),
+                                    'concernementsByID',
-    ...mapState(ConcernementsStore,['opened'])
+                                    'opened_recit'])
   },
   methods: {
     ...mapActions(ConcernementsStore,['loadConcernements']),
@@ -63,7 +63,7 @@ export default {
         />
       </template>
     </MapConcernements>
-    <div id="content">
+    <div id="content" :class="{'recit-opened':opened_recit}">
       <RouterView />
     </div>
   </div>

src/assets/layout.scss

@@ -97,5 +97,12 @@ html,body{
     padding: 0.5rem;
   }
 
+  #recit-player{
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0; right: 0;
+    padding: 0.5rem;
+    z-index: 100;
+  }
 }
 

src/assets/main.scss

@@ -404,6 +404,25 @@ body{
 
       
      
+    }
+    &.recit-opened section.concernement {
+      padding-bottom: 4rem;
+    }
+  }
+
+  #recit-player{
+    --plyr-color-main: #01ffe2;
+    --plyr-control-icon-size: 14px;
+    --plyr-audio-controls-background: rgba(255,255,255,0.4);
+    --plyr-control-spacing: 4px;
+    --plyr-range-track-height: 2px;
+    // --plyr-control-radius: 10px;
+    >div.plyr{
+      width:450px;
+      >div.plyr__controls{
+        border-radius: 3px;
+        // border: #fff 1px solid;
+      }
     }
   }
 

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,['map_mode',
-    ...mapState(ConcernementsStore,['concernements']),
+                                    'concernements',
-    ...mapState(ConcernementsStore,['concernementsByID']),
+                                    'concernementsByID',
-    ...mapState(ConcernementsStore,['opened_concernement']),
+                                    '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>

src/stores/concernements.js

@@ -23,6 +23,8 @@ export const ConcernementsStore = defineStore({
     allBesoinsById: {},
     opened_concernement: false,
     opened_entite_id: null,
+    opened_recit: false,
+    recit_player: null,
     ct_concernement: {},
     ct_entite: {},
     ct_cercle_politique: {},
@@ -235,6 +237,9 @@ export const ConcernementsStore = defineStore({
         c.opened = this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
         if (state) {
           this.opened_concernement = c;
+          if (c.has_recit) {
+            this.opened_recit = c.recit;
+          }
           // console.log('openCloseConcernements', this.opened_concernement.opened);
         }
       });
@@ -281,6 +286,10 @@ export const ConcernementsStore = defineStore({
         field: field,
         field_index: index
       };
+    },
+    setRecitPlayer (player) {
+      console.log('concernement store setRecitPlayer', player);
+      this.recit_player = player;
     }
   }
 })

src/views/Concernement.vue

@@ -103,7 +103,6 @@ export default {
     <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'" :id="id" :eid="eid" :entite="entite"/>
     <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
     <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>    
-    
   </section>
 </template>