120 lines
3.2 KiB
Vue
120 lines
3.2 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_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 = 1;
|
|
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 = 1;
|
|
this.recit_plyr_player.play();
|
|
}
|
|
}else{
|
|
this.recit_plyr_player.volume = 1;
|
|
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 = 1;
|
|
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> |