repod/src/views/Feed.vue

75 lines
1.5 KiB
Vue

<template>
<AppContent>
<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" />
</AppContent>
</template>
<script>
import Alert from 'vue-material-design-icons/Alert.vue'
import AppContent from '../components/Atoms/AppContent.vue'
import Banner from '../components/Feed/Banner.vue'
import Episodes from '../components/Feed/Episodes.vue'
import Loading from '../components/Atoms/Loading.vue'
import { NcEmptyContent } from '@nextcloud/vue'
import axios from '@nextcloud/axios'
import { decodeUrl } from '../utils/url.js'
import { generateUrl } from '@nextcloud/router'
export default {
name: 'Feed',
components: {
Alert,
AppContent,
Banner,
Episodes,
Loading,
NcEmptyContent,
},
data: () => ({
failed: false,
loading: true,
feed: null,
}),
computed: {
url() {
return decodeUrl(this.$route.params.url)
},
},
async mounted() {
try {
const podcastData = await axios.get(
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
}
},
}
</script>
<style scoped>
.error {
margin: 2rem;
}
</style>