eprec 1.8.0 → 1.9.0

package/README.md

@@ -54,8 +54,14 @@ Start the Remix-powered UI shell (watch mode enabled):
 bun run app:start
 ```
 
-Then open `http://localhost:3000`. Use `-- --port` or `-- --host` to override
-the defaults.
+To preload a local video path for the UI:
+
+```bash
+bun run app:start -- --video-path "/path/to/video.mp4"
+```
+
+Then open `http://localhost:3000`. Use `-- --port`, `-- --host`, or
+`-- --video-path` to override the defaults.
 
 ## CLI Options
 

package/app/assets/styles.css

@@ -188,6 +188,7 @@ p {
 	grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
 }
 
+
 .app-card {
 	background: var(--color-surface);
 	border-radius: var(--radius-xl);
@@ -227,6 +228,63 @@ p {
 	box-shadow: inset 0 0 0 1px var(--color-border-accent);
 }
 
+.source-card {
+	gap: var(--spacing-lg);
+}
+
+.source-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-lg);
+	flex-wrap: wrap;
+}
+
+.source-grid {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-lg);
+}
+
+.source-fields {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-md);
+}
+
+.source-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-sm);
+}
+.status-note {
+	margin: 0;
+	padding: var(--spacing-sm) var(--spacing-md);
+	border-radius: var(--radius-md);
+	font-size: var(--font-size-xs);
+	background: var(--color-surface-muted);
+	color: var(--color-text-subtle);
+	border: 1px solid var(--color-border);
+}
+
+.status-note--success {
+	background: var(--color-success-surface);
+	color: var(--color-success-text);
+	border-color: color-mix(in srgb, var(--color-success-text) 20%, transparent);
+}
+
+.status-note--warning {
+	background: var(--color-warning-surface);
+	color: var(--color-warning-text);
+	border-color: var(--color-warning-border);
+}
+
+.status-note--danger {
+	background: var(--color-danger-surface);
+	color: var(--color-danger-text);
+	border-color: var(--color-danger-border);
+}
+
 .app-list {
 	margin: 0;
 	padding-left: var(--spacing-lg);

package/app/client/editing-workspace.tsx

@@ -9,9 +9,38 @@ import {
 	type TranscriptWord,
 } from './edit-session-data.ts'
 
+type AppConfig = {
+	initialVideoPath?: string
+}
+
+declare global {
+	interface Window {
+		__EPREC_APP__?: AppConfig
+	}
+}
+
 const MIN_CUT_LENGTH = 0.2
 const DEFAULT_CUT_LENGTH = 2.4
 const PLAYHEAD_STEP = 0.1
+const DEFAULT_PREVIEW_URL = '/e2e-test.mp4'
+
+function readInitialVideoPath() {
+	if (typeof window === 'undefined') return ''
+	const raw = window.__EPREC_APP__?.initialVideoPath
+	if (typeof raw !== 'string') return ''
+	return raw.trim()
+}
+
+function buildVideoPreviewUrl(value: string) {
+	return `/api/video?path=${encodeURIComponent(value)}`
+}
+
+function extractVideoName(value: string) {
+	const normalized = value.replace(/\\/g, '/')
+	const parts = normalized.split('/')
+	const last = parts[parts.length - 1]
+	return last && last.length > 0 ? last : value
+}
 
 type ProcessingStatus = 'queued' | 'running' | 'done'
 type ProcessingCategory = 'chapter' | 'transcript' | 'export'
@@ -31,6 +60,17 @@ export function EditingWorkspace(handle: Handle) {
 		...word,
 		context: buildContext(transcript, word.index, 3),
 	}))
+	const initialVideoPath = readInitialVideoPath()
+	let sourceName = sampleEditSession.sourceName
+	let sourcePath = ''
+	let previewUrl = DEFAULT_PREVIEW_URL
+	let previewSource: 'demo' | 'path' = 'demo'
+	let videoPathInput = initialVideoPath
+	let pathStatus: 'idle' | 'loading' | 'ready' | 'error' = initialVideoPath
+		? 'loading'
+		: 'idle'
+	let pathError = ''
+	let previewError = ''
 	let cutRanges = sampleEditSession.cuts.map((range) => ({ ...range }))
 	let chapters = sampleEditSession.chapters.map((chapter) => ({ ...chapter }))
 	let playhead = 18.2
@@ -49,6 +89,94 @@ export function EditingWorkspace(handle: Handle) {
 	let lastSyncedPlayhead = playhead
 	let isScrubbing = false
 
+	const resetPreviewState = () => {
+		previewReady = false
+		previewPlaying = false
+		previewDuration = 0
+		previewError = ''
+		lastSyncedPlayhead = playhead
+	}
+
+	const updateVideoPathInput = (value: string) => {
+		videoPathInput = value
+		if (pathError) pathError = ''
+		if (pathStatus === 'error') pathStatus = 'idle'
+		handle.update()
+	}
+
+	const applyPreviewSource = (options: {
+		url: string
+		name: string
+		source: 'demo' | 'path'
+		path?: string
+	}) => {
+		previewUrl = options.url
+		sourceName = options.name
+		sourcePath = options.path ?? ''
+		previewSource = options.source
+		resetPreviewState()
+		handle.update()
+	}
+
+	const loadVideoFromPath = async (override?: string) => {
+		const candidate = (override ?? videoPathInput).trim()
+		if (!candidate) {
+			pathError = 'Enter a video file path to load.'
+			pathStatus = 'error'
+			handle.update()
+			return
+		}
+		videoPathInput = candidate
+		pathStatus = 'loading'
+		pathError = ''
+		previewError = ''
+		handle.update()
+		const preview = buildVideoPreviewUrl(candidate)
+		try {
+			const response = await fetch(preview, {
+				method: 'HEAD',
+				cache: 'no-store',
+				signal: handle.signal,
+			})
+			if (!response.ok) {
+				const message =
+					response.status === 404
+						? 'Video file not found. Check the path.'
+						: `Unable to load the video (status ${response.status}).`
+				throw new Error(message)
+			}
+			if (handle.signal.aborted) return
+			pathStatus = 'ready'
+			applyPreviewSource({
+				url: preview,
+				name: extractVideoName(candidate),
+				source: 'path',
+				path: candidate,
+			})
+		} catch (error) {
+			if (handle.signal.aborted) return
+			pathStatus = 'error'
+			pathError =
+				error instanceof Error ? error.message : 'Unable to load the video.'
+			handle.update()
+		}
+	}
+
+	const resetToDemo = () => {
+		pathStatus = 'idle'
+		pathError = ''
+		videoPathInput = ''
+		applyPreviewSource({
+			url: DEFAULT_PREVIEW_URL,
+			name: sampleEditSession.sourceName,
+			source: 'demo',
+		})
+	}
+
+	if (initialVideoPath) {
+		void loadVideoFromPath(initialVideoPath)
+	}
+
 	const setPlayhead = (value: number) => {
 		playhead = clamp(value, 0, duration)
 		syncVideoToPlayhead(playhead)
@@ -171,8 +299,7 @@ export function EditingWorkspace(handle: Handle) {
 		primaryChapterId = chapterId
 		if (secondaryChapterId === chapterId) {
 			secondaryChapterId =
-				chapters.find((chapter) => chapter.id !== chapterId)?.id ??
-				chapterId
+				chapters.find((chapter) => chapter.id !== chapterId)?.id ?? chapterId
 		}
 		handle.update()
 	}
@@ -340,13 +467,25 @@ export function EditingWorkspace(handle: Handle) {
 			secondaryChapterId.length > 0 &&
 			primaryChapterId !== secondaryChapterId
 		const commandPreview = buildCommandPreview(
-			sampleEditSession.sourceName,
+			sourceName,
 			chapters,
+			sourcePath,
 		)
 		const previewTime =
 			previewReady && previewDuration > 0
 				? (playhead / duration) * previewDuration
 				: 0
+		const previewStatus = previewError
+			? { label: 'Error', className: 'status-pill--danger' }
+			: previewReady
+				? previewPlaying
+					? { label: 'Playing', className: 'status-pill--info' }
+					: { label: 'Ready', className: 'status-pill--success' }
+				: { label: 'Loading', className: 'status-pill--warning' }
+		const sourceStatus =
+			previewSource === 'path'
+				? { label: 'Path', className: 'status-pill--success' }
+				: { label: 'Demo', className: 'status-pill--info' }
 
 		return (
 			<main class="app-shell">
@@ -359,12 +498,77 @@ export function EditingWorkspace(handle: Handle) {
 					</p>
 				</header>
 
+				<section class="app-card app-card--full source-card">
+					<div class="source-header">
+						<div>
+							<h2>Source video</h2>
+							<p class="app-muted">
+								Paste a full video path to preview it and update the CLI export.
+							</p>
+						</div>
+						<span
+							class={classNames('status-pill', sourceStatus.className)}
+							title={`Preview source: ${sourceStatus.label}`}
+						>
+							{sourceStatus.label}
+						</span>
+					</div>
+					<div class="source-grid">
+						<div class="source-fields">
+							<label class="input-label">
+								Video file path
+								<input
+									class="text-input"
+									type="text"
+									placeholder="/path/to/video.mp4"
+									value={videoPathInput}
+									on={{
+										input: (event) => {
+											const target =
+												event.currentTarget as HTMLInputElement
+											updateVideoPathInput(target.value)
+										},
+									}}
+								/>
+							</label>
+							<div class="source-actions">
+								<button
+									class="button button--primary"
+									type="button"
+									disabled={
+										pathStatus === 'loading' ||
+										videoPathInput.trim().length === 0
+									}
+									on={{ click: () => void loadVideoFromPath() }}
+								>
+									{pathStatus === 'loading' ? 'Checking...' : 'Load from path'}
+								</button>
+								<button
+									class="button button--ghost"
+									type="button"
+									on={{ click: resetToDemo }}
+								>
+									Use demo video
+								</button>
+							</div>
+							{pathStatus === 'error' && pathError ? (
+								<p class="status-note status-note--danger">{pathError}</p>
+							) : null}
+						</div>
+					</div>
+				</section>
+
 				<section class="app-card app-card--full">
 					<h2>Session summary</h2>
 					<div class="summary-grid">
 						<div class="summary-item">
 							<span class="summary-label">Source video</span>
-							<span class="summary-value">{sampleEditSession.sourceName}</span>
+							<span class="summary-value">{sourceName}</span>
+							{sourcePath ? (
+								<span class="summary-subtext">{sourcePath}</span>
+							) : (
+								<span class="summary-subtext">Demo fixture video</span>
+							)}
 							<span class="summary-subtext">
 								Duration {formatTimestamp(duration)}
 							</span>
@@ -405,8 +609,8 @@ export function EditingWorkspace(handle: Handle) {
 						<div>
 							<h2>Processing actions</h2>
 							<p class="app-muted">
-								Queue chapter edits, transcript cleanup, and export jobs directly
-								from the workspace.
+								Queue chapter edits, transcript cleanup, and export jobs
+								directly from the workspace.
 							</p>
 						</div>
 						<div class="actions-meta">
@@ -652,23 +856,15 @@ export function EditingWorkspace(handle: Handle) {
 									<span
 										class={classNames(
 											'status-pill',
-											previewReady
-												? previewPlaying
-													? 'status-pill--info'
-													: 'status-pill--success'
-												: 'status-pill--warning',
+											previewStatus.className,
 										)}
 									>
-										{previewReady
-											? previewPlaying
-												? 'Playing'
-												: 'Ready'
-											: 'Loading'}
+										{previewStatus.label}
 									</span>
 								</div>
 								<video
 									class="timeline-video-player"
-									src="/e2e-test.mp4"
+									src={previewUrl}
 									controls
 									preload="metadata"
 									connect={(node: HTMLVideoElement, signal) => {
@@ -679,6 +875,7 @@ export function EditingWorkspace(handle: Handle) {
 												? nextDuration
 												: 0
 											previewReady = previewDuration > 0
+											previewError = ''
 											syncVideoToPlayhead(playhead)
 											handle.update()
 										}
@@ -702,6 +899,12 @@ export function EditingWorkspace(handle: Handle) {
 											previewPlaying = false
 											handle.update()
 										}
+										const handleError = () => {
+											previewError = 'Unable to load the preview video.'
+											previewReady = false
+											previewPlaying = false
+											handle.update()
+										}
 										node.addEventListener(
 											'loadedmetadata',
 											handleLoadedMetadata,
@@ -709,6 +912,7 @@ export function EditingWorkspace(handle: Handle) {
 										node.addEventListener('timeupdate', handleTimeUpdate)
 										node.addEventListener('play', handlePlay)
 										node.addEventListener('pause', handlePause)
+										node.addEventListener('error', handleError)
 										signal.addEventListener('abort', () => {
 											node.removeEventListener(
 												'loadedmetadata',
@@ -717,6 +921,7 @@ export function EditingWorkspace(handle: Handle) {
 											node.removeEventListener('timeupdate', handleTimeUpdate)
 											node.removeEventListener('play', handlePlay)
 											node.removeEventListener('pause', handlePause)
+											node.removeEventListener('error', handleError)
 											if (previewNode === node) {
 												previewNode = null
 											}
@@ -729,6 +934,9 @@ export function EditingWorkspace(handle: Handle) {
 										Timeline {formatTimestamp(playhead)}
 									</span>
 								</div>
+								{previewError ? (
+									<p class="status-note status-note--danger">{previewError}</p>
+								) : null}
 							</div>
 							<div
 								class="timeline-track"
@@ -1203,13 +1411,21 @@ function buildTimelineTicks(duration: number, count: number) {
 	)
 }
 
-function buildCommandPreview(sourceName: string, chapters: ChapterPlan[]) {
+function buildCommandPreview(
+	sourceName: string,
+	chapters: ChapterPlan[],
+	sourcePath?: string,
+) {
 	const outputName =
 		chapters.find((chapter) => chapter.status !== 'skipped')?.outputName ??
 		'edited-output.mp4'
+	const inputPath =
+		typeof sourcePath === 'string' && sourcePath.trim().length > 0
+			? sourcePath
+			: sourceName
 	return [
 		'bun process-course/edits/cli.ts edit-video \\',
-		`  --input "${sourceName}" \\`,
+		`  --input "${inputPath}" \\`,
 		'  --transcript "transcript.json" \\',
 		'  --edited "transcript.txt" \\',
 		`  --output "${outputName}"`,

package/app/components/layout.tsx

@@ -5,10 +5,12 @@ export function Layout({
 	children,
 	title = 'Eprec Studio',
 	entryScript = '/app/client/entry.tsx',
+	appConfig,
 }: {
 	children?: SafeHtml
 	title?: string
 	entryScript?: string | false
+	appConfig?: Record<string, unknown>
 }) {
 	const importmap = { imports: baseImportMap }
 	const importmapJson = JSON.stringify(importmap)
@@ -16,6 +18,13 @@ export function Layout({
 	const modulePreloads = Object.values(baseImportMap).map((value) => {
 		return html`<link rel="modulepreload" href="${value}" />`
 	})
+	const appConfigJson = appConfig ? JSON.stringify(appConfig) : null
+	const appConfigScript = appConfigJson
+		? html.raw`<script>window.__EPREC_APP__=${appConfigJson.replace(
+				/</g,
+				'\\u003c',
+			)}</script>`
+		: ''
 
 	return html`<html lang="en">
 		<head>
@@ -27,6 +36,7 @@ export function Layout({
 		</head>
 		<body>
 			<div id="root">${children ?? ''}</div>
+			${appConfigScript}
 			${entryScript
 				? html`<script type="module" src="${entryScript}"></script>`
 				: ''}

package/app/routes/index.tsx

@@ -5,9 +5,11 @@ import { render } from '../helpers/render.ts'
 const indexHandler = {
 	middleware: [],
 	loader() {
+		const initialVideoPath = process.env.EPREC_APP_VIDEO_PATH?.trim()
 		return render(
 			Layout({
 				title: 'Eprec Studio',
+				appConfig: initialVideoPath ? { initialVideoPath } : undefined,
 				children: html`<main class="app-shell">
 					<header class="app-header">
 						<span class="app-kicker">Eprec Studio</span>
@@ -17,6 +19,12 @@ const indexHandler = {
 							exports.
 						</p>
 					</header>
+					<section class="app-card app-card--full">
+						<h2>Source video</h2>
+						<p class="app-muted">
+							Paste a video file path once the UI loads.
+						</p>
+					</section>
 					<section class="app-card app-card--full">
 						<h2>Processing actions</h2>
 						<p class="app-muted">

package/app/video-api.ts

@@ -0,0 +1,161 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const VIDEO_ROUTE = '/api/video'
+
+function isLocalhostOrigin(origin: string | null): boolean {
+	if (!origin) return false
+	try {
+		const url = new URL(origin)
+		const hostname = url.hostname.toLowerCase()
+		return hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '[::1]'
+	} catch {
+		return false
+	}
+}
+
+function getVideoCorsHeaders(origin: string | null) {
+	if (!isLocalhostOrigin(origin)) {
+		return {}
+	}
+	return {
+		'Access-Control-Allow-Origin': origin,
+		'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+		'Access-Control-Allow-Headers': 'Accept, Content-Type, Range',
+	}
+}
+
+type ByteRange = { start: number; end: number }
+
+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 resolveVideoPath(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 parseRangeHeader(
+	header: string | null,
+	size: number,
+): ByteRange | null {
+	if (!header) return null
+	const match = /^bytes=(\d*)-(\d*)$/.exec(header.trim())
+	if (!match) return null
+	const startRaw = match[1]
+	const endRaw = match[2]
+	const start = startRaw ? Number(startRaw) : null
+	const end = endRaw ? Number(endRaw) : null
+	if (start === null && end === null) return null
+	if (start !== null && (!Number.isFinite(start) || start < 0)) return null
+	if (end !== null && (!Number.isFinite(end) || end < 0)) return null
+
+	if (start === null) {
+		const suffix = end ?? 0
+		if (suffix <= 0) return null
+		const rangeStart = Math.max(size - suffix, 0)
+		return { start: rangeStart, end: size - 1 }
+	}
+
+	const rangeEnd =
+		end === null || end >= size ? Math.max(size - 1, 0) : end
+	if (start > rangeEnd) return null
+	return { start, end: rangeEnd }
+}
+
+function buildVideoHeaders(contentType: string, length: number, origin: string | null) {
+	return {
+		'Content-Type': contentType,
+		'Content-Length': String(length),
+		'Accept-Ranges': 'bytes',
+		'Cache-Control': 'no-cache',
+		...getVideoCorsHeaders(origin),
+	}
+}
+
+export async function handleVideoRequest(request: Request): Promise<Response> {
+	const url = new URL(request.url)
+	if (url.pathname !== VIDEO_ROUTE) {
+		return new Response('Not Found', { status: 404 })
+	}
+
+	const origin = request.headers.get('origin')
+	const corsHeaders = getVideoCorsHeaders(origin)
+
+	if (request.method === 'OPTIONS') {
+		return new Response(null, {
+			status: 204,
+			headers: {
+				...corsHeaders,
+				'Access-Control-Max-Age': '86400',
+			},
+		})
+	}
+
+	if (request.method !== 'GET' && request.method !== 'HEAD') {
+		return new Response('Method Not Allowed', {
+			status: 405,
+			headers: corsHeaders,
+		})
+	}
+
+	const rawPath = url.searchParams.get('path')
+	const filePath = rawPath ? resolveVideoPath(rawPath) : null
+	if (!filePath) {
+		return new Response('Missing or invalid path query.', {
+			status: 400,
+			headers: corsHeaders,
+		})
+	}
+
+	const file = Bun.file(filePath)
+	if (!(await file.exists())) {
+		return new Response('Video file not found.', {
+			status: 404,
+			headers: corsHeaders,
+		})
+	}
+
+	const contentType = file.type || 'application/octet-stream'
+	const size = file.size
+	const rangeHeader = request.headers.get('range')
+	if (rangeHeader) {
+		const range = parseRangeHeader(rangeHeader, size)
+		if (!range) {
+			return new Response(null, {
+				status: 416,
+				headers: {
+					'Content-Range': `bytes */${size}`,
+					...corsHeaders,
+				},
+			})
+		}
+		const chunk = file.slice(range.start, range.end + 1)
+		const length = range.end - range.start + 1
+		return new Response(request.method === 'HEAD' ? null : chunk, {
+			status: 206,
+			headers: {
+				'Content-Range': `bytes ${range.start}-${range.end}/${size}`,
+				...buildVideoHeaders(contentType, length, origin),
+			},
+		})
+	}
+
+	return new Response(request.method === 'HEAD' ? null : file, {
+		headers: buildVideoHeaders(contentType, size, origin),
+	})
+}

package/package.json

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

package/src/app-server.ts

@@ -4,11 +4,13 @@ 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 { handleVideoRequest } from '../app/video-api.ts'
 import { createBundlingRoutes } from '../server/bundling.ts'
 
 type AppServerOptions = {
 	host?: string
 	port?: number
+	videoPath?: string
 }
 
 const LOCALHOST_ALIASES = new Set(['127.0.0.1', '::1', 'localhost'])
@@ -155,6 +157,10 @@ function startServer(port: number, hostname: string) {
 		routes: createBundlingRoutes(APP_ROOT),
 		async fetch(request) {
 			try {
+				const url = new URL(request.url)
+				if (url.pathname === '/api/video') {
+					return await handleVideoRequest(request)
+				}
 				return await router.fetch(request)
 			} catch (error) {
 				console.error(error)
@@ -178,6 +184,9 @@ async function getServerPort(nodeEnv: string, desiredPort: number) {
 }
 
 export async function startAppServer(options: AppServerOptions = {}) {
+	if (options.videoPath) {
+		process.env.EPREC_APP_VIDEO_PATH = options.videoPath.trim()
+	}
 	const env = getEnv()
 	const host = options.host ?? env.HOST
 	const desiredPort = options.port ?? env.PORT

package/src/cli.ts

@@ -108,6 +108,10 @@ async function main(rawArgs = hideBin(process.argv)) {
 					.option('host', {
 						type: 'string',
 						describe: 'Host to bind for the app server',
+					})
+					.option('video-path', {
+						type: 'string',
+						describe: 'Default input video path for the app UI',
 					}),
 			async (argv) => {
 				const port =
@@ -115,7 +119,8 @@ async function main(rawArgs = hideBin(process.argv)) {
 						? argv.port
 						: undefined
 				const host = resolveOptionalString(argv.host)
-				await startAppServer({ port, host })
+				const videoPath = resolveOptionalString(argv['video-path'])
+				await startAppServer({ port, host, videoPath })
 			},
 		)
 		.command(

package/src/process-course-video.ts

@@ -108,7 +108,10 @@ function buildProgressText(params: {
 function createSpinnerProgressReporter(context: SpinnerProgressContext) {
 	const chapterCount = Math.max(1, context.chapterCount)
 	return {
-		createChapterProgress({ chapterIndex, chapterTitle }: ChapterProgressContext) {
+		createChapterProgress({
+			chapterIndex,
+			chapterTitle,
+		}: ChapterProgressContext) {
 			let stepIndex = 0
 			let stepCount = 1
 			let stepLabel = 'Starting'