Skip to content

animate zoom region transition#648

Merged
webadderall merged 3 commits into
mainfrom
fix/animate-zoom-region-transition
Jun 4, 2026
Merged

animate zoom region transition#648
webadderall merged 3 commits into
mainfrom
fix/animate-zoom-region-transition

Conversation

@webadderall
Copy link
Copy Markdown
Collaborator

@webadderall webadderall commented Jun 2, 2026

Summary

  • keep the outgoing zoom at full strength until a connected handoff starts
  • prevent close zoom regions from zooming out and then back in before the transition
  • tighten zoom animation coverage for the pre-handoff connected-region case

Testing

  • npm exec -- vitest run src/components/video-editor/videoPlayback/zoomAnimation.test.ts

Summary by CodeRabbit

  • Bug Fixes
    • Fixed connected zoom behavior so outgoing regions hold full focus before a transition window, reducing unexpected blending.
    • Removed spurious connected transition blending so the dominant region remains stable until the explicit transition starts.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 2, 2026

Review Change Stack

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a68ebe18-aab1-4ff6-a4e8-327d14725cea

📥 Commits

Reviewing files that changed from the base of the PR and between 8f3bbd5 and 37533cd.

📒 Files selected for processing (2)
  • src/components/video-editor/videoPlayback/zoomAnimation.test.ts
  • src/components/video-editor/videoPlayback/zoomRegionUtils.ts
💤 Files with no reviewable changes (1)
  • src/components/video-editor/videoPlayback/zoomRegionUtils.ts

📝 Walkthrough

Walkthrough

The PR changes outgoing connected-zoom timing: outgoing regions enter a strength=1 phase earlier (computed from endMs and animation constants). findDominantRegion no longer returns a connected transition when connectZooms is enabled and tests are updated to assert full dominance (strength === 1) with null transition at the checked timestamp.

Changes

Zoom Region Dominance Timing

Layer / File(s) Summary
Outgoing region early-dominance phase & connectZooms flow
src/components/video-editor/videoPlayback/zoomRegionUtils.ts
getActiveRegion now computes zoomOutStart (from outgoing endMs, ZOOM_OUT_EARLY_START_MS, ZOOM_ANIMATION_LEAD_MS) and returns {region, strength: 1} when timeMs >= zoomOutStart, returning strength 0 only at/after outgoingPair.transitionStart. findDominantRegion with connectZooms no longer calls/returns a connected transition and instead uses connected-hold then falls back to active-region logic.
Test validation for outgoing region strength
src/components/video-editor/videoPlayback/zoomAnimation.test.ts
The chained-zoom test now expects findDominantRegion(regions, 3200, { connectZooms: true }) to return region b with strength === 1 and transition === null, replacing the prior connected-transition/focus-blend assertions.

🎯 3 (Moderate) | ⏱️ ~20 minutes

🐰 A hop, a zoom, the moments align,

Strength blooms early, timing so fine,
Transitions quiet, the hold takes the stage,
Tests nod along, matching the page,
Hooray for precise animated time!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description includes Summary and Testing sections but is missing several required template sections (Motivation, Type of Change, Related Issues, Screenshots/Video, Checklist). Add the missing template sections: Motivation, Type of Change, Related Issue(s), Screenshots/Video, and complete the Checklist to improve clarity and traceability.
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 (3 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and relates to the main changes (zoom region transition animation), though it is somewhat generic and doesn't specify whether it's a fix or enhancement.
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 docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/animate-zoom-region-transition

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.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 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/components/video-editor/videoPlayback/zoomAnimation.test.ts`:
- Line 399: Update the assertion in the zoomAnimation test to expect exact
strength 1 for the outgoing region in the connected-handoff case: locate the
test that calls zoomRegionUtils (the assertion currently using
expect(result.strength).toBeGreaterThan(0)) for region "a" at timeMs 3100 and
replace that permissive check with expect(result.strength).toBe(1) so the test
asserts the exact behavior where timeMs >= zoomOutStart and < transitionStart
yields strength === 1.
🪄 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: a68ebe18-aab1-4ff6-a4e8-327d14725cea

📥 Commits

Reviewing files that changed from the base of the PR and between 8f3bbd5 and 37533cd.

📒 Files selected for processing (2)
  • src/components/video-editor/videoPlayback/zoomAnimation.test.ts
  • src/components/video-editor/videoPlayback/zoomRegionUtils.ts
💤 Files with no reviewable changes (1)
  • src/components/video-editor/videoPlayback/zoomRegionUtils.ts

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Caution

Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.

Actionable comments posted: 1

🤖 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/components/video-editor/videoPlayback/zoomAnimation.test.ts`:
- Line 399: Update the assertion in the zoomAnimation test to expect exact
strength 1 for the outgoing region in the connected-handoff case: locate the
test that calls zoomRegionUtils (the assertion currently using
expect(result.strength).toBeGreaterThan(0)) for region "a" at timeMs 3100 and
replace that permissive check with expect(result.strength).toBe(1) so the test
asserts the exact behavior where timeMs >= zoomOutStart and < transitionStart
yields strength === 1.
🪄 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: a68ebe18-aab1-4ff6-a4e8-327d14725cea

📥 Commits

Reviewing files that changed from the base of the PR and between 8f3bbd5 and 37533cd.

📒 Files selected for processing (2)
  • src/components/video-editor/videoPlayback/zoomAnimation.test.ts
  • src/components/video-editor/videoPlayback/zoomRegionUtils.ts
💤 Files with no reviewable changes (1)
  • src/components/video-editor/videoPlayback/zoomRegionUtils.ts
🛑 Comments failed to post (1)
src/components/video-editor/videoPlayback/zoomAnimation.test.ts (1)

399-399: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check the implementation of findDominantRegion and computeRegionStrength
# to understand the expected strength behavior during connected transitions

# Find the implementation of findDominantRegion
ast-grep --pattern $'export function findDominantRegion($$$) {
  $$$
}'

# Find computeRegionStrength to understand strength calculation
ast-grep --pattern $'export function computeRegionStrength($$$) {
  $$$
}'

# Search for animation timing constants that affect the handoff
rg -nP --type=ts 'zoomOutStart|leadInEarlyMs|ZOOM_LEAD_IN' -A2 -B2

Repository: webadderallorg/Recordly

Length of output: 7226


Tighten the 3100ms outgoing-region strength assertion to toBe(1)
For the connected-handoff scenario, zoomRegionUtils returns the outgoing region with strength: 1 once timeMs >= zoomOutStart and before timeMs >= transitionStart, so at 3100ms for region "a" the expected strength is exactly 1. Replace the permissive expect(result.strength).toBeGreaterThan(0) with expect(result.strength).toBe(1) in src/components/video-editor/videoPlayback/zoomAnimation.test.ts (around line 399).

🤖 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/components/video-editor/videoPlayback/zoomAnimation.test.ts` at line 399,
Update the assertion in the zoomAnimation test to expect exact strength 1 for
the outgoing region in the connected-handoff case: locate the test that calls
zoomRegionUtils (the assertion currently using
expect(result.strength).toBeGreaterThan(0)) for region "a" at timeMs 3100 and
replace that permissive check with expect(result.strength).toBe(1) so the test
asserts the exact behavior where timeMs >= zoomOutStart and < transitionStart
yields strength === 1.

@webadderall webadderall merged commit 6cfdf0f into main Jun 4, 2026
3 checks passed
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