@omnimedia/omnitool/s/demo/routines/timeline-setup.ts

open source video processing tools

import {Driver} from "../../driver/driver.js"
import {Datafile, defaultTranscriberSpec, Item, makeTranscriber, Omni} from "../../timeline/index.js"

export async function TimelineSchemaTest(driver: Driver, file: File) {
	const transcriber = await makeTranscriber({
		driver,
		spec: defaultTranscriberSpec(),
		workerUrl: new URL("/features/speech/transcribe/worker.bundle.min.js", import.meta.url),
		onLoading: loading => console.log("transcriber loading", loading),
	})

	const omni = new Omni(driver)
	const {videoA} = await omni.load({videoA: Datafile.make(file)})

	const transcript = await transcriber.transcribe({
		source: file,
		language: "english",
		onReport: report => console.log("transcriber report", report),
		onTranscription: text => console.log("transcribing", text),
	})

	const timeline = omni.timeline(o => {
		const text = o.text("content", {duration: 3000})
		const fade = o.animate.opacity.make("easeIn", [
			[0, 0],
			[700, 1],
			[2200, 1],
			[3000, 0.35],
		])
		const style = o.textStyle({fill: "green", fontSize: 100})
		const videoSpatial = o.spatial(
			o.transform({
				position: [240, 160],
				scale: [1.4, 1.4],
				rotation: 0.08,
			}),
			[0.15, 0.1, 0.05, 0.2],
		)
		const textSpatial = o.spatial()
		const textMotion = o.animate.transform.make("linear", [
				[0, o.transform({position: [-320, 80], scale: [0.7, 0.7]})],
				[1000, o.transform({position: [120, 80], scale: [1, 1]})],
				[2000, o.transform({position: [200, 40], scale: [1.35, 1.35], rotation: 8})],
				[3000, o.transform({position: [320, 0], scale: [1.15, 1.15], rotation: 0})],
		])

		const video = o.video(videoA, {duration: 6000, start: 3000})
		o.set<Item.Text>(text.id, {styleId: style.id, spatialId: textSpatial.id, animationIds: [fade.id, textMotion.id]})
		o.set<Item.Video>(video.id, {spatialId: videoSpatial.id})

		const visual = o.sequence(
			o.stack(
				text,
				o.captions(video, transcript, {
					maxChars: 34,
					maxDuration: 2800,
					maxSilence: 450,
					styles: {
						fontFamily: "Arial",
						fontSize: 64,
						fill: "#ffffff",
						align: "center",
						wordWrap: true,
						wordWrapWidth: 1280,
						stroke: {color: "#000000", width: 6},
					},
				})
			),
			o.transition.circle(1500),
			o.video(videoA, {duration: 7000, start: 5000})
		)

		return o.stack(
			visual,
			o.audio(videoA, {start: 3000, duration: video.duration})
		)
	})

	return {timeline, omni}
}