Switch button
All checks were successful
repod / nextcloud (push) Successful in 56s
repod / nodejs (push) Successful in 1m36s

This commit is contained in:
Michel Roux 2023-08-27 22:48:21 +02:00
parent 351bfd446c
commit 633fec71ea
2 changed files with 14 additions and 8 deletions

View File

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

View File

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