eprec 1.2.0 → 1.4.0

package/README.md

@@ -48,14 +48,14 @@ bun process-course-video.ts "/path/to/input.mp4" "/path/to/output" \
 
 ## Web UI (experimental)
 
-Start the Remix-powered UI shell with the CLI:
+Start the Remix-powered UI shell (watch mode enabled):
 
 ```bash
-bun cli.ts app start
+bun run app:start
 ```
 
-Then open `http://127.0.0.1:3000`. Use `--port` or `--host` to override the
-defaults.
+Then open `http://localhost:3000`. Use `-- --port` or `-- --host` to override
+the defaults.
 
 ## CLI Options
 

package/app/assets/styles.css

@@ -261,7 +261,9 @@ p {
 	cursor: pointer;
 	left: var(--range-left);
 	width: var(--range-width);
-	transition: transform 0.15s ease, box-shadow 0.15s ease;
+	transition:
+		transform 0.15s ease,
+		box-shadow 0.15s ease;
 }
 
 .timeline-range--manual {
@@ -370,7 +372,9 @@ p {
 	font-size: 13px;
 	font-weight: 600;
 	cursor: pointer;
-	transition: background 0.15s ease, color 0.15s ease;
+	transition:
+		background 0.15s ease,
+		color 0.15s ease;
 }
 
 .button--primary {

package/app/client/app.tsx

@@ -1,7 +1,5 @@
 import { EditingWorkspace } from './editing-workspace.tsx'
 
 export function App() {
-	return () => (
-		<EditingWorkspace />
-	)
+	return () => <EditingWorkspace />
 }

package/app/client/editing-workspace.tsx

@@ -27,6 +27,7 @@ export function EditingWorkspace(handle: Handle) {
 	let previewPlaying = false
 	let previewNode: HTMLVideoElement | null = null
 	let lastSyncedPlayhead = playhead
+	let isScrubbing = false
 
 	const setPlayhead = (value: number) => {
 		playhead = clamp(value, 0, duration)
@@ -34,6 +35,16 @@ export function EditingWorkspace(handle: Handle) {
 		handle.update()
 	}
 
+	const startScrubbing = () => {
+		isScrubbing = true
+	}
+
+	const stopScrubbing = () => {
+		if (!isScrubbing) return
+		isScrubbing = false
+		syncVideoToPlayhead(playhead)
+	}
+
 	const selectRange = (rangeId: string) => {
 		selectedRangeId = rangeId
 		handle.update()
@@ -41,7 +52,11 @@ export function EditingWorkspace(handle: Handle) {
 
 	const addManualCut = () => {
 		const start = clamp(playhead, 0, duration - MIN_CUT_LENGTH)
-		const end = clamp(start + DEFAULT_CUT_LENGTH, start + MIN_CUT_LENGTH, duration)
+		const end = clamp(
+			start + DEFAULT_CUT_LENGTH,
+			start + MIN_CUT_LENGTH,
+			duration,
+		)
 		const newRange: CutRange = {
 			id: `manual-${manualCutId++}`,
 			start,
@@ -130,10 +145,19 @@ export function EditingWorkspace(handle: Handle) {
 	}
 
 	const syncVideoToPlayhead = (value: number) => {
-		if (!previewNode || !previewReady || duration <= 0 || previewDuration <= 0) {
+		if (
+			!previewNode ||
+			!previewReady ||
+			duration <= 0 ||
+			previewDuration <= 0
+		) {
 			return
 		}
-		const targetTime = clamp((value / duration) * previewDuration, 0, previewDuration)
+		const targetTime = clamp(
+			(value / duration) * previewDuration,
+			0,
+			previewDuration,
+		)
 		lastSyncedPlayhead = value
 		if (Math.abs(previewNode.currentTime - targetTime) > 0.05) {
 			previewNode.currentTime = targetTime
@@ -143,7 +167,7 @@ export function EditingWorkspace(handle: Handle) {
 	return () => {
 		const sortedCuts = sortRanges(cutRanges)
 		const selectedRange = selectedRangeId
-			? sortedCuts.find((range) => range.id === selectedRangeId) ?? null
+			? (sortedCuts.find((range) => range.id === selectedRangeId) ?? null)
 			: null
 		const mergedCuts = mergeOverlappingRanges(sortedCuts)
 		const totalRemoved = mergedCuts.reduce(
@@ -161,7 +185,10 @@ export function EditingWorkspace(handle: Handle) {
 					.filter((word) => word.word.toLowerCase().includes(query))
 					.slice(0, 12)
 			: []
-		const commandPreview = buildCommandPreview(sampleEditSession.sourceName, chapters)
+		const commandPreview = buildCommandPreview(
+			sampleEditSession.sourceName,
+			chapters,
+		)
 		const previewTime =
 			previewReady && previewDuration > 0
 				? (playhead / duration) * previewDuration
@@ -190,29 +217,29 @@ export function EditingWorkspace(handle: Handle) {
 						</div>
 						<div class="summary-item">
 							<span class="summary-label">Cuts</span>
-							<span class="summary-value">
-								{sortedCuts.length} ranges
-							</span>
+							<span class="summary-value">{sortedCuts.length} ranges</span>
 							<span class="summary-subtext">
 								{formatSeconds(totalRemoved)} removed
 							</span>
 						</div>
 						<div class="summary-item">
 							<span class="summary-label">Output length</span>
-							<span class="summary-value">{formatTimestamp(finalDuration)}</span>
+							<span class="summary-value">
+								{formatTimestamp(finalDuration)}
+							</span>
 							<span class="summary-subtext">
 								{Math.round((finalDuration / duration) * 100)}% retained
 							</span>
 						</div>
 						<div class="summary-item">
 							<span class="summary-label">Commands</span>
-							<span class="summary-value">
-								{commands.length} detected
-							</span>
+							<span class="summary-value">{commands.length} detected</span>
 							<span class="summary-subtext">
-								{commands.filter((command) =>
-									isCommandApplied(command, sortedCuts, chapters),
-								).length}{' '}
+								{
+									commands.filter((command) =>
+										isCommandApplied(command, sortedCuts, chapters),
+									).length
+								}{' '}
 								applied
 							</span>
 						</div>
@@ -228,7 +255,11 @@ export function EditingWorkspace(handle: Handle) {
 								trims.
 							</p>
 						</div>
-						<button class="button button--primary" type="button" on={{ click: addManualCut }}>
+						<button
+							class="button button--primary"
+							type="button"
+							on={{ click: addManualCut }}
+						>
 							Add cut at playhead
 						</button>
 					</div>
@@ -260,11 +291,11 @@ export function EditingWorkspace(handle: Handle) {
 											: 'Loading'}
 									</span>
 								</div>
-							<video
-								class="timeline-video-player"
-								src="/e2e-test.mp4"
-								controls
-								preload="metadata"
+								<video
+									class="timeline-video-player"
+									src="/e2e-test.mp4"
+									controls
+									preload="metadata"
 									connect={(node: HTMLVideoElement, signal) => {
 										previewNode = node
 										const handleLoadedMetadata = () => {
@@ -278,6 +309,8 @@ export function EditingWorkspace(handle: Handle) {
 										}
 										const handleTimeUpdate = () => {
 											if (!previewReady || previewDuration <= 0) return
+											if (isScrubbing) return
+											if (!previewPlaying) return
 											const mapped =
 												(node.currentTime / previewDuration) * duration
 											if (Math.abs(mapped - lastSyncedPlayhead) <= 0.05) {
@@ -294,7 +327,10 @@ export function EditingWorkspace(handle: Handle) {
 											previewPlaying = false
 											handle.update()
 										}
-										node.addEventListener('loadedmetadata', handleLoadedMetadata)
+										node.addEventListener(
+											'loadedmetadata',
+											handleLoadedMetadata,
+										)
 										node.addEventListener('timeupdate', handleTimeUpdate)
 										node.addEventListener('play', handlePlay)
 										node.addEventListener('pause', handlePause)
@@ -313,9 +349,7 @@ export function EditingWorkspace(handle: Handle) {
 									}}
 								/>
 								<div class="timeline-video-meta">
-									<span>
-										Preview {formatTimestamp(previewTime)}
-									</span>
+									<span>Preview {formatTimestamp(previewTime)}</span>
 									<span class="app-muted">
 										Timeline {formatTimestamp(playhead)}
 									</span>
@@ -350,9 +384,7 @@ export function EditingWorkspace(handle: Handle) {
 							<div class="timeline-controls">
 								<label class="control-label">
 									Playhead
-									<span class="control-value">
-										{formatTimestamp(playhead)}
-									</span>
+									<span class="control-value">{formatTimestamp(playhead)}</span>
 								</label>
 								<input
 									class="timeline-slider"
@@ -364,8 +396,15 @@ export function EditingWorkspace(handle: Handle) {
 									on={{
 										input: (event) => {
 											const target = event.currentTarget as HTMLInputElement
+											startScrubbing()
 											setPlayhead(Number(target.value))
 										},
+										pointerdown: startScrubbing,
+										pointerup: stopScrubbing,
+										pointercancel: stopScrubbing,
+										keydown: startScrubbing,
+										keyup: stopScrubbing,
+										blur: stopScrubbing,
 									}}
 								/>
 								<button
@@ -385,7 +424,9 @@ export function EditingWorkspace(handle: Handle) {
 									type="button"
 									on={{
 										click: () => {
-											const next = sortedCuts.find((range) => range.start > playhead)
+											const next = sortedCuts.find(
+												(range) => range.start > playhead,
+											)
 											if (next) setPlayhead(next.start)
 										},
 									}}
@@ -460,7 +501,9 @@ export function EditingWorkspace(handle: Handle) {
 											on={{
 												input: (event) => {
 													const target = event.currentTarget as HTMLInputElement
-													updateCutRange(selectedRange.id, { reason: target.value })
+													updateCutRange(selectedRange.id, {
+														reason: target.value,
+													})
 												},
 											}}
 										/>
@@ -562,7 +605,8 @@ export function EditingWorkspace(handle: Handle) {
 											value={chapter.status}
 											on={{
 												change: (event) => {
-													const target = event.currentTarget as HTMLSelectElement
+													const target =
+														event.currentTarget as HTMLSelectElement
 													updateChapterStatus(
 														chapter.id,
 														target.value as ChapterStatus,

package/app-server.ts

@@ -10,6 +10,140 @@ type AppServerOptions = {
 	port?: number
 }
 
+const LOCALHOST_ALIASES = new Set(['127.0.0.1', '::1', 'localhost'])
+const COLOR_ENABLED =
+	process.env.FORCE_COLOR === '1' ||
+	(Boolean(process.stdout.isTTY) && !process.env.NO_COLOR)
+const SHORTCUT_COLORS: Record<string, string> = {
+	o: '\u001b[36m',
+	r: '\u001b[33m',
+	q: '\u001b[31m',
+	h: '\u001b[35m',
+}
+const ANSI_RESET = '\u001b[0m'
+
+function colorizeShortcut(key: string) {
+	if (!COLOR_ENABLED) {
+		return key
+	}
+	const color = SHORTCUT_COLORS[key.toLowerCase()]
+	return color ? `${color}${key}${ANSI_RESET}` : key
+}
+
+function formatHostnameForDisplay(hostname: string) {
+	if (LOCALHOST_ALIASES.has(hostname)) {
+		return 'localhost'
+	}
+	if (hostname.includes(':')) {
+		return `[${hostname}]`
+	}
+	return hostname
+}
+
+function formatServerUrl(hostname: string, port: number) {
+	return `http://${formatHostnameForDisplay(hostname)}:${port}`
+}
+
+function getShortcutLines(url: string) {
+	return [
+		'[app] shortcuts:',
+		`  ${colorizeShortcut('o')}: open ${url} in browser`,
+		`  ${colorizeShortcut('r')}: restart server`,
+		`  ${colorizeShortcut('q')}: quit server`,
+		`  ${colorizeShortcut('h')}: show shortcuts`,
+	]
+}
+
+function logShortcuts(url: string) {
+	for (const line of getShortcutLines(url)) {
+		console.log(line)
+	}
+}
+
+function openBrowser(url: string) {
+	const platform = process.platform
+	const command =
+		platform === 'darwin'
+			? ['open', url]
+			: platform === 'win32'
+				? ['cmd', '/c', 'start', '', url]
+				: ['xdg-open', url]
+	try {
+		const subprocess = Bun.spawn({
+			cmd: command,
+			stdin: 'ignore',
+			stdout: 'ignore',
+			stderr: 'ignore',
+		})
+		void subprocess.exited.catch((error) => {
+			console.warn(
+				`[app] failed to open browser: ${
+					error instanceof Error ? error.message : String(error)
+				}`,
+			)
+		})
+	} catch (error) {
+		console.warn(
+			`[app] failed to open browser: ${
+				error instanceof Error ? error.message : String(error)
+			}`,
+		)
+	}
+}
+
+function setupShortcutHandling(options: {
+	getUrl: () => string
+	restart: () => void
+	stop: () => void
+}) {
+	if (!process.stdin.isTTY || typeof process.stdin.setRawMode !== 'function') {
+		return () => {}
+	}
+
+	const stdin = process.stdin
+	const handleKey = (key: string) => {
+		if (key === '\u0003') {
+			options.stop()
+			return
+		}
+		const lower = key.toLowerCase()
+		if (lower === 'o') {
+			openBrowser(options.getUrl())
+			return
+		}
+		if (lower === 'r') {
+			options.restart()
+			return
+		}
+		if (lower === 'q') {
+			options.stop()
+			return
+		}
+		if (lower === 'h' || lower === '?') {
+			logShortcuts(options.getUrl())
+		}
+	}
+
+	const onData = (chunk: Buffer | string) => {
+		const input = chunk.toString()
+		for (const key of input) {
+			handleKey(key)
+		}
+	}
+
+	stdin.setRawMode(true)
+	stdin.resume()
+	stdin.on('data', onData)
+
+	return () => {
+		stdin.off('data', onData)
+		if (stdin.isTTY && typeof stdin.setRawMode === 'function') {
+			stdin.setRawMode(false)
+		}
+		stdin.pause()
+	}
+}
+
 function startServer(port: number, hostname: string) {
 	const router = createAppRouter(import.meta.dirname)
 	return Bun.serve({
@@ -46,15 +180,48 @@ export async function startAppServer(options: AppServerOptions = {}) {
 	const host = options.host ?? env.HOST
 	const desiredPort = options.port ?? env.PORT
 	const port = await getServerPort(env.NODE_ENV, desiredPort)
-	const server = startServer(port, host)
-	const hostname = server.hostname.includes(':')
-		? `[${server.hostname}]`
-		: server.hostname
-	const url = `http://${hostname}:${server.port}`
+	let server = startServer(port, host)
+	const getUrl = () => formatServerUrl(server.hostname, server.port)
+	let cleanupInput = () => {}
+	let isRestarting = false
+	const stopServer = () => {
+		console.log('[app] stopping server...')
+		cleanupInput()
+		server.stop()
+		process.exit(0)
+	}
+	const restartServer = async () => {
+		if (isRestarting) {
+			return
+		}
+		isRestarting = true
+		try {
+			console.log('[app] restarting server...')
+			await server.stop()
+			server = startServer(port, host)
+			console.log(`[app] running at ${getUrl()}`)
+		} finally {
+			isRestarting = false
+		}
+	}
+	cleanupInput = setupShortcutHandling({
+		getUrl,
+		restart: restartServer,
+		stop: stopServer,
+	})
+	const url = getUrl()
 
 	console.log(`[app] running at ${url}`)
+	logShortcuts(url)
 
-	return { server, url }
+	return { 
+		get server() { return server }, 
+		url,
+		stop: () => {
+			cleanupInput()
+			server.stop()
+		}
+	}
 }
 
 if (import.meta.main) {