Add minimal read-only timeline widget with playback playhead #5125
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
issue: #5116
Problem:
Music Blocks currently does not provide any way for users to keep track of earlier versions of their projects. If a user experiments or makes a mistake, there is no way to review past states or understand how the project evolved over time.
This makes experimentation risky, especially for learners and educators.
Solution:
This PR introduces a minimal, read-only project snapshot history feature.
Users can manually save snapshots of their project and later view a list of those snapshots without affecting the current project state. The feature is intentionally limited in scope to avoid any impact on existing behavior.
What this adds?
-A small storage layer to save project snapshots locally using IndexedDB
-A read-only snapshot history widget that lists saved snapshots
-Each snapshot includes:
->Timestamp
->Optional user description
->Associated project ID
->Snapshots persist across page reloads and work offline
What this does not do?
-No restore or rollback functionality
-No deletion or cleanup logic
-No changes to playback, blocks, or project behavior
-No changes to existing save/load logic
Implementation Details:-
New files:
->SnapshotStorage.js:
->Handles saving and reading snapshots using the same IndexedDB setup already used in the project
->Exposes simple methods to save and fetch snapshots
->snapshothistory.js:
->A new widget following the same pattern as existing widgets (e.g. Status Matrix)
->Displays a read-only list of snapshots with basic metadata
->Viewing a snapshot only shows details, it does not modify the project
Modified files:-
-activity.js
-Initializes snapshot storage
-Adds helper methods to save snapshots and open the snapshot history widget
-index.html
-Loads the new snapshot-related scripts
-All changes are localized and follow existing project patterns.
Verification:
-Saved snapshots appear correctly in the snapshot history widget
-Viewing a snapshot does not alter the current project
-Playback and block behavior remain unchanged
-Snapshots persist after page reloads
-Feature works offline
-No console errors observed
AI Disclosure:-
-AI tools were used only for discussion and planning.
All implementation decisions, scoping, and verification were done manually.