KaykCaputo / KaykCaputo/OpenCifra

Display chord summary at the beginning of songs

Open
#4 0 comments 0 reactions 0 assignees View on GitHub
enhancement feature good first issue
Dominant language
Python
Stars
6
Forks
1
PR merge metrics
No merged PRs in 30d

Description

## Description
Add a visual summary of all chords used in a song at the top of the lyrics screen. This helps musicians quickly identify which chords they need to know before playing the song.

## User Story
As a musician, I want to see all the chords used in a song at the beginning so that I can prepare and practice unfamiliar chords before playing.

## Current Behavior
- Chords are only displayed inline with the lyrics
- Users must scroll through the entire song to find all chords
- No quick overview of required chords

## Proposed Behavior
Display a chord summary section at the top of the lyrics, showing:
- All unique chords used in the song
- Chords displayed as clickable chips/badges
- Optional: Visual representation using the `guitar.json` data

## Implementation Approach

### Step 1: Extract Chords from Lyrics
```python
def extract_chords(self, lyrics_text):
"""Extract all unique chords from parsed lyrics."""
# Match chords in [b][color=44AAFF]CHORD[/color][/b] format
pattern = r'\[b\]\[color=44AAFF\](.*?)\[/color\]\[/b\]'
chords = re.findall(pattern, lyrics_text)

# Remove duplicates and sort
unique_chords = sorted(set(chords))
return unique_chords
```

### Step 2: Create Chord Summary Widget
```python
def create_chord_summary(self, chords):
"""Create a visual summary of chords."""
from kivymd.uix.chip import MDChip
from kivymd.uix.boxlayout import MDBoxLayout

summary = MDBoxLayout(
orientation='horizontal',
adaptive_height=True,
spacing=dp(8),
padding=[dp(8), dp(16)]
)

title = MDLabel(
text="Chords used:",
size_hint=(None, None),
height=dp(30),
bold=True
)
summary.add_widget(title)

for chord in chords:
chip = MDChip(
text=chord,
theme_text_color="Custom",
text_color=(0.267, 0.667, 1, 1),
md_bg_color=(0.2, 0.2, 0.2, 1)
)
chip.bind(on_release=lambda x, c=chord: self.show_chord_diagram(c))
summary.add_widget(chip)

return summary
```

## Future Enhancements
- [ ] Display chord diagrams from `guitar.json` when clicking on a chord
- [ ] Show chord fingering positions in a popup/bottom sheet
- [ ] Highlight the current chord being played (for auto-scroll feature)
- [ ] Allow filtering/searching chords in the summary

## Benefits
- Quick overview of song complexity
- Better preparation for musicians
- Utilizes the existing `guitar.json` database
- Improves learning experience
- Professional songbook appearance

## Related Files
- `main.py` - Main implementation (lines 254-296)
- `guitar.json` - Chord diagram database

## Acceptance Criteria
- [ ] All unique chords are extracted correctly
- [ ] Chords are displayed at the top of the lyrics screen
- [ ] Chord summary is visually distinct from lyrics
- [ ] Works with both simple (C, Am) and complex chords (Dm7, Cadd9)
- [ ] No performance impact on rendering
- [ ] Maintains existing functionality

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in main.py around lines 254-296, then inspect how lyrics and inline chords are currently rendered. Review guitar.json to understand the available chord data. Done means unique simple and complex chords appear in a distinct summary at the top without disrupting existing rendering; verify the listed acceptance criteria and check rendering performance.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
mobile
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.