ok

src/components/MusicPlayer.js

@@ -29,6 +29,7 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
   const [backgroundImage, setBackgroundImage] = useState("");
 
 
+  const [canvaz, setCanvaz] = useState('');
   const [videoSrc, setVideoSrc] = useState('');
   const videoRef = useRef(null);
 
@@ -148,40 +149,42 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
       socket.off("searchResponse");
     };
   }, [socket]);
+  
+// useEffect for setting up the socket listener
+useEffect(() => {
+  const handleUpdateCanvas = (response) => {
+    if (response && response !== canvaz) {
+      console.log(response);
+      console.log(canvaz);
+      setCanvaz(response);
+      fetch(response)
+        .then((response) => response.blob())
+        .then((blob) => {
+          const blobUrl = URL.createObjectURL(blob);
+          setVideoSrc(blobUrl);
 
-  // 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));
+          if (videoRef.current) {
+            videoRef.current.load(); // Reload the video element
+          }
+        })
+        .catch((error) => console.error('Error loading video:', error));
+    } else if (!response) {
+      // Clear the video source if response is empty
+      setVideoSrc('');
+      if (videoRef.current) {
+        videoRef.current.load(); // Reload the video element
       }
-      else{
-        setVideoSrc('');
-        if (videoRef.current) {
-          videoRef.current.load(); // Reload the video element
-        }
-      }
-    };
+    }
+  };
 
-    // Listen for the "updateCanvas" event
-    socket.on("updateCanvas", handleUpdateCanvas);
+  // 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]);
+  // Clean up the socket listener when the component is unmounted
+  return () => {
+    socket.off("updateCanvas", handleUpdateCanvas);
+  };
+}, [socket, canvaz]);
 
   useEffect(() => {
     // Simulate progress every 100ms