Switch button

src/components/Feed/List.vue

@@ -1,7 +1,7 @@
 <template>
 	<fragment>
 		<NcLoadingIcon v-if="loading" />
-		<ul v-if="!loading" :style="{marginBottom: currentPlayingEpisode ? '5rem' : 'auto'}">
+		<ul v-if="!loading" :style="{marginBottom: currentEpisode ? '5rem' : 'auto'}">
 			<NcListItem v-for="episode in episodes"
 				:key="episode.episodeUrl"
 				:details="formatTimeAgo(new Date(episode.episodePubDate.date))"
@@ -17,11 +17,12 @@
 					{{ formatTimer(new Date(episode.episodeDuration*1000)) }}
 				</template>
 				<template #actions>
-					<NcActionButton @click="play(episode)">
+					<NcActionButton @click="isCurrentEpisode(episode) ? play(null) : play(episode)">
 						<template #icon>
-							<Play :size="20" />
+							<PlayButton v-if="!isCurrentEpisode(episode)" :size="20" />
+							<StopButton v-if="isCurrentEpisode(episode)" :size="20" />
 						</template>
-						{{ t('Play') }}
+						{{ isCurrentEpisode(episode) ? t('Stop') : t('Play') }}
 					</NcActionButton>
 				</template>
 			</NcListItem>
@@ -32,7 +33,8 @@
 <script>
 import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
 import { formatTimeAgo, formatTimer } from '../../utils/time.js'
-import Play from 'vue-material-design-icons/Play.vue'
+import PlayButton from 'vue-material-design-icons/Play.vue'
+import StopButton from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
@@ -44,7 +46,8 @@ export default {
 		NcAvatar,
 		NcListItem,
 		NcLoadingIcon,
-		Play,
+		PlayButton,
+		StopButton,
 	},
 	data() {
 		return {
@@ -53,7 +56,7 @@ export default {
 		}
 	},
 	computed: {
-		currentPlayingEpisode() {
+		currentEpisode() {
 			return this.$store.state.player.episode
 		},
 		url() {
@@ -75,6 +78,9 @@ export default {
 	methods: {
 		formatTimer,
 		formatTimeAgo,
+		isCurrentEpisode(episode) {
+			return this.currentEpisode && this.currentEpisode.episodeUrl === episode.episodeUrl
+		},
 		play(episode) {
 			this.$store.commit('player/play', episode)
 		},

src/components/Player/Bar.vue

@@ -50,7 +50,7 @@ export default {
 			currentTime: 0,
 			duration: 0,
 			loading: true,
-			paused: true,
+			paused: false,
 			volume: 1,
 		}
 	},