Skip to content

Add inline recording append workflow#689

Open
manupareekk wants to merge 2 commits into
webadderallorg:mainfrom
manupareekk:inline-recording-append
Open

Add inline recording append workflow#689
manupareekk wants to merge 2 commits into
webadderallorg:mainfrom
manupareekk:inline-recording-append

Conversation

@manupareekk

@manupareekk manupareekk commented Jun 20, 2026

Copy link
Copy Markdown

Description

Adds an editor action to record another segment inline and append it to the current recording source without leaving the editor/project.

Motivation

Today, adding another screen recording to an existing edit requires leaving the current workflow and manually managing separate recordings. This lets users stay in the editor, open the recording HUD, capture another segment, and have it stitched onto the current source automatically.

Type of Change

  • New Feature
  • Bug Fix
  • Refactor / Code Cleanup
  • Documentation Update
  • Other (please specify)

Related Issue(s)

N/A

Screenshots / Video

RecordlyNewFeature-compressed.mp4
  • Attached video of two segments appended through the editor at 0:13

Testing Guide

  1. Start Recordly and create/open a recording so the editor is visible.
  2. Click the new + action in the editor header.
  3. Confirm the recording HUD opens without closing the editor.
  4. Record a second segment and stop recording.
  5. Confirm the editor stitches the new segment onto the current recording source.
  6. Scrub the timeline and verify the appended segment appears after the original content.

Commands run:

./node_modules/.bin/biome check electron/main.ts electron/preload.ts electron/electron-env.d.ts electron/ipc/register/captions.ts src/components/video-editor/VideoEditor.tsx
./node_modules/.bin/tsc --noEmit
./node_modules/.bin/vitest --run src/components/video-editor/types.test.ts

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Added “Record and append another segment” to seamlessly stitch a new recording into the current timeline, updating playback and editor state automatically.
  * Introduced recording HUD overlay support, including renderer controls to open the HUD and react when it closes.
  * Added video stitching to combine consecutive sources into a new file and continue the editing workflow with the stitched result.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

@coderabbitai

coderabbitai Bot commented Jun 20, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ab8a7671-23ad-4217-88dd-2bd32e8174f3

📥 Commits

Reviewing files that changed from the base of the PR and between 449618f and 98eefdf.

📒 Files selected for processing (5)
  • electron/electron-env.d.ts
  • electron/ipc/register/captions.ts
  • electron/main.ts
  • electron/preload.ts
  • src/components/video-editor/VideoEditor.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • electron/ipc/register/captions.ts
  • src/components/video-editor/VideoEditor.tsx

📝 Walkthrough

Walkthrough

Adds an "inline record and append" feature: two new IPC channels (open-recording-hud, stitch-video-sources) and a recording-HUD-closed event are defined, implemented in Electron main/IPC handlers (HUD window reuse helper; FFmpeg concat demuxer stitching), bridged through preload, and consumed in VideoEditor with new state, refs, a stitching callback, a clip-region extension effect, and a new header button.

Changes

Inline Record-and-Append

Layer / File(s) Summary
IPC API type contracts
electron/electron-env.d.ts
Declares openRecordingHud, onRecordingHudClosed, and stitchVideoSources on the electronAPI interface with their parameter and return types.
Preload bridge wiring
electron/preload.ts
Wires openRecordingHud, stitchVideoSources, and onRecordingHudClosed to their respective ipcRenderer.invoke and ipcRenderer.on calls.
HUD window helper and open-recording-hud handler
electron/main.ts
Introduces showOrCreateHudOverlayWindow() to manage HUD overlay reuse and lifecycle; refactors createWindow() to use it; broadcasts recording-hud-closed to all windows when HUD closes; registers the open-recording-hud IPC handler that returns success if a live HUD window was obtained.
stitch-video-sources IPC handler and FFmpeg setup
electron/ipc/register/captions.ts
Adds imports and module-level utilities (execFileAsync, FFmpeg binary path, concat-list line formatting); implements the stitch-video-sources handler that validates paths, writes a concat list, runs FFmpeg with -f concat -safe 0 -c copy, cleans up temporary files, and returns a structured response.
VideoEditor append state, callbacks, and clip-region integration
src/components/video-editor/VideoEditor.tsx
Adds isStitchingRecording state and two coordination refs; implements appendRecordingSource callback to invoke stitchVideoSources, update playback/source state, and persist the stitched path; updates the recording-session-changed handler to detect and trigger pending appends; adds an onRecordingHudClosed listener to clear the pending flag; adds a duration-watching effect that extends clipRegions once the appended-clip start timestamp is reached.
VideoEditor header button for inline append
src/components/video-editor/VideoEditor.tsx
Adds a "Record and append another segment" button to the editor header that triggers handleRecordInlineAppend, with disabled/loading states based on videoSourcePath, isStitchingRecording, and isExporting.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant VideoEditor as VideoEditor (Renderer)
  participant Preload as electronAPI (Preload)
  participant Main as Electron Main
  participant FFmpeg

  User->>VideoEditor: Click "Record and append"
  VideoEditor->>VideoEditor: set pendingInlineAppendRef = current videoSourcePath
  VideoEditor->>Preload: openRecordingHud()
  Preload->>Main: invoke("open-recording-hud")
  Main->>Main: showOrCreateHudOverlayWindow()
  Main-->>VideoEditor: { success: true }

  Note over User,Main: User records new segment in HUD
  Main-->>VideoEditor: recording-session-changed event (new videoPath)

  VideoEditor->>VideoEditor: detect pending append for base path
  VideoEditor->>Preload: stitchVideoSources({ basePath, appendPath })
  Preload->>Main: invoke("stitch-video-sources", options)
  Main->>FFmpeg: execFile ffmpeg -f concat -safe 0 -c copy
  FFmpeg-->>Main: stitched output path
  Main-->>VideoEditor: { success: true, path }

  VideoEditor->>VideoEditor: load stitched source, reset playback
  VideoEditor->>VideoEditor: extend clipRegions once duration updates
  Main->>VideoEditor: send("recording-hud-closed")
  VideoEditor->>VideoEditor: clear pendingInlineAppendRef
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly Related PRs

  • webadderallorg/Recordly#264: Both PRs adjust HUD overlay window handling in the Electron main process; this PR refactors HUD overlay creation/reuse and event broadcasting, while #264 adds Linux-specific ready-to-show fallback handling.
  • webadderallorg/Recordly#304: Both PRs modify src/components/video-editor/VideoEditor.tsx around clip boundary/span updates; this PR adds clip-region extension for appended segments, while #304 focuses on clip-cleanup and overlapping-region removal.

Poem

🐰 Click to record, then stitch with glee,
Two clips become one, watch and see!
FFmpeg concat joins the show,
The HUD pops up — and off we go.
New appended frames fill the track,
No segment lost, no turning back! 🎬

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and specifically describes the main feature being added: an inline recording append workflow that allows users to record and append segments within the editor.
Description check ✅ Passed The description is comprehensive and follows the template with all key sections filled: clear purpose, motivation, feature type marked, testing guide with steps, and demonstration video provided.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@electron/ipc/register/captions.ts`:
- Around line 95-110: The stitch-video-sources handler currently accepts
arbitrary basePath and appendPath from the renderer without validating that they
are within safe directories, which could allow a compromised renderer to access
arbitrary files. After resolving basePath and appendPath and before calling
getConcatListLine(), validate that both paths are within the approved recordings
directory returned by getRecordingsDir(). You should check that the resolved
basePath and appendPath are children of the recordingsDir to ensure they only
access approved recordings. Add this validation check before the
getConcatListLine() calls that use these paths.
- Around line 108-128: The recording concatenation handler in the captions.ts
file accepts arbitrary recording paths and always outputs to `.mp4` with FFmpeg
stream copy without validating format compatibility between basePath and
appendPath. Since the application produces both `.webm` and `.mp4` recordings,
incompatible format pairs will fail silently with unclear errors. Before the
execFileAsync call with getFfmpegBinaryPath(), add format validation by
detecting the file extensions of basePath and appendPath. Either reject mixed
formats and throw a user-friendly error, or detect the input formats and adjust
the output container (the hardcoded `.mp4` in outputPath) and FFmpeg arguments
accordingly to handle transcoding if needed. Additionally, enhance the error
message in the catch block to provide specific details about format
compatibility issues rather than the generic message.

In `@src/components/video-editor/VideoEditor.tsx`:
- Around line 3325-3340: The handleRecordInlineAppend function can be initiated
during an active export operation, which can cause state inconsistencies because
the export is reading the current source while the append flow modifies it. Add
an early guard check in handleRecordInlineAppend to return early if isExporting
is true (with an appropriate error toast message), similar to the existing
videoSourcePath check. Additionally, disable the button that triggers
handleRecordInlineAppend by checking the isExporting condition in its disabled
prop to prevent the user from initiating the append flow while an export is in
progress.
- Around line 2574-2584: The pendingInlineAppendRef is not properly scoped and
cleared, allowing unrelated recording sessions to be appended unexpectedly.
Instead of using a simple boolean flag, store the original source path or a
request token with the pending append request. Clear the pending state when the
recording HUD is closed or canceled, when the source changes, and when IPC
operations fail. Ensure the append only proceeds when the stored source matches
the current session source, preventing stale pending requests from executing
after the user cancels the HUD operation.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 105ca25a-bbe0-4f4d-ab0e-54a1d68c7c70

📥 Commits

Reviewing files that changed from the base of the PR and between 952d63d and 449618f.

📒 Files selected for processing (5)
  • electron/electron-env.d.ts
  • electron/ipc/register/captions.ts
  • electron/main.ts
  • electron/preload.ts
  • src/components/video-editor/VideoEditor.tsx

Comment thread electron/ipc/register/captions.ts Outdated
Comment thread electron/ipc/register/captions.ts Outdated
Comment thread src/components/video-editor/VideoEditor.tsx Outdated
Comment thread src/components/video-editor/VideoEditor.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant