OpenCut-app / OpenCut-app/OpenCut

Timeline Ruler: Fix main marker detection for sub-second intervals

Open
#328 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
89.8k
Forks
8.9k
PR merge metrics
No merged PRs in 30d

Description

Description

The main marker detection logic in the timeline ruler component may not work correctly for sub-second intervals (0.1s, 0.5s).

Problem

In apps/web/src/components/editor/timeline/timeline-ruler.tsx around lines 80-82, the current logic:

const isMainMarker = time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;

When interval < 1, the expression Math.max(1, interval) always returns 1, making only time=0 a main marker. This could result in poor visual hierarchy for sub-second intervals where whole seconds should be emphasized as main markers.

Potential Fix

Consider changing the logic to:

const isMainMarker = interval >= 1 
  ? time % interval === 0
  : Math.abs(time % 1) < 0.0001; // Check if time is close to a whole second

Steps to Reproduce

  1. Set timeline to high zoom level (triggers 0.1s or 0.5s intervals)
  2. Observe timeline ruler markers
  3. Check if whole seconds are properly emphasized as main markers

Reference

Priority

Low - Visual enhancement that can be addressed in a separate cleanup PR.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in apps/web/src/components/editor/timeline/timeline-ruler.tsx around lines 80-82 and review the main-marker calculation. Reproduce the ruler at high zoom with 0.1s or 0.5s intervals, then verify that whole-second markers are emphasized while sub-second markers retain their normal hierarchy.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.