Skip to content

Commit

Permalink
preview last rep on index page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vpavlenko
vpavlenko committed Sep 27, 2024
1 parent 1284a06 commit 35d0cc5
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 103 deletions.
34 changes: 33 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,13 @@ const SongLink = styled.a<{ hasErrors?: boolean }>`
}
`;

const SongPreview = styled.div`
margin-top: 5px;
overflow-x: auto;
max-width: 300px;
height: 60px; // Adjust this value based on the height of your chord representation
`;

function App() {
const [selectedSong, setSelectedSong] = useState<string | null>(null);
const [isPlaying, setIsPlaying] = useState(false);
Expand Down Expand Up @@ -92,6 +99,10 @@ function App() {
[key: string]: { nonParsedChords: number; distinctChords: number };
}>({});

const [hoveredSongs, setHoveredSongs] = useState<{ [key: string]: boolean }>(
{}
);

useEffect(() => {
const handleHashChange = () => {
const songFromHash = window.location.hash.slice(1);
Expand Down Expand Up @@ -381,6 +392,10 @@ function App() {
);
}, [selectedSongData]);

const handleMouseEnter = useCallback((filename: string) => {
setHoveredSongs((prev) => ({ ...prev, [filename]: true }));
}, []);

const renderSongList = () => {
const songsByChordCount: { [key: number]: Song[] } = {};
const songsWithErrors: Song[] = [];
Expand Down Expand Up @@ -423,13 +438,30 @@ function App() {
</ColumnTitle>
<ul style={{ listStyleType: "none", padding: 0 }}>
{songs.map((song) => (
<li key={song.filename}>
<li
key={song.filename}
onMouseEnter={() => handleMouseEnter(song.filename)}
>
<SongLink
href={`#${song.filename}`}
onClick={() => handleSongClick(song.filename)}
>
{song.Title}
</SongLink>
<SongPreview>
{hoveredSongs[song.filename] && (
<AlternativeChordRepresentation
chords={song.chords
.flat()
.flatMap((chord) => chord.split(" "))}
currentChordIndex={null}
handleChordHover={() => {}}
handleChordLeave={() => {}}
playChord={() => {}}
showOnlyLastRep={true}
/>
)}
</SongPreview>
</li>
))}
</ul>
Expand Down
238 changes: 136 additions & 102 deletions src/components/AlternativeChordRepresentation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ interface Props {
currentChordIndex: number | null;
handleChordHover: (chord: string) => void;
handleChordLeave: () => void;
// Add this new prop
playChord: (chord: string) => void;
showOnlyLastRep?: boolean; // Add this new prop
}

const TwoLineChord: React.FC<{
Expand All @@ -119,7 +119,7 @@ const TwoLineChord: React.FC<{
highlight: boolean;
onMouseEnter: () => void;
onMouseLeave: () => void;
onClick: () => void; // Add this new prop
onClick: () => void;
left: number;
top?: string;
}> = ({
Expand All @@ -136,7 +136,7 @@ const TwoLineChord: React.FC<{
highlight={highlight}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={onClick} // Add this onClick handler
onClick={onClick}
left={left}
top={top}
>
Expand All @@ -150,7 +150,8 @@ const AlternativeChordRepresentation: React.FC<Props> = ({
currentChordIndex,
handleChordHover,
handleChordLeave,
playChord, // Add this new prop
playChord,
showOnlyLastRep = false, // Add this new prop with a default value
}) => {
const parsedChords: ChordInfo[] = chords.map((chord) => {
const parsedChord: ParsedChord = parseChordName(chord);
Expand Down Expand Up @@ -212,107 +213,140 @@ const AlternativeChordRepresentation: React.FC<Props> = ({
return (
<AlternativeChordContainer>
<ChordLinesWrapper>
{/* First repetition */}
<ChordLine>
{parsedChords.map((chordInfo, index) => (
<TwoLineChord
key={`line-1-${index}`}
chord={chordInfo.chord}
root={chordInfo.originalRoot}
suffix={chordInfo.originalSuffix}
highlight={currentChordIndex === index}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)} // Add this onClick handler
left={index * (CHORD_WIDTH + GAP_WIDTH)}
/>
))}
</ChordLine>
{showOnlyLastRep ? (
// Render only the last representation
<ChordLine>
{squashedChords.map((chordInfo, index) => (
<React.Fragment key={`last-rep-${index}`}>
<ChordSpan
highlight={
currentChordIndex !== null &&
currentChordIndex >= chordInfo.startIndex &&
currentChordIndex <= chordInfo.endIndex
}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)}
left={index * (CHORD_WIDTH + GAP_WIDTH)}
top={`${getChordLevel(chordInfo)}px`}
>
{chordInfo.originalSuffix || "M"}
</ChordSpan>
{index < squashedChords.length - 1 &&
renderRootDifference(
chordInfo,
squashedChords[index + 1],
index * (CHORD_WIDTH + GAP_WIDTH) + CHORD_WIDTH
)}
</React.Fragment>
))}
</ChordLine>
) : (
// Render all representations
<>
{/* First repetition */}
<ChordLine>
{parsedChords.map((chordInfo, index) => (
<TwoLineChord
key={`line-1-${index}`}
chord={chordInfo.chord}
root={chordInfo.originalRoot}
suffix={chordInfo.originalSuffix}
highlight={currentChordIndex === index}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)}
left={index * (CHORD_WIDTH + GAP_WIDTH)}
/>
))}
</ChordLine>

{/* Second repetition - squashed chords */}
<ChordLine>
{squashedChords.map((chordInfo, index) => (
<TwoLineChord
key={`line-2-${index}`}
chord={chordInfo.chord}
root={chordInfo.originalRoot}
suffix={chordInfo.originalSuffix}
highlight={
currentChordIndex !== null &&
currentChordIndex >= chordInfo.startIndex &&
currentChordIndex <= chordInfo.endIndex
}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)} // Add this onClick handler
left={index * (CHORD_WIDTH + GAP_WIDTH)}
top={
chordInfo.isMinor
? `-${CHORD_VERTICAL_OFFSET}px`
: chordInfo.isMajor
? `${CHORD_VERTICAL_OFFSET}px`
: "0"
}
/>
))}
</ChordLine>
{/* Second repetition - squashed chords */}
<ChordLine>
{squashedChords.map((chordInfo, index) => (
<TwoLineChord
key={`line-2-${index}`}
chord={chordInfo.chord}
root={chordInfo.originalRoot}
suffix={chordInfo.originalSuffix}
highlight={
currentChordIndex !== null &&
currentChordIndex >= chordInfo.startIndex &&
currentChordIndex <= chordInfo.endIndex
}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)}
left={index * (CHORD_WIDTH + GAP_WIDTH)}
top={
chordInfo.isMinor
? `-${CHORD_VERTICAL_OFFSET}px`
: chordInfo.isMajor
? `${CHORD_VERTICAL_OFFSET}px`
: "0"
}
/>
))}
</ChordLine>

{/* Third repetition - with root difference numbers */}
<ChordLine>
{squashedChords.map((chordInfo, index) => (
<React.Fragment key={`line-3-${index}`}>
<TwoLineChord
chord={chordInfo.chord}
root={chordInfo.originalRoot}
suffix={chordInfo.originalSuffix}
highlight={
currentChordIndex !== null &&
currentChordIndex >= chordInfo.startIndex &&
currentChordIndex <= chordInfo.endIndex
}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)}
left={index * (CHORD_WIDTH + GAP_WIDTH)}
top={`${getChordLevel(chordInfo)}px`}
/>
{index < squashedChords.length - 1 &&
renderRootDifference(
chordInfo,
squashedChords[index + 1],
index * (CHORD_WIDTH + GAP_WIDTH) + CHORD_WIDTH
)}
</React.Fragment>
))}
</ChordLine>
{/* Third repetition - with root difference numbers */}
<ChordLine>
{squashedChords.map((chordInfo, index) => (
<React.Fragment key={`line-3-${index}`}>
<TwoLineChord
chord={chordInfo.chord}
root={chordInfo.originalRoot}
suffix={chordInfo.originalSuffix}
highlight={
currentChordIndex !== null &&
currentChordIndex >= chordInfo.startIndex &&
currentChordIndex <= chordInfo.endIndex
}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)}
left={index * (CHORD_WIDTH + GAP_WIDTH)}
top={`${getChordLevel(chordInfo)}px`}
/>
{index < squashedChords.length - 1 &&
renderRootDifference(
chordInfo,
squashedChords[index + 1],
index * (CHORD_WIDTH + GAP_WIDTH) + CHORD_WIDTH
)}
</React.Fragment>
))}
</ChordLine>

{/* Fourth repetition - simplified suffixes with root difference numbers */}
<ChordLine>
{squashedChords.map((chordInfo, index) => (
<React.Fragment key={`line-4-${index}`}>
<ChordSpan
highlight={
currentChordIndex !== null &&
currentChordIndex >= chordInfo.startIndex &&
currentChordIndex <= chordInfo.endIndex
}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)}
left={index * (CHORD_WIDTH + GAP_WIDTH)}
top={`${getChordLevel(chordInfo)}px`}
>
{chordInfo.originalSuffix || "M"}
</ChordSpan>
{index < squashedChords.length - 1 &&
renderRootDifference(
chordInfo,
squashedChords[index + 1],
index * (CHORD_WIDTH + GAP_WIDTH) + CHORD_WIDTH
)}
</React.Fragment>
))}
</ChordLine>
{/* Fourth repetition - simplified suffixes with root difference numbers */}
<ChordLine>
{squashedChords.map((chordInfo, index) => (
<React.Fragment key={`line-4-${index}`}>
<ChordSpan
highlight={
currentChordIndex !== null &&
currentChordIndex >= chordInfo.startIndex &&
currentChordIndex <= chordInfo.endIndex
}
onMouseEnter={() => handleChordHover(chordInfo.chord)}
onMouseLeave={handleChordLeave}
onClick={() => playChord(chordInfo.chord)}
left={index * (CHORD_WIDTH + GAP_WIDTH)}
top={`${getChordLevel(chordInfo)}px`}
>
{chordInfo.originalSuffix || "M"}
</ChordSpan>
{index < squashedChords.length - 1 &&
renderRootDifference(
chordInfo,
squashedChords[index + 1],
index * (CHORD_WIDTH + GAP_WIDTH) + CHORD_WIDTH
)}
</React.Fragment>
))}
</ChordLine>
</>
)}
</ChordLinesWrapper>
</AlternativeChordContainer>
);
Expand Down

0 comments on commit 35d0cc5

Please sign in to comment.