feat(editor): add center snapping guides for zoom focus and webcam positioning

[miuuyy]

Description

Adds viewport center snapping guides for manual zoom focus placement and picture-in-picture webcam positioning.

When dragging a zoom focus point or webcam overlay near the center axis, the element now snaps softly to the horizontal and/or vertical center line. Subtle guide lines appear while snapping is active, which makes one-axis alignment much easier without introducing new UI controls.

Motivation

Manual positioning is flexible, but it is awkward to align content precisely to the canvas center on only one axis while keeping freedom on the other.

This improves the editing workflow for common composition tasks like:

• keeping a zoom lower or higher while still centered horizontally
• keeping webcam PiP left or right while centered vertically
• finding the exact canvas center quickly without pixel hunting

The implementation is intentionally lightweight and stays inside the viewport interaction model instead of adding extra buttons or coordinate inputs.

Type of Change

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

Related Issue(s)

N/A

Screenshots / Video

Video (if applicable):
A short demo should show:

1. dragging zoom focus near center
2. vertical/horizontal guide line appearing
3. snapping on one axis only
4. webcam PiP snapping to center axis in the same way

Testing

Commands used:

npx tsc --noEmit
npm test

Manual testing:

1. Open a recording in the editor
2. Add a zoom region and keep focus mode set to manual
3. Drag the zoom focus near the canvas center and confirm it snaps softly to the center axis with guide lines
4. Enable webcam PiP and drag it near center axes to confirm the same behavior
5. Confirm snapping feels helpful but releases naturally when moved away from center

Checklist

• I have performed a self-review of my code.
• I have added any necessary screenshots or videos.
• I have linked related issue(s) and updated the changelog if applicable.

---

Thank you for contributing!

Summary by CodeRabbit

• New Features
  • Added automatic center snapping when dragging zoom focus and webcam elements, with visual guide lines appearing to assist with center alignment during positioning.

[coderabbitai]

📝 Walkthrough

Walkthrough

The VideoPlayback component now includes center snapping behavior for zoom focus and webcam PiP dragging. New state and refs track snap status per axis with hysteresis logic, and visual guide lines render at the center when snapping is active.

Changes

Cohort / File(s)	Summary
Center Snap Behavior for Video Dragging src/components/video-editor/VideoPlayback.tsx	Added applyCenterSnap() function to snap cx/cy coordinates to 0.5 when within configurable thresholds. Introduced snapGuides state and focusSnapRef/webcamSnapRef refs to track per-axis snap status during drags. Updated focus/position computation to apply snapping before clamping. Snap state clears on drag end and conditional vertical/horizontal guide line overlays render when snapping is active.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A snap to the center, with guides so fine,
We position the view on a perfect line,
With hysteresis dancing, the dragging stays true,
Center alignment—now that's quite the cue! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly describes the main feature addition: center snapping guides for zoom focus and webcam positioning, which matches the changeset's primary purpose.
Description check	✅ Passed	The pull request description comprehensively follows the template with all required sections populated: Description, Motivation, Type of Change, Related Issues, Screenshots/Video guidance, Testing commands and manual steps, and completed Checklist.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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