Polish PodNotes player and episode row state

src/parser/feedParser.test.ts

@@ -25,6 +25,7 @@ const sampleRssFeed = `<?xml version="1.0" encoding="UTF-8"?>
       <description>First episode description</description>
       <pubDate>Mon, 01 Jan 2024 00:00:00 GMT</pubDate>
       <itunes:title>Episode 1 iTunes Title</itunes:title>
+      <itunes:duration>01:02:03</itunes:duration>
     </item>
     <item>
       <title>Episode 2</title>
@@ -202,6 +203,7 @@ describe("FeedParser", () => {
 			expect(episode.description).toBe("First episode description");
 			expect(episode.episodeDate).toEqual(new Date("Mon, 01 Jan 2024 00:00:00 GMT"));
 			expect(episode.itunesTitle).toBe("Episode 1 iTunes Title");
+			expect(episode.duration).toBe(3723);
 			// Feed metadata should now be populated
 			expect(episode.podcastName).toBe("Test Podcast");
 			expect(episode.feedUrl).toBe("https://example.com/feed.xml");

src/parser/feedParser.ts

@@ -114,6 +114,7 @@ export default class FeedParser {
 		const pubDateEl = item.querySelector("pubDate");
 		const itunesImageEl = this.findImageElement(item);
 		const itunesTitleEl = item.getElementsByTagName("itunes:title")[0];
+		const durationEl = item.getElementsByTagName("itunes:duration")[0];
 		const chaptersEl = item.getElementsByTagName("podcast:chapters")[0];
 
 		if (!titleEl || !streamUrlEl || !pubDateEl) {
@@ -140,6 +141,7 @@ export default class FeedParser {
 			podcastName: this.feed?.title || "",
 			artworkUrl,
 			episodeDate: pubDate,
+			duration: parseDuration(durationEl?.textContent),
 			feedUrl: this.feed?.url || "",
 			itunesTitle: itunesTitle || "",
 			chaptersUrl,
@@ -155,3 +157,28 @@ export default class FeedParser {
 		return body;
 	}
 }
+
+function parseDuration(rawDuration: string | null | undefined): number | undefined {
+	if (!rawDuration) return undefined;
+
+	const trimmedDuration = rawDuration.trim();
+	if (!trimmedDuration) return undefined;
+
+	if (/^\d+$/.test(trimmedDuration)) {
+		return Number.parseInt(trimmedDuration, 10);
+	}
+
+	const segments = trimmedDuration
+		.split(":")
+		.map((segment) => Number.parseInt(segment, 10));
+
+	if (
+		segments.length < 2 ||
+		segments.length > 3 ||
+		segments.some((segment) => Number.isNaN(segment))
+	) {
+		return undefined;
+	}
+
+	return segments.reduce((total, segment) => total * 60 + segment, 0);
+}

src/types/Episode.ts

@@ -8,6 +8,7 @@ export interface Episode {
 	feedUrl?: string,
 	artworkUrl?: string;
 	episodeDate?: Date;
+	duration?: number;
 	itunesTitle?: string;
 	/** URL to the podcast:chapters JSON file */
 	chaptersUrl?: string;

src/ui/PodcastView/EpisodeList.svelte

@@ -2,16 +2,35 @@
 	import type { Episode } from "src/types/Episode";
 	import { createEventDispatcher } from "svelte";
 	import EpisodeListItem from "./EpisodeListItem.svelte";
-	import { hidePlayedEpisodes, playedEpisodes } from "src/store";
+	import {
+		downloadedEpisodes,
+		favorites,
+		hidePlayedEpisodes,
+		playedEpisodes,
+		plugin,
+		queue,
+	} from "src/store";
 	import Icon from "../obsidian/Icon.svelte";
 	import Text from "../obsidian/Text.svelte";
 	import Loading from "./Loading.svelte";
 	import { getEpisodeKey } from "src/utility/episodeKey";
-	import { isEpisodeFinished } from "src/utility/episodeStatus";
+	import { getPlayedEpisode, isEpisodeFinished } from "src/utility/episodeStatus";
 	import {
 		createEpisodeListEntries,
 		type EpisodeListEntry,
 	} from "src/utility/episodeListEntry";
+	import type DownloadedEpisode from "src/types/DownloadedEpisode";
+	import type { Playlist } from "src/types/Playlist";
+	import type { PlayedEpisode } from "src/types/PlayedEpisode";
+	import { getPodcastNote } from "src/createPodcastNote";
+
+	type EpisodeQuickAction =
+		| "play"
+		| "togglePlayed"
+		| "download"
+		| "note"
+		| "favorite"
+		| "queue";
 
 	export let episodes: Episode[] = [];
 	export let episodeEntries: EpisodeListEntry[] | null = null;
@@ -20,6 +39,7 @@
 	export let showPlayedToggle: boolean = true;
 	export let alwaysShowPlayedEpisodes: boolean = false;
 	export let isLoading: boolean = false;
+	export let noteRefreshToken: number = 0;
 	let searchInputQuery: string = "";
 	$: listEntries = episodeEntries ?? createEpisodeListEntries(episodes);
 	$: shouldHidePlayedEpisodes = $hidePlayedEpisodes && !alwaysShowPlayedEpisodes;
@@ -52,9 +72,69 @@
 		});
 	}
 
+	function forwardQuickAction(
+		entry: EpisodeListEntry,
+		event: CustomEvent<{ episode: Episode; action: EpisodeQuickAction }>,
+	) {
+		dispatch("quickActionEpisode", {
+			episode: event.detail.episode,
+			action: event.detail.action,
+			entry,
+		});
+	}
+
 	function forwardSearchInput(event: CustomEvent<{ value: string }>) {
 		dispatch("search", { query: event.detail.value });
 	}
+
+	function hasEpisode(episodes: Episode[], episode: Episode): boolean {
+		const episodeKey = getEpisodeKey(episode);
+
+		return episodes.some((candidate) => {
+			const candidateKey = getEpisodeKey(candidate);
+			return candidateKey && episodeKey
+				? candidateKey === episodeKey
+				: candidate.title === episode.title;
+		});
+	}
+
+	function isEpisodeDownloaded(
+		episode: Episode,
+		downloaded: Record<string, DownloadedEpisode[]>,
+	): boolean {
+		return Boolean(downloaded[episode.podcastName]?.some(
+			(candidate) => candidate.title === episode.title,
+		));
+	}
+
+	function isEpisodeQueued(episode: Episode, currentQueue: Playlist): boolean {
+		return hasEpisode(currentQueue.episodes, episode);
+	}
+
+	function isEpisodeFavorite(
+		episode: Episode,
+		currentFavorites: Playlist,
+	): boolean {
+		return hasEpisode(currentFavorites.episodes, episode);
+	}
+
+	function findPlayedEpisode(episode: Episode): PlayedEpisode | undefined {
+		return getPlayedEpisode($playedEpisodes, episode);
+	}
+
+	function noteExists(episode: Episode): boolean {
+		noteRefreshToken;
+
+		const pluginInstance = $plugin;
+		if (!pluginInstance?.settings?.note?.path) return false;
+		if (!("app" in globalThis)) return false;
+
+		try {
+			return Boolean(getPodcastNote(episode));
+		} catch {
+			return false;
+		}
+	}
 </script>
 
 <div class="episode-list-view-container">
@@ -104,10 +184,16 @@
 			<EpisodeListItem
 				episode={entry.episode}
 				episodeFinished={isEpisodeFinished(entry.episode, $playedEpisodes)}
+				playedEpisode={findPlayedEpisode(entry.episode)}
 				showEpisodeImage={showThumbnails}
 				unavailableReason={entry.unavailableReason}
+				isDownloaded={isEpisodeDownloaded(entry.episode, $downloadedEpisodes)}
+				isQueued={isEpisodeQueued(entry.episode, $queue)}
+				isFavorite={isEpisodeFavorite(entry.episode, $favorites)}
+				noteExists={noteExists(entry.episode)}
 				on:clickEpisode={forwardClickEpisode.bind(null, entry)}
 				on:contextMenu={forwardContextMenuEpisode.bind(null, entry)}
+				on:quickAction={forwardQuickAction.bind(null, entry)}
 			/>
 		{/each}
 	</div>
@@ -146,18 +232,26 @@
 		flex-direction: row;
 		justify-content: flex-end;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.375rem;
 		width: 100%;
-		padding: 0.5rem 0.75rem;
+		padding: 0.5rem 0.875rem;
 		border-bottom: 1px solid var(--background-modifier-border);
-		background: var(--background-secondary);
+		background: var(--background-primary);
 	}
 
 	.episode-list-search {
 		flex: 1 1 auto;
 		min-width: 0;
 	}
 
+	:global(.episode-list-menu .icon-button) {
+		width: 2rem;
+		height: 2rem;
+		min-height: 2rem;
+		border-radius: 0.375rem;
+		box-shadow: none !important;
+	}
+
 	.episode-list-loading {
 		display: flex;
 		align-items: center;

src/ui/PodcastView/EpisodeListHeader.svelte

@@ -3,7 +3,7 @@
     export let artworkUrl: string = "";
 </script>
 
-<div class="podcast-header">
+<div class="podcast-header" class:podcast-header-with-artwork={artworkUrl}>
     {#if artworkUrl}
         <img id="podcast-artwork" src={artworkUrl} alt={text} />
     {/if}
@@ -13,26 +13,35 @@
 <style>
 	.podcast-header {
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
+		flex-direction: row;
+		justify-content: flex-start;
 		align-items: center;
 		gap: 0.75rem;
-		padding: 1rem;
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--background-modifier-border);
 	}
 
 	#podcast-artwork {
-		width: 5rem;
-		height: 5rem;
+		flex: 0 0 3.25rem;
+		width: 3.25rem;
+		height: 3.25rem;
 		border-radius: 0.5rem;
 		object-fit: cover;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 	}
 
 	.podcast-heading {
 		margin: 0;
-		font-size: 1.125rem;
+		font-size: 1rem;
 		font-weight: 600;
-		text-align: center;
+		line-height: 1.25;
+		text-align: left;
 		color: var(--text-normal);
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.podcast-header:not(.podcast-header-with-artwork) {
+		justify-content: center;
+		padding: 0.875rem 1rem;
 	}
-</style>
+</style>