repod/src/views/Feed.vue

<template>
	<NcAppContent>
		<Loading v-if="loading" />
		<NcEmptyContent v-if="failed"
			class="error"
			:name="t('repod', 'Error loading feed')">
			<template #icon>
				<Alert />
			</template>
		</NcEmptyContent>
		<Banner v-if="feed"
			:author="feed.author"
			:description="feed.description"
			:image-url="feed.imageUrl"
			:link="feed.link"
			:title="feed.title" />
		<Episodes v-if="feed" :title="feed.title" />
	</NcAppContent>
</template>

<script>
import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
import Alert from 'vue-material-design-icons/Alert.vue'
import Banner from '../components/Feed/Banner.vue'
import Episodes from '../components/Feed/Episodes.vue'
import Loading from '../components/Atoms/Loading.vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { toUrl } from '../utils/url.js'

export default {
	name: 'Feed',
	components: {
		Alert,
		Banner,
		Episodes,
		Loading,
		NcAppContent,
		NcEmptyContent,
	},
	data() {
		return {
			failed: false,
			loading: true,
			feed: null,
		}
	},
	computed: {
		url() {
			return atob(this.$route.params.url)
		},
	},
	async mounted() {
		try {
			const podcastData = await axios.get(generateUrl('/apps/repod/podcast?url={url}', { url: this.url }))

			if (podcastData.data.atomLink && podcastData.data.atomLink !== this.url) {
				this.$router.push(toUrl(podcastData.data.atomLink))
			}

			this.feed = podcastData.data
		} catch (e) {
			this.failed = true
			console.error(e)
		} finally {
			this.loading = false
		}
	},
}
</script>

<style scoped>
	.error {
		margin: 2rem;
	}
</style>