diff --git a/src/assets/main.scss b/src/assets/main.scss index 5f22e22..2c7796c 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -405,8 +405,8 @@ body{ } - &.recit-opened section.concernement { - padding-bottom: 4rem; + &.recit-opened { + padding-bottom: 3rem; } } diff --git a/src/components/RecitPlayer.vue b/src/components/RecitPlayer.vue index 4915e7c..fa05aa3 100644 --- a/src/components/RecitPlayer.vue +++ b/src/components/RecitPlayer.vue @@ -14,24 +14,30 @@ export default { } }, computed: { - ...mapState(ConcernementsStore,['opened_recit', 'recit_player']), + ...mapState(ConcernementsStore,['opened_recit', 'recit_plyr_player']), // ...mapState(CommonStore,['hover_elmt']) }, mounted() { console.log('RecitPlayer mounted', this.$refs); - this.setRecitPlayer(this.$refs.plyr_player.player) + this.setRecitPlayer(this.$refs.plyr_player.player); + + this.recit_plyr_player.on('ended', ()=>{ + this.setOpenedRecit(null); + }) + + this.recit_plyr_player.play(); }, 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; + if (this.recit_plyr_player.volume > 0) { + // console.log(`fading volume:${this.recit_plyr_player.volume}`); + this.recit_plyr_player.volume -= 0.8; }else{ // console.log(`switching source`); - this.recit_player.source = { + this.recit_plyr_player.source = { type: 'audio', sources: [ { @@ -40,8 +46,8 @@ export default { } ] } - this.recit_player.volume = 1; - this.recit_player.play(); + this.recit_plyr_player.volume = 1; + this.recit_plyr_player.play(); clearInterval(fadeInterval); } }, 1); @@ -51,11 +57,7 @@ export default { } }, methods: { - ...mapActions(ConcernementsStore, ['setRecitPlayer']), - // setPlayer(player){ - // console.log('setPlayer', player); - // this.setRecitPlayer(player); - // } + ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer']) }, } @@ -66,7 +68,7 @@ export default {