refactor: 💄 refacto NcEmptyContent

lib/AppInfo/Application.php

@@ -32,6 +32,10 @@ class Application extends App implements IBootstrap
 		/** @var IInitialState $initialState */
 		$initialState = $appContainer->get(IInitialState::class);
 
+		if (null === $appManager->getAppInfo(self::GPODDERSYNC_ID)) {
+			$appManager->disableApp(self::GPODDERSYNC_ID);
+		}
+
 		$gpoddersync = $appManager->isEnabledForUser(self::GPODDERSYNC_ID);
 		if (!$gpoddersync) {
 			try {

src/components/Atoms/AppContent.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppContent :class="{ padding: episode }">
+	<NcAppContent :class="{ episode, padding }">
 		<slot />
 	</NcAppContent>
 </template>
@@ -14,6 +14,12 @@ export default {
 	components: {
 		NcAppContent,
 	},
+	props: {
+		padding: {
+			type: Boolean,
+			default: true,
+		},
+	},
 	computed: {
 		...mapState(usePlayer, ['episode']),
 	},
@@ -21,7 +27,11 @@ export default {
 </script>
 
 <style scoped>
-.padding {
+.episode {
 	padding-bottom: 6rem;
 }
+
+.padding {
+	padding: 15px 51px;
+}
 </style>

src/components/Atoms/EmptyContent.vue

@@ -0,0 +1,22 @@
+<template>
+	<NcEmptyContent class="empty">
+		<slot />
+	</NcEmptyContent>
+</template>
+
+<script>
+import { NcEmptyContent } from '@nextcloud/vue'
+
+export default {
+	name: 'EmptyContent',
+	components: {
+		NcEmptyContent,
+	},
+}
+</script>
+
+<style scoped>
+.empty {
+	height: 100%;
+}
+</style>

src/components/Home/Favorites.vue

@@ -1,7 +1,12 @@
 <template>
-	<div>
+	<div class="">
 		<Loading v-if="!currentFavoriteData" class="loading" />
-		<NcAvatar v-if="currentFavoriteData" />
+		<NcAvatar
+			v-if="currentFavoriteData"
+			:display-name="currentFavoriteData.author || currentFavoriteData.title"
+			:is-no-user="true"
+			:size="256"
+			:url="currentFavoriteData.imageUrl" />
 	</div>
 </template>
 
@@ -12,7 +17,7 @@ import { mapState } from 'pinia'
 import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
-	name: 'Item',
+	name: 'Favorites',
 	components: {
 		Loading,
 		NcAvatar,
@@ -26,7 +31,7 @@ export default {
 	computed: {
 		...mapState(useSubscriptions, ['favs']),
 		currentFavoriteData() {
-			return this.favs.find((fav) => fav.url === this.url)?.data
+			return this.favs.find((fav) => fav.url === this.url)
 		},
 	},
 }

src/views/Discover.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppContent class="main">
+	<AppContent>
 		<NcTextField v-model="search" :label="t('repod', 'Find a podcast')">
 			<template #icon>
 				<Magnify :size="20" />
@@ -35,9 +35,3 @@ export default {
 	}),
 }
 </script>
-
-<style scoped>
-.main {
-	padding: 15px 51px;
-}
-</style>

src/views/Feed.vue

@@ -1,14 +1,14 @@
 <template>
-	<AppContent>
+	<AppContent :padding="false">
 		<Loading v-if="loading" />
-		<NcEmptyContent
+		<EmptyContent
 			v-if="failed"
 			class="error"
 			:name="t('repod', 'Error loading feed')">
 			<template #icon>
 				<Alert />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
 		<Banner
 			v-if="feed"
 			:author="feed.author"
@@ -24,9 +24,9 @@
 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 { NcEmptyContent } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
 import { decodeUrl } from '../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
@@ -37,9 +37,9 @@ export default {
 		Alert,
 		AppContent,
 		Banner,
+		EmptyContent,
 		Episodes,
 		Loading,
-		NcEmptyContent,
 	},
 	data: () => ({
 		failed: false,

src/views/GPodder.vue

@@ -1,6 +1,6 @@
 <template>
-	<NcAppContent class="content">
+	<AppContent>
-		<NcEmptyContent :name="t('repod', 'Missing required app')">
+		<EmptyContent class="empty" :name="t('repod', 'Missing required app')">
 			<template #action>
 				<NcButton :href="gPodderSyncUrl">
 					{{ t('repod', 'Install GPodder Sync') }}
@@ -9,22 +9,24 @@
 			<template #icon>
 				<Alert />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
-	</NcAppContent>
+	</AppContent>
 </template>
 
 <script>
-import { NcAppContent, NcButton, NcEmptyContent } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
+import AppContent from '../components/Atoms/AppContent.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
+import { NcButton } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'GPodder',
 	components: {
 		Alert,
-		NcAppContent,
+		AppContent,
+		EmptyContent,
 		NcButton,
-		NcEmptyContent,
 	},
 	computed: {
 		gPodderSyncUrl() {

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
 	<AppContent>
-		<NcEmptyContent
+		<EmptyContent
 			v-if="!favs.length"
 			class="empty"
 			:description="
@@ -10,12 +10,12 @@
 			<template #icon>
 				<StarOffIcon :size="20" />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
 		<ul v-if="favs.length">
 			<li
 				v-for="url in favs.sort((fav) => fav.lastPub).map((fav) => fav.url)"
 				:key="url">
-				<Item :url="url" />
+				<Favorites :url="url" />
 			</li>
 		</ul>
 	</AppContent>
@@ -23,8 +23,8 @@
 
 <script>
 import AppContent from '../components/Atoms/AppContent.vue'
-import Item from '../components/Home/Item.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
-import { NcEmptyContent } from '@nextcloud/vue'
+import Favorites from '../components/Home/Favorites.vue'
 import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
 import { mapState } from 'pinia'
 import { useSubscriptions } from '../store/subscriptions.js'
@@ -33,8 +33,8 @@ export default {
 	name: 'Home',
 	components: {
 		AppContent,
-		Item,
+		EmptyContent,
-		NcEmptyContent,
+		Favorites,
 		StarOffIcon,
 	},
 	computed: {
@@ -42,9 +42,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-.empty {
-	height: 100%;
-}
-</style>