ok

src/components/MusicPlayer.js

@@ -284,16 +284,16 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   const handleSetPlayer = () => {
     const token = localStorage.getItem("auth");
 
+    socket.emit("claimPlayer", {
+      token,
+      shopId,
+    });
     if (isSpotifyNeedLogin) {
-      socket.emit("claimPlayer", {
-        token,
-        shopId,
-      });
     } else {
-      socket.emit("unClaimPlayer", {
-        token,
-        shopId,
-      });
+      // socket.emit("unClaimPlayer", {
+      //   token,
+      //   shopId,
+      // });
     }
   };
 
@@ -333,9 +333,9 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   }, [expanded]);
 
 
-  const [text, setText] = useState("Awaiting the next hit");
+  const [text, setText] = useState("Menunggu musik favoritmu");
   const textIndex = useRef(0);
-  const [messages, setMessages] = useState(["Awaiting the next hit", "Click to request your fav song"]);
+  const [messages, setMessages] = useState(["Menunggu musik favoritmu", "Klik untuk putar musik favoritmu"]);
 
 
   useEffect(() => {
@@ -343,8 +343,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     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"
+        : "Menunggu musik favoritmu",
+      "Klik untuk putar musik favoritmu"
     ];
 
     setMessages(newMessages);
@@ -374,9 +374,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
       <div
         onClick={toggleView}
         className="current-bgr"
-        style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
+        style={{ backgroundImage: `url(${backgroundImage})` }}
+      // style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
       >
-        <video
+        {/* <video
           ref={videoRef}
           autoPlay
           loop
@@ -385,7 +386,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
           style={{ height: '100%', width: '100%', objectFit: 'cover', position: 'absolute', top: 0, right: 0, zIndex: -1 }}
         >
           {videoSrc && <source src={videoSrc} type="video/mp4" />}
-        </video>
+        </video> */}
         {currentLines.present.map((line, index) => (
           <div className="present" style={{
             color: subtitleColor,
@@ -419,7 +420,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
               currentSong.item.album.images[0] &&
               currentSong.item.artists[0].name
               ? currentSong.item.artists[0].name
-              : "Drop your hits below"}
+              : "Pilih hits terbaikmu dibawah!"}
           </div>
           <div className="progress-container">
             <div
@@ -457,13 +458,13 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 <input
                   type="text"
                   placeholder={
-                    isSpotifyNeedLogin ? "Set as music player" : "Unset as music player"
+                    isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player"
                   }
                   onClick={handleSetPlayer}
                 />
               </div>
             )}
-            <div className="search-box">
+            <div className="search-box" style={{}}>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -473,7 +474,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
               </svg>
               <input
                 type="text"
-                placeholder="Search..."
+                placeholder="cari..."
                 value={songName}
                 onChange={handleInputChange}
               />
@@ -490,24 +491,24 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 />
               ))}
             {
-  songName === "" &&
-  queue && 
-  Array.isArray(queue) && 
-  queue.length > 0 && (
-    queue.map((song, index) => (
-      <MusicComponent
-        key={index}
-        song={song}
-        min={-100}
-        max={100}
-        onDecision={(vote) => onDecision(song.trackId, vote)}
-      />
-    ))
-  )
-}
+              songName === "" &&
+              queue &&
+              Array.isArray(queue) &&
+              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 className="diagonal-text">Antrian kosong - Pilih musikmu</div>
               </div>
             )}
             {songName == "" && queue.length > 0 && queue.length < 3 && (
@@ -516,11 +517,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
               </div>
             )}
           </div>
-          <div className="expand-button" onClick={toggleExpand}>
+          <div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
+            
             <h5>
-              {expanded
-                ? "︿"
-                : "request your song"}
+                {expanded? '⋀' : 'Lihat antrian musik'}
             </h5>
           </div></>
       }