some fixes on paysage sonore #2146

src/assets/main.scss

@@ -405,8 +405,8 @@ body{
       
      
     }
-    &.recit-opened section.concernement {
-      padding-bottom: 4rem;
+    &.recit-opened {
+      padding-bottom: 3rem;
     }
   }
 

src/components/RecitPlayer.vue

@@ -14,24 +14,30 @@ export default {
     }
   },
   computed: {
-    ...mapState(ConcernementsStore,['opened_recit', 'recit_player']),
+    ...mapState(ConcernementsStore,['opened_recit', 'recit_plyr_player']),
     // ...mapState(CommonStore,['hover_elmt'])
   },
   mounted() {
     console.log('RecitPlayer mounted', this.$refs);
-    this.setRecitPlayer(this.$refs.plyr_player.player)
+    this.setRecitPlayer(this.$refs.plyr_player.player);
+
+    this.recit_plyr_player.on('ended', ()=>{
+      this.setOpenedRecit(null);
+    })
+
+    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_player.volume > 0) {
-            // console.log(`fading volume:${this.recit_player.volume}`);
-            this.recit_player.volume -= 0.8;
+          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_player.source = {
+            this.recit_plyr_player.source = {
               type: 'audio',
               sources: [
                 {
@@ -40,8 +46,8 @@ export default {
                 }
               ]
             }
-            this.recit_player.volume = 1;
-            this.recit_player.play();
+            this.recit_plyr_player.volume = 1;
+            this.recit_plyr_player.play();
             clearInterval(fadeInterval);
           }
         }, 1);
@@ -51,11 +57,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore, ['setRecitPlayer']),
-    // setPlayer(player){
-    //   console.log('setPlayer', player);
-    //   this.setRecitPlayer(player);
-    // }
+    ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer'])
   },
 
 }
@@ -66,7 +68,7 @@ export default {
     <aside
       id="recit-player">
       <vue-plyr ref="plyr_player" :options="plyr_options">
-          <audio playsinline autoplay>
+          <audio playsinline>
             <source :src="opened_recit.file.url" :type="opened_recit.file.filemime" />
           </audio>
       </vue-plyr>

src/stores/concernements.js

@@ -24,7 +24,7 @@ export const ConcernementsStore = defineStore({
     opened_concernement: false,
     opened_entite_id: null,
     opened_recit: false,
-    recit_player: null,
+    recit_plyr_player: null,
     ct_concernement: {},
     ct_entite: {},
     ct_cercle_politique: {},
@@ -287,9 +287,12 @@ export const ConcernementsStore = defineStore({
         field_index: index
       };
     },
+    setOpenedRecit (recit) {
+      this.opened_recit = recit;
+    },
     setRecitPlayer (player) {
       console.log('concernement store setRecitPlayer', player);
-      this.recit_player = player;
+      this.recit_plyr_player = player;
     }
   }
 })