ok

src/components/MusicPlayer.js

@@ -6,6 +6,7 @@ import MusicComponent from "./MusicComponent";
 export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
   const [currentTime, setCurrentTime] = useState(0);
   const [trackLength, setTrackLength] = useState(0);
+  const [viewing, setViewing] = useState(false); // State for expansion
   const [expanded, setExpanded] = useState(false); // State for expansion
 
   const [songName, setSongName] = useState("");
@@ -251,6 +252,9 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
     return `${minutes}:${formattedSeconds}`;
   };
 
+  const toggleView = () => {
+    setViewing(!viewing);
+  };
   const toggleExpand = () => {
     setExpanded(!expanded);
   };
@@ -263,9 +267,47 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
     }
   }, [expanded]);
 
+
+  const [text, setText] = useState("Awaiting the next hit");
+  const textIndex = useRef(0);
+  const [messages, setMessages] = useState(["Awaiting the next hit", "Click to request your fav song"]);
+
+
+  useEffect(() => {
+    // Update the messages based on currentSong
+    const newMessages = [
+      currentSong != null && currentSong.item != undefined
+        ? `${currentSong.item.artists[0].name} - ${currentSong.item.name}`
+        : "Awaiting the next hit",
+      "Click to request your fav song"
+    ];
+
+    setMessages(newMessages);
+    setText(newMessages[0]); // Update the text state to the first message
+
+    const element = document.querySelector('.animated-text');
+
+    // Check if the element exists before adding the event listener
+    if (element) {
+      const handleAnimationIteration = () => {
+        // Toggle between the two text values based on the current index
+        textIndex.current = (textIndex.current + 1) % messages.length;
+        setText(messages[textIndex.current]);
+      };
+
+      element.addEventListener('animationiteration', handleAnimationIteration);
+
+      return () => {
+        element.removeEventListener('animationiteration', handleAnimationIteration);
+      };
+    }
+  }, [currentSong]); // Run effect when currentSong changes
+
+
   return (
-    <div className={`music-player ${expanded ? "expanded" : ""}`}>
+    <div className={`music-player`}  style={{ marginBottom: `${viewing? '-10px' : ''}` }}>
       <div
+       onClick={toggleView}
         className="current-bgr"
         style={{ backgroundImage: `url(${backgroundImage})` }}
       >
@@ -286,44 +328,50 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
         ))}
       </div>
 
-      <div className="current-info">
-        <div className="current-name">
+      <div className="current-info" >
+        <div 
+      className={`current-name ${viewing? '' : 'animated-text'}`} style={{margin:`${viewing? '35px 30px' : '13px 30px'}`}}>
           {currentSong.item && currentSong.item.name
-            ? currentSong.item.name
-            : "Awaiting the next hit"}
+            ? (viewing? currentSong.item.name:text)
+            : 
+            viewing? messages[0]:text}
         </div>
-        <div className="current-artist">
-          {currentSong.item &&
-          currentSong.item.album &&
-          currentSong.item.album.images[0] &&
-          currentSong.item.artists[0].name
-            ? currentSong.item.artists[0].name
-            : "Drop your hits below"}
-        </div>
-        <div className="progress-container">
-          <div
-            className="current-time"
-            style={{ visibility: currentSong.item ? "visible" : "hidden" }}
-          >
-            {formatTime(currentTime)}
+        {viewing && <>
+          <div className="current-artist">
+            {currentSong.item &&
+              currentSong.item.album &&
+              currentSong.item.album.images[0] &&
+              currentSong.item.artists[0].name
+              ? currentSong.item.artists[0].name
+              : "Drop your hits below"}
           </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 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 &&
+      <>
       <div
         className={`expandable-container ${expanded ? "expanded" : ""}`}
         ref={expandableContainerRef}
@@ -390,15 +438,16 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
       <div className="expand-button" onClick={toggleExpand}>
         <h5>
           {expanded
-            ? "collapse"
+            ? "︿"
             : currentSong.item &&
-                currentSong.item.album &&
-                currentSong.item.album.images[0] &&
-                currentSong.item.artists[0]
+              currentSong.item.album &&
+              currentSong.item.album.images[0] &&
+              currentSong.item.artists[0]
               ? "expand"
               : "request your song"}
         </h5>
-      </div>
+      </div></>
+}
     </div>
   );
 }