From 9d0d8b0f877d4ee188bf8a59b28af7776c5fc385 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Wed, 3 Feb 2021 16:30:53 +0100
Subject: [PATCH] fix player display correct positon while seeking
---
CHANGELOG.md | 4 ++++
src/components/Player.vue | 33 +++++++++++++++++++++++----------
src/services/Player.js | 2 ++
src/store/player.js | 10 +++++++++-
4 files changed, 38 insertions(+), 11 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c72b38..3cd6dc3 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 41e521a..07b8f80 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 2d566de..458f692 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 b6d7a31..fc2aa03 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)
+ },
},
}
--
GitLab