fix: show full slow-speed clips on timeline

[meiiie]

Description

Fixes slow-speed clips becoming partially unreachable on the timeline by deriving the editor timeline duration from both the source duration and the furthest clip end.

Motivation

When a clip is slowed down, the editor extends that clip's timeline end so playback/export can represent the longer effective duration. The timeline ruler still used only the raw source duration, so the extended tail of the slow clip could be clipped out of view.

Type

Bug fix

Related Issue(s)

Closes #434

Changes Made

• Added getTimelineDurationMs to keep the source duration as the floor while allowing slow clips to extend the visible timeline.
• Passed the derived timeline duration into TimelineEditor.
• Updated the editor duration display and skip-forward clamp to use the effective timeline duration.
• Added tests for slow clips extending the timeline and fast clips not shrinking it below the source duration.

Scope Note

This intentionally does not reflow later clips or timeline items after speed edits. It only fixes the visible/reachable timeline range for slow clips.

Testing Guide

1. Open a recording in the editor.
2. Select a clip and set speed below 1x, for example 0.5x.
3. Confirm the timeline extends far enough to show the whole slowed clip.
4. Confirm fast-speed clips do not unexpectedly shrink the base timeline.

Validation

• npm test -- src/components/video-editor/types.test.ts src/components/video-editor/timeline/timelineLayout.test.ts
• npm exec -- tsc --noEmit
• npx biome check --formatter-enabled=false src/components/video-editor/types.ts src/components/video-editor/types.test.ts src/components/video-editor/VideoEditor.tsx
• npx vite build --config vite.config.ts

Checklist

• Focused fix for the reported bug
• Added targeted tests
• Typecheck passed
• Scoped Biome check passed
• Production build passed

Summary by CodeRabbit

• Bug Fixes
  • Timeline duration now correctly accounts for speed-edited clips, so the timeline extends when clips are slowed and displayed time labels reflect the true video length.
  • Skip-forward and playback controls now use the calculated timeline duration, preventing seeks beyond the visible timeline.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 58716440-f824-4d67-a490-d308e5474c0f

📥 Commits

Reviewing files that changed from the base of the PR and between 541e236 and b5bb128.

📒 Files selected for processing (3)

• src/components/video-editor/VideoEditor.tsx
• src/components/video-editor/types.test.ts
• src/components/video-editor/types.ts

✅ Files skipped from review due to trivial changes (1)

• src/components/video-editor/types.test.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/video-editor/types.ts

---

📝 Walkthrough

Walkthrough

VideoEditor now derives a memoized timelineDuration from clipRegions and source duration using getTimelineDurationMs; that value is used for skip-forward clamping, the playback end-time label, and the TimelineEditor's videoDuration prop. Tests for getTimelineDurationMs were added and the utility was exported.

Changes

Timeline Duration from Clip Regions

Layer / File(s)	Summary
Utility Definition src/components/video-editor/types.ts	New exported getTimelineDurationMs(clips, sourceDurationMs) returns the rounded max of the source duration and each clip's rounded end time.
Utility Tests src/components/video-editor/types.test.ts	Added tests: slowed clip extends timeline; speed edits do not shorten timeline below source duration.
Timeline Duration Integration src/components/video-editor/VideoEditor.tsx	Import getTimelineDurationMs, memoize timelineDuration = getTimelineDurationMs(clipRegions, duration * 1000) / 1000, and use it for SkipForward fallback clamping, playback end-time label, and TimelineEditor's videoDuration prop.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• webadderallorg/Recordly#416: Also touches video-editor timeline/clip mapping and VideoEditor timeline semantics.

Suggested labels

Checked

Poem

🐰 A hop, a nibble, time stretched wide,
Slow clips now sit with pride beside,
The timeline grows to show each part,
No hidden tails, each slowed-down heart,
Hooray — the footage meets the eye.

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

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main fix: ensuring full slow-speed clips are visible on the timeline, which is the primary objective.
Description check	✅ Passed	The description includes all template sections: clear description, motivation, type of change (bug fix), related issue (#434), changes made, testing guide, and a completed checklist.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #434 by introducing getTimelineDurationMs to extend timeline range for slow clips while maintaining source duration as floor, matching all stated objectives.
Out of Scope Changes check	✅ Passed	All changes are focused and directly related to the stated objective: timeline duration computation and its application to three specific components (clamping, label, TimelineEditor prop) with no unrelated modifications.

_{✏️ 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/issue434-slow-clip-timeline-range

---

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