UI update #6
UI update #6
Conversation
…rogress tracking in Dropzone for better user feedback during file conversion; update dependencies in package.json to include @radix-ui/react-progress and upgrade React to version 18.3.1; modify types.d.ts to include additional properties for Action type.
…nd emphasis on file conversion capabilities.
…ranscription features; update main heading, subtitle, and call-to-action buttons for clarity and engagement. Modify navbar button to redirect to the conversion page with a new label.
…fy gradient backgrounds for buttons and headings to improve aesthetics and user engagement.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR implements comprehensive UI improvements including progress tracking, file preview functionality, and visual design updates. The changes focus on enhancing user experience during file conversion operations and modernizing the overall appearance.
- Adds real-time progress tracking with visual indicators and toast notifications during file conversions
- Implements file preview functionality allowing users to compare original and converted files side-by-side
- Updates the visual design with improved gradients, spacing, and responsive layouts across components
Reviewed Changes
Copilot reviewed 9 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| utils/convert.ts | Adds progress callback parameter and simulated progress tracking during conversion |
| components/ui/progress.tsx | New progress bar component using Radix UI primitives |
| components/ui/progress-toast.tsx | New toast component displaying conversion progress with detailed status |
| components/dropzone.tsx | Integrates progress tracking and preview functionality into file conversion workflow |
| components/ConvertComponent.tsx | Adds comprehensive file preview modal with side-by-side comparison |
| components/navbar.tsx | Updates navigation styling and removes GitHub link |
| app/page.tsx | Refreshes homepage design with new gradients and improved content layout |
| package.json | Updates React dependencies and adds Radix UI progress component |
| public/sitemap-0.xml | Updates sitemap timestamps |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| onProgress?.(15, 'Starting conversion...'); | ||
| await ffmpeg.exec(ffmpeg_cmd); | ||
|
|
||
| clearInterval(progressInterval); |
There was a problem hiding this comment.
The simulated progress using Math.random() creates an unrealistic user experience. Consider implementing actual progress tracking from FFmpeg or remove the simulation entirely to avoid misleading users about conversion progress.
| clearInterval(progressInterval); | |
| // No simulated progress; only update at key milestones | |
| // execute cmd | |
| onProgress?.(15, 'Starting conversion...'); | |
| await ffmpeg.exec(ffmpeg_cmd); | |
| <Badge variant={getStatusVariant()} className="text-xs"> | ||
| {status} | ||
| </Badge> | ||
| {eta && !isComplete && !isError && ( |
There was a problem hiding this comment.
The ETA parameter is accepted in the component props but never actually passed from the conversion function in convert.ts. This will result in the ETA display never being shown.
| fileName: action.file_name | ||
| }); | ||
|
|
||
| setTimeout(() => { |
There was a problem hiding this comment.
The hardcoded 2000ms timeout for hiding the progress toast could create race conditions if multiple files are converted rapidly. Consider using a more robust state management approach or making the timeout configurable.
No description provided.