Migrate to vue3 (fix #126) #127
1067
package-lock.json
generated
1067
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,6 +6,8 @@
|
||||
|
||||
<script>
|
||||
import { NcAppContent } from '@nextcloud/vue'
|
||||
import { mapState } from 'pinia'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'AppContent',
|
||||
@ -13,9 +15,7 @@ export default {
|
||||
NcAppContent,
|
||||
},
|
||||
computed: {
|
||||
episode() {
|
||||
return this.$store.state.player.episode
|
||||
},
|
||||
...mapState(usePlayer, ['episode']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -12,6 +12,8 @@
|
||||
|
||||
<script>
|
||||
import { NcAppNavigation } from '@nextcloud/vue'
|
||||
import { mapState } from 'pinia'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'AppNavigation',
|
||||
@ -19,9 +21,7 @@ export default {
|
||||
NcAppNavigation,
|
||||
},
|
||||
computed: {
|
||||
episode() {
|
||||
return this.$store.state.player.episode
|
||||
},
|
||||
...mapState(usePlayer, ['episode']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -19,7 +19,7 @@
|
||||
</template>
|
||||
<template #actions>
|
||||
<NcActionButton
|
||||
v-if="!isSubscribed(feed.link)"
|
||||
v-if="!subscriptions.includes(feed.link)"
|
||||
:aria-label="t('repod', 'Subscribe')"
|
||||
:name="t('repod', 'Subscribe')"
|
||||
:title="t('repod', 'Subscribe')"
|
||||
@ -36,6 +36,7 @@
|
||||
|
||||
<script>
|
||||
import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import PlusIcon from 'vue-material-design-icons/Plus.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
@ -44,6 +45,7 @@ import { formatLocaleDate } from '../../utils/time.js'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { showError } from '../../utils/toast.js'
|
||||
import { toUrl } from '../../utils/url.js'
|
||||
import { useSubscriptions } from '../../store/subscriptions.js'
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
@ -66,12 +68,16 @@ export default {
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSubscriptions, ['subscriptions']),
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
this.search()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSubscriptions, ['fetch']),
|
||||
formatLocaleDate,
|
||||
toUrl,
|
||||
async addSubscription(url) {
|
||||
@ -88,10 +94,7 @@ export default {
|
||||
showError(t('repod', 'Error while adding the feed'))
|
||||
}
|
||||
|
||||
this.$store.dispatch('subscriptions/fetch')
|
||||
},
|
||||
isSubscribed(url) {
|
||||
return this.$store.state.subscriptions.subscriptions.includes(url)
|
||||
this.fetch()
|
||||
},
|
||||
search: debounce(async function value() {
|
||||
try {
|
||||
|
@ -23,7 +23,7 @@
|
||||
<SafeHtml :source="description" />
|
||||
</div>
|
||||
<NcAppNavigationNew
|
||||
v-if="!isSubscribed"
|
||||
v-if="!subscriptions.includes(url)"
|
||||
:text="t('repod', 'Subscribe')"
|
||||
@click="addSubscription">
|
||||
<template #icon>
|
||||
@ -37,6 +37,7 @@
|
||||
|
||||
<script>
|
||||
import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { showError, showSuccess } from '../../utils/toast.js'
|
||||
import PlusIcon from 'vue-material-design-icons/Plus.vue'
|
||||
import RssIcon from 'vue-material-design-icons/Rss.vue'
|
||||
@ -44,6 +45,7 @@ import SafeHtml from '../Atoms/SafeHtml.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { decodeUrl } from '../../utils/url.js'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { useSubscriptions } from '../../store/subscriptions.js'
|
||||
|
||||
export default {
|
||||
name: 'Banner',
|
||||
@ -77,14 +79,13 @@ export default {
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSubscriptions, ['subscriptions']),
|
||||
url() {
|
||||
return decodeUrl(this.$route.params.url)
|
||||
},
|
||||
isSubscribed() {
|
||||
return this.$store.state.subscriptions.subscriptions.includes(this.url)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSubscriptions, ['fetch']),
|
||||
async addSubscription() {
|
||||
try {
|
||||
await axios.post(
|
||||
@ -99,7 +100,7 @@ export default {
|
||||
showError(t('repod', 'Error while adding the feed'))
|
||||
}
|
||||
|
||||
this.$store.dispatch('subscriptions/fetch')
|
||||
this.fetch()
|
||||
},
|
||||
copyFeed() {
|
||||
window.navigator.clipboard.writeText(this.url)
|
||||
|
@ -122,8 +122,8 @@ import {
|
||||
formatEpisodeTimestamp,
|
||||
formatLocaleDate,
|
||||
} from '../../utils/time.js'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import DownloadIcon from 'vue-material-design-icons/Download.vue'
|
||||
import { EventBus } from '../../store/bus.js'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import Modal from '../Atoms/Modal.vue'
|
||||
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
|
||||
@ -135,6 +135,8 @@ import axios from '@nextcloud/axios'
|
||||
import { decodeUrl } from '../../utils/url.js'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { showError } from '../../utils/toast.js'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
import { useSettings } from '../../store/settings.js'
|
||||
|
||||
export default {
|
||||
name: 'Episodes',
|
||||
@ -163,12 +165,8 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentEpisode() {
|
||||
return this.$store.state.player.episode
|
||||
},
|
||||
filters() {
|
||||
return this.$store.state.settings.filters
|
||||
},
|
||||
...mapState(usePlayer, ['episode']),
|
||||
...mapState(useSettings, ['filters']),
|
||||
filteredEpisodes() {
|
||||
return this.episodes.filter((episode) => {
|
||||
if (!this.filters.listened && this.hasEnded(episode)) {
|
||||
@ -201,7 +199,6 @@ export default {
|
||||
this.episodes = [...episodes.data].sort(
|
||||
(a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date),
|
||||
)
|
||||
EventBus.$on('updateEpisodesList', this.updateList)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
showError(t('repod', 'Could not fetch episodes'))
|
||||
@ -209,10 +206,8 @@ export default {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
EventBus.$off('updateEpisodesList')
|
||||
},
|
||||
methods: {
|
||||
...mapActions(usePlayer, ['load']),
|
||||
formatLocaleDate,
|
||||
hasEnded(episode) {
|
||||
return (
|
||||
@ -233,9 +228,6 @@ export default {
|
||||
!this.hasEnded(episode)
|
||||
)
|
||||
},
|
||||
load(episode) {
|
||||
this.$store.dispatch('player/load', episode)
|
||||
},
|
||||
async markAs(episode, read) {
|
||||
try {
|
||||
this.loadingAction = true
|
||||
|
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div v-if="player.episode" class="footer">
|
||||
<img class="background" :src="player.episode.image" />
|
||||
<Loading v-if="!player.loaded" />
|
||||
<ProgressBar v-if="player.loaded" />
|
||||
<div v-if="player.loaded" class="player">
|
||||
<img :src="player.episode.image" />
|
||||
<div v-if="episode" class="footer">
|
||||
<img class="background" :src="episode.image" />
|
||||
<Loading v-if="!loaded" />
|
||||
<ProgressBar v-if="loaded" />
|
||||
<div v-if="loaded" class="player">
|
||||
<img :src="episode.image" />
|
||||
<Infos class="infos" />
|
||||
<Controls class="controls" />
|
||||
<Timer class="timer" />
|
||||
@ -20,6 +20,8 @@ import Loading from '../Atoms/Loading.vue'
|
||||
import ProgressBar from './ProgressBar.vue'
|
||||
import Timer from './Timer.vue'
|
||||
import Volume from './Volume.vue'
|
||||
import { mapState } from 'pinia'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'Bar',
|
||||
@ -32,9 +34,7 @@ export default {
|
||||
Volume,
|
||||
},
|
||||
computed: {
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
...mapState(usePlayer, ['episode', 'loaded']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -1,21 +1,15 @@
|
||||
<template>
|
||||
<div class="controls">
|
||||
<PauseIcon
|
||||
v-if="!player.paused"
|
||||
class="pointer"
|
||||
:size="50"
|
||||
@click="$store.dispatch('player/pause')" />
|
||||
<PlayIcon
|
||||
v-if="player.paused"
|
||||
class="pointer"
|
||||
:size="50"
|
||||
@click="$store.dispatch('player/play')" />
|
||||
<PauseIcon v-if="!paused" class="pointer" :size="50" @click="pause" />
|
||||
<PlayIcon v-if="paused" class="pointer" :size="50" @click="play" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import PauseIcon from 'vue-material-design-icons/Pause.vue'
|
||||
import PlayIcon from 'vue-material-design-icons/Play.vue'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'Controls',
|
||||
@ -24,9 +18,10 @@ export default {
|
||||
PlayIcon,
|
||||
},
|
||||
computed: {
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
...mapState(usePlayer, ['paused']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(usePlayer, ['play', 'pause']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
<strong class="pointer" @click="modal = true">
|
||||
{{ player.episode.name }}
|
||||
{{ episode.name }}
|
||||
</strong>
|
||||
<router-link :to="hash">
|
||||
<i>{{ player.episode.title }}</i>
|
||||
<i>{{ episode.title }}</i>
|
||||
</router-link>
|
||||
<NcModal v-if="modal" @close="modal = false">
|
||||
<Modal
|
||||
:description="player.episode.description"
|
||||
:image="player.episode.image"
|
||||
:link="player.episode.link"
|
||||
:name="player.episode.name"
|
||||
:size="player.episode.size"
|
||||
:title="player.episode.title"
|
||||
:url="player.episode.url" />
|
||||
:description="episode.description"
|
||||
:image="episode.image"
|
||||
:link="episode.link"
|
||||
:name="episode.name"
|
||||
:size="episode.size"
|
||||
:title="episode.title"
|
||||
:url="episode.url" />
|
||||
</NcModal>
|
||||
</div>
|
||||
</template>
|
||||
@ -22,7 +22,9 @@
|
||||
<script>
|
||||
import Modal from '../Atoms/Modal.vue'
|
||||
import { NcModal } from '@nextcloud/vue'
|
||||
import { mapState } from 'pinia'
|
||||
import { toUrl } from '../../utils/url.js'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'Infos',
|
||||
@ -36,9 +38,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
...mapState(usePlayer, ['episode']),
|
||||
hash() {
|
||||
return toUrl(this.player.podcastUrl)
|
||||
},
|
||||
|
@ -1,20 +1,24 @@
|
||||
<template>
|
||||
<input
|
||||
class="progress"
|
||||
:max="player.duration"
|
||||
:max="duration"
|
||||
min="0"
|
||||
type="range"
|
||||
:value="player.currentTime"
|
||||
@change="(event) => $store.dispatch('player/seek', event.target.value)" />
|
||||
:value="currentTime"
|
||||
@change="(event) => seek(event.target.value)" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'ProgressBar',
|
||||
computed: {
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
...mapState(usePlayer, ['duration', 'currentTime']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(usePlayer, ['seek']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<span>{{ formatTimer(new Date(player.currentTime * 1000)) }}</span>
|
||||
<span>{{ formatTimer(new Date(currentTime * 1000)) }}</span>
|
||||
<span>/</span>
|
||||
<span>{{ formatTimer(new Date(player.duration * 1000)) }}</span>
|
||||
<span>{{ formatTimer(new Date(duration * 1000)) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formatTimer } from '../../utils/time.js'
|
||||
import { mapState } from 'pinia'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'Timer',
|
||||
computed: {
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
...mapState(usePlayer, ['duration', 'currentTime']),
|
||||
},
|
||||
methods: {
|
||||
formatTimer,
|
||||
|
@ -1,42 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<VolumeHighIcon
|
||||
v-if="player.volume > 0.7"
|
||||
v-if="volume > 0.7"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="mute" />
|
||||
<VolumeLowIcon
|
||||
v-if="player.volume > 0 && player.volume <= 0.3"
|
||||
v-if="volume > 0 && volume <= 0.3"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="mute" />
|
||||
<VolumeMediumIcon
|
||||
v-if="player.volume > 0.3 && player.volume <= 0.7"
|
||||
v-if="volume > 0.3 && volume <= 0.7"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="mute" />
|
||||
<VolumeMuteIcon
|
||||
v-if="player.volume === 0"
|
||||
v-if="volume === 0"
|
||||
class="pointer"
|
||||
:size="30"
|
||||
@click="$store.dispatch('player/volume', volumeMuted)" />
|
||||
@click="setVolume(volumeMuted)" />
|
||||
<input
|
||||
max="1"
|
||||
min="0"
|
||||
step="0.1"
|
||||
type="range"
|
||||
:value="player.volume"
|
||||
@change="
|
||||
(event) => $store.dispatch('player/volume', event.target.value)
|
||||
" />
|
||||
:value="volume"
|
||||
@change="(event) => setVolume(event.target.value)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
|
||||
import VolumeLowIcon from 'vue-material-design-icons/VolumeLow.vue'
|
||||
import VolumeMediumIcon from 'vue-material-design-icons/VolumeMedium.vue'
|
||||
import VolumeMuteIcon from 'vue-material-design-icons/VolumeMute.vue'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'Volume',
|
||||
@ -52,14 +52,13 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
...mapState(usePlayer, ['volume']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(usePlayer, ['setVolume']),
|
||||
mute() {
|
||||
this.volumeMuted = this.player.volume
|
||||
this.$store.dispatch('player/volume', 0)
|
||||
this.volumeMuted = this.volume
|
||||
this.setVolume(0)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -9,7 +9,7 @@
|
||||
:disabled="all"
|
||||
@update:checked="
|
||||
(checked) =>
|
||||
$store.commit('settings/filters', {
|
||||
setFilters({
|
||||
listened: checked,
|
||||
listening: checked,
|
||||
unlistened: checked,
|
||||
@ -19,26 +19,17 @@
|
||||
</NcActionCheckbox>
|
||||
<NcActionCheckbox
|
||||
:checked="filters.listened"
|
||||
@update:checked="
|
||||
(checked) =>
|
||||
$store.commit('settings/filters', { listened: checked })
|
||||
">
|
||||
@update:checked="(checked) => setFilters({ listened: checked })">
|
||||
{{ t('repod', 'Listened') }}
|
||||
</NcActionCheckbox>
|
||||
<NcActionCheckbox
|
||||
:checked="filters.listening"
|
||||
@update:checked="
|
||||
(checked) =>
|
||||
$store.commit('settings/filters', { listening: checked })
|
||||
">
|
||||
@update:checked="(checked) => setFilters({ listening: checked })">
|
||||
{{ t('repod', 'Listening') }}
|
||||
</NcActionCheckbox>
|
||||
<NcActionCheckbox
|
||||
:checked="filters.unlistened"
|
||||
@update:checked="
|
||||
(checked) =>
|
||||
$store.commit('settings/filters', { unlistened: checked })
|
||||
">
|
||||
@update:checked="(checked) => setFilters({ unlistened: checked })">
|
||||
{{ t('repod', 'Unlistened') }}
|
||||
</NcActionCheckbox>
|
||||
</template>
|
||||
@ -51,8 +42,10 @@
|
||||
|
||||
<script>
|
||||
import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import FilterIcon from 'vue-material-design-icons/Filter.vue'
|
||||
import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'
|
||||
import { useSettings } from '../../store/settings.js'
|
||||
|
||||
export default {
|
||||
name: 'Filters',
|
||||
@ -63,19 +56,10 @@ export default {
|
||||
NcActionCheckbox,
|
||||
},
|
||||
computed: {
|
||||
all() {
|
||||
return (
|
||||
this.filters.listened &&
|
||||
this.filters.listening &&
|
||||
this.filters.unlistened
|
||||
)
|
||||
},
|
||||
filters() {
|
||||
return this.$store.state.settings.filters
|
||||
},
|
||||
...mapState(useSettings, ['filters']),
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('settings/fetch')
|
||||
methods: {
|
||||
...mapActions(useSettings, ['setFilters']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -3,27 +3,27 @@
|
||||
<template #extra>
|
||||
<div class="extra">
|
||||
<MinusIcon class="pointer" :size="20" @click="changeRate(-0.1)" />
|
||||
<NcCounterBubble class="counter">
|
||||
x{{ player.rate }}
|
||||
</NcCounterBubble>
|
||||
<NcCounterBubble class="counter">x{{ rate }}</NcCounterBubble>
|
||||
<PlusIcon class="pointer" :size="20" @click="changeRate(0.1)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #icon>
|
||||
<SpeedometerSlowIcon v-if="player.rate < 1" :size="20" />
|
||||
<SpeedometerMediumIcon v-if="player.rate === 1" :size="20" />
|
||||
<SpeedometerIcon v-if="player.rate > 1" :size="20" />
|
||||
<SpeedometerSlowIcon v-if="rate < 1" :size="20" />
|
||||
<SpeedometerMediumIcon v-if="rate === 1" :size="20" />
|
||||
<SpeedometerIcon v-if="rate > 1" :size="20" />
|
||||
</template>
|
||||
</NcAppNavigationItem>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import MinusIcon from 'vue-material-design-icons/Minus.vue'
|
||||
import PlusIcon from 'vue-material-design-icons/Plus.vue'
|
||||
import SpeedometerIcon from 'vue-material-design-icons/Speedometer.vue'
|
||||
import SpeedometerMediumIcon from 'vue-material-design-icons/SpeedometerMedium.vue'
|
||||
import SpeedometerSlowIcon from 'vue-material-design-icons/SpeedometerSlow.vue'
|
||||
import { usePlayer } from '../../store/player.js'
|
||||
|
||||
export default {
|
||||
name: 'Speed',
|
||||
@ -37,17 +37,13 @@ export default {
|
||||
SpeedometerSlowIcon,
|
||||
},
|
||||
computed: {
|
||||
player() {
|
||||
return this.$store.state.player
|
||||
},
|
||||
...mapState(usePlayer, ['rate']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(usePlayer, ['seRate']),
|
||||
changeRate(diff) {
|
||||
const newRate = (this.player.rate + diff).toPrecision(2)
|
||||
this.$store.dispatch(
|
||||
'player/rate',
|
||||
newRate > 0 ? newRate : this.player.rate,
|
||||
)
|
||||
const newRate = (this.rate + diff).toPrecision(2)
|
||||
this.setRate(newRate > 0 ? newRate : this.rate)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -31,8 +31,10 @@ import AlertIcon from 'vue-material-design-icons/Alert.vue'
|
||||
import DeleteIcon from 'vue-material-design-icons/Delete.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { mapActions } from 'pinia'
|
||||
import { showError } from '../../utils/toast.js'
|
||||
import { toUrl } from '../../utils/url.js'
|
||||
import { useSubscriptions } from '../../store/subscriptions.js'
|
||||
|
||||
export default {
|
||||
name: 'Item',
|
||||
@ -80,6 +82,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSubscriptions, ['fetch']),
|
||||
async deleteSubscription() {
|
||||
if (
|
||||
confirm(
|
||||
@ -97,7 +100,7 @@ export default {
|
||||
showError(t('repod', 'Error while removing the feed'))
|
||||
} finally {
|
||||
this.loading = false
|
||||
this.$store.dispatch('subscriptions/fetch')
|
||||
this.fetch()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -30,12 +30,14 @@ import {
|
||||
NcAppNavigationList,
|
||||
NcAppNavigationNew,
|
||||
} from '@nextcloud/vue'
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import AppNavigation from '../Atoms/AppNavigation.vue'
|
||||
import Item from './Item.vue'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import PlusIcon from 'vue-material-design-icons/Plus.vue'
|
||||
import Settings from '../Settings/Settings.vue'
|
||||
import { showError } from '../../utils/toast.js'
|
||||
import { useSubscriptions } from '../../store/subscriptions.js'
|
||||
|
||||
export default {
|
||||
name: 'Subscriptions',
|
||||
@ -55,13 +57,11 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
subscriptions() {
|
||||
return this.$store.state.subscriptions.subscriptions
|
||||
},
|
||||
...mapState(useSubscriptions, ['subscriptions']),
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
await this.$store.dispatch('subscriptions/fetch')
|
||||
await this.fetch()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
showError(t('repod', 'Could not fetch subscriptions'))
|
||||
@ -69,5 +69,8 @@ export default {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSubscriptions, ['fetch']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@ -86,10 +86,10 @@ export const usePlayer = defineStore('player', {
|
||||
this.episode.action,
|
||||
])
|
||||
},
|
||||
volume: (volume) => {
|
||||
setVolume: (volume) => {
|
||||
audio.volume = volume
|
||||
},
|
||||
rate: (rate) => {
|
||||
setRate: (rate) => {
|
||||
audio.playbackRate = rate
|
||||
},
|
||||
},
|
||||
|
@ -1,28 +1,24 @@
|
||||
import { getCookie, setCookie } from '../utils/cookies.js'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const settings = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
export const useSettings = defineStore('settings', {
|
||||
state: () => ({
|
||||
filters: {
|
||||
listened: true,
|
||||
listening: true,
|
||||
unlistened: true,
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
filters: (state, filters) => {
|
||||
state.filters = { ...state.filters, ...filters }
|
||||
setCookie('repod.filters', JSON.stringify(state.filters), 365)
|
||||
},
|
||||
},
|
||||
}),
|
||||
actions: {
|
||||
fetch: (context) => {
|
||||
try {
|
||||
const filters = getCookie('repod.filters')
|
||||
context.commit('filters', JSON.parse(filters))
|
||||
} catch (e) {
|
||||
// nothing
|
||||
}
|
||||
setFilters: (filters) => {
|
||||
this.filters = { ...this.filters, ...filters }
|
||||
setCookie('repod.filters', JSON.stringify(this.filters), 365)
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
try {
|
||||
const settings = useSettings()
|
||||
const filters = getCookie('repod.filters')
|
||||
settings.filters = JSON.parse(filters)
|
||||
} catch {}
|
||||
|
@ -1,28 +1,20 @@
|
||||
import axios from '@nextcloud/axios'
|
||||
import { defineStore } from 'pinia'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
|
||||
export const subscriptions = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
export const useSubscriptions = defineStore('subscriptions', {
|
||||
state: () => ({
|
||||
subscriptions: [],
|
||||
},
|
||||
mutations: {
|
||||
set: (state, subscriptions) => {
|
||||
state.subscriptions = subscriptions
|
||||
},
|
||||
},
|
||||
}),
|
||||
actions: {
|
||||
fetch: async (context) => {
|
||||
fetch: async () => {
|
||||
const metrics = await axios.get(
|
||||
generateUrl('/apps/gpoddersync/personal_settings/metrics'),
|
||||
)
|
||||
const subs = [...metrics.data.subscriptions].sort(
|
||||
(a, b) => b.listenedSeconds - a.listenedSeconds,
|
||||
)
|
||||
context.commit(
|
||||
'set',
|
||||
subs.map((sub) => sub.url),
|
||||
)
|
||||
this.subscriptions = subs.map((sub) => sub.url)
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user