fix: persist hide-played toggle (#144)

Author: chhoumann

src/constants.ts

@@ -34,6 +34,7 @@ export const DEFAULT_SETTINGS: IPodNotesSettings = {
 	podNotes: {},
 	defaultPlaybackRate: 1,
 	defaultVolume: 1,
+	hidePlayedEpisodes: false,
 	playedEpisodes: {},
 	favorites: {
 		...FAVORITES_SETTINGS,

src/main.ts

@@ -7,6 +7,7 @@ import {
 	playlists,
 	queue,
 	savedFeeds,
+	hidePlayedEpisodes,
 	volume,
 } from "src/store";
 import { Plugin, type WorkspaceLeaf } from "obsidian";
@@ -29,6 +30,7 @@ import { QueueController } from "./store_controllers/QueueController";
 import { FavoritesController } from "./store_controllers/FavoritesController";
 import type { Episode } from "./types/Episode";
 import CurrentEpisodeController from "./store_controllers/CurrentEpisodeController";
+import { HidePlayedEpisodesController } from "./store_controllers/HidePlayedEpisodesController";
 import { TimestampTemplateEngine } from "./TemplateEngine";
 import createPodcastNote from "./createPodcastNote";
 import downloadEpisodeWithNotice from "./downloadEpisode";
@@ -66,6 +68,7 @@ export default class PodNotes extends Plugin implements IPodNotes {
 	private downloadedEpisodesController?: StoreController<{
 		[podcastName: string]: DownloadedEpisode[];
 	}>;
+	private hidePlayedEpisodesController?: StoreController<boolean>;
 	private transcriptionService?: TranscriptionService;
 	private volumeUnsubscribe?: Unsubscriber;
 
@@ -87,6 +90,7 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		if (this.settings.currentEpisode) {
 			currentEpisode.set(this.settings.currentEpisode);
 		}
+		hidePlayedEpisodes.set(this.settings.hidePlayedEpisodes);
 		volume.set(
 			Math.min(1, Math.max(0, this.settings.defaultVolume ?? 1)),
 		);
@@ -108,6 +112,10 @@ export default class PodNotes extends Plugin implements IPodNotes {
 			currentEpisode,
 			this,
 		).on();
+		this.hidePlayedEpisodesController = new HidePlayedEpisodesController(
+			hidePlayedEpisodes,
+			this,
+		).on();
 
 		this.api = new API();
 		this.volumeUnsubscribe = volume.subscribe((value) => {
@@ -358,6 +366,7 @@ export default class PodNotes extends Plugin implements IPodNotes {
 		this.localFilesController?.off();
 		this.downloadedEpisodesController?.off();
 		this.currentEpisodeController?.off();
+		this.hidePlayedEpisodesController?.off();
 		this.volumeUnsubscribe?.();
 	}
 

src/store/index.ts

@@ -13,6 +13,7 @@ export const plugin = writable<PodNotes>();
 export const currentTime = writable<number>(0);
 export const duration = writable<number>(0);
 export const volume = writable<number>(1);
+export const hidePlayedEpisodes = writable<boolean>(false);
 
 export const currentEpisode = (() => {
 	const store = writable<Episode>();

src/store_controllers/HidePlayedEpisodesController.ts

@@ -0,0 +1,19 @@
+import type { Writable } from "svelte/store";
+import type { IPodNotes } from "../types/IPodNotes";
+import { StoreController } from "../types/StoreController";
+
+export class HidePlayedEpisodesController extends StoreController<boolean> {
+	private plugin: IPodNotes;
+
+	constructor(store: Writable<boolean>, plugin: IPodNotes) {
+		super(store);
+		this.plugin = plugin;
+	}
+
+	protected override onChange(value: boolean) {
+		if (this.plugin.settings.hidePlayedEpisodes === value) return;
+
+		this.plugin.settings.hidePlayedEpisodes = value;
+		this.plugin.saveSettings();
+	}
+}

src/types/IPodNotesSettings.ts

@@ -10,6 +10,7 @@ export interface IPodNotesSettings {
 	podNotes: { [episodeName: string]: PodNote };
 	defaultPlaybackRate: number;
 	defaultVolume: number;
+	hidePlayedEpisodes: boolean;
 	playedEpisodes: { [episodeName: string]: PlayedEpisode };
 	skipBackwardLength: number;
 	skipForwardLength: number;

src/ui/PodcastView/EpisodeList.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
 	import type { Episode } from "src/types/Episode";
-	import { createEventDispatcher, onMount } from "svelte";
+	import { createEventDispatcher } from "svelte";
 	import EpisodeListItem from "./EpisodeListItem.svelte";
-	import { playedEpisodes } from "src/store";
+	import { hidePlayedEpisodes, playedEpisodes } from "src/store";
 	import Icon from "../obsidian/Icon.svelte";
 	import Text from "../obsidian/Text.svelte";
 
 	export let episodes: Episode[] = [];
 	export let showThumbnails: boolean = false;
 	export let showListMenu: boolean = true;
-	let hidePlayedEpisodes: boolean = false;
 	let searchInputQuery: string = "";
 
 	const dispatch = createEventDispatcher();
@@ -48,11 +47,11 @@
 				/>
 			</div>
 			<Icon
-				icon={hidePlayedEpisodes ? "eye-off" : "eye"}
+				icon={$hidePlayedEpisodes ? "eye-off" : "eye"}
 				size={25}
-				label={hidePlayedEpisodes ? "Show played episodes" : "Hide played episodes"}
-				pressed={hidePlayedEpisodes}
-				on:click={() => (hidePlayedEpisodes = !hidePlayedEpisodes)}
+				label={$hidePlayedEpisodes ? "Show played episodes" : "Hide played episodes"}
+				pressed={$hidePlayedEpisodes}
+				on:click={() => hidePlayedEpisodes.update((value) => !value)}
 			/>
 			<Icon
 				icon="refresh-cw"
@@ -69,7 +68,7 @@
 		{/if}
 		{#each episodes as episode (episode.url || episode.streamUrl || `${episode.title}-${episode.episodeDate ?? ""}`)}
 			{@const episodePlayed = $playedEpisodes[episode.title]?.finished}
-			{#if !hidePlayedEpisodes || !episodePlayed}
+			{#if !$hidePlayedEpisodes || !episodePlayed}
 				<EpisodeListItem
 					{episode}
 					episodeFinished={episodePlayed}