ok

src/components/MusicPlayer.css

@@ -123,7 +123,7 @@
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
   position: relative;
-  max-height: 400px;
+  max-height: 462px;
   /* Adjust the max-height as needed */
   overflow-y: auto;
   /* Allow vertical scrolling */

src/components/MusicPlayer.js

@@ -108,7 +108,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
           //   setSubtitleColor("white");
           //   setSubtitleBG("black");
           // }
-          const proxiedUrl = `https://test.api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
+          const proxiedUrl = `https://api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
 
           setBackgroundImage(proxiedUrl);
         } catch (error) {
@@ -413,6 +413,11 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     }, 1000); // 1 second timeout (same as the CSS transition duration)
   };
 
+  const handleFocus = () => {
+    console.log(user)
+    if(user.length == 0) setModal("message", { captMessage: 'Silahkan lakukan transaksi' }, null, null);
+  };
+
   return (
     <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
       <div
@@ -506,6 +511,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 placeholder="Cari musik..."
                 value={songName}
                 onChange={handleInputChange}
+                onFocus={handleFocus} // Detect when input is focused
                 className={clicked ? 'clicked' : ''}
               />
             </div>