feat: customizable skip back & skip forward settings + commands and b…

…uttons to use them

src/API/API.ts

@@ -1,7 +1,7 @@
 import { Episode } from "src/types/Episode";
 import { formatSeconds } from "src/utility/formatSeconds";
 import { IAPI } from "./IAPI";
-import { currentEpisode, currentTime, duration, isPaused } from "src/store";
+import { currentEpisode, currentTime, duration, isPaused, plugin } from "src/store";
 import { get } from "svelte/store";
 import encodePodnotesURI from "src/utility/encodePodnotesURI";
 
@@ -63,4 +63,14 @@ export class API implements IAPI {
     stop(): void {
 		isPaused.update((_) => true);
     }
+
+	skipBackward(): void {
+		const skipBackLen = get(plugin).settings.skipBackwardLength;
+		this.currentTime -= skipBackLen;
+	}
+
+	skipForward(): void {
+		const skipForwardLen = get(plugin).settings.skipForwardLength;
+		this.currentTime += skipForwardLen;
+	}
 }

src/API/IAPI.ts

@@ -7,6 +7,10 @@ export interface IAPI {
 	currentTime: number;
 
 	getPodcastTimeFormatted(format: string, linkify?: boolean): string;
+
 	start(): void;
 	stop(): void;
+
+	skipBackward(): void;
+	skipForward(): void;
 }

src/constants.ts

@@ -7,4 +7,6 @@ export const DEFAULT_SETTINGS: IPodNotesSettings = {
 	podNotes: {},
 	defaultPlaybackRate: 1,
 	playedEpisodes: {},
+	skipBackwardLength: 15,
+	skipForwardLength: 15,
 }

src/main.ts

@@ -58,7 +58,31 @@ export default class PodNotes extends Plugin implements IPodNotes {
 
 				this.api.stop();
 			},
-		})
+		});
+
+		this.addCommand({
+			id: 'skip-backward',
+			name: 'Skip Backward',
+			checkCallback: (checking) => {
+				if (checking) {
+					return this.api.isPlaying && !!this.api.podcast;
+				}
+
+				this.api.skipBackward();
+			}
+		});
+
+		this.addCommand({
+			id: 'skip-forward',
+			name: 'Skip Forward',
+			checkCallback: (checking) => {
+				if (checking) {
+					return this.api.isPlaying && !!this.api.podcast;
+				}
+
+				this.api.skipForward();
+			}
+		});
 
 		this.addCommand({
 			id: 'hrpn',

src/types/IPodNotesSettings.ts

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

src/ui/PodcastView/EpisodePlayer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setIcon, SliderComponent } from "obsidian";
+	import { ButtonComponent, setIcon, SliderComponent } from "obsidian";
 	import {
 		duration,
 		currentTime,
@@ -8,15 +8,17 @@
 		plugin,
 		playedEpisodes,
 	} from "src/store";
+	import { IconType } from "src/types/IconType";
 	import { formatSeconds } from "src/utility/formatSeconds";
 	import { onDestroy, onMount } from "svelte";
 	import { get, Unsubscriber } from "svelte/store";
 
 	let playbackRateRef: HTMLSpanElement;
 	let iconRef: HTMLSpanElement;
+	let skipBackwardRef: HTMLSpanElement;
+	let skipForwardRef: HTMLSpanElement;
 	let unsubscriber: Unsubscriber;
 	let playbackRate: number = get(plugin).settings.defaultPlaybackRate || 1;
-
 	let isHoveringArtwork: boolean = false;
 
 	function togglePlayback() {
@@ -52,11 +54,26 @@
 			.setValue(playbackRate)
 			.onChange((value) => (playbackRate = value));
 
+		const skipBackBtn = new ButtonComponent(skipBackwardRef)
+			.setIcon("skip-back" as IconType)
+			.setTooltip("Skip backward")
+			.onClick($plugin.api.skipBackward.bind($plugin.api));
+
+		const skipForwardBtn = new ButtonComponent(skipForwardRef)
+			.setIcon("skip-forward" as IconType)
+			.setTooltip("Skip forward")
+			.onClick($plugin.api.skipForward.bind($plugin.api));
+
+		skipBackBtn.buttonEl.style.margin = "0";
+		skipBackBtn.buttonEl.style.cursor = "pointer";
+		skipForwardBtn.buttonEl.style.margin = "0";
+		skipForwardBtn.buttonEl.style.cursor = "pointer";
+
 		isPaused.set(false);
 	});
 
 	onDestroy(() => {
-		unsubscriber()
+		unsubscriber();
 
 		playedEpisodes.update((playedEpisodes) => {
 			const currentEp = $currentEpisode;
@@ -70,7 +87,7 @@
 				duration: dur,
 				finished: curTime === dur,
 			};
-			
+
 			return playedEpisodes;
 		});
 
@@ -87,7 +104,7 @@
 				duration: $duration,
 				finished: true,
 			};
-			
+
 			return playedEpisodes;
 		});
 	}
@@ -141,6 +158,11 @@
 	</div>
 
 	<div class="controls-container">
+		<span bind:this={skipBackwardRef} />
+		<span bind:this={skipForwardRef} />
+	</div>
+
+	<div class="playbackrate-container">
 		<span>{playbackRate}x</span>
 		<span bind:this={playbackRateRef} />
 	</div>
@@ -206,6 +228,15 @@
 	}
 
 	.controls-container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: 1rem;
+		margin-left: 25%;
+		margin-right: 25%;
+	}
+
+	.playbackrate-container {
 		display: flex;
 		align-items: center;
 		justify-content: space-around;

src/ui/settings/PodNotesSettingsTab.ts

@@ -28,20 +28,53 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 			target: queryGridContainer
 		});
 
-		const defaultPlaybackRateSetting = new Setting(this.containerEl);
-		defaultPlaybackRateSetting.setName('Default Playback Rate');
-		defaultPlaybackRateSetting.addSlider((slider) => slider
-			.setLimits(0.5, 4, 0.1)
-			.setValue(this.plugin.settings.defaultPlaybackRate)
-			.onChange(value => {
-				this.plugin.settings.defaultPlaybackRate = value;
-				this.plugin.saveSettings();
-			})
-			.setDynamicTooltip()
-		);
+		this.addDefaultPlaybackRateSetting(settingsContainer);
+		this.addSkipLengthSettings(settingsContainer);
 	}
 
 	hide(): void {
 		this.podcastQueryGrid?.$destroy();
 	}
+
+	private addDefaultPlaybackRateSetting(container: HTMLElement): void {
+		new Setting(container)
+			.setName('Default Playback Rate')
+			.addSlider((slider) => slider
+				.setLimits(0.5, 4, 0.1)
+				.setValue(this.plugin.settings.defaultPlaybackRate)
+				.onChange(value => {
+					this.plugin.settings.defaultPlaybackRate = value;
+					this.plugin.saveSettings();
+				})
+				.setDynamicTooltip()
+			);
+	}
+
+	private addSkipLengthSettings(container: HTMLElement): void {
+		new Setting(container)
+			.setName('Skip backward length (s)')
+			.addText((textComponent) => {
+				textComponent.inputEl.type = 'number';
+				textComponent
+					.setValue(`${this.plugin.settings.skipBackwardLength}`)
+					.onChange(value => {
+						this.plugin.settings.skipBackwardLength = parseInt(value);
+						this.plugin.saveSettings();
+					})
+					.setPlaceholder('seconds');
+			});
+
+		new Setting(container)
+			.setName('Skip forward length (s)')
+			.addText((textComponent) => {
+				textComponent.inputEl.type = 'number';
+				textComponent
+					.setValue(`${this.plugin.settings.skipForwardLength}`)
+					.onChange(value => {
+						this.plugin.settings.skipForwardLength = parseInt(value);
+						this.plugin.saveSettings();
+					})
+					.setPlaceholder('seconds');
+			});
+	}
 }