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