diff --git a/src/components/video-editor/videoPlayback/zoomAnimation.test.ts b/src/components/video-editor/videoPlayback/zoomAnimation.test.ts index 9ebc9f2a..7bb98443 100644 --- a/src/components/video-editor/videoPlayback/zoomAnimation.test.ts +++ b/src/components/video-editor/videoPlayback/zoomAnimation.test.ts @@ -307,6 +307,13 @@ describe("computeRegionStrength", () => { expect(computeRegionStrength(region, 0)).toBe(0); }); + it("does not start playing 300ms before the timeline block", () => { + expect(computeRegionStrength(region, region.startMs - 300)).toBe(0); + expect(computeRegionStrength(region, region.startMs + 300)).toBeGreaterThan(0); + expect(region.startMs).toBe(2000); + expect(region.endMs).toBe(5000); + }); + it("returns 0 well after the region", () => { expect(computeRegionStrength(region, 10000)).toBe(0); }); @@ -317,9 +324,7 @@ describe("computeRegionStrength", () => { }); it("rises smoothly during zoom-in", () => { - // Zoom-in transitions from leadInStart .. zoomInEnd - // zoomInEnd = startMs + 500, leadInStart = zoomInEnd - 1500 = startMs - 1000 - // So at startMs the transition is partially done + // The entrance ramp is beginning at the timeline block start. const s = computeRegionStrength(region, region.startMs); expect(s).toBeGreaterThan(0); expect(s).toBeLessThan(1); @@ -381,7 +386,7 @@ describe("findDominantRegion", () => { ]; // During the connected handoff, the next region becomes the spring target. - const result = findDominantRegion(regions, 3200, { connectZooms: true }); + const result = findDominantRegion(regions, 3500, { connectZooms: true }); expect(result.strength).toBe(1); expect(result.transition).toBeNull(); expect(result.region?.id).toBe("b"); @@ -422,13 +427,13 @@ describe("findDominantRegion", () => { expect(result.region).toBeNull(); }); - it("holds the next region's focus between connected-transition end and next start", () => { + it("keeps the next region active during the connected transition", () => { const regions: ZoomRegion[] = [ { id: "a", startMs: 1000, endMs: 3000, depth: 2, focus: { cx: 0.2, cy: 0.2 } }, { id: "b", startMs: 4300, endMs: 7000, depth: 3, focus: { cx: 0.7, cy: 0.7 } }, ]; - // After transition end (3000+200+1000=4200) but before b starts (4300) + // During the handoff (3500–4500), before b starts (4300). const result = findDominantRegion(regions, 4250, { connectZooms: true }); expect(result.strength).toBe(1); expect(result.region).not.toBeNull(); diff --git a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts index f0bfd18d..4f3100fc 100644 --- a/src/components/video-editor/videoPlayback/zoomRegionUtils.ts +++ b/src/components/video-editor/videoPlayback/zoomRegionUtils.ts @@ -11,8 +11,8 @@ import { clamp01, easeOutZoom } from "./mathUtils"; const CHAINED_ZOOM_PAN_GAP_MS = 1350; const CONNECTED_ZOOM_PAN_DURATION_MS = 1000; const ZOOM_IN_OVERLAP_MS = 1000; -// Positive offsets delay the animation; this is 300ms later than the previous -100ms offset. -const ZOOM_ANIMATION_DELAY_MS = 200; +// Playback offset relative to timeline blocks; positive values delay the animation. +const ZOOM_ANIMATION_DELAY_MS = 500; type DominantRegionOptions = { connectZooms?: boolean;