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']
      }
    }
  },
  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) {
      this.recit_plyr_player.play();
    }
  },
  watch: {
    opened_recit: {
      handler (n,o){
        console.log('recitPlayer watch opened_recit o, n', o, n);
        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 = 0.6;
                  this.recit_plyr_player.play();
                }
              }else{
                this.recit_plyr_player.volume = 0.6;
                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 = 0.6;
              this.recit_plyr_player.play();
            }
          }
        }
        
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer']),
    //
    // onLeave(el, done){
    //   console.log('onLeave', el, done);
    //   setTimeout(() => {
    //     console.log('onLeave timeout done', done);
    //     done();
    //   }, 5000);
    // }
  },

}
</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>