feat: add 'No Webcam' layout preset to hide webcam in final recording#549
feat: add 'No Webcam' layout preset to hide webcam in final recording#549Ayusman-Singhal wants to merge 1 commit intosiddharthvaddem:mainfrom
Conversation
Adds a new 'No Webcam' option to the webcam layout preset dropdown in the editor. When selected, the webcam feed is completely hidden from both the preview and the exported video, allowing users who recorded with a webcam to exclude it from the final output. - Add 'no-webcam' to WebcamLayoutPreset type union and preset map - Handle 'no-webcam' in computeCompositeLayout (returns webcamRect: null) - Add 'no-webcam' case in project persistence normalization - Add 'No Webcam' option to the layout preset dropdown in SettingsPanel - Add 'noWebcam' i18n translation key (en)
📝 WalkthroughWalkthroughthis pr adds a new "no-webcam" layout preset that lets users hide the webcam overlay entirely. changes flow from type definition through preset configuration, layout computation logic, persistence normalization, ui dropdown selection, and i18n strings—basically threading a single new option through the whole system. ChangesNo-Webcam Layout Preset
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/lib/compositeLayout.ts`:
- Around line 195-203: The invalid-size guard must run before any
preset-specific early returns so centerRect never receives invalid dimensions:
move the existing size validation (the "invalid-size guard" that checks
canvasSize/screenSize/maxContentSize) to execute before the layoutPreset ===
"no-webcam" branch, and return early if sizes are invalid; ensure the code paths
that call centerRect (e.g., the "no-webcam" branch using centerRect with
canvasSize, screenSize, maxContentSize) only run after the guard passes; keep
the same return shape ({ screenRect, webcamRect: null }) for the "no-webcam"
case.
- Around line 195-203: The "no-webcam" branch currently calls centerRect (which
letterboxes) so the screen may not fill the canvas; replace that with a
cover/fill calculation so the screenRect covers the entire canvas (scale to
cover like CSS background-size: cover) using canvasSize and screenSize (ignore
maxContentSize for letterboxing) and return webcamRect: null; update the branch
that checks layoutPreset === "no-webcam" to compute a full-canvas cover
rectangle instead of calling centerRect, ensuring the returned screenRect spans
the canvas with the correct aspect-preserving scale and crop.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f0bb0350-0c58-49e6-accb-3a33a0a65c2c
📒 Files selected for processing (4)
src/components/video-editor/SettingsPanel.tsxsrc/components/video-editor/projectPersistence.tssrc/i18n/locales/en/settings.jsonsrc/lib/compositeLayout.ts
| // "no-webcam" preset: hide the webcam entirely, screen fills the canvas normally | ||
| if (layoutPreset === "no-webcam") { | ||
| const screenRect = centerRect({ | ||
| canvasSize, | ||
| size: screenSize, | ||
| maxSize: maxContentSize, | ||
| }); | ||
| return { screenRect, webcamRect: null }; | ||
| } |
There was a problem hiding this comment.
move the invalid-size guard above the no-webcam early return
Lowkey risky: at Line 196 you return before the size validation at Line 211, so centerRect can run with invalid dimensions and produce bogus geometry (NaN/Infinity). The guard should happen first for all presets.
Suggested fix
const { width: canvasWidth, height: canvasHeight } = canvasSize;
const { width: screenWidth, height: screenHeight } = screenSize;
+ if (canvasWidth <= 0 || canvasHeight <= 0 || screenWidth <= 0 || screenHeight <= 0) {
+ return null;
+ }
+
// "no-webcam" preset: hide the webcam entirely, screen fills the canvas normally
if (layoutPreset === "no-webcam") {
const screenRect = centerRect({
canvasSize,
size: screenSize,
maxSize: maxContentSize,
});
return { screenRect, webcamRect: null };
}
-
- if (canvasWidth <= 0 || canvasHeight <= 0 || screenWidth <= 0 || screenHeight <= 0) {
- return null;
- }Also applies to: 211-213
🤖 Prompt for 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.
In `@src/lib/compositeLayout.ts` around lines 195 - 203, The invalid-size guard
must run before any preset-specific early returns so centerRect never receives
invalid dimensions: move the existing size validation (the "invalid-size guard"
that checks canvasSize/screenSize/maxContentSize) to execute before the
layoutPreset === "no-webcam" branch, and return early if sizes are invalid;
ensure the code paths that call centerRect (e.g., the "no-webcam" branch using
centerRect with canvasSize, screenSize, maxContentSize) only run after the guard
passes; keep the same return shape ({ screenRect, webcamRect: null }) for the
"no-webcam" case.
no-webcam branch currently does “contain”, not “fill canvas”
Given the PR goal, this is kinda cursed: Line 197 uses centerRect(...), which letterboxes when aspect ratios differ. That means the screen won’t always fill the canvas in export/preview. If the intent is “fill like no webcam recording,” this branch should return full-canvas with cover behavior.
Suggested fix
if (layoutPreset === "no-webcam") {
- const screenRect = centerRect({
- canvasSize,
- size: screenSize,
- maxSize: maxContentSize,
- });
- return { screenRect, webcamRect: null };
+ return {
+ screenRect: { x: 0, y: 0, width: canvasWidth, height: canvasHeight },
+ webcamRect: null,
+ screenCover: true,
+ };
}🤖 Prompt for 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.
In `@src/lib/compositeLayout.ts` around lines 195 - 203, The "no-webcam" branch
currently calls centerRect (which letterboxes) so the screen may not fill the
canvas; replace that with a cover/fill calculation so the screenRect covers the
entire canvas (scale to cover like CSS background-size: cover) using canvasSize
and screenSize (ignore maxContentSize for letterboxing) and return webcamRect:
null; update the branch that checks layoutPreset === "no-webcam" to compute a
full-canvas cover rectangle instead of calling centerRect, ensuring the returned
screenRect spans the canvas with the correct aspect-preserving scale and crop.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ada1f434f7
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| "pictureInPicture": "Picture in Picture", | ||
| "verticalStack": "Vertical Stack", | ||
| "dualFrame": "Dual Frame", | ||
| "noWebcam": "No Webcam", |
There was a problem hiding this comment.
Adding this key only to the English settings file leaves layout.noWebcam absent from every other locale. In non-English sessions the new dropdown label falls back to English, and the repository’s scripts/i18n-check.mjs compares the English baseline against all locale files and reports missing keys as errors, so any validation that includes npm run i18n:check will now include this new missing key. Add the key to the other settings.json files as well, even if the temporary value is English.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
Adds a new “No Webcam” layout preset to the video editor so users can hide the recorded webcam feed in both preview and exports while keeping the screen recording laid out normally.
Changes:
- Extend
WebcamLayoutPresetwith"no-webcam"and short-circuit layout computation to returnwebcamRect: null. - Persist/normalize the new preset through project load/save.
- Expose the new preset in the Settings panel dropdown and add an English translation string.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/lib/compositeLayout.ts |
Adds the "no-webcam" preset and returns a null webcam rect when selected. |
src/components/video-editor/projectPersistence.ts |
Allows "no-webcam" through preset normalization on load. |
src/components/video-editor/SettingsPanel.tsx |
Adds "no-webcam" to the preset dropdown and label mapping. |
src/i18n/locales/en/settings.json |
Adds the layout.noWebcam English string. |
| // "no-webcam" preset: hide the webcam entirely, screen fills the canvas normally | ||
| if (layoutPreset === "no-webcam") { | ||
| const screenRect = centerRect({ | ||
| canvasSize, | ||
| size: screenSize, |
| // "no-webcam" preset: hide the webcam entirely, screen fills the canvas normally | ||
| if (layoutPreset === "no-webcam") { | ||
| const screenRect = centerRect({ | ||
| canvasSize, | ||
| size: screenSize, | ||
| maxSize: maxContentSize, | ||
| }); | ||
| return { screenRect, webcamRect: null }; | ||
| } |
Description
Adds a new "No Webcam" layout preset option to the webcam layout dropdown in the video editor. When selected, the webcam feed is completely hidden from both the preview and the exported video the screen recording fills the canvas normally as if no webcam was recorded.
Motivation
Currently, if a user records their screen with a webcam enabled, there is no way to hide the webcam overlay in the final output. The only layout options are "Picture in Picture", "Vertical Stack", and "Dual Frame" all of which display the webcam. Users who change their mind about including the webcam after recording have no option to remove it. This adds that missing option.
Type of Change
Related Issue(s)
None
Screenshots / Video
Screenshot:
Testing
Files changed:
src/lib/compositeLayout.ts"no-webcam"to type union, preset map, andcomputeCompositeLayoutsrc/components/video-editor/projectPersistence.ts"no-webcam"normalization casesrc/components/video-editor/SettingsPanel.tsxsrc/i18n/locales/en/settings.json"noWebcam"translation (en only)Checklist
Summary by CodeRabbit