Switch button
This commit is contained in:
parent
351bfd446c
commit
633fec71ea
@ -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)
|
||||||
},
|
},
|
||||||
|
@ -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,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user