ok

src/components/MusicPlayer.js

@@ -28,6 +28,11 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
   const [subtitleBG, setSubtitleBG] = useState("white");
   const [backgroundImage, setBackgroundImage] = useState("");
 
+
+  const [videoSrc, setVideoSrc] = useState('');
+  const videoRef = useRef(null);
+
+
   useEffect(() => {
     const getDominantColor = async (imageSrc) => {
       return new Promise((resolve, reject) => {
@@ -144,6 +149,40 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
     };
   }, [socket]);
 
+  // useEffect for setting up the socket listener
+  useEffect(() => {
+    const handleUpdateCanvas = (response) => {
+      if (response) {
+
+        fetch(response)
+          .then((response) => response.blob())
+          .then((blob) => {
+            const blobUrl = URL.createObjectURL(blob);
+            setVideoSrc(blobUrl);
+
+            if (videoRef.current) {
+              videoRef.current.load(); // Reload the video element
+            }
+          })
+          .catch((error) => console.error('Error loading video:', error));
+      }
+      else{
+        setVideoSrc('');
+        if (videoRef.current) {
+          videoRef.current.load(); // Reload the video element
+        }
+      }
+    };
+
+    // Listen for the "updateCanvas" event
+    socket.on("updateCanvas", handleUpdateCanvas);
+
+    // Clean up the socket listener when the component is unmounted
+    return () => {
+      socket.off("updateCanvas", handleUpdateCanvas);
+    };
+  }, [socket]);
+
   useEffect(() => {
     // Simulate progress every 100ms
     const interval = setInterval(() => {
@@ -308,39 +347,47 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
 
 
   return (
-    <div className={`music-player`}  style={{ marginBottom: `${viewing? '-10px' : ''}` }}>
+    <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
       <div
-       onClick={toggleView}
+        onClick={toggleView}
         className="current-bgr"
-        style={{ backgroundImage: `url(${backgroundImage})` }}
+        style={{ backgroundImage: `url(${videoSrc != ""? '':backgroundImage})` }}
       >
-        {currentLines.past.map((line, index) => (
-          <div className="past" style={{ color: subtitleColor, 
-            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
-            <p>{line.words}</p>
-          </div>
-        ))}
+        <video
+          ref={videoRef}
+          autoPlay
+          loop
+          playsInline
+          muted
+          style={{ height: '100%', width: '100%', objectFit: 'cover', position:'absolute', top:0,right:0,zIndex:-1}}
+        >
+          {videoSrc && <source src={videoSrc} type="video/mp4" />}
+        </video>
         {currentLines.present.map((line, index) => (
-          <div className="present"  style={{ color: subtitleColor, 
-            textShadow: `2px 2px 2px ${subtitleBG}`, }} 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, 
-            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
+          <div className="future" style={{
+            color: subtitleColor,
+            textShadow: `2px 2px 2px ${subtitleBG}`,
+          }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
       </div>
 
       <div className="current-info" >
-        <div 
-      className={`current-name ${viewing? '' : 'animated-text'}`} style={{margin:`${viewing? '35px 30px' : '13px 30px'}`}}>
+        <div
+          className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
           {currentSong.item && currentSong.item.name
-            ? (viewing? currentSong.item.name:text)
-            : 
-            viewing? messages[0]:text}
+            ? (viewing ? currentSong.item.name : text)
+            :
+            viewing ? messages[0] : text}
         </div>
         {viewing && <>
           <div className="current-artist">
@@ -377,78 +424,78 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
         }
       </div>
       {viewing &&
-      <>
-      <div
-        className={`expandable-container ${expanded ? "expanded" : ""}`}
-        ref={expandableContainerRef}
-      >
-        {user.cafeId != null && user.cafeId == shopId && (
-          <div className="auth-box">
-            <input
-              type="text"
-              placeholder={
-                isSpotifyNeedLogin ? "Login Spotify" : "Logout Spotify"
-              }
-              onClick={handleSpotifyAuth}
-            />
-          </div>
-        )}
-        <div className="search-box">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            className="search-icon"
+        <>
+          <div
+            className={`expandable-container ${expanded ? "expanded" : ""}`}
+            ref={expandableContainerRef}
           >
-            <path d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z" />
-          </svg>
-          <input
-            type="text"
-            placeholder="Search..."
-            value={songName}
-            onChange={handleInputChange}
-          />
-        </div>
+            {user.cafeId != null && user.cafeId == shopId && (
+              <div className="auth-box">
+                <input
+                  type="text"
+                  placeholder={
+                    isSpotifyNeedLogin ? "Login Spotify" : "Logout Spotify"
+                  }
+                  onClick={handleSpotifyAuth}
+                />
+              </div>
+            )}
+            <div className="search-box">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                className="search-icon"
+              >
+                <path d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z" />
+              </svg>
+              <input
+                type="text"
+                placeholder="Search..."
+                value={songName}
+                onChange={handleInputChange}
+              />
+            </div>
 
-        {songName != "" &&
-          songs.map((song, index) => (
-            <MusicComponent
-              key={index}
-              song={song}
-              min={0}
-              max={100}
-              onDecision={(e) => onRequest(song.trackId)}
-            />
-          ))}
-        {songName == "" &&
-          queue.length > 0 &&
-          queue.map((song, index) => (
-            <MusicComponent
-              key={index}
-              song={song}
-              min={-100}
-              max={100}
-              onDecision={(vote) => onDecision(song.trackId, vote)}
-            />
-          ))}
-        {songName == "" && queue.length < 1 && (
-          <div className="rectangle">
-            <div className="diagonal-text">No Beats Ahead - Drop Your Hits</div>
+            {songName != "" &&
+              songs.map((song, index) => (
+                <MusicComponent
+                  key={index}
+                  song={song}
+                  min={0}
+                  max={100}
+                  onDecision={(e) => onRequest(song.trackId)}
+                />
+              ))}
+            {songName == "" &&
+              queue.length > 0 &&
+              queue.map((song, index) => (
+                <MusicComponent
+                  key={index}
+                  song={song}
+                  min={-100}
+                  max={100}
+                  onDecision={(vote) => onDecision(song.trackId, vote)}
+                />
+              ))}
+            {songName == "" && queue.length < 1 && (
+              <div className="rectangle">
+                <div className="diagonal-text">No Beats Ahead - Drop Your Hits</div>
+              </div>
+            )}
+            {songName == "" && queue.length > 0 && queue.length < 3 && (
+              <div className="rectangle">
+                <div className="diagonal-text">Drop Your Hits</div>
+              </div>
+            )}
           </div>
-        )}
-        {songName == "" && queue.length > 0 && queue.length < 3 && (
-          <div className="rectangle">
-            <div className="diagonal-text">Drop Your Hits</div>
-          </div>
-        )}
-      </div>
-      <div className="expand-button" onClick={toggleExpand}>
-        <h5>
-          {expanded
-            ? "︿"
-            : "request your song"}
-        </h5>
-      </div></>
-}
+          <div className="expand-button" onClick={toggleExpand}>
+            <h5>
+              {expanded
+                ? "︿"
+                : "request your song"}
+            </h5>
+          </div></>
+      }
     </div>
   );
 }