From bd6d8e4eb68ab970412fcb419f7198a190e65ee1 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 10 Jan 2021 15:55:37 +0100
Subject: [PATCH] further work on play, pause and resume player
---
src/components/Table.vue | 14 +++++++++-
src/services/Player.js | 10 ++++++-
src/store/player.js | 57 +++++++++++++++++++++-------------------
src/views/Episode.vue | 19 ++++++++++++--
src/views/Show.vue | 10 ++++++-
5 files changed, 78 insertions(+), 32 deletions(-)
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 80730fa..5315b10 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -80,7 +80,7 @@
:icon="isPlaying(episode.id) ? 'icon-pause' : 'icon-play'"
:close-after-click="true"
@click="doPlay(episode)">
- {{ t('podcast', 'Play') }}
+ {{ playButtonText(episode.id) }}
</ActionButton>
<ActionButton
icon="icon-info"
@@ -142,9 +142,21 @@ export default {
},
},
methods: {
+ playButtonText(episodeId) {
+ if (this.isPlaying(episodeId)) {
+ return t('podcast', 'Pause')
+ } else if (this.isPaused(episodeId)) {
+ return t('podcast', 'Resume')
+ } else {
+ return t('podcast', 'Play')
+ }
+ },
isPlaying(episodeId) {
return this.$store.getters.isPlaying(episodeId)
},
+ isPaused(episodeId) {
+ return this.$store.getters.isPaused(episodeId)
+ },
escapedEpisodeDescription(episodeDescription) {
episodeDescription = episodeDescription.replace(/\n/g, '')
return episodeDescription
diff --git a/src/services/Player.js b/src/services/Player.js
index d52ce50..f0fa1f9 100644
--- a/src/services/Player.js
+++ b/src/services/Player.js
@@ -44,7 +44,7 @@ export class Player {
},
onpause() {
store.dispatch('setPlaying', false)
- store.dispatch('isBuffering', false)
+ store.dispatch('setBuffering', false)
},
onend() {
showError(t('podcast', 'Lost connection to podcast station, retrying ...'))
@@ -58,4 +58,12 @@ export class Player {
}
+ doPause() {
+ audioPlayer.pause()
+ }
+
+ doResume() {
+ audioPlayer.play()
+ }
+
}
diff --git a/src/store/player.js b/src/store/player.js
index ade841b..7869712 100644
--- a/src/store/player.js
+++ b/src/store/player.js
@@ -47,16 +47,13 @@ export default {
return state.image
},
isPlaying: state => (id) => {
- return state.episodeId === id
+ return (state.episodeId === id && state.isPlaying)
+ },
+ isPaused: state => (id) => {
+ return (state.episodeId === id && state.isPaused)
},
},
mutations: {
- isPlaying(state, playerState) {
- state.isPlaying = playerState
- },
- isBuffering(state, bufferingState) {
- state.isBuffering = bufferingState
- },
changeVolume(state, volume) {
state.volume = volume
},
@@ -70,15 +67,6 @@ export default {
state.isMute = true
}
},
- togglePlay(state) {
- if (state.isPlaying) {
- state.isPlaying = false
- state.isPaused = true
- } else {
- state.isPlaying = true
- state.isPaused = false
- }
- },
setTitle(state, title) {
state.title = title
},
@@ -99,6 +87,12 @@ export default {
state.volume = value
})
},
+ setPlaying(state, playerState) {
+ state.isPlaying = playerState
+ },
+ setPausing(state, pauseState) {
+ state.isPaused = pauseState
+ },
setBuffering(state, bufferingState) {
state.isBuffering = bufferingState
},
@@ -111,10 +105,10 @@ export default {
},
actions: {
setPlaying(context, playerState) {
- context.commit('isPlaying', playerState)
+ context.commit('setPlaying', playerState)
},
setBuffering(context, bufferingState) {
- context.commit('isBuffering', bufferingState)
+ context.commit('setBuffering', bufferingState)
},
setVolume(context, volume) {
context.commit('changeVolume', volume)
@@ -122,9 +116,6 @@ export default {
toggleMute(context) {
context.commit('toggleMute')
},
- togglePlay(context) {
- context.commit('togglePlay')
- },
setVolumeState(context, volumeState) {
context.commit('setVolumeState', volumeState)
},
@@ -132,12 +123,24 @@ export default {
context.commit('getVolumeState')
},
playEpisode(context, episode) {
- console.log(episode)
- context.commit('setBuffering', true)
- context.commit('setTitle', episode.title)
- context.commit('setImage', episode.imgURL)
- context.commit('setEpisodeId', episode.id)
- player.doPlay(episode.enclosure)
+ if (context.state.isPaused && episode.id === context.state.episodeId) {
+ context.commit('setPausing', false)
+ context.commit('setBuffering', true)
+ player.doResume()
+ } else {
+ context.commit('setBuffering', true)
+ context.commit('setTitle', episode.title)
+ context.commit('setImage', episode.imgURL)
+ context.commit('setEpisodeId', episode.id)
+ context.commit('setPausing', false)
+ player.doPlay(episode.enclosure)
+ }
+ },
+ pauseEpisode(context) {
+ context.commit('setBuffering', false)
+ context.commit('setPlaying', false)
+ context.commit('setPausing', true)
+ player.doPause()
},
},
}
diff --git a/src/views/Episode.vue b/src/views/Episode.vue
index 911fe77..5dc1b04 100644
--- a/src/views/Episode.vue
+++ b/src/views/Episode.vue
@@ -62,7 +62,8 @@
<tbody>
<tr
v-for="(chapter, idx) in episode.chapters"
- :key="idx">
+ :key="idx"
+ @click="seekEpisode(chapter.start)">
<td class="timeColumn">
{{ readableDuration(chapter.start) }}
</td>
@@ -110,6 +111,8 @@ export default {
playButtonText() {
if (this.isPlaying(this.episode.id)) {
return t('podcast', 'Pause episode')
+ } else if (this.isPaused(this.episode.id)) {
+ return t('podcast', 'Resume episode')
} else {
return t('podcast', 'Play episode')
}
@@ -123,12 +126,24 @@ export default {
},
methods: {
+ seekEpisode(startTime) {
+ console.log(startTime)
+ },
+
isPlaying(episodeId) {
return this.$store.getters.isPlaying(episodeId)
},
+ isPaused(episodeId) {
+ return this.$store.getters.isPaused(episodeId)
+ },
+
doPlay() {
- this.$store.dispatch('playEpisode', this.episode)
+ if (this.isPlaying(this.episode.id)) {
+ this.$store.dispatch('pauseEpisode')
+ } else {
+ this.$store.dispatch('playEpisode', this.episode)
+ }
},
readableDuration(timestamp) {
diff --git a/src/views/Show.vue b/src/views/Show.vue
index 932fc6f..55efa0c 100644
--- a/src/views/Show.vue
+++ b/src/views/Show.vue
@@ -91,6 +91,10 @@ export default {
},
methods: {
+ isPlaying(episodeId) {
+ return this.$store.getters.isPlaying(episodeId)
+ },
+
initPage() {
this.podcast = {}
this.episodes = []
@@ -161,7 +165,11 @@ export default {
},
doPlay(episode) {
- this.$store.dispatch('playEpisode', episode)
+ if (this.isPlaying(episode.id)) {
+ this.$store.dispatch('pauseEpisode')
+ } else {
+ this.$store.dispatch('playEpisode', episode)
+ }
},
},
}
--
GitLab