feature: wait for keyframe when restarting playback

lib/playback/backend.ts

@@ -72,6 +72,7 @@ export default class Backend {
 	}
 
 	async pause() {
+		this.send({ pause: true })
 		await this.#audio?.context.suspend()
 	}
 

lib/playback/index.ts

@@ -53,7 +53,6 @@ export class Player {
 		this.#muted = false
 		this.#paused = false
 
-
 		const abort = new Promise<void>((resolve, reject) => {
 			this.#close = resolve
 			this.#abort = reject
@@ -63,7 +62,7 @@ export class Player {
 		this.#running = abort.catch(this.#close)
 
 		this.#run().catch((err) => {
-			console.error('Error in #run():', err)
+			console.error("Error in #run():", err)
 			this.#abort(err)
 		})
 	}
@@ -125,7 +124,7 @@ export class Player {
 	async #trackTask(track: Catalog.Track) {
 		if (!track.namespace) throw new Error("track has no namespace")
 
-		if (this.#paused) return;
+		if (this.#paused) return
 
 		const kind = Catalog.isVideoTrack(track) ? "video" : Catalog.isAudioTrack(track) ? "audio" : "unknown"
 		if (kind == "audio" && this.#muted) return
@@ -188,7 +187,6 @@ export class Player {
 		task.finally(() => {
 			this.#trackTasks.delete(track.name)
 		})
-
 	}
 
 	getCatalog() {
@@ -291,13 +289,12 @@ export class Player {
 	*/
 
 	async play() {
-		if (this.#paused){
+		if (this.#paused) {
 			this.#paused = false
 			this.subscribeFromTrackName(this.#videoTrackName)
 			this.subscribeFromTrackName(this.#audioTrackName)
 			this.#backend.play()
-		}
-		else {
+		} else {
 			this.unsubscribeFromTrack(this.#videoTrackName)
 			this.unsubscribeFromTrack(this.#audioTrackName)
 			this.#backend.pause()

lib/playback/worker/index.ts

@@ -30,6 +30,8 @@ class Worker {
 			this.#onInit(msg.init)
 		} else if (msg.segment) {
 			this.#onSegment(msg.segment).catch(console.warn)
+		} else if (msg.pause) {
+			this.#onPause(msg.pause)
 		} else {
 			throw new Error(`unknown message: + ${JSON.stringify(msg)}`)
 		}
@@ -100,6 +102,12 @@ class Worker {
 		// We done.
 		await segment.close()
 	}
+
+	#onPause(pause: boolean) {
+		if (this.#video && pause) {
+			this.#video.pause()
+		}
+	}
 }
 
 // Pass all events to the worker

lib/playback/worker/message.ts

@@ -76,6 +76,7 @@ export interface ToWorker {
 	// Sent on each init/data stream
 	init?: Init
 	segment?: Segment
+	pause?: boolean
 
 	/*
 	// Sent to control playback

lib/playback/worker/video.ts

@@ -40,6 +40,11 @@ export class Renderer {
 		this.#run().catch(console.error)
 	}
 
+	pause() {
+		console.log("pause")
+		this.#waitingForKeyframe = true
+	}
+
 	async #run() {
 		const reader = this.#timeline.frames.pipeThrough(this.#queue).getReader()
 		for (;;) {