feat: context menu on player image

src/ui/PodcastView/EpisodePlayer.svelte

@@ -122,6 +122,13 @@
 		spawnEpisodeContextMenu(episode, event);
 	}
 
+	function handleContextMenuEpisodeImage(event: MouseEvent) {
+		spawnEpisodeContextMenu($currentEpisode, event, {
+			play: true,
+			markPlayed: true
+		});
+	}
+
 	function handleClickEpisode(event: CustomEvent<{ episode: Episode }>) {
 		const { episode } = event.detail;
 		currentEpisode.set(episode);
@@ -135,6 +142,7 @@
 		<div
 			class="hover-container"
 			on:click={togglePlayback}
+			on:contextmenu={handleContextMenuEpisodeImage}
 			on:mouseenter={() => (isHoveringArtwork = true)}
 			on:mouseleave={() => (isHoveringArtwork = false)}
 		>

src/ui/PodcastView/spawnEpisodeContextMenu.ts

@@ -4,102 +4,120 @@ import { Episode } from "src/types/Episode";
 import { ViewState } from "src/types/ViewState";
 import { get } from "svelte/store";
 
+interface DisabledMenuItems {
+	play: boolean;
+	markPlayed: boolean;
+	favorite: boolean;
+	queue: boolean;
+	playlists: boolean;
+}
+
 export default function spawnEpisodeContextMenu(
 	episode: Episode,
 	event: MouseEvent,
+	disabledMenuItems?: Partial<DisabledMenuItems>
 ) {
 	const menu = new Menu();
 
-	menu.addItem(item => item
-		.setIcon("play")
-		.setTitle("Play")
-		.onClick(() => {
-			currentEpisode.set(episode);
-			viewState.set(ViewState.Player);
-		}));
-
-	const episodeIsFavorite = get(favorites).episodes.find(e => e.title === episode.title);
-	const episodeIsInQueue = get(queue).episodes.find(e => e.title === episode.title);
-	const episodeIsPlayed = Object.values(get(playedEpisodes)).find(e => (e.title === episode.title && e.finished));
-
-	menu.addItem(item => item
-		.setIcon(episodeIsPlayed ? "cross" : "check")
-		.setTitle(`Mark as ${episodeIsPlayed ? "Unplayed" : "Played"}`)
-		.onClick(() => {
-			if (episodeIsPlayed) {
-				playedEpisodes.markAsUnplayed(episode);
-			} else {
-				playedEpisodes.markAsPlayed(episode);
-			}
-		})
-	);
-
-	menu.addItem(item => item
-		.setIcon("lucide-star")
-		.setTitle(`${episodeIsFavorite ? "Remove from" : "Add to"} Favorites`)
-		.onClick(() => {
-			if (episodeIsFavorite) {
-				favorites.update(playlist => {
-					playlist.episodes = playlist.episodes.filter(e => e.title !== episode.title);
-					return playlist;
-				});
-			} else {
-				favorites.update(playlist => {
-					const newEpisodes = [...playlist.episodes, episode];
-					playlist.episodes = newEpisodes;
-
-					return playlist;
-				});
-			}
+	if (!disabledMenuItems?.play) {
+		menu.addItem(item => item
+			.setIcon("play")
+			.setTitle("Play")
+			.onClick(() => {
+				currentEpisode.set(episode);
+				viewState.set(ViewState.Player);
 		}));
+	}
 
-	menu.addItem(item => item
-		.setIcon("list-ordered")
-		.setTitle(`${episodeIsInQueue ? "Remove from" : "Add to"} Queue`)
-		.onClick(() => {
-			if (episodeIsInQueue) {
-				queue.update(playlist => {
-					playlist.episodes = playlist.episodes.filter(e => e.title !== episode.title);
-
-					return playlist;
-				});
-			} else {
-				queue.update(playlist => {
-					const newEpisodes = [...playlist.episodes, episode];
-					playlist.episodes = newEpisodes;
-					
-					return playlist;
-				});
-			}
-		}));
+	if (!disabledMenuItems?.markPlayed) {
+		const episodeIsPlayed = Object.values(get(playedEpisodes)).find(e => (e.title === episode.title && e.finished));
+		menu.addItem(item => item
+			.setIcon(episodeIsPlayed ? "cross" : "check")
+			.setTitle(`Mark as ${episodeIsPlayed ? "Unplayed" : "Played"}`)
+			.onClick(() => {
+				if (episodeIsPlayed) {
+					playedEpisodes.markAsUnplayed(episode);
+				} else {
+					playedEpisodes.markAsPlayed(episode);
+				}
+			})
+		);
+	}
 
-	menu.addSeparator();
+	if (!disabledMenuItems?.favorite) {
+		const episodeIsFavorite = get(favorites).episodes.find(e => e.title === episode.title);
+		menu.addItem(item => item
+			.setIcon("lucide-star")
+			.setTitle(`${episodeIsFavorite ? "Remove from" : "Add to"} Favorites`)
+			.onClick(() => {
+				if (episodeIsFavorite) {
+					favorites.update(playlist => {
+						playlist.episodes = playlist.episodes.filter(e => e.title !== episode.title);
+						return playlist;
+					});
+				} else {
+					favorites.update(playlist => {
+						const newEpisodes = [...playlist.episodes, episode];
+						playlist.episodes = newEpisodes;
 
-	const playlistsInStore = get(playlists);
-	for (const playlist of Object.values(playlistsInStore)) {
-		const episodeIsInPlaylist = playlist.episodes.find(e => e.title === episode.title);
+						return playlist;
+					});
+				}
+			}));
+	}
 
+	if (!disabledMenuItems?.queue) {
+		const episodeIsInQueue = get(queue).episodes.find(e => e.title === episode.title);
 		menu.addItem(item => item
-			.setIcon(playlist.icon)
-			.setTitle(`${episodeIsInPlaylist ? "Remove from" : "Add to"} ${playlist.name}`)
+			.setIcon("list-ordered")
+			.setTitle(`${episodeIsInQueue ? "Remove from" : "Add to"} Queue`)
 			.onClick(() => {
-				if (episodeIsInPlaylist) {
-					playlists.update(playlists => {
-						playlists[playlist.name].episodes = playlists[playlist.name].episodes.filter(e => e.title !== episode.title);
+				if (episodeIsInQueue) {
+					queue.update(playlist => {
+						playlist.episodes = playlist.episodes.filter(e => e.title !== episode.title);
 
-						return playlists;
+						return playlist;
 					});
 				} else {
-					playlists.update(playlists => {
-						const newEpisodes = [...playlists[playlist.name].episodes, episode];
-						playlists[playlist.name].episodes = newEpisodes;
-
-						return playlists;
+					queue.update(playlist => {
+						const newEpisodes = [...playlist.episodes, episode];
+						playlist.episodes = newEpisodes;
+					
+						return playlist;
 					});
 				}
 			}));
 	}
 
+	if (!disabledMenuItems?.playlists) {
+		menu.addSeparator();
+
+		const playlistsInStore = get(playlists);
+		for (const playlist of Object.values(playlistsInStore)) {
+			const episodeIsInPlaylist = playlist.episodes.find(e => e.title === episode.title);
+
+			menu.addItem(item => item
+				.setIcon(playlist.icon)
+				.setTitle(`${episodeIsInPlaylist ? "Remove from" : "Add to"} ${playlist.name}`)
+				.onClick(() => {
+					if (episodeIsInPlaylist) {
+						playlists.update(playlists => {
+							playlists[playlist.name].episodes = playlists[playlist.name].episodes.filter(e => e.title !== episode.title);
+
+							return playlists;
+						});
+					} else {
+						playlists.update(playlists => {
+							const newEpisodes = [...playlists[playlist.name].episodes, episode];
+							playlists[playlist.name].episodes = newEpisodes;
+
+							return playlists;
+						});
+					}
+				}));
+		}
+	}
+
 	menu.showAtMouseEvent(event);
 
 }