bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some fixes on paysage sonore #2146

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-07-12 13:18:37 +02:00
parent 109705d11a
commit 9e523af2ff
3 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/main.scss
View File

@ -405,8 +405,8 @@ body{
} }
&.recit-opened section.concernement { &.recit-opened {
padding-bottom: 4rem; padding-bottom: 3rem;
} }
} }

30
src/components/RecitPlayer.vue
View File

@ -14,24 +14,30 @@ export default {
} }
}, },
computed: { computed: {
...mapState(ConcernementsStore,['opened_recit', 'recit_player']), ...mapState(ConcernementsStore,['opened_recit', 'recit_plyr_player']),
// ...mapState(CommonStore,['hover_elmt']) // ...mapState(CommonStore,['hover_elmt'])
}, },
mounted() { mounted() {
console.log('RecitPlayer mounted', this.$refs); 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: { watch: {
opened_recit: { opened_recit: {
handler (n,o){ handler (n,o){
console.log('recitPlayer watch opened_recit o, n', o, n); console.log('recitPlayer watch opened_recit o, n', o, n);
let fadeInterval = setInterval(()=>{ let fadeInterval = setInterval(()=>{
if (this.recit_player.volume > 0) { if (this.recit_plyr_player.volume > 0) {
// console.log(`fading volume:${this.recit_player.volume}`); // console.log(`fading volume:${this.recit_plyr_player.volume}`);
this.recit_player.volume -= 0.8; this.recit_plyr_player.volume -= 0.8;
}else{ }else{
// console.log(`switching source`); // console.log(`switching source`);
this.recit_player.source = { this.recit_plyr_player.source = {
type: 'audio', type: 'audio',
sources: [ sources: [
{ {
@ -40,8 +46,8 @@ export default {
} }
] ]
} }
this.recit_player.volume = 1; this.recit_plyr_player.volume = 1;
this.recit_player.play(); this.recit_plyr_player.play();
clearInterval(fadeInterval); clearInterval(fadeInterval);
} }
}, 1); }, 1);
@ -51,11 +57,7 @@ export default {
} }
}, },
methods: { methods: {
...mapActions(ConcernementsStore, ['setRecitPlayer']), ...mapActions(ConcernementsStore, ['setOpenedRecit', 'setRecitPlayer'])
// setPlayer(player){
// console.log('setPlayer', player);
// this.setRecitPlayer(player);
// }
}, },
} }
@ -66,7 +68,7 @@ export default {
<aside <aside
id="recit-player"> id="recit-player">
<vue-plyr ref="plyr_player" :options="plyr_options"> <vue-plyr ref="plyr_player" :options="plyr_options">
<audio playsinline autoplay> <audio playsinline>
<source :src="opened_recit.file.url" :type="opened_recit.file.filemime" /> <source :src="opened_recit.file.url" :type="opened_recit.file.filemime" />
</audio> </audio>
</vue-plyr> </vue-plyr>

7
src/stores/concernements.js
View File

@ -24,7 +24,7 @@ export const ConcernementsStore = defineStore({
opened_concernement: false, opened_concernement: false,
opened_entite_id: null, opened_entite_id: null,
opened_recit: false, opened_recit: false,
recit_player: null, recit_plyr_player: null,
ct_concernement: {}, ct_concernement: {},
ct_entite: {}, ct_entite: {},
ct_cercle_politique: {}, ct_cercle_politique: {},
@ -287,9 +287,12 @@ export const ConcernementsStore = defineStore({
field_index: index field_index: index
}; };
}, },
setOpenedRecit (recit) {
this.opened_recit = recit;
},
setRecitPlayer (player) { setRecitPlayer (player) {
console.log('concernement store setRecitPlayer', player); console.log('concernement store setRecitPlayer', player);
this.recit_player = player; this.recit_plyr_player = player;
} }
} }
}) })