Skip to content

feat(studio): add aspect ratio selector#652

Open
miguel-heygen wants to merge 1 commit intomainfrom
feat/studio-aspect-ratio
Open

feat(studio): add aspect ratio selector#652
miguel-heygen wants to merge 1 commit intomainfrom
feat/studio-aspect-ratio

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

Summary

  • Adds an aspect ratio dropdown to the studio header toolbar (between project name and Capture/Renders)
  • Supports 6 presets: 16:9 (1920x1080), 9:16 (1080x1920), 1:1 (1080x1080), 4:5 (1080x1350), 4:3 (1440x1080), 21:9 (2560x1080)
  • Selecting a preset patches data-width/data-height on the root composition element and refreshes the preview
  • Auto-detects current composition dimensions from the iframe DOM on load and via stage-size postMessage events

How it works

  1. AspectRatioSelector component renders a button showing the current ratio (e.g., "16:9") with a dropdown of presets
  2. On selection, handleAspectRatioChange reads the composition source HTML, patches the root element's dimension attributes using the existing applyPatchByTarget utility, saves back via the API, and triggers a preview refresh
  3. The player web component auto-detects the new dimensions from data-width/data-height and re-scales the preview

Test plan

  • Open a 16:9 composition in the studio — selector shows "16:9"
  • Switch to 9:16 — preview re-renders in portrait, HTML source shows updated data-width="1080" data-height="1920"
  • Switch to 1:1 — preview shows square, selector shows "1:1"
  • Open the source editor — confirm data-width/data-height attributes reflect the selected ratio
  • Drill into a sub-composition, change ratio — correct file is patched
  • Existing tests pass (271/271)

Adds a dropdown in the studio header bar for switching composition
dimensions between common presets (16:9, 9:16, 1:1, 4:5, 4:3, 21:9).
Selecting a preset patches data-width/data-height on the root
composition element and refreshes the preview. The current ratio is
auto-detected from the iframe on load and via stage-size messages.
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