refactor: ♻️ move puting action to episode on separate ts file

src/components/Feed/Episode.vue

@@ -41,7 +41,7 @@
 					:model-value="hasEnded(episode)"
 					:name="t('repod', 'Read')"
 					:title="t('repod', 'Read')"
-					@click="markAs(episode, !hasEnded(episode))">
+					@click="read(episode, !hasEnded(episode))">
 					<template #icon>
 						<PlaylistPlayIcon v-if="!hasEnded(episode)" :size="20" />
 						<PlaylistRemoveIcon v-if="hasEnded(episode)" :size="20" />
@@ -106,12 +106,7 @@ import {
 	NcModal,
 	NcProgressBar,
 } from '@nextcloud/vue'
-import {
-	durationToSeconds,
-	formatEpisodeTimestamp,
-	formatLocaleDate,
-} from '../../utils/time.ts'
-import { hasEnded, isListening } from '../../utils/status.ts'
+import { hasEnded, isListening, markAs } from '../../utils/status.ts'
 import { mapActions, mapState } from 'pinia'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
@@ -124,6 +119,7 @@ import PlaylistRemoveIcon from 'vue-material-design-icons/PlaylistRemove.vue'
 import StopIcon from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
 import { filenameFromUrl } from '../../utils/url.ts'
+import { formatLocaleDate } from '../../utils/time.ts'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '../../utils/toast.ts'
 import { t } from '@nextcloud/l10n'
@@ -184,19 +180,10 @@ export default {
 		isCurrentEpisode(episode: EpisodeInterface) {
 			return this.playerEpisode?.url === episode.url
 		},
-		async markAs(episode: EpisodeInterface, read: boolean) {
+		async read(episode: EpisodeInterface, read: boolean) {
 			try {
 				this.loading = true
-				episode.action = {
-					podcast: this.url,
-					episode: episode.url,
-					guid: episode.guid,
-					action: 'play',
-					timestamp: formatEpisodeTimestamp(new Date()),
-					started: episode.action?.started || 0,
-					position: read ? durationToSeconds(episode.duration || '') : 0,
-					total: durationToSeconds(episode.duration || ''),
-				}
+				episode = markAs(episode, read, this.url)
 				await axios.post(
 					generateUrl('/apps/gpoddersync/episode_action/create'),
 					[episode.action],

src/components/Feed/Episodes.vue

@@ -30,7 +30,7 @@
 						"
 						:name="t('repod', 'Read all')"
 						:title="t('repod', 'Read all')"
-						@click="markAs(true)">
+						@click="read(true)">
 						<template #icon>
 							<PlaylistPlayIcon :size="20" />
 						</template>
@@ -49,7 +49,7 @@
 						"
 						:name="t('repod', 'Unread all')"
 						:title="t('repod', 'Unread all')"
-						@click="markAs(false)">
+						@click="read(false)">
 						<template #icon>
 							<PlaylistRemoveIcon :size="20" />
 						</template>
@@ -93,8 +93,7 @@
 
 <script lang="ts">
 import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
-import { durationToSeconds, formatEpisodeTimestamp } from '../../utils/time.ts'
-import { hasEnded, isListening } from '../../utils/status.ts'
+import { hasEnded, isListening, markAs } from '../../utils/status.ts'
 import { n, t } from '@nextcloud/l10n'
 import Episode from './Episode.vue'
 import type { EpisodeInterface } from '../../utils/types.ts'
@@ -183,25 +182,11 @@ export default {
 		isListening,
 		n,
 		t,
-		async markAs(read: boolean) {
+		async read(read: boolean) {
 			try {
-				this.episodes = this.episodes.map((episode) => {
-					if (episode.selected) {
-						episode.action = {
-							podcast: this.url,
-							episode: episode.url,
-							guid: episode.guid,
-							action: 'play',
-							timestamp: formatEpisodeTimestamp(new Date()),
-							started: episode.action?.started || 0,
-							position: read
-								? durationToSeconds(episode.duration || '')
-								: 0,
-							total: durationToSeconds(episode.duration || ''),
-						}
-					}
-					return episode
-				})
+				this.episodes = this.episodes.map((episode) =>
+					episode.selected ? markAs(episode, read, this.url) : episode,
+				)
 				await axios.post(
 					generateUrl('/apps/gpoddersync/episode_action/create'),
 					this.episodes.filter((e) => e.selected).map((e) => e.action),

src/utils/status.ts

@@ -1,3 +1,4 @@
+import { durationToSeconds, formatEpisodeTimestamp } from './time'
 import type { EpisodeInterface } from './types'
 
 export const hasEnded = (episode: EpisodeInterface) =>
@@ -14,3 +15,17 @@ export const isListening = (episode: EpisodeInterface) =>
 	episode.action.action.toLowerCase() === 'play' &&
 	episode.action.position > 0 &&
 	!hasEnded(episode)
+
+export const markAs = (episode: EpisodeInterface, read: boolean, url: string) => {
+	episode.action = {
+		podcast: url,
+		episode: episode.url,
+		guid: episode.guid,
+		action: 'play',
+		timestamp: formatEpisodeTimestamp(new Date()),
+		started: episode.action?.started || 0,
+		position: read ? durationToSeconds(episode.duration || '') : 0,
+		total: durationToSeconds(episode.duration || ''),
+	}
+	return episode
+}