ok

src/components/MusicPlayer.js

@@ -25,6 +25,7 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
   const [lyric_progress_ms, setLyricProgressMs] = useState(0);
 
   const [subtitleColor, setSubtitleColor] = useState("black");
+  const [subtitleBG, setSubtitleBG] = useState("white");
   const [backgroundImage, setBackgroundImage] = useState("");
 
   useEffect(() => {
@@ -89,8 +90,10 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
             255;
           if (luminance > 0.5) {
             setSubtitleColor("black");
+            setSubtitleBG("white");
           } else {
             setSubtitleColor("white");
+            setSubtitleBG("black");
           }
           setBackgroundImage(imageUrl);
         } catch (error) {
@@ -312,17 +315,20 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
         style={{ backgroundImage: `url(${backgroundImage})` }}
       >
         {currentLines.past.map((line, index) => (
-          <div className="past" style={{ color: subtitleColor }} key={index}>
+          <div className="past" style={{ color: subtitleColor, 
+            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
         {currentLines.present.map((line, index) => (
-          <div className="present" style={{ color: subtitleColor }} key={index}>
+          <div className="present"  style={{ color: subtitleColor, 
+            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
         {currentLines.future.map((line, index) => (
-          <div className="future" style={{ color: subtitleColor }} key={index}>
+          <div className="future"  style={{ color: subtitleColor, 
+            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
@@ -439,12 +445,7 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
         <h5>
           {expanded
             ? "︿"
-            : currentSong.item &&
-              currentSong.item.album &&
-              currentSong.item.album.images[0] &&
-              currentSong.item.artists[0]
-              ? "expand"
-              : "request your song"}
+            : "request your song"}
         </h5>
       </div></>
 }