Cap icon indicating copy to clipboard operation
Cap copied to clipboard
Published 5 days ago • verified publisher icon CapSoftware

Optimize waveform rendering and timeline preview updates

Open richiemcilroy opened this issue 2 months ago • 2 comments

Improves waveform rendering in ClipTrack by adjusting sample stepping and using requestAnimationFrame for smoother updates. Timeline preview time updates are now throttled to reduce unnecessary state changes and improve performance during mouse movement

Summary by CodeRabbit

  • Performance Improvements

    • Animation-frame driven waveform rendering for smoother updates across the timeline editor
    • Adaptive sampling that adjusts to zoom and segment ranges for more efficient drawing
    • Conservative animation cleanup to cancel pending work and avoid leaks; rendering reacts to viewport and level changes

  • Enhancements

    • Throttled preview-time updates with bounds and playback guards to reduce unnecessary updates and improve responsiveness

richiemcilroy avatar Oct 30 '25 03:10 richiemcilroy

Walkthrough

Implements an animation-frame-driven waveform rendering flow with dynamic per-render sampling in the timeline clip track, and adds a throttled, guarded preview-time update for timeline mouse-move events to reduce update frequency.

Changes

Cohort / File(s) Summary
Waveform Rendering Optimization
apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx		 Switches waveform drawing to requestAnimationFrame scheduling, manages raf ids and cleanup, computes samplesPerSecond/samplesPerPixel and a dynamic sampleStep per render, clips drawing to segment start/end times, uses prevX/prevY to avoid redundant bezier calls, and makes rendering reactive to width, secsPerPixel, micVolumeDb, and systemVolumeDb.
Timeline Preview Throttling
apps/desktop/src/routes/editor/Timeline/index.tsx		 Adds a throttled setPreviewTime import/use and replaces direct onMouseMove preview updates with a throttled, left-bound-checked, playing-guarded updater applied in timeline mouse handlers.

Sequence Diagram(s)

sequenceDiagram
    participant Canvas as ClipTrack Canvas
    participant RAF as requestAnimationFrame
    participant Renderer as renderWaveforms()
    participant State as Timeline State (width, secsPerPixel, volumes)

    Note over Canvas, State: On mount/update or state change
    State->>Canvas: trigger createEffect read of deps
    Canvas->>RAF: cancel existing RAF (if any)
    Canvas->>RAF: requestAnimationFrame(renderWaveforms)
    RAF->>Renderer: invoke renderWaveforms
    Renderer->>Canvas: compute samplesPerSecond / samplesPerPixel / sampleStep
    Renderer->>Canvas: draw bezier segments (clip to start/end)
    Renderer->>RAF: (if needed) requestAnimationFrame(next render)

sequenceDiagram
    participant Mouse as User Mouse
    participant Throttle as Throttled setPreviewTime
    participant Timeline as Timeline State (previewTime)

    Mouse->>Throttle: mousemove events (high frequency)
    Throttle-->>Mouse: rate-limited calls
    Throttle->>Timeline: setPreviewTime(time) [guard: not playing, within bounds]
    Timeline->>Timeline: update previewTime

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Pay attention to RAF lifecycle and cleanup in ClipTrack.tsx to avoid double-scheduling or leaks.
  • Verify sampling math (samplesPerSecond, sampleStep) and bounds checks to prevent out-of-range indexing.
  • Confirm throttled preview updates in index.tsx do not skip necessary immediate updates (especially on play state transitions).

Possibly related PRs

  • CapSoftware/Cap#968 — Modifies timeline mouse-move/playhead time-updating logic in apps/desktop/src/routes/editor/Timeline/index.tsx; closely related to throttled previewTime changes.
  • CapSoftware/Cap#969 — Alters preview-time handling in the timeline and touchpoints where previewTime is used; relevant to preview time semantics and throttling.

Suggested labels

Desktop

Poem

🐰 I hop on frames, I sample the beat,

Waves curve smooth beneath my feet,
Throttle the hops when the mouse runs wild,
Clean rafs tidy the artist's child,
A tiny rabbit, rendering mild 🥕

Pre-merge checks and finishing touches

❌ 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%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The pull request title "Optimize waveform rendering and timeline preview updates" accurately and clearly summarizes the main changes across both modified files. The title correctly identifies the two primary optimization areas: waveform rendering (through RAF scheduling and dynamic sampling in ClipTrack.tsx) and timeline preview updates (through throttling in index.tsx). The title is concise, specific, and avoids vague terminology, making it immediately clear to teammates that the PR focuses on performance improvements in these two components.
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch waveform-performance
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d7422640e21bfe759e065ec5409eeb6d24b3f34f and 0c77fab0d87c9a236b8cbd7b84197271e6e215b5.

📒 Files selected for processing (2)
  • apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx (4 hunks)
  • apps/desktop/src/routes/editor/Timeline/index.tsx (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/desktop/src/routes/editor/Timeline/index.tsx
  • apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
  • GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
  • GitHub Check: Analyze (rust)

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.

coderabbitai[bot] avatar Oct 30 '25 03:10 coderabbitai[bot]

might still need some work

https://github.com/user-attachments/assets/067b3fe4-b659-4ecf-aab9-78a6ed79dffd

Brendonovich avatar Oct 30 '25 10:10 Brendonovich