Fix the timecode readout showing 0:60.0 instead of 1:00.0

Open Beginner friendly
#24 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
90/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, node.js
Domain
frontend, testing

Research direction

Read the clock formatter in web/app.mjs:19 and the draw() calls at web/app.mjs:108; check test/core.test.mjs to see how pure formatters are tested. Add tests for 59.96, 119.98, and 60, then run node --test test/core.test.mjs. Done means the readout rolls directly from 0:59.9 to 1:00.0 and keeps the existing one-decimal, two-digit seconds format.

Written by the indexing model from the issue text.

Description

good first issue help wanted

The studio's clock formatter takes the minutes from the untruncated time but rounds the seconds independently, so a time just under a minute boundary renders a 60 in the seconds field. web/app.mjs:19:

const clock = t => `${Math.floor(t / 60)}:${(t % 60).toFixed(1).padStart(4, '0')}`;

(59.96 % 60).toFixed(1) is "60.0" while Math.floor(59.96 / 60) is still 0, so the result is 0:60.0. Reproduced against the current expression:

clock(59.9)   = 0:59.9
clock(59.96)  = 0:60.0   <-- should be 1:00.0
clock(119.98) = 1:60.0   <-- should be 2:00.0

clock feeds both $('time') (the playhead) and $('total') (the project duration) in draw() at web/app.mjs:108. Any project longer than a minute shows a nonsense 0:60.0 / 1:60.0 for one tick every time playback crosses a minute, and a project whose total duration lands in that window shows a wrong total permanently. Storyboards can reach 40 scenes (storyboard.mjs:116) at up to 20 s each, so multi-minute projects are ordinary.

What to change
  • Round once to tenths first, then derive minutes and seconds from the rounded value, e.g. compute const tenths = Math.round(Math.max(0, t) * 10) and format Math.floor(tenths / 600) and (tenths % 600) / 10.
  • Keep the existing 0:03.6 shape (one decimal, two-digit seconds) so the UI does not shift.
  • Add a case to test/core.test.mjs covering 59.96, 119.98 and a plain 60; clock needs to be exported for that, or move it beside the other pure formatters.
How to verify

Run node --test test/core.test.mjs with the new assertions. Manually: set a project's total duration to about 60 s, play it, and watch the time readout step from 0:59.9 straight to 1:00.0.


New to the project? Comment here to claim it, and say hello in the blix open source Discord — questions about this issue get answered fastest there.

Dominant language
JavaScript
Stars
42
Forks
6
Avg merge
12h 31m
Merged PRs (30d)
3

Getting set up

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.

More from blixvip/GenMotion

All issues in blixvip/GenMotion

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.