eprec 1.12.0 → 1.13.1

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,262 @@
+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.12.0",
+  "version": "1.13.1",
   "license": "MIT",
   "repository": {
     "type": "git",

package/process-course/edits/cli.ts

@@ -8,6 +8,7 @@ import {
 	createInquirerPrompter,
 	createPathPicker,
 	createStepProgressReporter,
+	handlePromptFailure,
 	isInteractive,
 	pauseActiveSpinner,
 	resolveOptionalString,
@@ -373,6 +374,8 @@ export async function runEditsCli(rawArgs = hideBin(process.argv)) {
 		)
 		.demandCommand(1)
 		.strict()
+		.fail(handlePromptFailure)
+		.exitProcess(false)
 		.help()
 
 	await parser.parseAsync()

package/server/processing-queue.ts

@@ -63,7 +63,11 @@ const TASK_STEPS: Record<ProcessingAction, string[]> = {
 		'Refining command windows',
 		'Updating cut ranges',
 	],
-	'render-preview': ['Rendering preview clip', 'Optimizing output', 'Verifying'],
+	'render-preview': [
+		'Rendering preview clip',
+		'Optimizing output',
+		'Verifying',
+	],
 	'export-final': [
 		'Rendering chapters',
 		'Packaging exports',
@@ -102,9 +106,7 @@ function updateQueueState(mutate: () => void) {
 function updateTask(taskId: string, patch: Partial<ProcessingTask>) {
 	updateQueueState(() => {
 		tasks = tasks.map((task) =>
-			task.id === taskId
-				? { ...task, ...patch, updatedAt: Date.now() }
-				: task,
+			task.id === taskId ? { ...task, ...patch, updatedAt: Date.now() } : task,
 		)
 	})
 }
@@ -172,8 +174,7 @@ function markActiveDone() {
 }
 
 function buildProgress(step: number, totalSteps: number, label: string) {
-	const percent =
-		totalSteps > 0 ? Math.round((step / totalSteps) * 100) : 0
+	const percent = totalSteps > 0 ? Math.round((step / totalSteps) * 100) : 0
 	return { step, totalSteps, label, percent }
 }
 
@@ -227,8 +228,7 @@ async function runTask(task: ProcessingTask) {
 			if (failAtStep && index + 1 === failAtStep) {
 				throw new Error('Processing failed during render.')
 			}
-			const delay =
-				STEP_DELAY_MS + Math.round(Math.random() * STEP_JITTER_MS)
+			const delay = STEP_DELAY_MS + Math.round(Math.random() * STEP_JITTER_MS)
 			await sleep(delay, controller.signal)
 		}
 		updateTask(task.id, {

package/src/app-server.ts

@@ -4,6 +4,7 @@ import '../app/config/init-env.ts'
 import getPort from 'get-port'
 import { getEnv } from '../app/config/env.ts'
 import { createAppRouter } from '../app/router.tsx'
+import { handleTrimRequest } from '../app/trim-api.ts'
 import { handleVideoRequest } from '../app/video-api.ts'
 import { createBundlingRoutes } from '../server/bundling.ts'
 import { handleProcessingQueueRequest } from '../server/processing-queue.ts'
@@ -197,6 +198,9 @@ function startServer(port: number, hostname: string) {
 				if (url.pathname === '/api/video') {
 					return await handleVideoRequest(request)
 				}
+				if (url.pathname === '/api/trim') {
+					return await handleTrimRequest(request)
+				}
 				if (url.pathname.startsWith('/api/processing-queue')) {
 					return await handleProcessingQueueRequest(request)
 				}

package/src/cli.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env bun
 import path from 'node:path'
-import type { Arguments, CommandBuilder, CommandHandler } from 'yargs'
+import type { Argv, Arguments, CommandBuilder, CommandHandler } from 'yargs'
 import yargs from 'yargs/yargs'
 import { hideBin } from 'yargs/helpers'
 import { startAppServer } from './app-server'
@@ -28,6 +28,7 @@ import {
 	createInquirerPrompter,
 	createPathPicker,
 	createStepProgressReporter,
+	handlePromptFailure,
 	isInteractive,
 	pauseActiveSpinner,
 	resumeActiveSpinner,
@@ -249,6 +250,8 @@ async function main(rawArgs = hideBin(process.argv)) {
 		)
 		.demandCommand(1)
 		.strict()
+		.fail(handlePromptFailure)
+		.exitProcess(false)
 		.help()
 
 	await parser.parseAsync()