enlarge autoplay area

vpavlenko · Sep 28, 2024 · 7bcf3cc · 7bcf3cc
1 parent 790a4e7
commit 7bcf3cc
Showing 1 changed file with 26 additions and 23 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,7 +19,6 @@ import AlternativeChordRepresentation, {
 } from "./components/AlternativeChordRepresentation";
 import styled from "styled-components";
 import { Sampler } from "tone";
-import { FaVolumeUp } from "react-icons/fa";
 
 interface ChordEvent {
   chord: string;
@@ -69,21 +68,16 @@ const SongLink = styled.a<{ hasErrors?: boolean }>`
   }
 `;
 
-const SongPreview = styled.div`
+const SongPreview = styled.div<{ isPlaying: boolean }>`
   overflow-x: scroll;
   overflow-y: auto;
+  box-shadow: ${(props) => (props.isPlaying ? "0 0 0 2px #808080" : "none")};
 `;
 
 const SongItem = styled.li`
   position: relative;
 `;
 
-const VolumeIcon = styled(FaVolumeUp)<{ isPlaying: boolean }>`
-  margin-left: 5px;
-  cursor: pointer;
-  color: ${(props) => (props.isPlaying ? "#4CAF50" : "inherit")};
-`;
-
 const getSquashedChords = (chords: string[][]): SquashedChordInfo[] => {
   const flatChords = chords.flat().flatMap((chord) => chord.split(" "));
 
@@ -566,6 +560,9 @@ function App() {
       const chordDuration = secondsPerBar; // Fixed duration for each chord
       const totalTime = uniqueChords.length * chordDuration;
 
+      // Set the preview playing song immediately to avoid lag
+      setPreviewPlayingSong(song.filename);
+
       uniqueChords.forEach((chord, index) => {
         const chordTime = index * chordDuration;
         const midiNotes = getMidiNotesForChord(chord);
@@ -590,22 +587,31 @@ function App() {
     [sampler]
   );
 
-  const handleSongPreviewHover = useCallback(
+  const handleSongPreviewLeave = useCallback(() => {
+    setPreviewPlayingSong(null);
+    setPreviewCurrentChordIndex(null);
+    Tone.Transport.stop();
+    Tone.Transport.cancel();
+  }, []);
+
+  const handleSongHover = useCallback(
     (song: Song) => {
+      handleMouseEnter(song.filename);
       if (!sampler) return;
 
       setPreviewPlayingSong(song.filename);
       playPreview(song);
     },
-    [sampler, playPreview]
+    [sampler, playPreview, handleMouseEnter]
   );
 
-  const handleSongPreviewLeave = useCallback(() => {
-    setPreviewPlayingSong(null);
-    setPreviewCurrentChordIndex(null);
-    Tone.Transport.stop();
-    Tone.Transport.cancel();
-  }, []);
+  const handleSongLeave = useCallback(
+    (filename: string) => {
+      handleMouseLeave(filename);
+      handleSongPreviewLeave();
+    },
+    [handleMouseLeave, handleSongPreviewLeave]
+  );
 
   const renderSongList = () => {
     const songsByChordCount: { [key: number]: Song[] } = {};
@@ -651,21 +657,18 @@ function App() {
                   {songs.map((song) => (
                     <SongItem
                       key={song.filename}
-                      onMouseEnter={() => handleMouseEnter(song.filename)}
-                      onMouseLeave={() => handleMouseLeave(song.filename)}
+                      onMouseEnter={() => handleSongHover(song)}
+                      onMouseLeave={() => handleSongLeave(song.filename)}
                     >
                       <SongLink
                         href={`#${song.filename}`}
                         onClick={() => handleSongClick(song.filename)}
                       >
                         {song.Title}
                       </SongLink>
-                      <VolumeIcon
+                      <SongPreview
                         isPlaying={previewPlayingSong === song.filename}
-                        onMouseEnter={() => handleSongPreviewHover(song)}
-                        onMouseLeave={handleSongPreviewLeave}
-                      />
-                      <SongPreview>
+                      >
                         {(hoveredSongs[song.filename] ||
                           previewPlayingSong === song.filename ||
                           autoPreviewSongs.includes(song.filename) ||