ok

src/components/MusicPlayer.css

@@ -302,18 +302,19 @@
 .search-button {
   display: block;
   margin: 1rem auto 0;
-
   flex-grow: 1;
   border: none;
   border-radius: 25px;
   padding: 10px 15px;
   font-size: 16px;
   outline: none;
-  background-color: #f4efe6;
+  background-color: #f4efe6; /* Original color */
   color: black;
   font-weight: bold;
+  transition: background-color 1s ease; /* Smoothly transition background color over 1 second */
 }
 
-.search-button:hover {
-  background-color: #0056b3;
+.search-button.clicked {
+  background-color: #d0c7b3; /* The color when clicked */
 }
+

src/components/MusicPlayer.js

@@ -27,6 +27,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   const [subtitleBG, setSubtitleBG] = useState("white");
   const [backgroundImage, setBackgroundImage] = useState("");
 
+  const [clicked, setClicked] = useState(false);
+
 
   const [canvaz, setCanvaz] = useState('');
   const [videoSrc, setVideoSrc] = useState('');
@@ -371,9 +373,16 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   }, [currentSong]); // Run effect when currentSong changes
 
   const handleButtonClick = () => {
+    setClicked(true);
+
     if (inputRef.current) {
       inputRef.current.focus(); // Focus the input when the button is clicked
     }
+
+    // After 1 second, remove the "clicked" class to let the color gradually return to the original
+    setTimeout(() => {
+      setClicked(false);
+    }, 1000); // 1 second timeout (same as the CSS transition duration)
   };
 
   return (
@@ -471,14 +480,14 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 />
               </div>
             )}
-            <div className="search-box"> 
-        <input
-          ref={inputRef} // Attach the ref to the input field
-          type="text"
-          placeholder="Cari musik..."
-          value={songName}
-          onChange={handleInputChange}
-        />
+            <div className="search-box">
+              <input
+                ref={inputRef} // Attach the ref to the input field
+                type="text"
+                placeholder="Cari musik..."
+                value={songName}
+                onChange={handleInputChange}
+              />
             </div>
 
             <div
@@ -486,60 +495,69 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
               style={{
                 justifyContent: songName === "" && queue.length > 0 && queue.length < 3 || songName != '' ? 'flex-start' : 'center'
               }}
-              >
-            {songName == "" && queue.length < 1 && (
-              <div className="middle-text">
-                <span className="bold-text">Antrian kosong</span><br />
-                <span className="normal-text">Pilih musikmu</span>
-                <button className="search-button" onClick={handleButtonClick}>Cari musik</button>
-
-              </div>
-            )}
-            {songName != "" &&
-              songs.map((song, index) => (
-                <MusicComponent
-                  key={index}
-                  song={song}
-                  min={0}
-                  max={100}
-                  onDecision={(e) => onRequest(song)}
-                />
-              ))}
-            {
-              songName === "" &&
-              queue &&
-              Array.isArray(queue) &&
-              queue.length > 0 && (
-                queue.map((song, index) => (
+            >
+              {songName == "" && queue.length < 1 && (
+                <div className="middle-text">
+                  <span className="bold-text">Antrian kosong</span><br />
+                  <span className="normal-text">Pilih musikmu</span>
+                  <button
+                    className={`search-button ${clicked ? 'clicked' : ''}`}
+                    onClick={handleButtonClick}
+                  >
+                    Cari musik
+                  </button>
+                </div>
+              )}
+              {songName != "" &&
+                songs.map((song, index) => (
                   <MusicComponent
                     key={index}
                     song={song}
-                    min={-100}
+                    min={0}
                     max={100}
-                    onDecision={(vote) => onDecision(song.trackId, vote)}
+                    onDecision={(e) => onRequest(song)}
                   />
-                ))
-              )
-            }
-            {songName == "" && queue.length > 0 && queue.length < 3 && (
+                ))}
+              {
+                songName === "" &&
+                queue &&
+                Array.isArray(queue) &&
+                queue.length > 0 && (
+                  queue.map((song, index) => (
+                    <MusicComponent
+                      key={index}
+                      song={song}
+                      min={-100}
+                      max={100}
+                      onDecision={(vote) => onDecision(song.trackId, vote)}
+                    />
+                  ))
+                )
+              }
+              {songName == "" && queue.length > 0 && queue.length < 3 && (
+
+                <div className="middle-text">
+                  <span className="normal-text">Tambahkan musikmu</span>
+                  <button
+                    className={`search-button ${clicked ? 'clicked' : ''}`}
+                    onClick={handleButtonClick}
+                  >
+                    Cari musik
+                  </button>
+                </div>
+              )}
+            </div>
+
+
+
 
-              <div className="middle-text">
-                <span className="normal-text">Tambahkan musikmu</span>
-                <button className="search-button" onClick={handleButtonClick}>Cari musik</button>
-              </div>
-            )}
           </div>
+          <div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
 
-
-
-
-        </div>
-      <div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
-
-        <h5>
-          {expanded ? '⋀' : 'Lihat antrian musik'}
-        </h5>
-      </div></>
+            <h5>
+              {expanded ? '⋀' : 'Lihat antrian musik'}
+            </h5>
+          </div></>
       }
     </div >
   );