feat(editor): preview how phone apps sit over a vertical video by AatmanAJ · Pull Request #3627 · CapSoftware/Cap

AatmanAJ · 2026-11-01T11:24:23Z

Adds Reel Mode: a preview toggle that shows how a phone app's interface will sit on top of a vertical video, so nothing important ends up underneath it.

TikTok	Instagram

Screenshots use a synthetic test pattern.

What changes

Toolbar. A new control sits after Frame and offers Off, Instagram, TikTok and YouTube Shorts. It only appears when the output is portrait, with a width to height ratio of 0.7 or less.
Overlay. Each platform draws its top bar, action rail, account and caption block, music line and tab bar, plus the scrims those apps use. Everything scales from a 1080x1920 layout, and captions and usernames are placeholder bars so there is no fake copy.
Export safety. The overlay is drawn by the editor over the preview and never goes through the renderer. It is also session state, so nothing is written to the project.
Interaction. The overlay has no mouse handlers, so canvas drags and selection go straight through it.

The overlay is laid out during paint from its own bounds. player_frame_rect is written by the paint after render, so using it would leave the interface a step behind on resize. To share the math, this extracts preview_frame_bounds from PreviewFrameView.

Related: #2782 adds shaded safe zones for the same three platforms and extracts the same helper. This PR draws the interface itself rather than shading rectangles. Whichever lands second will need a small rebase, and the two toolbar controls shouldn't both ship.

Testing

cargo test --bin cap-gpui filtered to reel, assets, i18n and editor_window passes in apps/desktop-gpui.
Ran the debug app against a throwaway HOME with a 9:16 project and snapshotted the editor for all three platforms, which is where the screenshots come from. The overlay lines up with the preview frame.

The positions are a stand-in for each app's layout, not exact pixels, since the apps change them often. The menu, resizing while the overlay is on, and playback were not exercised by hand.

Confidence Score: 5/5

The PR appears safe to merge, with all previous findings addressed and no new actionable issues found.

Summary

Adds Reel Mode to preview phone-app controls over portrait videos.

Portrait previews can show an Instagram, TikTok, or Shorts interface.
Wayland display lookup waits longer for busy compositors.
The Linux camera job checks for kernel support before installing its build tools.
The Linux desktop harness uses Hyprland’s monitor size for screenshot checks.

Review checks were limited to source inspection; tests and the native UI were not run.

_{Reviews (6) · Last reviewed commit: "fix: allow busy Wayland compositors to e..." · Reviewed by Greptile}

Add Reel Mode: a preview-only overlay of the Instagram, TikTok and YouTube Shorts interfaces for portrait output, so nothing important ends up underneath them.

vercel · 2026-11-01T11:24:28Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
cap-status	Skipped		Nov 1, 2026 11:34am UTC

AatmanAJ · 2026-11-01T11:30:12Z

@greptile-apps review

greptile-apps · 2026-11-01T11:33:02Z

+    let rail = chrome.rail.iter().enumerate().map(|(index, path)| {
+        div()
+            .absolute()
+            .top(at(rail_slot_top(&chrome, index)))


Action icons leave the frame

The action rail assumes a 1920-high reference frame, but Reel Mode accepts other portrait ratios. With a 700×1000 output, the last Shorts icon extends below the preview and gets clipped, while captions and tabs stay anchored to the actual bottom. Anchor the rail to the actual frame bottom too, and test a non-9:16 output.

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop-gpui/src/editor_window/reel.rs Line: 204 Comment: **Action icons leave the frame** The action rail assumes a 1920-high reference frame, but Reel Mode accepts other portrait ratios. With a 700×1000 output, the last Shorts icon extends below the preview and gets clipped, while captions and tabs stay anchored to the actual bottom. Anchor the rail to the actual frame bottom too, and test a non-9:16 output. --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Fixed: the rail now anchors to the frame's bottom, and a test covers the shortest output Reel Mode accepts.

greptile-apps · 2026-11-01T11:33:02Z

+    /// Distance from the frame's bottom to the rail's last slot.
+    rail_bottom: f32,
+    /// Distance from the frame's bottom to the caption block.
+    caption_bottom: f32,
+    caption_width: f32,
+    /// The app's own tab bar, which the video ends behind.


Comments repeat field names

The new field comments restate what the fields mean. The repository guide says to default to no comments and explicitly bans comments that narrate code or paraphrase names. Remove these comments; the description at line 34 has the same issue. Keep the resize explanation, which records a non-obvious constraint. This repository requirement must be satisfied before merging.

Context Used: AGENTS.md (source)

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop-gpui/src/editor_window/reel.rs Line: 39-44 Comment: **Comments repeat field names** The new field comments restate what the fields mean. The repository guide says to default to no comments and explicitly bans comments that narrate code or paraphrase names. Remove these comments; the description at line 34 has the same issue. Keep the resize explanation, which records a non-obvious constraint. This repository requirement must be satisfied before merging. **Context Used:** AGENTS.md ([source](https://github.com/capsoftware/cap/blob/main/AGENTS.md)) --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Fixed: removed the comments on the struct and its fields.

AatmanAJ · 2026-11-01T11:34:45Z

@greptile-apps review

Hyprland 0.57 only reads hyprland.lua, so the harness ran on defaults at 1024x768. Compare screenshots with the monitor's real size. Newer runner kernels ship videodev in the base modules, with no extra package to install.

AatmanAJ · 2026-11-01T12:44:03Z

@greptile-apps review

vercel · 2026-11-01T12:44:08Z

Someone is attempting to deploy a commit to the Cap Software Inc Team on Vercel.

A member of the Team first needs to authorize it.

greptile-apps · 2026-11-01T12:46:31Z

+/// Where the preview draws a `frame_size` frame inside `bounds`: inset by
+/// [`STAGE_INSET`], letterboxed and centred.


Comment repeats the code

The new comment above preview_frame_bounds only describes what the function does. The repository guide says to default to no comments and bans comments that narrate code or paraphrase parameter names. Remove this comment before merging to meet that requirement. Keep the separate resize explanation, which records a non-obvious constraint.

Suggested change

/// Where the preview draws a `frame_size` frame inside `bounds`: inset by

/// [`STAGE_INSET`], letterboxed and centred.

Context Used: AGENTS.md (source)

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/desktop-gpui/src/editor_window.rs Line: 291-292 Comment: **Comment repeats the code** The new comment above `preview_frame_bounds` only describes what the function does. The repository guide says to default to no comments and bans comments that narrate code or paraphrase parameter names. Remove this comment before merging to meet that requirement. Keep the separate resize explanation, which records a non-obvious constraint. ```suggestion ``` **Context Used:** AGENTS.md ([source](https://github.com/capsoftware/cap/blob/main/AGENTS.md)) --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Removed, along with the module comment in reel.rs.

AatmanAJ · 2026-11-01T12:47:17Z

@greptile-apps review

AatmanAJ · 2026-11-01T13:06:08Z

@greptile-apps review

AatmanAJ · 2026-11-01T13:54:00Z

@greptile-apps review

feat(editor): preview how phone apps sit over a vertical video

b0dbaeb

Add Reel Mode: a preview-only overlay of the Instagram, TikTok and YouTube Shorts interfaces for portrait output, so nothing important ends up underneath them.

vercel Bot temporarily deployed to Preview – cap-status November 1, 2026 11:24 Inactive

greptile-apps Bot reviewed Nov 1, 2026

View reviewed changes

fix(editor): anchor the reel action rail to the frame bottom

8250096

vercel Bot temporarily deployed to Preview – cap-status November 1, 2026 11:34 Inactive

greptile-apps Bot reviewed Nov 1, 2026

View reviewed changes

chore(editor): drop descriptive reel comments

d03817a

fix: allow busy Wayland compositors to enumerate displays

cf5fe4b

Navigation Menu

Repository navigation

feat(editor): preview how phone apps sit over a vertical video - #3627

feat(editor): preview how phone apps sit over a vertical video#3627
AatmanAJ wants to merge 5 commits into
CapSoftware:mainfrom
AatmanAJ:feat/reel-mode

AatmanAJ commented Nov 1, 2026 •

edited by greptile-apps Bot

Loading

vercel Bot commented Nov 1, 2026 •

edited

Loading

AatmanAJ commented Nov 1, 2026

greptile-apps Bot Nov 1, 2026

AatmanAJ Nov 1, 2026

greptile-apps Bot Nov 1, 2026

AatmanAJ Nov 1, 2026

AatmanAJ commented Nov 1, 2026

AatmanAJ commented Nov 1, 2026

vercel Bot commented Nov 1, 2026

greptile-apps Bot Nov 1, 2026

AatmanAJ Nov 1, 2026

AatmanAJ commented Nov 1, 2026

AatmanAJ commented Nov 1, 2026

AatmanAJ commented Nov 1, 2026

This branch was previously deployed

Uh oh!

Labels

1 participant

		/// Where the preview draws a `frame_size` frame inside `bounds`: inset by
		/// [`STAGE_INSET`], letterboxed and centred.

Conversation

AatmanAJ commented Nov 1, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changes

Testing

Confidence Score: 5/5

Summary

vercel Bot commented Nov 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

AatmanAJ commented Nov 1, 2026

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

AatmanAJ Nov 1, 2026

Choose a reason for hiding this comment

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

AatmanAJ Nov 1, 2026

Choose a reason for hiding this comment

AatmanAJ commented Nov 1, 2026

AatmanAJ commented Nov 1, 2026

vercel Bot commented Nov 1, 2026

greptile-apps Bot Nov 1, 2026

Choose a reason for hiding this comment

AatmanAJ Nov 1, 2026

Choose a reason for hiding this comment

AatmanAJ commented Nov 1, 2026

AatmanAJ commented Nov 1, 2026

AatmanAJ commented Nov 1, 2026

This branch was previously deployed

Uh oh!

Labels

1 participant

AatmanAJ commented Nov 1, 2026 •

edited by greptile-apps Bot

Loading

vercel Bot commented Nov 1, 2026 •

edited

Loading