repod/src/views/Feed.vue

66 lines
1.5 KiB
Vue

<template>
<AppContent>
<Loading v-if="loading" />
<EmptyContent v-if="failed" :name="t('repod', 'Error loading feed')">
<template #icon>
<Alert />
</template>
</EmptyContent>
<Banner v-if="feed" :feed="feed" />
<Episodes v-if="feed" />
</AppContent>
</template>
<script lang="ts">
import Alert from 'vue-material-design-icons/Alert.vue'
import AppContent from '../components/Atoms/AppContent.vue'
import Banner from '../components/Feed/Banner.vue'
import EmptyContent from '../components/Atoms/EmptyContent.vue'
import Episodes from '../components/Feed/Episodes.vue'
import Loading from '../components/Atoms/Loading.vue'
import type { PodcastDataInterface } from '../utils/types.ts'
import axios from '@nextcloud/axios'
import { decodeUrl } from '../utils/url.ts'
import { generateUrl } from '@nextcloud/router'
import { t } from '@nextcloud/l10n'
export default {
name: 'Feed',
components: {
Alert,
AppContent,
Banner,
EmptyContent,
Episodes,
Loading,
},
data: () => ({
failed: false,
loading: true,
feed: null as PodcastDataInterface | null,
}),
computed: {
url() {
return decodeUrl(this.$route.params.url as string)
},
},
async mounted() {
try {
this.loading = true
const podcastData = await axios.get<PodcastDataInterface>(
generateUrl('/apps/repod/podcast?url={url}', { url: this.url }),
)
this.feed = podcastData.data
} catch (e) {
this.failed = true
console.error(e)
} finally {
this.loading = false
}
},
methods: {
t,
},
}
</script>