refactor: 🎨 add prettier and update deps

.eslintrc.js

@@ -1,9 +1,11 @@
 module.exports = {
 	extends: [
 		'@nextcloud',
+		'plugin:prettier/recommended',
 	],
 	rules: {
 		'sort-imports': 'error',
 		'vue/attributes-order': ['error', { alphabetical: true }],
+		'vue/first-attribute-linebreak': 'off',
 	},
 }

composer.lock

@@ -94,16 +94,16 @@
         },
         {
             "name": "php-cs-fixer/shim",
-            "version": "v3.51.0",
+            "version": "v3.54.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/PHP-CS-Fixer/shim.git",
-                "reference": "a792394f7f3934f75a4df9dca544796c6f503027"
+                "reference": "887c350fccbadb2b84278fdb963c25a0c304ac9c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/PHP-CS-Fixer/shim/zipball/a792394f7f3934f75a4df9dca544796c6f503027",
+                "url": "https://api.github.com/repos/PHP-CS-Fixer/shim/zipball/887c350fccbadb2b84278fdb963c25a0c304ac9c",
-                "reference": "a792394f7f3934f75a4df9dca544796c6f503027",
+                "reference": "887c350fccbadb2b84278fdb963c25a0c304ac9c",
                 "shasum": ""
             },
             "require": {
@@ -140,9 +140,9 @@
             "description": "A tool to automatically fix PHP code style",
             "support": {
                 "issues": "https://github.com/PHP-CS-Fixer/shim/issues",
-                "source": "https://github.com/PHP-CS-Fixer/shim/tree/v3.51.0"
+                "source": "https://github.com/PHP-CS-Fixer/shim/tree/v3.54.0"
             },
-            "time": "2024-02-28T19:51:07+00:00"
+            "time": "2024-04-17T08:23:10+00:00"
         },
         {
             "name": "psalm/phar",

package.json

@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@nextcloud/axios": "^2.4.0",
-    "@nextcloud/dialogs": "^5.2.0",
+    "@nextcloud/dialogs": "^5.3.1",
-    "@nextcloud/initial-state": "^2.1.0",
+    "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/l10n": "^2.2.0",
-    "@nextcloud/router": "^3.0.0",
+    "@nextcloud/router": "^3.0.1",
-    "@nextcloud/vue": "^8.11.0",
+    "@nextcloud/vue": "^8.11.2",
     "vue": "^2",
     "vue-material-design-icons": "^5.3.0",
     "vue-router": "^3",
@@ -36,11 +36,15 @@
     "node": "^20.0.0",
     "npm": "^9.0.0"
   },
+  "prettier": "@nextcloud/prettier-config",
   "devDependencies": {
-    "@nextcloud/babel-config": "^1.0.0",
+    "@nextcloud/babel-config": "^1.1.1",
-    "@nextcloud/browserslist-config": "^3.0.0",
+    "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^8.3.0",
-    "@nextcloud/stylelint-config": "^2.4.0",
+    "@nextcloud/prettier-config": "^1.0.0",
-    "@nextcloud/webpack-vue-config": "^6.0.1"
+    "@nextcloud/stylelint-config": "^3.0.0",
+    "@nextcloud/webpack-vue-config": "^6.0.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3"
   }
 }

src/components/Atoms/AppContent.vue

@@ -21,7 +21,7 @@ export default {
 </script>
 
 <style scoped>
-	.padding {
+.padding {
 	padding-bottom: 6rem;
-	}
+}
 </style>

src/components/Atoms/AppNavigation.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style scoped>
-	.padding {
+.padding {
 	padding-bottom: 6rem;
-	}
+}
 </style>

src/components/Atoms/Loading.vue

@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style scoped>
-	.loading {
+.loading {
 	margin: 2rem 0;
-	}
+}
 </style>

src/components/Atoms/Modal.vue

@@ -1,24 +1,17 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
 	<div>
-		<NcAvatar :display-name="name"
+		<NcAvatar :display-name="name" :is-no-user="true" :size="256" :url="image" />
-			:is-no-user="true"
-			:size="256"
-			:url="image" />
 		<h2>{{ name }}</h2>
 		<p v-html="strippedDescription" />
 		<div>
-			<NcButton v-if="link"
+			<NcButton v-if="link" :href="link" target="_blank">
-				:href="link"
-				target="_blank">
 				<template #icon>
 					<OpenInNewIcon :size="20" />
 				</template>
 				{{ title }}
 			</NcButton>
-			<NcButton v-if="url"
+			<NcButton v-if="url" :href="url" target="_blank">
-				:href="url"
-				target="_blank">
 				<template #icon>
 					<DownloadIcon :size="20" />
 				</template>
@@ -85,11 +78,11 @@ export default {
 </script>
 
 <style scoped>
-	div {
+div {
 	align-items: center;
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 	margin: 2rem;
-	}
+}
 </style>

src/components/Discover/AddRss.vue

@@ -1,6 +1,8 @@
 <template>
 	<NcAppNavigationList>
-		<NcAppNavigationNewItem :name="t('repod', 'Add a RSS link')" @new-item="addSubscription">
+		<NcAppNavigationNewItem
+			:name="t('repod', 'Add a RSS link')"
+			@new-item="addSubscription">
 			<template #icon>
 				<PlusIcon :size="20" />
 			</template>
@@ -29,7 +31,7 @@ export default {
 </script>
 
 <style scoped>
-	ul {
+ul {
 	margin-top: 2rem;
-	}
+}
 </style>

src/components/Discover/Search.vue

@@ -2,13 +2,15 @@
 	<div>
 		<Loading v-if="loading" />
 		<ul v-if="!loading">
-			<NcListItem v-for="feed in feeds"
+			<NcListItem
+				v-for="feed in feeds"
 				:key="feed.link"
-				:details="formatLocaleDate(new Date(feed.fetchedAtUnix*1000))"
+				:details="formatLocaleDate(new Date(feed.fetchedAtUnix * 1000))"
 				:name="feed.title"
 				:to="toUrl(feed.link)">
 				<template #icon>
-					<NcAvatar :display-name="feed.author"
+					<NcAvatar
+						:display-name="feed.author"
 						:is-no-user="true"
 						:url="feed.imageUrl" />
 				</template>
@@ -61,9 +63,13 @@ export default {
 			try {
 				this.loading = true
 				const currentSearch = this.value
-				const feeds = await axios.get(generateUrl('/apps/repod/search?q={value}', { value: currentSearch }))
+				const feeds = await axios.get(
+					generateUrl('/apps/repod/search?q={value}', { value: currentSearch }),
+				)
 				if (currentSearch === this.value) {
-					this.feeds = [...feeds.data].sort((a, b) => b.fetchedAtUnix - a.fetchedAtUnix)
+					this.feeds = [...feeds.data].sort(
+						(a, b) => b.fetchedAtUnix - a.fetchedAtUnix,
+					)
 				}
 			} catch (e) {
 				console.error(e)

src/components/Discover/Toplist.vue

@@ -5,7 +5,7 @@
 		<ul v-if="!loading">
 			<li v-for="top in tops" :key="top.link">
 				<router-link :to="toUrl(top.link)">
-					<img :src="top.imageUrl" :title="top.author">
+					<img :src="top.imageUrl" :title="top.author" />
 				</router-link>
 			</li>
 		</ul>
@@ -67,24 +67,24 @@ export default {
 </script>
 
 <style scoped>
-	h2 {
+h2 {
 	margin: 1rem 0;
-	}
+}
 
-	img {
+img {
 	height: 100%;
 	width: 100%;
-	}
+}
 
-	li {
+li {
 	flex-basis: 10rem;
 	flex-shrink: 0;
-	}
+}
 
-	ul {
+ul {
 	display: flex;
 	gap: 2rem;
 	overflow: scroll hidden;
-		padding-bottom: .5rem;
+	padding-bottom: 0.5rem;
-	}
+}
 </style>

src/components/Feed/Banner.vue

@@ -1,10 +1,11 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
 	<div class="header">
-		<img class="background" :src="imageUrl">
+		<img class="background" :src="imageUrl" />
 		<div class="content">
 			<div>
-				<NcAvatar :display-name="author || title"
+				<NcAvatar
+					:display-name="author || title"
 					:is-no-user="true"
 					:size="128"
 					:url="imageUrl" />
@@ -19,12 +20,13 @@
 					<a :href="link" target="_blank">
 						<i>{{ author }}</i>
 					</a>
-					<br><br>
+					<br /><br />
 					<p>
 						<small v-html="strippedDescription" />
 					</p>
 				</div>
-				<NcAppNavigationNew v-if="!isSubscribed"
+				<NcAppNavigationNew
+					v-if="!isSubscribed"
 					:text="t('repod', 'Subscribe')"
 					@click="addSubscription">
 					<template #icon>
@@ -90,7 +92,10 @@ export default {
 	methods: {
 		async addSubscription() {
 			try {
-				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [this.url], remove: [] })
+				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), {
+					add: [this.url],
+					remove: [],
+				})
 			} catch (e) {
 				console.error(e)
 				showError(t('repod', 'Error while adding the feed'))
@@ -100,55 +105,55 @@ export default {
 		},
 		copyFeed() {
 			window.navigator.clipboard.writeText(this.url)
-			showSuccess(t('repod', 'Feed\'s link copied to the clipboard'))
+			showSuccess(t('repod', "Feed's link copied to the clipboard"))
 		},
 	},
 }
 </script>
 
 <style scoped>
-	.background {
+.background {
 	filter: blur(1rem) brightness(50%);
 	height: auto;
 	left: 0;
-		opacity: .4;
+	opacity: 0.4;
 	position: absolute;
 	top: 0;
 	width: 100%;
 	z-index: -1;
-	}
+}
 
-	.content {
+.content {
 	display: flex;
 	gap: 1rem;
 	height: 10rem;
 	position: relative;
-	}
+}
 
-	.feed {
+.feed {
 	display: flex;
-		gap: .2rem;
+	gap: 0.2rem;
-		margin: .5rem;
+	margin: 0.5rem;
-	}
+}
 
-	.header {
+.header {
 	height: 14rem;
 	overflow: hidden;
 	padding: 2rem;
 	position: relative;
-	}
+}
 
-	.infos {
+.infos {
 	overflow: auto;
-	}
+}
 
-	.inner {
+.inner {
 	display: flex;
-	}
+}
 
-	@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 768px) {
 	.inner {
 		flex-direction: column;
 	}
-	}
+}
 </style>

src/components/Feed/Episodes.vue

@@ -2,17 +2,19 @@
 	<div>
 		<Loading v-if="loading" />
 		<ul v-if="!loading">
-			<NcListItem v-for="episode in filteredEpisodes"
+			<NcListItem
+				v-for="episode in filteredEpisodes"
 				:key="episode.guid"
 				:active="isCurrentEpisode(episode)"
-				:class="hasEnded(episode) ? 'ended': ''"
+				:class="hasEnded(episode) ? 'ended' : ''"
 				:details="formatLocaleDate(new Date(episode.pubDate?.date))"
 				:force-display-actions="true"
 				:name="episode.name"
 				:title="episode.description"
 				@click="modalEpisode = episode">
 				<template #actions>
-					<NcActionButton v-if="!isCurrentEpisode(episode)"
+					<NcActionButton
+						v-if="!isCurrentEpisode(episode)"
 						:aria-label="t('repod', 'Play')"
 						:name="t('repod', 'Play')"
 						:title="t('repod', 'Play')"
@@ -21,7 +23,8 @@
 							<PlayIcon :size="20" />
 						</template>
 					</NcActionButton>
-					<NcActionButton v-if="isCurrentEpisode(episode)"
+					<NcActionButton
+						v-if="isCurrentEpisode(episode)"
 						:aria-label="t('repod', 'Stop')"
 						:name="t('repod', 'Stop')"
 						:title="t('repod', 'Stop')"
@@ -33,7 +36,8 @@
 				</template>
 				<template #extra>
 					<NcActions>
-						<NcActionButton v-if="episode.duration && !hasEnded(episode)"
+						<NcActionButton
+							v-if="episode.duration && !hasEnded(episode)"
 							:aria-label="t('repod', 'Mark as read')"
 							:disabled="loadingAction"
 							:name="t('repod', 'Mark as read')"
@@ -43,7 +47,8 @@
 								<PlaylistPlayIcon :size="20" />
 							</template>
 						</NcActionButton>
-						<NcActionButton v-if="episode.duration && hasEnded(episode)"
+						<NcActionButton
+							v-if="episode.duration && hasEnded(episode)"
 							:aria-label="t('repod', 'Mark as unread')"
 							:disabled="loadingAction"
 							:name="t('repod', 'Mark as unread')"
@@ -53,7 +58,8 @@
 								<PlaylistRemoveIcon :size="20" />
 							</template>
 						</NcActionButton>
-						<NcActionLink v-if="episode.link"
+						<NcActionLink
+							v-if="episode.link"
 							:href="episode.link"
 							:name="t('repod', 'Open website')"
 							target="_blank"
@@ -62,7 +68,8 @@
 								<OpenInNewIcon :size="20" />
 							</template>
 						</NcActionLink>
-						<NcActionLink v-if="episode.url"
+						<NcActionLink
+							v-if="episode.url"
 							:href="episode.url"
 							:name="t('repod', 'Download')"
 							target="_blank"
@@ -74,14 +81,16 @@
 					</NcActions>
 				</template>
 				<template #icon>
-					<NcAvatar :display-name="episode.name"
+					<NcAvatar
+						:display-name="episode.name"
 						:is-no-user="true"
 						:url="episode.image" />
 				</template>
 				<template #indicator>
-					<NcProgressBar v-if="isListening(episode)"
+					<NcProgressBar
+						v-if="isListening(episode)"
 						class="progress"
-						:value="episode.action.position * 100 / episode.action.total" />
+						:value="(episode.action.position * 100) / episode.action.total" />
 				</template>
 				<template #subname>
 					{{ episode.duration }}
@@ -89,7 +98,8 @@
 			</NcListItem>
 		</ul>
 		<NcModal v-if="modalEpisode" @close="modalEpisode = null">
-			<Modal :description="modalEpisode.description"
+			<Modal
+				:description="modalEpisode.description"
 				:image="modalEpisode.image"
 				:link="modalEpisode.link"
 				:name="modalEpisode.name"
@@ -101,8 +111,20 @@
 </template>
 
 <script>
-import { NcActionButton, NcActionLink, NcActions, NcAvatar, NcListItem, NcModal, NcProgressBar } from '@nextcloud/vue'
+import {
-import { durationToSeconds, formatEpisodeTimestamp, formatLocaleDate } from '../../utils/time.js'
+	NcActionButton,
+	NcActionLink,
+	NcActions,
+	NcAvatar,
+	NcListItem,
+	NcModal,
+	NcProgressBar,
+} from '@nextcloud/vue'
+import {
+	durationToSeconds,
+	formatEpisodeTimestamp,
+	formatLocaleDate,
+} from '../../utils/time.js'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
 import { EventBus } from '../../store/bus.js'
 import Loading from '../Atoms/Loading.vue'
@@ -175,8 +197,12 @@ export default {
 	async mounted() {
 		try {
 			this.loading = true
-			const episodes = await axios.get(generateUrl('/apps/repod/episodes/list?url={url}', { url: this.url }))
+			const episodes = await axios.get(
-			this.episodes = [...episodes.data].sort((a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date))
+				generateUrl('/apps/repod/episodes/list?url={url}', { url: this.url }),
+			)
+			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)
@@ -191,18 +217,22 @@ export default {
 	methods: {
 		formatLocaleDate,
 		hasEnded(episode) {
-			return episode.action
+			return (
-				&& episode.action.position > 0
+				episode.action &&
-				&& episode.action.total > 0
+				episode.action.position > 0 &&
-				&& episode.action.position >= episode.action.total
+				episode.action.total > 0 &&
+				episode.action.position >= episode.action.total
+			)
 		},
 		isCurrentEpisode(episode) {
 			return this.currentEpisode && this.currentEpisode.url === episode.url
 		},
 		isListening(episode) {
-			return episode.action
+			return (
-				&& episode.action.action.toLowerCase() === 'play'
+				episode.action &&
-				&& !this.hasEnded(episode)
+				episode.action.action.toLowerCase() === 'play' &&
+				!this.hasEnded(episode)
+			)
 		},
 		load(episode) {
 			this.$store.dispatch('player/load', episode)
@@ -220,7 +250,9 @@ export default {
 					position: read ? durationToSeconds(episode.duration) : 0,
 					total: durationToSeconds(episode.duration),
 				}
-				await axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [episode.action])
+				await axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
+					episode.action,
+				])
 				this.updateList(episode)
 			} catch (e) {
 				console.error(e)
@@ -230,18 +262,18 @@ export default {
 			}
 		},
 		updateList(episode) {
-			this.episodes = this.episodes.map((e) => e.url === episode.url ? episode : e)
+			this.episodes = this.episodes.map((e) => (e.url === episode.url ? episode : e))
 		},
 	},
 }
 </script>
 
 <style scoped>
-	.ended {
+.ended {
-		opacity: .4;
+	opacity: 0.4;
-	}
+}
 
-	.progress {
+.progress {
-		margin-top: .4rem;
+	margin-top: 0.4rem;
-	}
+}
 </style>

src/components/Player/Bar.vue

@@ -1,10 +1,10 @@
 <template>
 	<div v-if="player.episode" class="footer">
-		<img class="background" :src="player.episode.image">
+		<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">
+			<img :src="player.episode.image" />
 			<Infos class="infos" />
 			<Controls class="controls" />
 			<Timer class="timer" />
@@ -40,18 +40,18 @@ export default {
 </script>
 
 <style scoped>
-	.background {
+.background {
 	filter: blur(1rem) brightness(50%);
 	height: auto;
 	left: 0;
-		opacity: .4;
+	opacity: 0.4;
 	position: absolute;
 	top: 0;
 	width: 100%;
 	z-index: -1;
-	}
+}
 
-	.footer {
+.footer {
 	background-color: var(--color-main-background);
 	bottom: 0;
 	height: 6rem;
@@ -59,30 +59,31 @@ export default {
 	position: absolute;
 	width: 100%;
 	z-index: 2000;
-	}
+}
 
-	.player {
+.player {
 	display: flex;
 	gap: 1rem;
 	height: 6rem;
 	justify-content: space-between;
-	}
+}
 
-	.timer {
+.timer {
 	width: 30%;
-	}
+}
 
-	.volume {
+.volume {
 	width: 10%;
-	}
+}
 
-	@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 768px) {
 	.infos {
 		flex: 2;
 	}
 
-		.timer, .volume {
+	.timer,
+	.volume {
 		display: none;
 	}
-	}
+}
 </style>

src/components/Player/Controls.vue

@@ -1,10 +1,12 @@
 <template>
 	<div class="controls">
-		<PauseIcon v-if="!player.paused"
+		<PauseIcon
+			v-if="!player.paused"
 			class="pointer"
 			:size="50"
 			@click="$store.dispatch('player/pause')" />
-		<PlayIcon v-if="player.paused"
+		<PlayIcon
+			v-if="player.paused"
 			class="pointer"
 			:size="50"
 			@click="$store.dispatch('player/play')" />
@@ -30,11 +32,11 @@ export default {
 </script>
 
 <style scoped>
-	.controls {
+.controls {
 	display: flex;
-	}
+}
 
-	.pointer {
+.pointer {
 	cursor: pointer;
-	}
+}
 </style>

src/components/Player/Infos.vue

@@ -7,7 +7,8 @@
 			<i>{{ player.episode.title }}</i>
 		</router-link>
 		<NcModal v-if="modal" @close="modal = false">
-			<Modal :description="player.episode.description"
+			<Modal
+				:description="player.episode.description"
 				:image="player.episode.image"
 				:link="player.episode.link"
 				:name="player.episode.name"
@@ -46,14 +47,14 @@ export default {
 </script>
 
 <style scoped>
-    .pointer {
+.pointer {
 	cursor: pointer;
-	}
+}
 
-	.root {
+.root {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	width: 40%;
-    }
+}
 </style>

src/components/Player/ProgressBar.vue

@@ -1,10 +1,11 @@
 <template>
-	<input class="progress"
+	<input
+		class="progress"
 		:max="player.duration"
 		min="0"
 		type="range"
 		:value="player.currentTime"
-		@change="(event) => $store.dispatch('player/seek', event.target.value)">
+		@change="(event) => $store.dispatch('player/seek', event.target.value)" />
 </template>
 
 <script>
@@ -19,11 +20,11 @@ export default {
 </script>
 
 <style scoped>
-	.progress {
+.progress {
 	height: 4px;
 	min-height: 4px;
 	position: absolute;
 	top: -2px;
 	width: 99%;
-	}
+}
 </style>

src/components/Player/Timer.vue

@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<span>{{ formatTimer(new Date(player.currentTime*1000)) }}</span>
+		<span>{{ formatTimer(new Date(player.currentTime * 1000)) }}</span>
 		<span>/</span>
-		<span>{{ formatTimer(new Date(player.duration*1000)) }}</span>
+		<span>{{ formatTimer(new Date(player.duration * 1000)) }}</span>
 	</div>
 </template>
 
@@ -23,10 +23,10 @@ export default {
 </script>
 
 <style scoped>
-	div {
+div {
 	align-items: center;
 	display: flex;
 	gap: 5px;
 	justify-content: center;
-	}
+}
 </style>

src/components/Player/Volume.vue

@@ -1,27 +1,28 @@
 <template>
 	<div>
-		<VolumeHighIcon v-if="player.volume > 0.7"
+		<VolumeHighIcon v-if="player.volume > 0.7" class="pointer" :size="30" @click="mute" />
+		<VolumeLowIcon
+			v-if="player.volume > 0 && player.volume <= 0.3"
 			class="pointer"
 			:size="30"
 			@click="mute" />
-		<VolumeLowIcon v-if="player.volume > 0 && player.volume <= 0.3"
+		<VolumeMediumIcon
+			v-if="player.volume > 0.3 && player.volume <= 0.7"
 			class="pointer"
 			:size="30"
 			@click="mute" />
-		<VolumeMediumIcon v-if="player.volume > 0.3 && player.volume <= 0.7"
+		<VolumeMuteIcon
-			class="pointer"
+			v-if="player.volume === 0"
-			:size="30"
-			@click="mute" />
-		<VolumeMuteIcon v-if="player.volume === 0"
 			class="pointer"
 			:size="30"
 			@click="$store.dispatch('player/volume', volumeMuted)" />
-		<input max="1"
+		<input
+			max="1"
 			min="0"
 			step="0.1"
 			type="range"
 			:value="player.volume"
-			@change="(event) => $store.dispatch('player/volume', event.target.value)">
+			@change="(event) => $store.dispatch('player/volume', event.target.value)" />
 	</div>
 </template>
 
@@ -59,19 +60,19 @@ export default {
 </script>
 
 <style scoped>
-    div {
+div {
 	align-items: center;
 	display: flex;
 	gap: 5px;
 	justify-content: flex-end;
-    }
+}
 
-	input {
+input {
 	transform: rotate(270deg);
 	width: 4rem;
-	}
+}
 
-	.pointer {
+.pointer {
 	cursor: pointer;
-	}
+}
 </style>

src/components/Settings/Export.vue

@@ -1,5 +1,6 @@
 <template>
-	<NcAppNavigationItem :href="generateUrl('/apps/repod/opml/export')"
+	<NcAppNavigationItem
+		:href="generateUrl('/apps/repod/opml/export')"
 		:name="t('repod', 'Export subscriptions')">
 		<template #icon>
 			<ExportIcon :size="20" />

src/components/Settings/Filters.vue

@@ -1,23 +1,41 @@
 <template>
-	<NcAppNavigationItem :allow-collapse="true"
+	<NcAppNavigationItem
+		:allow-collapse="true"
 		menu-placement="top"
 		:name="t('repod', 'Filtering episodes')">
 		<template #actions>
-			<NcActionCheckbox :checked="all"
+			<NcActionCheckbox
+				:checked="all"
 				:disabled="all"
-				@update:checked="(checked) => $store.commit('settings/filters', { listened: checked, listening: checked, unlistened: checked })">
+				@update:checked="
+					(checked) =>
+						$store.commit('settings/filters', {
+							listened: checked,
+							listening: checked,
+							unlistened: checked,
+						})
+				">
 				{{ t('repod', 'Show all') }}
 			</NcActionCheckbox>
-			<NcActionCheckbox :checked="filters.listened"
+			<NcActionCheckbox
-				@update:checked="(checked) => $store.commit('settings/filters', { listened: checked })">
+				:checked="filters.listened"
+				@update:checked="
+					(checked) => $store.commit('settings/filters', { listened: checked })
+				">
 				{{ t('repod', 'Listened') }}
 			</NcActionCheckbox>
-			<NcActionCheckbox :checked="filters.listening"
+			<NcActionCheckbox
-				@update:checked="(checked) => $store.commit('settings/filters', { listening: checked })">
+				:checked="filters.listening"
+				@update:checked="
+					(checked) => $store.commit('settings/filters', { listening: checked })
+				">
 				{{ t('repod', 'Listening') }}
 			</NcActionCheckbox>
-			<NcActionCheckbox :checked="filters.unlistened"
+			<NcActionCheckbox
-				@update:checked="(checked) => $store.commit('settings/filters', { unlistened: checked })">
+				:checked="filters.unlistened"
+				@update:checked="
+					(checked) => $store.commit('settings/filters', { unlistened: checked })
+				">
 				{{ t('repod', 'Unlistened') }}
 			</NcActionCheckbox>
 		</template>

src/components/Settings/Import.vue

@@ -4,16 +4,18 @@
 			<NcModal v-if="modal" @close="modal = false">
 				<div class="modal">
 					<h2>{{ t('repod', 'Import OPML file') }}</h2>
-					<form v-if="!loading"
+					<form
+						v-if="!loading"
 						:action="generateUrl('/apps/repod/opml/import')"
 						enctype="multipart/form-data"
 						method="post"
 						@submit.prevent="importOpml">
-						<input accept="application/xml,.opml"
+						<input
+							accept="application/xml,.opml"
 							name="import"
 							required
-							type="file">
+							type="file" />
-						<input type="submit">
+						<input type="submit" />
 					</form>
 					<Loading v-if="loading" />
 				</div>
@@ -64,10 +66,10 @@ export default {
 </script>
 
 <style scoped>
-	.modal {
+.modal {
 	align-items: center;
 	display: flex;
 	flex-direction: column;
 	margin: 2rem;
-	}
+}
 </style>

src/components/Settings/Rate.vue

@@ -1,5 +1,6 @@
 <template>
-	<NcAppNavigationItem href="https://apps.nextcloud.com/apps/repod#comments"
+	<NcAppNavigationItem
+		href="https://apps.nextcloud.com/apps/repod#comments"
 		:name="t('repod', 'Rate RePod ❤️')">
 		<template #icon>
 			<StarIcon :size="20" />

src/components/Settings/Speed.vue

@@ -2,15 +2,9 @@
 	<NcAppNavigationItem :name="t('repod', 'Playback speed')">
 		<template #extra>
 			<div class="extra">
-				<MinusIcon class="pointer"
+				<MinusIcon class="pointer" :size="20" @click="changeRate(-0.1)" />
-					:size="20"
+				<NcCounterBubble class="counter"> x{{ player.rate }} </NcCounterBubble>
-					@click="changeRate(-.1)" />
+				<PlusIcon class="pointer" :size="20" @click="changeRate(0.1)" />
-				<NcCounterBubble class="counter">
-					x{{ player.rate }}
-				</NcCounterBubble>
-				<PlusIcon class="pointer"
-					:size="20"
-					@click="changeRate(.1)" />
 			</div>
 		</template>
 		<template #icon>
@@ -55,17 +49,17 @@ export default {
 </script>
 
 <style scoped>
-	.counter {
+.counter {
 	height: 20px;
-	}
+}
 
-	.extra {
+.extra {
 	align-items: center;
 	display: flex;
-        gap: .5rem;
+	gap: 0.5rem;
-    }
+}
 
-	.pointer {
+.pointer {
 	cursor: pointer;
-	}
+}
 </style>

src/components/Sidebar/Item.vue

@@ -1,9 +1,8 @@
 <template>
-	<NcAppNavigationItem :loading="loading"
+	<NcAppNavigationItem :loading="loading" :name="feed ? feed.title : url" :to="hash">
-		:name="feed ? feed.title : url"
-		:to="hash">
 		<template #actions>
-			<NcActionButton :aria-label="t(`core`, 'Delete')"
+			<NcActionButton
+				:aria-label="t(`core`, 'Delete')"
 				:name="t(`core`, 'Delete')"
 				:title="t(`core`, 'Delete')"
 				@click="deleteSubscription">
@@ -13,7 +12,8 @@
 			</NcActionButton>
 		</template>
 		<template #icon>
-			<NcAvatar v-if="feed"
+			<NcAvatar
+				v-if="feed"
 				:display-name="feed.author || feed.title"
 				:is-no-user="true"
 				:url="feed.imageUrl" />
@@ -60,7 +60,11 @@ export default {
 	},
 	async mounted() {
 		try {
-			const podcastData = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', { url: this.url }))
+			const podcastData = await axios.get(
+				generateUrl('/apps/gpoddersync/personal_settings/podcast_data?url={url}', {
+					url: this.url,
+				}),
+			)
 			this.feed = podcastData.data.data
 		} catch (e) {
 			this.failed = true
@@ -74,7 +78,10 @@ export default {
 			if (confirm(t('repod', 'Are you sure you want to delete this subscription?'))) {
 				try {
 					this.loading = true
-					await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [], remove: [this.url] })
+					await axios.post(
+						generateUrl('/apps/gpoddersync/subscription_change/create'),
+						{ add: [], remove: [this.url] },
+					)
 				} catch (e) {
 					console.error(e)
 					showError(t('repod', 'Error while removing the feed'))

src/components/Sidebar/Subscriptions.vue

@@ -11,7 +11,8 @@
 				</router-link>
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
-					<Item v-for="subscriptionUrl of subscriptions"
+					<Item
+						v-for="subscriptionUrl of subscriptions"
 						:key="subscriptionUrl"
 						:url="subscriptionUrl" />
 				</NcAppNavigationList>

src/main.js

@@ -14,5 +14,5 @@ export default new Vue({
 	el: '#content',
 	router,
 	store,
-	render: h => h(App),
+	render: (h) => h(App),
 })

src/store/player.js

@@ -54,7 +54,11 @@ export const player = {
 				audio.load()
 				audio.play()
 
-				if (episode.action && episode.action.position && episode.action.position < episode.action.total) {
+				if (
+					episode.action &&
+					episode.action.position &&
+					episode.action.position < episode.action.total
+				) {
 					audio.currentTime = episode.action.position
 					state.started = audio.currentTime
 				}
@@ -84,7 +88,9 @@ export const player = {
 		load: async (context, episode) => {
 			context.commit('episode', episode)
 			try {
-				const action = await axios.get(generateUrl('/apps/repod/episodes/action?url={url}', { url: episode.url }))
+				const action = await axios.get(
+					generateUrl('/apps/repod/episodes/action?url={url}', { url: episode.url }),
+				)
 				context.commit('action', action.data)
 			} catch {}
 		},
@@ -118,7 +124,9 @@ export const player = {
 				position: Math.round(audio.currentTime),
 				total: Math.round(audio.duration),
 			}
-			axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [episode.action])
+			axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
+				episode.action,
+			])
 			EventBus.$emit('updateEpisodesList', episode)
 		},
 		volume: (_, volume) => {

src/store/subscriptions.js

@@ -13,9 +13,16 @@ export const subscriptions = {
 	},
 	actions: {
 		fetch: async (context) => {
-			const metrics = await axios.get(generateUrl('/apps/gpoddersync/personal_settings/metrics'))
+			const metrics = await axios.get(
-			const subs = [...metrics.data.subscriptions].sort((a, b) => b.listenedSeconds - a.listenedSeconds)
+				generateUrl('/apps/gpoddersync/personal_settings/metrics'),
-			context.commit('set', subs.map(sub => sub.url))
+			)
+			const subs = [...metrics.data.subscriptions].sort(
+				(a, b) => b.listenedSeconds - a.listenedSeconds,
+			)
+			context.commit(
+				'set',
+				subs.map((sub) => sub.url),
+			)
 		},
 	},
 }

src/utils/cookies.js

@@ -6,9 +6,7 @@
  */
 export const getCookie = (name) => {
 	const cookies = document.cookie.split('; ')
-	const value = cookies
+	const value = cookies.find((c) => c.startsWith(name + '='))?.split('=')[1]
-		.find(c => c.startsWith(name + '='))
-		?.split('=')[1]
 	if (value === undefined) {
 		return null
 	}

src/utils/debounce.js

@@ -1,11 +1,11 @@
 // https://stackoverflow.com/a/53486112
 export const debounce = (fn, delay) => {
 	let timeoutID = null
-	return function() {
+	return function () {
 		clearTimeout(timeoutID)
 		const args = arguments
 		const that = this
-		timeoutID = setTimeout(function() {
+		timeoutID = setTimeout(function () {
 			fn.apply(that, args)
 		}, delay)
 	}

src/utils/text.js

@@ -1,7 +1,7 @@
 // https://stackoverflow.com/a/5002618
 export const cleanHtml = (text) => {
 	const pre = document.createElement('pre')
-	pre.innerHTML = text.replace(/<br\s*\/?>/mg, '\n')
+	pre.innerHTML = text.replace(/<br\s*\/?>/gm, '\n')
 	const strippedText = pre.textContent || pre.innerText || ''
-	return strippedText.replace(/\n/mg, '<br>')
+	return strippedText.replace(/\n/gm, '<br>')
 }

src/utils/time.js

@@ -36,7 +36,8 @@ export const formatEpisodeTimestamp = (date) => {
  * @param {Date} date The date
  * @return {string}
  */
-export const formatLocaleDate = (date) => date.toLocaleDateString(undefined, { dateStyle: 'medium' })
+export const formatLocaleDate = (date) =>
+	date.toLocaleDateString(undefined, { dateStyle: 'medium' })
 
 /**
  * Returns the number of seconds from a duration feed's entry
@@ -46,7 +47,7 @@ export const formatLocaleDate = (date) => date.toLocaleDateString(undefined, { d
 export const durationToSeconds = (duration) => {
 	const splitDuration = duration.split(':').reverse()
 	let seconds = parseInt(splitDuration[0])
-	seconds += (splitDuration.length > 1) ? parseInt(splitDuration[1]) * 60 : 0
+	seconds += splitDuration.length > 1 ? parseInt(splitDuration[1]) * 60 : 0
-	seconds += (splitDuration.length > 2) ? parseInt(splitDuration[2]) * 60 * 60 : 0
+	seconds += splitDuration.length > 2 ? parseInt(splitDuration[2]) * 60 * 60 : 0
 	return seconds
 }

src/views/Discover.vue

@@ -37,7 +37,7 @@ export default {
 </script>
 
 <style scoped>
-	.main {
+.main {
 	padding: 15px 51px;
-	}
+}
 </style>

src/views/Feed.vue

@@ -1,14 +1,13 @@
 <template>
 	<AppContent>
 		<Loading v-if="loading" />
-		<NcEmptyContent v-if="failed"
+		<NcEmptyContent v-if="failed" class="error" :name="t('repod', 'Error loading feed')">
-			class="error"
-			:name="t('repod', 'Error loading feed')">
 			<template #icon>
 				<Alert />
 			</template>
 		</NcEmptyContent>
-		<Banner v-if="feed"
+		<Banner
+			v-if="feed"
 			:author="feed.author"
 			:description="feed.description"
 			:image-url="feed.imageUrl"
@@ -53,7 +52,9 @@ export default {
 	},
 	async mounted() {
 		try {
-			const podcastData = await axios.get(generateUrl('/apps/repod/podcast?url={url}', { url: this.url }))
+			const podcastData = await axios.get(
+				generateUrl('/apps/repod/podcast?url={url}', { url: this.url }),
+			)
 			this.feed = podcastData.data
 		} catch (e) {
 			this.failed = true
@@ -66,7 +67,7 @@ export default {
 </script>
 
 <style scoped>
-	.error {
+.error {
 	margin: 2rem;
-	}
+}
 </style>

src/views/GPodder.vue

@@ -14,11 +14,7 @@
 </template>
 
 <script>
-import {
+import { NcAppContent, NcButton, NcEmptyContent } from '@nextcloud/vue'
-	NcAppContent,
-	NcButton,
-	NcEmptyContent,
-} from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
 import { generateUrl } from '@nextcloud/router'