ok

src/components/MusicPlayer.css

@@ -77,7 +77,7 @@
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
   /* Text shadow for readability */
   
-  margin-bottom: -47px;
+  margin-bottom: 25px;
 }
 
 .progress-container {
@@ -198,14 +198,19 @@
   flex-grow: 1;
   border: none;
   border-radius: 25px;
-  /* Round the corners */
   padding: 10px 15px;
   font-size: 16px;
   outline: none;
-  /* Remove default outline */
   background-color: #f4efe6;
   text-align: center;
+  transition: background-color 0.3s ease; /* Smooth transition for the effect */
 }
+
+.search-box input[type="text"].clicked {
+  background-color: #d0c7b3; /* The color when clicked */
+}
+
+
 .search-box input[type="text"]::placeholder {
   font-weight: bold;
   opacity: 0.7;

src/components/MusicPlayer.js

@@ -84,11 +84,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
 
     const fetchColor = async () => {
       if (
-        currentSong.item &&
+        currentSong &&
-        currentSong.item.album &&
+        currentSong.image
-        currentSong.item.album.images[0]
       ) {
-        const imageUrl = currentSong.item.album.images[0].url;
+        const imageUrl = currentSong.image;
         try {
           const dominantColor = await getDominantColor(imageUrl);
           // Calculate luminance (YIQ color space) to determine if subtitle should be black or white
@@ -128,10 +127,11 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     });
 
     socket.on("updateCurrentSong", (response) => {
+      console.log(response)
       setCurrentSong(response);
-      setCurrentTime(response.progress_ms / 1000); // Convert milliseconds to seconds
+      // setCurrentTime(response.progress_ms / 1000); // Convert milliseconds to seconds
-      setLyricProgressMs(response.progress_ms);
+      // setLyricProgressMs(response.progress_ms);
-      setTrackLength(convertToMilliseconds(response.item.length));
+      // setTrackLength(convertToMilliseconds(response.item.length));
     });
 
 
@@ -345,8 +345,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   useEffect(() => {
     // Update the messages based on currentSong
     const newMessages = [
-      currentSong != null && currentSong.item != undefined
+      currentSong != null && currentSong != undefined
-        ? `${currentSong.item.artists[0].name} - ${currentSong.item.name}`
+        ? `${currentSong.name} - ${currentSong.artist}`
         : "Menunggu musik favoritmu",
       "Klik untuk putar musik favoritmu"
     ];
@@ -385,12 +385,17 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     }, 1000); // 1 second timeout (same as the CSS transition duration)
   };
 
+  function modifyUrl(url) {
+    // Use a regular expression to find the part of the URL that starts with '='
+    return url.replace(/=(w\d+)-(h\d+)-/, '=w255-h255-');
+}
+  
   return (
     <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
       <div
         onClick={toggleView}
         className="current-bgr"
-        style={{ backgroundImage: `url(${backgroundImage})` }}
+        style={{ backgroundImage: `url(${modifyUrl(backgroundImage)})` }}
       // style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
       >
         {/* <video
@@ -424,43 +429,21 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
       <div className="current-info" >
         <div
           className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
-          {currentSong.item && currentSong.item.name
+          {currentSong && currentSong.name
-            ? (viewing ? currentSong.item.name : text)
+            ? (viewing ? currentSong.name : text)
             :
             viewing ? messages[0] : text}
         </div>
         {viewing && <>
           <div className="current-artist">
-            {currentSong.item &&
+            {
-              currentSong.item.album &&
+              currentSong &&
-              currentSong.item.album.images[0] &&
+                currentSong.image &&
-              currentSong.item.artists[0].name
+                currentSong.artist
-              ? currentSong.item.artists[0].name
+                ? currentSong.artist
-              : "Pilih hits terbaikmu dibawah!"}
+                : "Pilih hits terbaikmu dibawah!"}
           </div>
-          <div className="progress-container">
+        </>
-            <div
-              className="current-time"
-              style={{ visibility: currentSong.item ? "visible" : "hidden" }}
-            >
-              {formatTime(currentTime)}
-            </div>
-            <input
-              type="range"
-              min="0"
-              max={trackLength}
-              value={currentTime}
-              className="progress-bar"
-              style={{ visibility: currentSong.item ? "visible" : "hidden" }}
-              disabled
-            />
-            <div
-              className="track-length"
-              style={{ visibility: currentSong.item ? "visible" : "hidden" }}
-            >
-              {formatTime(trackLength)}
-            </div>
-          </div></>
         }
       </div>
       {viewing &&
@@ -482,21 +465,23 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
             )}
             <div className="search-box">
               <input
-                ref={inputRef} // Attach the ref to the input field
+                ref={inputRef}
                 type="text"
                 placeholder="Cari musik..."
                 value={songName}
                 onChange={handleInputChange}
+                className={clicked ? 'clicked' : ''}
               />
             </div>
 
+
             <div
               className="rectangle"
               style={{
-                justifyContent: songName === "" && queue.length > 0 && queue.length < 3 || songName != '' ? 'flex-start' : 'center'
+                justifyContent: songName === "" && queue && queue.length > 0 && queue.length < 3 || songName != '' ? 'flex-start' : 'center'
               }}
             >
-              {songName == "" && queue.length < 1 && (
+              {songName == "" && queue && queue.length < 1 && (
                 <div className="middle-text">
                   <span className="bold-text">Antrian kosong</span><br />
                   <span className="normal-text">Pilih musikmu</span>
@@ -534,7 +519,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                   ))
                 )
               }
-              {songName == "" && queue.length > 0 && queue.length < 3 && (
+              {songName == "" && queue && queue.length > 0 && queue.length < 3 && (
 
                 <div className="middle-text">
                   <span className="normal-text">Tambahkan musikmu</span>