Add minimal read-only timeline widget with playback playhead#5102
Add minimal read-only timeline widget with playback playhead#5102DhyaniKavya wants to merge 6 commits intosugarlabs:masterfrom
Conversation
|
❌ Some Jest tests failed. Please check the logs and fix the issues before merging. Failed Tests: |
|
✅ All Jest tests passed! This PR is ready to merge. |
1 similar comment
|
✅ All Jest tests passed! This PR is ready to merge. |
DhyaniKavya
force-pushed
the
timeline-readonly-widget
branch
from
a26bfb1 to
d2a2e77
Compare
|
✅ All Jest tests passed! This PR is ready to merge. |
|
✅ All Jest tests passed! This PR is ready to merge. |
|
✅ All Jest tests passed! This PR is ready to merge. |
|
✅ All Jest tests passed! This PR is ready to merge. |
|
@walterbender @omsuneri please review the changes. If there is anything to change , i am open to address it . Thankyou |
|
I am not seeing the timeline appear. |
|
@walterbender sure, i will work on it . thankyou for the suggestion |
2 participants
issue: #5116
Problem:-
Music Blocks plays music correctly, but users cannot see when notes happen in time.
All notes appear only as stacked blocks, which makes it hard for beginners to understand rhythm, timing, and how notes line up during playback.
There is currently no visual timeline to help users connect what they hear with when it happens.
Solution:-
This PR introduces a minimal, read-only timeline widget that visually shows playback timing using a moving playhead.
The timeline does not change how music is played or how blocks work.
It only reads existing timing data and displays it visually.
What Was Added:-
-A new timeline widget built using a canvas
-A simple horizontal timeline with a moving playhead
-The playhead stays in sync with music playback
-The widget follows existing widget patterns used in Music Blocks
-This is a first, intentionally simple version:
->No note visualization yet
->No interaction
->No UI menu entry (opened via console for testing)
Why This Approach?
The goal is to introduce the concept of a timeline without affecting existing behavior.
Keeping it minimal makes the change easy to review and provides a solid base for future improvements.
Files Changed:-
->New: js/widgets/timeline.js
->New: js/widgets/TIMELINE_TESTING.md
->Updated: js/activity.js
->Updated: js/logo.js
Only minimal integration changes were made.
How to Test?
-Run Music Blocks locally
-Open the browser console
Run:-
globalActivity.logo.timeline = new Timeline();
globalActivity.logo.timeline.init(globalActivity);
-Press Play and observe the moving playhead
-Music playback should behave exactly as before.
What This Does Not Change?
-No playback logic
-No block behavior
-No UI layout
-No music engine code