show 'Preparing your video for casting…' during finalize step

Author: theJawnnybot

src/App.tsx

@@ -1,14 +1,15 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { DropZone } from './components/DropZone'
 import { Player } from './components/Player'
-import { UploadProgress } from './components/UploadProgress'
+import { UploadProgress, FinalizingProgress } from './components/UploadProgress'
 import { uploadVideo, deleteVideo } from './api'
 import { MAX_FILE_SIZE } from './config'
 import './App.css'
 
 type AppState =
   | { phase: 'idle' }
   | { phase: 'uploading'; file: File; progress: number }
+  | { phase: 'finalizing'; file: File }
   | { phase: 'ready'; file: File; videoUrl: string; videoId: string }
   | { phase: 'error'; message: string }
 
@@ -45,8 +46,13 @@ export default function App() {
     setState({ phase: 'uploading', file, progress: 0 })
 
     try {
-      const result = await uploadVideo(file, (progress) => {
-        setState(prev => prev.phase === 'uploading' ? { ...prev, progress } : prev)
+      const result = await uploadVideo(file, {
+        onProgress: (progress) => {
+          setState(prev => prev.phase === 'uploading' ? { ...prev, progress } : prev)
+        },
+        onFinalizing: () => {
+          setState(prev => prev.phase === 'uploading' ? { phase: 'finalizing', file: prev.file } : prev)
+        },
       })
       videoIdRef.current = result.id
       setState({ phase: 'ready', file, videoUrl: result.url, videoId: result.id })
@@ -76,6 +82,10 @@ export default function App() {
         <UploadProgress filename={state.file.name} progress={state.progress} />
       )}
 
+      {state.phase === 'finalizing' && (
+        <FinalizingProgress filename={state.file.name} />
+      )}
+
       {state.phase === 'ready' && (
         <Player
           videoUrl={state.videoUrl}

src/api.ts

@@ -6,9 +6,14 @@ interface UploadResult {
   url: string
 }
 
+interface UploadCallbacks {
+  onProgress: (progress: number) => void
+  onFinalizing: () => void
+}
+
 export async function uploadVideo(
   file: File,
-  onProgress: (progress: number) => void
+  callbacks: UploadCallbacks
 ): Promise<UploadResult> {
   // Step 1: Initialize upload
   const initRes = await fetch(`${WORKER_URL}/upload/init`, {
@@ -44,10 +49,12 @@ export async function uploadVideo(
       throw new Error(`Chunk ${i + 1}/${totalChunks} failed (${res.status})`)
     }
 
-    onProgress(Math.round(((i + 1) / totalChunks) * 100))
+    callbacks.onProgress(Math.round(((i + 1) / totalChunks) * 100))
   }
 
   // Step 3: Finalize
+  callbacks.onFinalizing()
+
   const finalRes = await fetch(`${WORKER_URL}/upload/${id}/finalize`, {
     method: 'POST',
   })

src/components/UploadProgress.css

@@ -38,8 +38,28 @@
   transition: width 0.3s ease;
 }
 
+.progress-bar.indeterminate::after {
+  content: '';
+  display: block;
+  height: 100%;
+  width: 40%;
+  background: #4a9eff;
+  border-radius: 3px;
+  animation: indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+
 .progress-text {
   color: #4a9eff;
   font-size: 0.9rem;
   font-weight: 600;
 }
+
+.finalizing-text {
+  color: #888;
+  font-weight: 400;
+}

src/components/UploadProgress.tsx

@@ -17,3 +17,18 @@ export function UploadProgress({ filename, progress }: UploadProgressProps) {
     </div>
   )
 }
+
+interface FinalizingProgressProps {
+  filename: string
+}
+
+export function FinalizingProgress({ filename }: FinalizingProgressProps) {
+  return (
+    <div className="upload-progress">
+      <div className="upload-icon">⚙️</div>
+      <div className="upload-filename">{filename}</div>
+      <div className="progress-bar indeterminate" />
+      <div className="progress-text finalizing-text">Preparing your video for casting…</div>
+    </div>
+  )
+}