@devbycrux/editor 0.1.0 → 0.3.0

package/src/video/RenderModal.tsx

@@ -0,0 +1,252 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import type { EditorAdapter, Project } from '../types'
+
+interface RenderModalProps<P extends Project = Project> {
+  projectId: string
+  /** Adapter driving the render stream + file-URL resolution. */
+  adapter: EditorAdapter<P>
+  /** Fired when the modal closes from a finished or errored state (post-render).
+   *  Callers can use this to navigate away or refresh project state. */
+  onClose: () => void
+  /** Fired when the user cancels an in-progress render via the Cancel button.
+   *  Distinct from onClose so callers can dismiss the modal without navigating
+   *  away from the editor — the project is unchanged and the user is likely
+   *  about to keep editing. Defaults to onClose if not provided (back-compat). */
+  onCancel?: () => void
+  /** Host-supplied export controls (e.g. a "Download all (.zip)" link) rendered
+   *  in the done state's action area, mirroring the carousel render modal. */
+  exportActions?: ReactNode
+}
+
+function basename(p: string) { return p.split('/').pop() ?? p }
+
+function LogLine({ text }: { text: string }) {
+  const t = text.replace(/^\[montaj render\]\s*/, '')
+  let color = 'text-gray-400'
+  if (/ready|complete|done|encoded|assembled/i.test(t))  color = 'text-green-400'
+  else if (/rendering|bundling|launching|browsers/i.test(t)) color = 'text-sky-400'
+  else if (/trimming|building|composing/i.test(t))       color = 'text-amber-400'
+  else if (/frame\s+\d+\/\d+/i.test(t))                  color = 'text-gray-500'
+  else if (/error|fail|warn/i.test(t))                   color = 'text-red-400'
+
+  const prefix = text.startsWith('[montaj render]')
+    ? <span className="text-gray-600">[render] </span>
+    : null
+
+  return (
+    <span className={`leading-relaxed whitespace-pre-wrap break-all ${color}`}>
+      {prefix}{t}
+    </span>
+  )
+}
+
+export default function RenderModal<P extends Project = Project>({ projectId, adapter, onClose, onCancel, exportActions }: RenderModalProps<P>) {
+  const [logs, setLogs]         = useState<string[]>([])
+  const [status, setStatus]     = useState<'running' | 'done' | 'error'>('running')
+  const [outputPath, setOutput] = useState<string | null>(null)
+  const [errorMsg, setError]    = useState<string | null>(null)
+  const logRef                  = useRef<HTMLDivElement>(null)
+  const cancelledRef            = useRef(false)
+  const unmountedRef            = useRef(false)
+  const cleanupTimerRef         = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    // React StrictMode in dev fires mount → cleanup → mount synchronously to
+    // catch effects that aren't idempotent. Triggering a render is the textbook
+    // non-idempotent effect (spawns a subprocess), so we have to handle it
+    // explicitly: defer the teardown in cleanup, and if the next mount fires
+    // within the same tick, rescue the pending teardown.
+    //
+    // Without this, every render in dev would consume two render streams against
+    // the same workspace, racing on segment files and producing corrupted output
+    // — the bug we tracked down.
+    if (cleanupTimerRef.current !== null) {
+      clearTimeout(cleanupTimerRef.current)
+      cleanupTimerRef.current = null
+      unmountedRef.current = false
+      cancelledRef.current = false
+      return scheduleCleanup
+    }
+
+    unmountedRef.current = false
+    cancelledRef.current = false
+
+    void (async () => {
+      try {
+        for await (const ev of adapter.render(projectId)) {
+          if (unmountedRef.current || cancelledRef.current) break
+          if (ev.type === 'log') {
+            setLogs(l => [...l, ev.message])
+          } else if (ev.type === 'done') {
+            setOutput(ev.outputPath)
+            setStatus('done')
+          } else {
+            setError(ev.message)
+            setStatus('error')
+          }
+        }
+      } catch (e) {
+        if (!unmountedRef.current && !cancelledRef.current) {
+          setError(e instanceof Error ? e.message : String(e))
+          setStatus('error')
+        }
+      }
+    })()
+
+    return scheduleCleanup
+
+    function scheduleCleanup() {
+      // Defer the actual teardown. StrictMode's transient unmount fires before
+      // the next mount; setTimeout(0) puts the teardown after both, giving the
+      // next mount a chance to clearTimeout it. On real unmount the timer fires
+      // and the render stream is abandoned for real.
+      cleanupTimerRef.current = setTimeout(() => {
+        cleanupTimerRef.current = null
+        unmountedRef.current = true
+      }, 0)
+    }
+  }, [projectId, adapter])
+
+  // Auto-scroll logs
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight
+  }, [logs])
+
+  // Escape to close only when done/error
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && status !== 'running') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [status, onClose])
+
+  function handleCancel() {
+    cancelledRef.current = true
+    // Use onCancel when provided so the host can dismiss without navigating
+    // (cancelling an in-progress render shouldn't yank the user away from
+    // their editor). Falls back to onClose for back-compat with callers that
+    // haven't been updated.
+    ;(onCancel ?? onClose)()
+  }
+
+  if (status === 'done' && outputPath) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md">
+        <div className="w-[96vw] h-[96vh] bg-gray-950 border border-gray-800 rounded-2xl shadow-2xl flex overflow-hidden">
+
+          {/* Left — video */}
+          <div className="flex-1 bg-black flex items-center justify-center overflow-hidden">
+            <video
+              src={adapter.fileUrl(outputPath)}
+              controls
+              autoPlay
+              playsInline
+              className="h-full w-full object-contain"
+            />
+          </div>
+
+          {/* Right — info panel */}
+          <div className="w-72 shrink-0 flex flex-col border-l border-gray-800">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+              <div className="flex items-center gap-2.5">
+                <span className="w-2 h-2 rounded-full bg-green-400" />
+                <div>
+                  <p className="text-sm font-semibold text-white">Render complete</p>
+                  <p className="text-xs text-gray-400">Your video is ready.</p>
+                </div>
+              </div>
+              <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+            </div>
+
+            <div className="flex flex-col gap-3 p-5 flex-1">
+              <p className="text-xs font-mono text-gray-500 break-all leading-relaxed">{outputPath}</p>
+              {/* Host-supplied export controls (e.g. download-all .zip). */}
+              {exportActions}
+              <a
+                href={adapter.fileUrl(outputPath)}
+                download={basename(outputPath)}
+                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-green-800/60 border border-green-700 text-green-200 hover:bg-green-700/60 transition-colors font-medium"
+              >
+                Download
+              </a>
+              <button
+                onClick={onClose}
+                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-gray-800 border border-gray-700 text-gray-300 hover:bg-gray-700 transition-colors"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+      <div className="w-full max-w-3xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl flex flex-col overflow-hidden">
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+          <div className="flex items-center gap-2.5">
+            {status === 'running' && <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />}
+            {status === 'error'   && <span className="w-2 h-2 rounded-full bg-red-400" />}
+            <div className="flex flex-col gap-0.5">
+              <h2 className="text-sm font-semibold text-white">
+                {status === 'running' ? 'Rendering…' : 'Render failed'}
+              </h2>
+            </div>
+          </div>
+          {status !== 'running' && (
+            <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+          )}
+        </div>
+
+        {/* Log output */}
+        <div className="relative">
+          <button
+            onClick={() => navigator.clipboard.writeText(logs.join('\n') + (errorMsg ? '\n' + errorMsg : ''))}
+            className="absolute top-2 right-2 z-10 text-[10px] px-2 py-0.5 rounded bg-gray-800 border border-gray-700 text-gray-400 hover:text-white hover:border-gray-500 transition-colors"
+            title="Copy logs"
+          >
+            Copy
+          </button>
+          <div
+            ref={logRef}
+            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-gray-300 bg-gray-950 flex flex-col gap-0.5"
+          >
+            {logs.length === 0 && status === 'running' && (
+              <span className="text-gray-600 italic">Starting render engine…</span>
+            )}
+            {logs.map((line, i) => (
+              <LogLine key={i} text={line} />
+            ))}
+            {status === 'error' && errorMsg && (
+              <span className="text-red-400 mt-1">{errorMsg}</span>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-gray-800">
+          {status === 'running' ? (
+            <button
+              onClick={handleCancel}
+              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-gray-300 hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
+            >
+              Cancel
+            </button>
+          ) : (
+            <button
+              onClick={onClose}
+              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-white hover:bg-gray-700 transition-colors"
+            >
+              Close
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/video/VersionPanel.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import type { VersionEntry } from '../types'
+
+// VersionPanel reads only the editor-relevant slice of a version — hash,
+// message, timestamp — which is exactly `VersionEntry`. Aliased to the panel's
+// original `ProjectVersion` name so the ported parse/dedup logic is untouched.
+type ProjectVersion = VersionEntry
+
+function formatTime(iso: string): string {
+  const d = new Date(iso)
+  return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function parseVersion(v: ProjectVersion): { run: number; label: string } {
+  const m = v.message.match(/run (\d+) — (.+)/)
+  return m ? { run: parseInt(m[1]), label: m[2] } : { run: 0, label: v.message }
+}
+
+function dedupeVersions(versions: ProjectVersion[]): ProjectVersion[] {
+  const nonInit = versions.filter(v => parseVersion(v).run > 0)
+  const byRun = new Map<number, ProjectVersion>()
+  for (const v of nonInit) {
+    const { run, label } = parseVersion(v)
+    const existing = byRun.get(run)
+    const isDefault = label === 'draft' || label === 'final' || label === 'pending'
+    if (!existing) { byRun.set(run, v); continue }
+    const { label: existingLabel } = parseVersion(existing)
+    const existingIsDefault = existingLabel === 'draft' || existingLabel === 'final' || existingLabel === 'pending'
+    if (existingIsDefault && !isDefault) byRun.set(run, v)
+  }
+  return [...byRun.values()].sort((a, b) => parseVersion(b).run - parseVersion(a).run)
+}
+
+interface VersionPanelProps {
+  versions: ProjectVersion[]
+  restoring: string | null
+  onRestore: (hash: string) => void
+}
+
+export default function VersionPanel({ versions, restoring, onRestore }: VersionPanelProps) {
+  const [open, setOpen] = useState(true)
+  const deduped = dedupeVersions(versions)
+
+  return (
+    <div className="shrink-0 border-b border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden" style={{ maxHeight: open ? 224 : 0, transition: 'max-height 0.15s ease' }}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors w-full text-left"
+      >
+        <span className="text-xs font-medium text-gray-400 uppercase tracking-wide">Versions</span>
+        <span className="text-gray-600 text-[10px]">{open ? '▲' : '▼'}</span>
+      </button>
+      <div className="overflow-y-auto p-2 flex flex-col gap-1.5">
+        {deduped.length === 0 ? (
+          <p className="text-xs text-gray-600 text-center mt-2 px-1 leading-relaxed">No saved versions yet.</p>
+        ) : deduped.map(v => {
+          const { run, label } = parseVersion(v)
+          const isDefault = label === 'draft' || label === 'final' || label === 'pending'
+          return (
+            <div key={v.hash} className="rounded border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-2 flex flex-col gap-1">
+              <div className="flex items-center gap-1.5">
+                <span className="text-[10px] text-gray-500 dark:text-gray-600 shrink-0">Run {run}</span>
+                {isDefault ? (
+                  <span className="text-[10px] text-gray-500 capitalize">{label}</span>
+                ) : (
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-200 truncate capitalize" title={label}>{label}</span>
+                )}
+              </div>
+              <span className="text-[10px] text-gray-600">{formatTime(v.timestamp)}</span>
+              <button
+                onClick={() => onRestore(v.hash)}
+                disabled={restoring === v.hash}
+                className="text-[10px] text-blue-500 hover:text-blue-400 text-left transition-colors disabled:opacity-40"
+              >
+                {restoring === v.hash ? 'Restoring…' : 'Restore →'}
+              </button>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}