ouatterrir-app/src/components/RecitPlayer.vue

<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']
      },
      fadeOutInterval: null
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened_recit', 'recit_plyr_player']),
    // ...mapState(CommonStore,['hover_elmt'])
  },
  mounted() {
    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.volume = 0.6;
    if (this.opened_recit) {
      if (!this.fadeOutInterval) {
        this.recit_plyr_player.play();
      }
    }
  },
  watch: {
    opened_recit: {
      handler (n,o){
        console.log('recitPlayer watch opened_recit o, n', o, n);
        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}`);
            this.recit_plyr_player.volume *= 0.9;
          }else{
            console.log('fadeout done');
            this.recit_plyr_player.volume = 0.6;
            this.recit_plyr_player.stop();
            clearInterval(this.fadeOutInterval);
            this.fadeOutInterval = null;
            
            // if during the the fadeout we opened an other recit, play it
            if (this.opened_recit) {  
              console.log('recitPlayer fade done, this.opened_recit', this.opened_recit);
              this.recit_plyr_player.source = {
                type: 'audio',
                sources: [
                  {
                    src: this.opened_recit.file.url,
                    type: this.opened_recit.file.filemine,
                  }
                ]
              }
              this.recit_plyr_player.volume = 0.6;
              this.recit_plyr_player.play();  
            }
          }
        }, 1);
      } 
      console.log('recitPlayer new n', n, this.fadeOutInterval);
      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();
        }
      }
    }
  },

}
</script>


<template>
  <!-- <Transition
    @leave="onLeave"
    > -->
    <aside
      :class="{visible: opened_recit}"
      id="recit-player">
      <vue-plyr ref="plyr_player" :options="plyr_options">
          <audio playsinline>
            <source v-if="opened_recit" :src="opened_recit.file.url" :type="opened_recit.file.filemime" />
          </audio>
      </vue-plyr>
    </aside>
  <!-- </Transition> -->
    

</template>