ok

src/components/MusicPlayer.js

@@ -3,7 +3,7 @@ import "./MusicPlayer.css";
 import MusicComponent from "./MusicComponent";
 import Switch from "react-switch";
 
-export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLogin, queue }) {
+export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLogin, queue, setModal }) {
   const [currentTime, setCurrentTime] = useState(0);
   const [trackLength, setTrackLength] = useState(0);
   const [viewing, setViewing] = useState(false); // State for expansion
@@ -83,6 +83,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     //   });
     // };
 
+    const modifyUrl = (url) => {
+      return url.replace(/w\d+-h\d+/, "w255-h255");
+    };
+
     const fetchColor = async () => {
       if (
         currentSong &&
@@ -104,7 +108,9 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
           //   setSubtitleColor("white");
           //   setSubtitleBG("black");
           // }
-          setBackgroundImage(imageUrl);
+          const proxiedUrl = `https://dev.api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
+
+          setBackgroundImage(proxiedUrl);
         } catch (error) {
           console.error("Error fetching or processing image:", error);
         }
@@ -279,6 +285,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     if (socket != null && token) {
       socket.emit("songRequest", { token, shopId, track });
       setSongName("");
+      console.log(track)
     }
   };
 
@@ -401,17 +408,12 @@ 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(${modifyUrl(backgroundImage)})` }}
+        style={{ backgroundImage: `url(${backgroundImage})` }}
       // style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
       >
         {/* <video
@@ -485,6 +487,11 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
 
                   </div>
                 </div>
+                <div className="auth-box" style={{marginTop: '-11px'}} onClick={()=>setModal('player-prompt')}>
+                  <div>
+                  Filter jenis musik dengan AI
+                  </div>
+                </div>
               </>
             )}
             <div className="search-box">