ok

src/App.js

@@ -421,6 +421,7 @@ function App() {
                   guestSideOfClerk={guestSideOfClerk}
                   removeConnectedGuestSides={rmConnectedGuestSides}
                   setModal={setModal} // Pass the function to open modal
+                  loading={shop.name==null}
                 />
                 <Footer
                   showTable={true}

src/components/Header.js

@@ -20,7 +20,7 @@ const Title = styled.h2`
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 32px;
+  font-size: 6vw;
   color: rgba(88, 55, 50, 1);
 `;
 
@@ -91,6 +91,7 @@ const ProfileImage = styled.img`
   width: 60px;
   height: 60px;
   border-radius: 50%;
+  object-fit: contain;
   cursor: pointer;
   z-index: 199;
   animation: ${(props) => {

src/components/Item.module.css

@@ -5,7 +5,6 @@
 }
 
 .item {
-  border-top: 2px solid #00000017;
   display: flex;
   align-items: stretch;
   justify-content: space-between;
@@ -20,7 +19,9 @@
   padding-top: 10px;
   margin-bottom: -3px;
 }
-
+.item:not(.itemInvoice) {
+  border-top: 2px solid #00000017;
+}
 .itemInvoice {
   flex-direction: row;
   align-items: center;

src/components/ItemLister.module.css

@@ -90,8 +90,8 @@
   z-index: 100;
   background-color: #0000008c;
   width: 100%;
-  top: 0;
-  bottom: 0;
+  top: 7px;
+  bottom: -10px;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/MusicPlayer.css

@@ -147,7 +147,7 @@
 }
 
 .expand-button:hover {
-  background-color: rgb(29, 185, 84);
+  background-color: #73a585;
 }
 
 /* Adjust height of the music player container when expanded */

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,27 +347,35 @@ 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}
         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>
         ))}
@@ -336,11 +383,11 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
 
       <div className="current-info" >
         <div
-      className={`current-name ${viewing? '' : 'animated-text'}`} style={{margin:`${viewing? '35px 30px' : '13px 30px'}`}}>
+          className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
           {currentSong.item && currentSong.item.name
-            ? (viewing? currentSong.item.name:text)
+            ? (viewing ? currentSong.item.name : text)
             :
-            viewing? messages[0]:text}
+            viewing ? messages[0] : text}
         </div>
         {viewing && <>
           <div className="current-artist">
@@ -448,7 +495,7 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
                 : "request your song"}
             </h5>
           </div></>
-}
+      }
     </div>
   );
 }

src/config.js

@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = 'https://9qc65z-5000.csb.app';
+const API_BASE_URL = 'https://api.kedaimaster.com';
 
 export default API_BASE_URL;

src/pages/CafePage.js

@@ -38,6 +38,7 @@ function CafePage({
   guestSideOfClerk,
   removeConnectedGuestSides,
   setModal,
+  loading,
 }) {
   const location = useLocation();
   const [searchParams] = useSearchParams();
@@ -47,7 +48,6 @@ function CafePage({
 
   const navigate = useNavigate();
 
-  const [loading, setLoading] = useState(true);
   const [screenMessage, setScreenMessage] = useState("");
 
   const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(true);
@@ -117,7 +117,6 @@ function CafePage({
       socket.on("joined-room", (response) => {
         const { isSpotifyNeedLogin } = response;
         setNeedSpotifyLogin(isSpotifyNeedLogin);
-        setLoading(false);
       });
     }
 

src/pages/WelcomePage.css

@@ -20,7 +20,7 @@
 .circular-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .welcoming-text {