@omnimedia/omnitool 1.1.0-60 → 1.1.0-62

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-60",
+	"version": "1.1.0-62",
 	"description": "open source video processing tools",
 	"license": "MIT",
 	"author": "Przemysław Gałęzki",

package/s/demo/routines/playback-test.ts

@@ -20,24 +20,9 @@ export async function playbackTest(timeline: TimelineFile, omni: Omni, root: HTM
 	scrub.max = String(Math.ceil(player.duration))
 
 	let isScrubbing = false
-	let pendingSeek: number | null = null
-	let seekInFlight = false
 
 	player.playback.onTick.on(() => setScrubState(player.currentTime, player.duration))
 
-	const queueSeek = async (timeMs: number) => {
-		pendingSeek = timeMs
-		if (seekInFlight)
-			return
-		seekInFlight = true
-		while (pendingSeek) {
-			const next = pendingSeek
-			pendingSeek = null
-			await player.seek(next)
-		}
-		seekInFlight = false
-	}
-
 	const updateTimecode = (currentMs: number, durationMs: number) => {
 		timecode.textContent = `${formatTime(currentMs)} / ${formatTime(durationMs)}`
 	}
@@ -46,13 +31,13 @@ export async function playbackTest(timeline: TimelineFile, omni: Omni, root: HTM
 		isScrubbing = true
 		const next = Math.max(0, Math.min(+scrub.value, player.duration))
 		updateTimecode(next, player.duration)
-		await queueSeek(next)
+		await player.seek(next)
 	})
 
 	scrub.addEventListener("change", async () => {
 		isScrubbing = false
 		const next = Math.max(0, Math.min(+scrub.value, player.duration))
-		await queueSeek(next)
+		await player.seek(next)
 	})
 
 	const setScrubState = (timeMs: number, durationMs: number) => {

package/s/driver/fns/work.ts

@@ -1,10 +1,9 @@
 import {Comrade} from "@e280/comrade"
-import {DOMAdapter, WebWorkerAdapter} from "pixi.js"
-import {Input, ALL_FORMATS, VideoSampleSink, Output, Mp4OutputFormat, VideoSampleSource, VideoSample, AudioSampleSink, AudioSampleSource, AudioSample, StreamTarget, BlobSource, UrlSource} from "mediabunny"
 
-import {DecoderSource, DriverSchematic} from "./schematic.js"
+import {Input, ALL_FORMATS, VideoSampleSink, Output, Mp4OutputFormat, VideoSampleSource, VideoSample, AudioSampleSink,
+	AudioSampleSource, AudioSample, StreamTarget, BlobSource, UrlSource} from "mediabunny"
 
-DOMAdapter.set(WebWorkerAdapter)
+import {DecoderSource, DriverSchematic} from "./schematic.js"
 
 const loadSource = async (source: DecoderSource) => {
 	if(source instanceof Blob) {

package/s/timeline/renderers/player/parts/playback.ts

@@ -39,6 +39,10 @@ export class Playback {
 		this.#samples()
 	}
 
+	update(timeline: TimelineFile) {
+		this.timeline = timeline
+	}
+
 	async #samples() {
 		for await (const _ of this.#controller.ticks()) {
 			const layers = await this.playVisualSampler?.next(this.currentTime) ?? []
@@ -57,11 +61,10 @@ export class Playback {
 		return await this.seekVisualSampler.sample(this.timeline, time)
 	}
 
-	async start(timeline: TimelineFile) {
+	async start() {
 		if(this.#controller.isPlaying())
 			return
 
-		this.timeline = timeline
 		await this.audioContext.resume()
 
 		this.#playbackStart = this.currentTime

package/s/timeline/renderers/player/player.ts

@@ -12,27 +12,29 @@ export class VideoPlayer {
 	canvas: HTMLCanvasElement
 	playback: Playback
 
+	#pendingSeek: number | null = null
+	#flushTask: Promise<void> | null = null
+
 	constructor(
 		private driver: Driver,
 		resolveMedia: ResolveMedia,
-		private timeline: TimelineFile,
+		timeline: TimelineFile
 	) {
 		this.playback = new Playback(driver, timeline, resolveMedia)
 		this.canvas = driver.compositor.pixi.renderer.canvas
 	}
 
 	async play() {
-		await this.playback.start(this.timeline)
+		await this.playback.start()
 	}
 
 	pause() {
 		this.playback.pause()
 	}
 
-	async seek(timeMs: number) {
-		const layers = await this.playback.seek(ms(timeMs))
-		const frame = await this.driver.composite(layers)
-		frame.close()
+	seek(timeMs: number) {
+		this.#pendingSeek = timeMs
+		return this.#flushTask ??= this.#flushSeeks().finally(() => this.#flushTask = null)
 	}
 
 	setFPS(value: number) {
@@ -50,10 +52,18 @@ export class VideoPlayer {
 	/**
 	 call this whenever your timeline state changes
 	*/
-	async update(timeline: TimelineFile) {
-		this.timeline = timeline
+	update(timeline: TimelineFile) {
+		this.playback.update(timeline)
 	}
 
+	async #flushSeeks() {
+		while (this.#pendingSeek !== null) {
+			const next = this.#pendingSeek
+			this.#pendingSeek = null
+			const layers = await this.playback.seek(ms(next))
+			const frame = await this.driver.composite(layers)
+			frame.close()
+		}
+	}
 }
 
-const toUrl = (src: DecoderSource) => (src instanceof Blob ? URL.createObjectURL(src) : String(src))