@import url("/assets/md.css")feat: more enhancements

@import url("/assets/md.css")

1 files changed, 23 insertions, 11 deletions

diff --git a/src/lib/Player/Player.svelte b/src/lib/Player/Player.svelte
index d75ee3c..f3b8fb8 100644
--- a/src/lib/Player/Player.svelte
+++ b/src/lib/Player/Player.svelte
@@ -61,7 +61,7 @@
 		if (canvas && canvas !== lastCanvas) newCanvas(canvas, VideoImplementation);
 	});
 	$effect(() => {
-		if (video) renderPreviewFrame(video, frame);
+		if (video && !playing) renderPreviewFrame(video, frame);
 	});
 	let playbackLoopId = 0;
 	const startPlaybackLoop = (id = ++playbackLoopId) => {
@@ -71,9 +71,18 @@
 
 			if (audio) {
 				const desiredTime = frame / video.fps;
-				// If we get too out of lock-step with audio, we re-sync
-				if (desiredTime < audio.duration && Math.abs(desiredTime - audio.currentTime) > 0.3)
-					audio.currentTime = desiredTime;
+				const timeDelta = Math.abs(desiredTime - audio.currentTime);
+				// If we get too out of lock-step with audio, we re-sync - we assume audio source is accurate*, as to avoid too much jumping
+				// *it may not be
+				if (desiredTime < audio.duration && timeDelta > 0.1) {
+					if (timeDelta > 0.3) {
+						// too out of sync, we trust ourselves more
+						audio.currentTime = desiredTime;
+					} else {
+						// just change the rendered frame and hope its good enough
+						f = audio.currentTime * video.fps;
+					}
+				}
 			}
 
 			if (f > frameCount) {
@@ -87,15 +96,18 @@
 			);
 		}
 	};
-	// State Synchronisation effect & playback starter
+	const startPlaying = () => {
+		if (frame === frameCount && playbackRelativeTo === 0) {
+			frame = 0;
+		}
+		playbackRelativeTo = performance.now();
+		playbackFrameOffset = frame;
+		startPlaybackLoop();
+	};
+	// playback starter
 	$effect(() => {
 		if (playing) {
-			if (frame === frameCount && playbackRelativeTo === 0) {
-				frame = 0;
-			}
-			playbackRelativeTo = performance.now();
-			playbackFrameOffset = frame;
-			startPlaybackLoop();
+			startPlaying();
 		} else playbackRelativeTo = 0;
 	});
 	let loadedFrameTimestamp = false;