Skip to content

Fix project save flow, preview playback, and clip cleanup#303

Closed
webadderall wants to merge 11 commits intorefactor/split-part1from
fix/editor-project-save-playback-cascade-delete
Closed

Fix project save flow, preview playback, and clip cleanup#303
webadderall wants to merge 11 commits intorefactor/split-part1from
fix/editor-project-save-playback-cascade-delete

Conversation

@webadderall
Copy link
Copy Markdown
Collaborator

@webadderall webadderall commented Apr 21, 2026

Summary

  • add inline project save behavior through header rename
  • improve preview playback stability
  • fix overlay and timeline layering order
  • bound waveform rows correctly
  • clean up related clips through cascade-delete behavior

Summary by CodeRabbit

  • New Features

    • Enhanced annotation editor with dedicated panels for text styling, image uploads, arrow/figure controls, and blur effects.
    • Restructured editor interface with dedicated header, sidebar, toolbar, and content areas for improved workflow.
    • Improved project management with undo/redo history support.
    • Better extension system with redesigned detail modal and marketplace browsing.
    • Enhanced audio handling with Whisper-based caption generation and synchronized audio playback.
  • Refactoring

    • Modularized launch window and video editor components for improved maintainability.
    • Reorganized project persistence code into specialized modules.

- AnnotationTextTab: use ?? instead of || so empty text can be cleared
- ExtensionManager: add catch block for marketplace install failures
- useEditorExport: wrap retry save in try/catch for unhandled rejections
- editorExportWorkflow: move playback restore to finally block
- Gate audio level meter to selected mic device only (helperComponents)
- Clear webcam deviceId when 'Default' selected (LaunchWindow)
- Wire i18n for 'Custom Fonts' and 'Color' labels (AnnotationTextTab)
- Restore keyboard focus ring on sidebar buttons (EditorSidebar)
- Add visually-hidden DialogTitle for a11y (ExtensionDetailModal)
- Make extension cards keyboard-accessible with role/tabIndex (ExtensionManagerCards)
- Write smoke export reports for GIF exports before closing (editorExportWorkflow)
- Guard GIF export against zero video dimensions (useEditorExport)
- Allow 'Save Again' before requiring loaded video (useEditorExport)
UI decision — removes default focus ring to avoid ugly yellow selection ring.
…ix Windows paths, translate i18n

- Export dropdown now stays open on GIF/MP4 failure and top-level catch so
  the exportError UI remains visible (previously dismissed by finally block)
- handleCancelExport always resets UI state even before exporter is constructed,
  so Cancel works during the async setup phase
- fromFileUrl() now converts forward slashes to backslashes for Windows drive
  paths (both primary and fallback parsing paths)
- Translated customFonts and color keys in es/ko/nl/zh-CN locales
GIF save-failure and MP4 save-failure paths had the same bug as the
export-failure paths: dropdown closes hiding the exportError UI. Now
keepExportDialogOpen = true in all non-smoke failure branches.
… localize account button

- RecordingControls now accepts and wires toggleMicrophone so the mic
  button actually works during recording
- gifOutputDimensions and desiredMp4SourceDimensions now use a reactive
  videoDimensions state (set on loadedmetadata) instead of reading from
  a ref in useMemo, fixing stale 1920x1080 fallback on first render
- Account button text now goes through i18n with translations for all
  5 locales
The toggleMicrophone and resumeRecording props were on the same line
as microphoneEnabled, causing the recording HUD buttons to break.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 21, 2026

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR undertakes a comprehensive refactoring of the LaunchWindow component (decomposing 1,647 lines into modular sub-files), reorganizes AnnotationSettingsPanel into focused tab components, and significantly restructures the video editor's component and hook architecture with new editor UI components and twelve specialized hooks for managing regions, captions, preferences, export, and state persistence.

Changes

Cohort / File(s) Summary
LaunchWindow Modularization
src/components/launch/LaunchWindow.tsx, src/components/launch/LaunchWindow/*
Removed monolithic LaunchWindow component and replaced with modular structure: DropdownContent.tsx, HudControls.tsx (UpdateBadge, RecordingControls, IdleControls), helperComponents.tsx, hooks.ts (useDragHandlers, useWebcamPreview, useRecordingTimer), index.tsx, types.ts, useLaunchWindowActions.ts, useLaunchWindowSetup.ts, and LaunchWindow.module.css.
SourceSelector Updates
src/components/launch/SourceSelector.tsx
Added toProcessedDesktopSource helper and normalized source metadata handling for desktop source selection.
Annotation Settings Refactoring
src/components/video-editor/AnnotationSettingsPanel.tsx, src/components/video-editor/Annotation*Tab.tsx, src/components/video-editor/annotationSettingsShared.ts
Extracted inline tab implementations into dedicated components: AnnotationTextTab.tsx, AnnotationImageTab.tsx, AnnotationFigureTab.tsx, AnnotationBlurTab.tsx; centralized shared types/constants in annotationSettingsShared.ts.
Video Editor Component Reorganization
src/components/video-editor/Editor*.tsx, src/components/video-editor/CursorStylePreview.tsx
Added new editor UI components: EditorContent.tsx, EditorHeader.tsx, EditorSidebar.tsx, EditorToolbar.tsx, and CursorStylePreview.tsx for improved layout separation and component reusability.
Video Editor Hook Infrastructure
src/components/video-editor/hooks/*.ts
Added twelve new specialized hooks: useEditorPreferences.ts, useEditorProject.ts, useEditorRegions.ts, useEditorAnnotationAudioRegions.ts, useEditorCaptions.ts, useEditorClipRegions.ts, useEditorCursorTelemetry.ts, useEditorHistory.ts, useEditorInit.ts, useEditorSideEffects.ts, useEditorWiring.ts, and useEditorExport.ts to centralize state management and side effects.
Video Editor Hook Support
src/components/video-editor/hooks/useEditorAudioSync.ts, src/components/video-editor/hooks/editorExport*.ts
Added useEditorAudioSync.ts for audio synchronization, editorExportShared.ts for shared export types/utilities, and editorExportWorkflow.ts for orchestrating end-to-end export.
Video Playback & Export Utilities
src/components/video-editor/VideoPlayback.tsx, src/components/video-editor/captureProjectThumbnail.ts
Refactored VideoPlayback.tsx to re-export from new videoPlaybackComponent module; added captureProjectThumbnail.ts utility for thumbnail generation.
Settings & Extension Manager Refactoring
src/components/video-editor/SettingsPanel.tsx, src/components/video-editor/ExtensionManager.tsx, src/components/video-editor/extension-manager/*
Refactored SettingsPanel.tsx to delegate to subcomponents; reorganized ExtensionManager.tsx with new sub-components (ExtensionDetailModal.tsx, ExtensionManagerCards.tsx, ExtensionManagerTabs.tsx, ExtensionManagerShared.tsx); added ExtensionSettingsSection.tsx.
Project Persistence Reorganization
src/components/video-editor/projectPersistence.ts, src/components/video-editor/projectPersistence*.ts
Converted projectPersistence.ts to re-export hub; extracted utilities into projectPersistencePaths.ts (URL/path handling) and projectPersistenceNormalization.ts (field normalization and validation).

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120+ minutes

Possibly related PRs

  • webadderall/Recordly#210: Both PRs implement blur annotation support, including settings tabs, persistence, types, and export/rendering.
  • webadderall/Recordly#249: Modifies editor settings surface and editor preferences/i18n, overlapping with SettingsPanel and editor preferences changes.
  • webadderall/Recordly#246: Modifies LaunchWindow and related launch components, including SourceSelector and launch UI reorganization.

Suggested labels

refactor, video-editor, launch-window, annotation-settings


🐰 LaunchWindow's split with surgical care,
Hooks orchestrate state with graceful flair,
Editor components dance in harmony bright,
Refactored to modular—oh what a sight! ✨🎬

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/editor-project-save-playback-cascade-delete

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant