Migrate to vue3 (fix #126) #127

Merged
Xefir merged 32 commits from vue3 into main 2024-08-17 12:24:28 +00:00
19 changed files with 1101 additions and 270 deletions
Showing only changes of commit 75da02e05b - Show all commits

1067
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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>

View File

@ -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>

View File

@ -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 {

View File

@ -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)

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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)
},

View File

@ -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>

View File

@ -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,

View File

@ -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)
},
},
}

View File

@ -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>

View File

@ -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)
},
},
}

View File

@ -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()
}
}
},

View File

@ -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>

View File

@ -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
},
},

View File

@ -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 {}

View File

@ -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)
},
},
}
})