3 files changed, 28 insertions, 7 deletions
diff --git a/src/lib/Player/FrameSlider.svelte b/src/lib/Player/FrameSlider.svelte
index a632aa9..8018a7f 100644
--- a/src/lib/Player/FrameSlider.svelte
+++ b/src/lib/Player/FrameSlider.svelte
@@ -16,7 +16,13 @@
 <div class="w-full flex items-center justify-center pt-2">
 	<div class="p-2 pr-1">
 		<button
-			onclick={() => {
+			onclick={(e) => {
+				e.stopPropagation();
+				playing = !playing;
+			}}
+			onkeydown={(e) => {
+				e.stopPropagation();
+				e.preventDefault();
 				playing = !playing;
 			}}
 			aria-label={playing ? 'pause' : 'play'}
diff --git a/src/lib/Player/Player.svelte b/src/lib/Player/Player.svelte
index f3b8fb8..a742857 100644
--- a/src/lib/Player/Player.svelte
+++ b/src/lib/Player/Player.svelte
@@ -39,7 +39,9 @@
 			}
 		})();
 		video['_isInit'] = true;
-		renderPromise = video.init();
+		renderPromise = video.init({
+			isPreview: true
+		});
 		await renderPromise;
 		video['_isInit'] = false;
 		frameCount = video.length;
@@ -49,6 +51,7 @@
 		const ourId = ++renderId;
 		if (renderPromise) await renderPromise;
 		if (renderId !== ourId) return;
+		if (frame > video.length) frame = video.length;
 		renderPromise =
 			video.renderFrame({
 				frames: frame,
@@ -120,12 +123,19 @@
 		}
 		loadedFrameTimestamp = true;
 	});
-	// TODO: implement waitin a few seconds before saving
-	$effect(() => {
-		if (loadedFrameTimestamp)
+	let nextSaveFrameNumber = 0;
+	let lastSave = 0;
+	const saveFramePosition = async (frame: number) => {
+		nextSaveFrameNumber = frame;
+		await new Promise((rs) => setTimeout(rs, 100));
+		if (frame === nextSaveFrameNumber || performance.now() - lastSave > 500)
 			try {
+				lastSave = performance.now();
 				sessionStorage.setItem('timestamp', frame.toString(36));
 			} catch (_) {}
+	};
+	$effect(() => {
+		if (loadedFrameTimestamp) saveFramePosition(frame);
 	});
 	$effect(() => {
 		if (audio && video && !playing && !playbackFrameOffset) {
@@ -160,7 +170,9 @@
 		if (canvas && video) {
 			(async () => {
 				video['_isInit'] = true;
-				renderPromise = await video.init();
+				renderPromise = await video.init({
+					isPreview: true
+				});
 				video['_isInit'] = false;
 				renderPreviewFrame(video, frame);
 			})();
diff --git a/src/lib/Player/Video.ts b/src/lib/Player/Video.ts
index 78b3b8f..9e944b5 100644
--- a/src/lib/Player/Video.ts
+++ b/src/lib/Player/Video.ts
@@ -3,11 +3,14 @@ export type FrameTime = {
   seconds: number,
   frames: number
 }
+export type InitConfig = {
+  isPreview: boolean
+}
 export abstract class Video {
   public constructor(public canvas: HTMLCanvasElement) { };
   public abstract renderFrame(time: FrameTime): Promise<void> | void;
   /** (re-)Initializes the Video object. Also called on window resizes. */
-  public abstract init(): void | Promise<void>;
+  public abstract init(config: InitConfig): void | Promise<void>;
   private _isInit = false;
   /** The frames per second to render at */
   public abstract get fps(): number;