75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
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_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> |