Skip to content

Help modal functionality #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hashmapenjoyer merged 2 commits into from
Apr 17, 2026
Merged

Help modal functionality #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f06cb1b
Change help modal button from '?' to 'FAQ' as per tester suggestion
mallae-rpi Apr 17, 2026
2d76de4
Modify Help Modal to be consistent with current functionality
mallae-rpi Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function App() {

for (const file of files) {
try {
// Read the raw bytes first — needed for both hashing and decoding.
// Read the raw bytes first - needed for both hashing and decoding.
const arrayBuffer = await file.arrayBuffer();

// Hash and metadata extraction can run in parallel.
Expand Down
127 changes: 88 additions & 39 deletions src/components/HelpModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,83 +50,132 @@ export default function HelpModal({ onClose }: HelpModalProps) {

{/* Content */}
<div className="help-modal-content">
{/* Getting Started */}
<section className="help-section">
<h3 className="help-section-title">Getting Started</h3>
<p className="help-text">
DJ AMBER is a powerful music mixing and sequencing tool. Use it to create, edit, and
play custom music tracks with layered clips and effects.
DJ AMBER is a music mixing and sequencing tool for creating layered audio tracks and
smooth transitions.
</p>
<ul className="help-tips">
<li>Upload or browse clips from the Music Library</li>
<li>Drag clips onto the Timeline to begin building your track</li>
<li>Arrange and adjust clips to shape your final mix</li>
</ul>
</section>

{/* Controls */}
<section className="help-section">
<h3 className="help-section-title">Music Library</h3>
<h3 className="help-section-title">Controls</h3>
<p className="help-text">
Browse and select audio clips from the Music Library panel on the left. Search for
clips by name or category to quickly find what you need.
Use keyboard and navigation controls to work quickly and precisely.
</p>

<div className="help-subsection">
<h4 className="help-subsection-title">Keyboard Shortcuts</h4>
<ul className="help-tips">
<li>
<kbd>Spacebar</kbd> - Play or pause playback
</li>
<li>
<kbd>Esc</kbd> - Close the help modal or deselect a clip
</li>
<li>
<kbd>Alt</kbd> + drag - Overlap clips freely without pushing others
</li>
<li>
<kbd>Delete</kbd> / <kbd>Backspace</kbd> - Remove selected clip
</li>
</ul>
</div>

<div className="help-subsection">
<h4 className="help-subsection-title">Timeline Navigation</h4>
<ul className="help-tips">
<li>
<kbd>Scroll</kbd> - Zoom in and out of the timeline
</li>
<li>
<kbd>Shift</kbd> + <kbd>Scroll</kbd> - Pan earlier or later
</li>
<li>Use horizontal trackpad gestures to pan the timeline</li>
</ul>
</div>
</section>

{/* Music Library */}
<section className="help-section">
<h3 className="help-section-title">Timeline</h3>
<h3 className="help-section-title">Music Library</h3>
<p className="help-text">
Drag clips from the Music Library onto the Timeline to add them to your project. Use
the Timeline to arrange clips, set timing, and create your composition.
The Music Library lets you browse and add audio clips to your project.
</p>
<ul className="help-tips">
<li>Search for clips by name or category</li>
<li>
Click the <strong>+</strong> button to add a clip to your project
</li>
<li>Drag clips directly onto the Timeline to place them</li>
</ul>
</section>

{/* Timeline */}
<section className="help-section">
<h3 className="help-section-title">Now Playing</h3>
<h3 className="help-section-title">Timeline</h3>
<p className="help-text">
The Now Playing panel displays the currently selected track with playback controls,
progress bar, and real-time lyrics display. Use the play and pause buttons to control
playback.
The Timeline is where you arrange and shape your composition.
</p>
<ul className="help-tips">
<li>Position clips to control timing and sequence</li>
<li>Adjust clip edges to refine transitions</li>
<li>Layer clips to create more complex soundscapes</li>
</ul>
</section>

{/* Set List */}
<section className="help-section">
<h3 className="help-section-title">Keyboard Shortcuts</h3>
<ul className="help-shortcuts">
<li>
<kbd>Spacebar</kbd> - Play/Pause
</li>
<li>
<kbd>Esc</kbd> - Close this help modal / deselect clip
</li>
<h3 className="help-section-title">Set List</h3>
<p className="help-text">
The Set List controls the order and playback behavior of tracks in your project.
</p>
<ul className="help-tips">
<li>
<kbd>Alt</kbd> + drag clip - Slip mode: let the clip overlap freely with the next
clip instead of pushing it along
Create a new set list using the <strong>+</strong> button
</li>
<li>Drag and drop tracks to reorder them</li>
<li>
<kbd>Delete</kbd> / <kbd>Backspace</kbd> - Delete selected clip
Use Shuffle to randomize playback order without interrupting the current track
</li>
<li>Use Repeat to cycle between repeating one track, all tracks, or none</li>
</ul>
</section>

{/* Now Playing */}
<section className="help-section">
<h3 className="help-section-title">Timeline Navigation</h3>
<ul className="help-shortcuts">
<li>
<kbd>Scroll</kbd> - Zoom in / out
</li>
<li>
<kbd>Shift</kbd> + <kbd>Scroll</kbd> - Pan earlier / later
</li>
<li>Horizontal trackpad swipe also pans the timeline</li>
<h3 className="help-section-title">Now Playing</h3>
<p className="help-text">
The Now Playing panel shows the active track and playback controls.
</p>
<ul className="help-tips">
<li>Use play and pause to control playback</li>
<li>Track progress using the playback bar</li>
<li>Navigate within a track using the progress bar</li>
</ul>
</section>

{/* Tips & Tricks */}
<section className="help-section">
<h3 className="help-section-title">Tips & Tricks</h3>
<p className="help-text">
These tips can help you create smoother and more polished mixes.
</p>
<ul className="help-tips">
<li>Layer multiple clips to create rich soundscapes</li>
<li>Adjust timing and fades for smooth transitions</li>
<li>Use the progress bar to navigate through your project</li>
<li>Layer clips to create richer sound combinations</li>
<li>Fine-tune timing and fades for smoother transitions</li>
<li>Use the progress bar to quickly navigate your project</li>
<li>
Dragging a clip on the timeline only edits the transition on its left side. Clips to
the right ripple along to preserve their existing transitions. Hold <kbd>Alt</kbd>{' '}
while dragging to override and let the clip overlap freely.
Dragging a clip edits the transition on its left side while preserving others. Hold{' '}
<kbd>Alt</kbd> to override and overlap freely.
</li>
<li>Save your projects frequently to avoid losing work</li>
</ul>
</section>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default function NavBar({ masterVolume, onMasterVolumeChange }: NavBarPro
title="Help"
aria-label="Open help modal"
>
?
FAQ
</button>
</div>
</nav>
Expand Down
13 changes: 13 additions & 0 deletions src/styles/help-modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,3 +206,16 @@ kbd {
.help-modal-button:active {
transform: scale(0.98);
}

.help-subsection {
display: flex;
flex-direction: column;
gap: var(--space-2);
}

.help-subsection-title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: #ffffff;
margin: 0;
}
Loading