diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c72b38518f45e49e94c32a0f5a948c8b2b6bb1a..3cd6dc311a7f894c8c6b1173c743bb32cfba818a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ - Pause playing animation [#115](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/115) @onny +### Fixed +- Player: Display correct position while seeking + [#124](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/124) @onny + ### Changed - Use mappers for store [#112](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/112) @onny diff --git a/src/components/Player.vue b/src/components/Player.vue index 41e521a70adc5d804e149ca3d4c8c21ba287956c..07b8f8067cfec929c19b20fa8818a9fb1aa9c2dc 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -32,10 +32,17 @@ :max="getDuration" step=".5" :value="currentSeek" - @input="changeSeek($event.target.value)" - @change="getSeekLocked = false && seekEpisode($event.target.value)"> + @input="changeTempSeek($event.target.value)" + @change="seekLocked = false; seekEpisode($event.target.value)"> + <div class="playbackInfo"> + <span>{{ seekHHMMSS }}</span> + <span>{{ durationHHMMSS }}</span> + </div> <span class="playerTitle">{{ getTitle }}</span> <div class="playerControls"> + <div + class="seekButton seekPrev" + @click="seekEpisode(currentSeek - 10)" /> <div class="wrap" :class="{ buffering: isBuffering }"> @@ -44,6 +51,9 @@ :class="isPlaying ? 'pause' : 'play'" @click="togglePlay" /> </div> + <div + class="seekButton seekNext" + @click="seekEpisode(currentSeek + 10)" /> </div> <div class="volumeControls"> <div @@ -58,7 +68,8 @@ max="1" step=".05" :value="getVolume" - @input="setVolume($event.target.value)"> + @input="setVolume($event)" + @change="saveVolume($event)"> </div> </div> </template> @@ -68,8 +79,8 @@ import { mapGetters, mapActions } from 'vuex' export default { data: () => ({ - getSeekLocked: false, - tempSeek: null, + tmpSeek: null, + seekLocked: false, }), computed: { ...mapGetters([ @@ -82,8 +93,8 @@ export default { 'isPlaying', ]), currentSeek() { - if (this.getSeekLocked) { - return this.tempSeek + if (this.seekLocked) { + return this.tmpSeek } else { return this.getSeek } @@ -100,13 +111,15 @@ export default { methods: { ...mapActions([ 'setVolume', + 'saveVolume', + 'seekEpisode', 'toggleMute', 'togglePlay', 'setSeek', ]), - changeSeek(value) { - this.getSeekLocked = true - this.tempSeek = value + changeTempSeek(value) { + this.seekLocked = true + this.tmpSeek = value }, }, } diff --git a/src/services/Player.js b/src/services/Player.js index 2d566de07fa1210df39acc16cc4761558db4bcfe..458f692614bcfb696f3b1e3bc162142df3a1908e 100644 --- a/src/services/Player.js +++ b/src/services/Player.js @@ -30,6 +30,8 @@ export class Player { doPlay(src) { + console.log('start playing') + if (audioPlayer !== null) { audioPlayer.fade(store.state.player.volume, 0, 500) Howler.unload() diff --git a/src/store/player.js b/src/store/player.js index b6d7a31f162b39b12b0ffec5aea25b206b752a35..fc2aa0366de1717adc0d8afa6b80026b7354423b 100644 --- a/src/store/player.js +++ b/src/store/player.js @@ -97,6 +97,11 @@ export default { seek = Math.round(seek) state.seek = seek }, + seekEpisode(state, seek) { + player.seek(seek) + seek = Math.round(seek) + state.seek = seek + }, setPlaying(state, playerState) { state.isPlaying = playerState }, @@ -149,7 +154,6 @@ export default { }, setSeek(context, startTime) { - player.seek(startTime) context.commit('setSeek', startTime) }, @@ -173,5 +177,9 @@ export default { setDuration(context, duration) { context.commit('setDuration', duration) }, + + seekEpisode(context, startTime) { + context.commit('seekEpisode', startTime) + }, }, }