eprec 1.11.0 → 1.13.0

package/app/config/routes.ts

@@ -2,4 +2,5 @@ import { route } from 'remix/fetch-router'
 
 export default route({
 	index: '/',
+	trimPoints: '/trim-points',
 })

package/app/router.tsx

@@ -5,6 +5,7 @@ import { Layout } from './components/layout.tsx'
 import routes from './config/routes.ts'
 import { render } from './helpers/render.ts'
 import indexHandlers from './routes/index.tsx'
+import trimPointsHandlers from './routes/trim-points.tsx'
 
 const STATIC_CORS_HEADERS = {
 	'Access-Control-Allow-Origin': '*',
@@ -102,5 +103,10 @@ export function createAppRouter(rootDir: string) {
 		action: indexHandlers.loader,
 	})
 
+	router.map(routes.trimPoints, {
+		middleware: trimPointsHandlers.middleware,
+		action: trimPointsHandlers.loader,
+	})
+
 	return router
 }

package/app/routes/index.tsx

@@ -18,6 +18,9 @@ const indexHandler = {
 							Review transcript-based edits, refine cut ranges, and prepare
 							exports.
 						</p>
+						<nav class="app-nav">
+							<a class="app-link" href="/trim-points">Trim points</a>
+						</nav>
 					</header>
 					<section class="app-card app-card--full">
 						<h2>Source video</h2>

package/app/routes/trim-points.tsx

@@ -0,0 +1,51 @@
+import { html } from 'remix/html-template'
+import { Layout } from '../components/layout.tsx'
+import { render } from '../helpers/render.ts'
+
+const trimPointsHandler = {
+	middleware: [],
+	loader() {
+		const initialVideoPath = process.env.EPREC_APP_VIDEO_PATH?.trim()
+		return render(
+			Layout({
+				title: 'Trim points - Eprec Studio',
+				appConfig: initialVideoPath ? { initialVideoPath } : undefined,
+				children: html`<main class="app-shell">
+					<header class="app-header">
+						<span class="app-kicker">Eprec Studio</span>
+						<h1 class="app-title">Trim points</h1>
+						<p class="app-subtitle">
+							Add start and stop points, generate an ffmpeg trim command, and run
+							it with live progress.
+						</p>
+						<nav class="app-nav">
+							<a class="app-link" href="/">Editing workspace</a>
+						</nav>
+					</header>
+					<section class="app-card app-card--full">
+						<h2>Video source</h2>
+						<p class="app-muted">
+							Enter a video file path once the interactive UI loads.
+						</p>
+					</section>
+					<section class="app-card app-card--full">
+						<h2>Timeline</h2>
+						<p class="app-muted">
+							Add trim ranges and drag their handles to fine-tune timestamps.
+						</p>
+						<div class="trim-track trim-track--skeleton"></div>
+					</section>
+					<section class="app-card app-card--full">
+						<h2>ffmpeg command</h2>
+						<p class="app-muted">
+							Command output and progress details appear after you load a video.
+						</p>
+						<pre class="command-preview">Loading trim preview...</pre>
+					</section>
+				</main>`,
+			}),
+		)
+	},
+}
+
+export default trimPointsHandler

package/app/trim-api.ts

@@ -0,0 +1,261 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { mkdir } from 'node:fs/promises'
+import {
+	buildFfmpegArgs,
+	computeOutputDuration,
+	normalizeTrimRanges,
+	type TrimRange,
+} from './trim-commands.ts'
+
+const TRIM_ROUTE = '/api/trim'
+
+type TrimRequestPayload = {
+	inputPath?: string
+	outputPath?: string
+	duration?: number
+	ranges?: TrimRange[]
+}
+
+function expandHomePath(value: string) {
+	if (!value.startsWith('~/') && !value.startsWith('~\\')) {
+		return value
+	}
+	const home = process.env.HOME?.trim()
+	if (!home) return value
+	return path.join(home, value.slice(2))
+}
+
+function resolveMediaPath(rawPath: string): string | null {
+	const trimmed = rawPath.trim()
+	if (!trimmed) return null
+	if (trimmed.startsWith('file://')) {
+		try {
+			return fileURLToPath(trimmed)
+		} catch {
+			return null
+		}
+	}
+	return path.resolve(expandHomePath(trimmed))
+}
+
+function parseRanges(ranges: unknown): TrimRange[] {
+	if (!Array.isArray(ranges)) return []
+	return ranges
+		.map((entry) => {
+			if (!entry || typeof entry !== 'object') return null
+			const candidate = entry as TrimRange
+			if (!Number.isFinite(candidate.start) || !Number.isFinite(candidate.end)) {
+				return null
+			}
+			return { start: candidate.start, end: candidate.end }
+		})
+		.filter((range): range is TrimRange => Boolean(range))
+}
+
+function parseOutTimeValue(value: string) {
+	const parts = value.trim().split(':')
+	if (parts.length !== 3) return null
+	const [hours, minutes, seconds] = parts
+	const h = Number.parseFloat(hours)
+	const m = Number.parseFloat(minutes)
+	const s = Number.parseFloat(seconds)
+	if (!Number.isFinite(h) || !Number.isFinite(m) || !Number.isFinite(s)) {
+		return null
+	}
+	return h * 3600 + m * 60 + s
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(Math.max(value, min), max)
+}
+
+async function readLines(
+	stream: ReadableStream<Uint8Array> | null,
+	onLine: (line: string) => void,
+) {
+	if (!stream) return
+	const reader = stream.pipeThrough(new TextDecoderStream()).getReader()
+	let buffer = ''
+	while (true) {
+		const { value, done } = await reader.read()
+		if (done) break
+		buffer += value
+		const lines = buffer.split('\n')
+		buffer = lines.pop() ?? ''
+		for (const line of lines) {
+			const trimmed = line.trim()
+			if (trimmed) onLine(trimmed)
+		}
+	}
+	const trailing = buffer.trim()
+	if (trailing) onLine(trailing)
+}
+
+export async function handleTrimRequest(request: Request): Promise<Response> {
+	const url = new URL(request.url)
+	if (url.pathname !== TRIM_ROUTE) {
+		return new Response('Not Found', { status: 404 })
+	}
+
+	if (request.method === 'OPTIONS') {
+		return new Response(null, {
+			status: 204,
+			headers: {
+				'Access-Control-Allow-Origin': '*',
+				'Access-Control-Allow-Methods': 'POST, OPTIONS',
+				'Access-Control-Allow-Headers': 'Content-Type',
+			},
+		})
+	}
+
+	if (request.method !== 'POST') {
+		return new Response('Method Not Allowed', { status: 405 })
+	}
+
+	let payload: TrimRequestPayload
+	try {
+		payload = (await request.json()) as TrimRequestPayload
+	} catch {
+		return new Response('Invalid JSON payload.', { status: 400 })
+	}
+
+	const inputRaw = payload.inputPath ?? ''
+	const outputRaw = payload.outputPath ?? ''
+	const duration = Number(payload.duration ?? 0)
+	if (!Number.isFinite(duration) || duration <= 0) {
+		return new Response('Invalid or missing duration.', { status: 400 })
+	}
+
+	const inputPath = resolveMediaPath(inputRaw)
+	const outputPath = resolveMediaPath(outputRaw)
+	if (!inputPath || !outputPath) {
+		return new Response('Input and output paths are required.', {
+			status: 400,
+		})
+	}
+
+	const ranges = normalizeTrimRanges(parseRanges(payload.ranges), duration)
+	if (ranges.length === 0) {
+		return new Response('No valid trim ranges provided.', { status: 400 })
+	}
+
+	const outputDuration = computeOutputDuration(duration, ranges)
+	if (outputDuration <= 0) {
+		return new Response('Trim ranges remove the full video.', { status: 400 })
+	}
+
+	const resolvedInput = path.resolve(inputPath)
+	const resolvedOutput = path.resolve(outputPath)
+	if (resolvedInput === resolvedOutput) {
+		return new Response('Output path must be different from input.', {
+			status: 400,
+		})
+	}
+
+	const inputFile = Bun.file(resolvedInput)
+	if (!(await inputFile.exists())) {
+		return new Response('Input file not found.', { status: 404 })
+	}
+
+	await mkdir(path.dirname(resolvedOutput), { recursive: true })
+
+	const args = buildFfmpegArgs({
+		inputPath: resolvedInput,
+		outputPath: resolvedOutput,
+		ranges,
+		withProgress: true,
+	})
+	if (args.length === 0) {
+		return new Response('Unable to build ffmpeg command.', { status: 400 })
+	}
+
+	const outputDurationSeconds = outputDuration
+	const encoder = new TextEncoder()
+
+	const stream = new ReadableStream<Uint8Array>({
+		start(controller) {
+			let outTimeSeconds = 0
+			const send = (payload: Record<string, unknown>) => {
+				try {
+					controller.enqueue(
+						encoder.encode(`${JSON.stringify(payload)}\n`),
+					)
+				} catch {
+					// stream closed
+				}
+			}
+			const process = Bun.spawn({
+				cmd: args,
+				stdout: 'pipe',
+				stderr: 'pipe',
+			})
+
+		request.signal.addEventListener('abort', () => {
+			try {
+				process.kill()
+			} catch {
+				// ignore
+			}
+		})
+
+		const stdoutReader = readLines(process.stdout, (line) => {
+			const [key, rawValue] = line.split('=')
+			const value = rawValue ?? ''
+			if (key === 'out_time_ms') {
+				const next = Number.parseFloat(value)
+				if (Number.isFinite(next)) outTimeSeconds = next / 1000
+			}
+			if (key === 'out_time_us') {
+				const next = Number.parseFloat(value)
+				if (Number.isFinite(next)) outTimeSeconds = next / 1000000
+			}
+			if (key === 'out_time') {
+				const parsed = parseOutTimeValue(value)
+				if (parsed !== null) outTimeSeconds = parsed
+			}
+			if (key === 'progress') {
+				const progress =
+					outputDurationSeconds > 0
+						? clamp(outTimeSeconds / outputDurationSeconds, 0, 1)
+						: 0
+				send({ type: 'progress', progress })
+				if (value === 'end') {
+					send({ type: 'progress', progress: 1 })
+				}
+			}
+		})
+
+		const stderrReader = readLines(process.stderr, (line) => {
+			send({ type: 'log', message: line })
+		})
+
+		Promise.all([stdoutReader, stderrReader, process.exited])
+			.then(([, , exitCode]) => {
+				send({
+					type: 'done',
+					success: exitCode === 0,
+					exitCode,
+				})
+			})
+			.catch((error) => {
+				send({
+					type: 'done',
+					success: false,
+					error: error instanceof Error ? error.message : String(error),
+				})
+			})
+			.finally(() => {
+				controller.close()
+			})
+		},
+	})
+
+	return new Response(stream, {
+		headers: {
+			'Content-Type': 'application/x-ndjson',
+			'Cache-Control': 'no-cache',
+			'Access-Control-Allow-Origin': '*',
+		},
+	})
+}

package/app/trim-commands.ts

@@ -0,0 +1,154 @@
+export type TrimRange = {
+	start: number
+	end: number
+}
+
+const DEFAULT_MIN_RANGE = 0.05
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(Math.max(value, min), max)
+}
+
+function formatSecondsForCommand(value: number) {
+	return value.toFixed(3)
+}
+
+export function normalizeTrimRanges(
+	ranges: TrimRange[],
+	duration: number,
+	minLength: number = DEFAULT_MIN_RANGE,
+) {
+	if (!Number.isFinite(duration) || duration <= 0) return []
+	const normalized = ranges
+		.map((range) => {
+			const startRaw = Number.isFinite(range.start) ? range.start : 0
+			const endRaw = Number.isFinite(range.end) ? range.end : 0
+			const start = clamp(Math.min(startRaw, endRaw), 0, duration)
+			const end = clamp(Math.max(startRaw, endRaw), 0, duration)
+			if (end - start < minLength) return null
+			return { start, end }
+		})
+		.filter((range): range is TrimRange => Boolean(range))
+		.sort((a, b) => a.start - b.start)
+
+	const merged: TrimRange[] = []
+	for (const range of normalized) {
+		const last = merged[merged.length - 1]
+		if (last && range.start <= last.end + minLength) {
+			last.end = Math.max(last.end, range.end)
+		} else {
+			merged.push({ ...range })
+		}
+	}
+	return merged
+}
+
+export function computeOutputDuration(
+	duration: number,
+	ranges: TrimRange[],
+	minLength: number = DEFAULT_MIN_RANGE,
+) {
+	const normalized = normalizeTrimRanges(ranges, duration, minLength)
+	const removed = normalized.reduce(
+		(total, range) => total + (range.end - range.start),
+		0,
+	)
+	return Math.max(duration - removed, 0)
+}
+
+export function buildTrimExpression(ranges: TrimRange[]) {
+	if (ranges.length === 0) return ''
+	const expressions = ranges.map(
+		(range) =>
+			`between(t,${formatSecondsForCommand(range.start)},${formatSecondsForCommand(range.end)})`,
+	)
+	return `not(${expressions.join('+')})`
+}
+
+export function buildTrimFilters(ranges: TrimRange[]) {
+	const expression = buildTrimExpression(ranges)
+	if (!expression) {
+		return {
+			expression: '',
+			videoFilter: '',
+			audioFilter: '',
+		}
+	}
+	return {
+		expression,
+		videoFilter: `select='${expression}',setpts=N/FRAME_RATE/TB`,
+		audioFilter: `aselect='${expression}',asetpts=N/SR/TB`,
+	}
+}
+
+export function buildFfmpegArgs(options: {
+	inputPath: string
+	outputPath: string
+	ranges: TrimRange[]
+	withProgress?: boolean
+}) {
+	const filters = buildTrimFilters(options.ranges)
+	if (!filters.expression) return []
+	const args = [
+		'ffmpeg',
+		'-hide_banner',
+		'-y',
+		'-i',
+		options.inputPath,
+		'-vf',
+		filters.videoFilter,
+		'-af',
+		filters.audioFilter,
+		'-map',
+		'0:v',
+		'-map',
+		'0:a?',
+		'-c:v',
+		'libx264',
+		'-preset',
+		'veryfast',
+		'-crf',
+		'18',
+		'-c:a',
+		'aac',
+		'-b:a',
+		'192k',
+		'-movflags',
+		'+faststart',
+	]
+	if (options.withProgress) {
+		args.push('-progress', 'pipe:1', '-nostats')
+	}
+	args.push(options.outputPath)
+	return args
+}
+
+function quoteShellArgument(value: string) {
+	const escaped = value.replace(/(["\\$`])/g, '\\$1')
+	return `"${escaped}"`
+}
+
+export function buildFfmpegCommandPreview(options: {
+	inputPath: string
+	outputPath: string
+	ranges: TrimRange[]
+	includeProgress?: boolean
+}) {
+	const filters = buildTrimFilters(options.ranges)
+	if (!filters.expression) return ''
+	const lines = [
+		'ffmpeg -hide_banner -y \\',
+		`  -i ${quoteShellArgument(options.inputPath)} \\`,
+		`  -vf ${quoteShellArgument(filters.videoFilter)} \\`,
+		`  -af ${quoteShellArgument(filters.audioFilter)} \\`,
+		'  -map 0:v -map 0:a? \\',
+		'  -c:v libx264 -preset veryfast -crf 18 \\',
+		'  -c:a aac -b:a 192k \\',
+		'  -movflags +faststart \\',
+	]
+	if (options.includeProgress) {
+		lines.push('  -progress pipe:1 -nostats \\')
+	}
+	lines.push(`  ${quoteShellArgument(options.outputPath)}`)
+	return lines.join('\n')
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eprec",
   "type": "module",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "license": "MIT",
   "repository": {
     "type": "git",