Video Export Progress System Improvements#

Overview#

Enhanced the progress display and user feedback system in the video.mjs piece to provide better visibility into export status without requiring the JavaScript console.

Key Improvements Made#

1. Enhanced Progress Bar Display#

• Detailed Phase Indicators: Shows specific phases like "PREPARING FRAMES", "ENCODING VIDEO", "TRANSCODING MP4"
• Phase-specific Progress: Two-level progress bars showing overall progress and current phase progress
• ETA Calculation: Displays estimated time remaining based on progress history
• Real-time Status Messages: Uses status messages sent from bios.mjs via recorder:export-status events

2. Better System Message Handling#

• Cleaned up handleSystemMessage(): Removed invalid actAlerts.push() calls since actAlerts is not accessible in piece context
• Enhanced Console Logging: Detailed progress logging with percentages and status for debugging
• Proper Event Processing: Handles recorder:export-progress, recorder:transcode-progress, and recorder:export-complete events

3. Completion Feedback#

• Success Message: Shows "MP4 COMPLETED!", "GIF COMPLETED!", etc. when exports finish
• Timed Display: Completion message appears for 3 seconds then auto-hides
• Visual Feedback: Green text in a bordered box for clear visibility

4. Progress Tracking Improvements#

• Progress History: Tracks progress over time for ETA calculations
• Export Timing: Records start time and calculates elapsed time
• State Management: Proper reset of all flags and timers when exports complete

Architecture Understanding#

How Progress Communication Works#

1. Bios → Video Piece: Progress sent via system events

   • recorder:export-status - Status messages and phase updates
   • recorder:export-progress - Progress percentage (0-1)
   • recorder:transcode-progress - Transcoding specific progress
   • recorder:export-complete - Completion notification

2. Event Processing:

   • Events processed in handleSystemMessage() function
   • Called from main act() function when system events occur
   • Updates local state variables for display in paint()

3. UI Display:

   • Progress bars rendered in paint() function
   • Two modes: Extended (detailed) or VHS tape-style
   • Real-time updates without manual console checking

ActAlerts System#

• actAlerts is a global array in disk.mjs that converts to act events
• Items pushed to actAlerts become named events processed by pieces
• Not accessible from pieces - only from within disk.mjs context
• Alternative: Use existing system message events (which we're already doing)

Usage#

Now when exporting ZIP/GIF/MP4 files:

1. Visual Progress: Watch detailed progress bars in the video piece UI
2. Status Updates: See current phase and estimated time remaining
3. Completion Feedback: Clear success message when export finishes
4. No Console Required: All information visible in the UI

Code Changes#

• File Modified: /workspaces/aesthetic-computer/system/public/aesthetic.computer/disks/video.mjs
• Functions Enhanced: handleSystemMessage(), paint(), completion handling
• New Features: Completion message system, ETA calculation, phase-specific progress

Benefits#

• Better UX: Users can monitor exports without opening dev tools
• Clear Feedback: Know exactly what phase the export is in
• Professional Feel: Polished progress display with timing information
• Debug Friendly: Enhanced console logging still available for development