ok

src/App.js

@@ -265,9 +265,9 @@ function App() {
       navigate("/guest-side");
     });
 
-    socket.on("updateQueue", (response) => {
+    socket.on("updateQueue", ({queue}) => {
-      setQueue(response); // Only set the queue if it's a valid non-empty array
+      setQueue(queue); // Only set the queue if it's a valid non-empty array
-      console.log("Updated Queue:", response); // Log the valid queue
+      console.log("Updated Queue:", queue); // Log the valid queue
 
     });
 

src/components/ItemTypeLister.js

@@ -5,6 +5,7 @@ import ItemType from "./ItemType";
 import { createItem, createItemType } from "../helpers/itemHelper.js";
 import { getImageUrl } from "../helpers/itemHelper";
 import ItemLister from "./ItemLister";
+
 const ItemTypeLister = ({
   shopId,
   shopOwnerId,

src/components/MusicComponent.css

@@ -10,6 +10,7 @@
 
 .decisionbgrnd {
   position: absolute;
+  overflow: hidden;
   height: 90%;
   width: 200vw;
   transform: scale(1.01,1.194);

src/components/MusicComponent.js

@@ -121,8 +121,13 @@ const MusicComponent = ({ song, min, max, onDecision }) => {
             onTouchEnd={handleTouchEnd}
             style={{ transform: `translateX(${positionX}px)` }}
             ref={containerRef}>
-            {song[3] && <div className="decisionbgrnd" style={{ backgroundColor: song[4] ? "green" : "red" }}>
+            {song[3] && song[5] !== true ? <div className="decisionbgrnd" style={{ backgroundColor: song[4] ? "green" : "red" }}>
-                <h1 className="decision">{song[4] ? "next up" : "skipped"}</h1></div>}
+                <h1 className="decision">{song[4] ? "next up" :  "skipped"}</h1></div> 
+                :
+                
+                <div className="decisionbgrnd" style={{ backgroundColor: song[4] ? "green" : (song[3] ? "lightblue" : 'none') }}>
+                <h1 className="decision">rekomendasi</h1></div>}
+
             <div className="bgrnd" style={{ backgroundColor: backgroundColor }}></div>
             <img
                 src={song[0]?.image || song.image}

src/components/MusicPlayer.css

@@ -130,7 +130,7 @@
 }
 
 .expandable-container > div:first-child {
-  padding-top: 21px;
+  padding-top: 20px;
   
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
@@ -238,7 +238,7 @@
   padding: 10px;
 }
 
-.auth-box input[type="text"] {
+.auth-box div {
   flex-grow: 1;
   border: none;
   border-radius: 25px;
@@ -250,30 +250,26 @@
   /* Remove default outline */
 }
 
-.auth-box input[type="text"]::placeholder {
+.config-box {
-  color: white; /* Placeholder text color */
+  display: flex;
-  font-weight: bold;
+  align-items: center;
-  opacity: 0.7; /* Optional: Adjust visibility */
+  padding: 10px;
-  text-align: center;
 }
-
+.config-box > div:first-child {
-.auth-box .auth-icon {
+  flex-grow: 1;
-  margin-right: 5px;
+  border: none;
-  color: #888;
+  border-radius: 25px; /* Round the corners */
-  font-size: 20px;
+  padding: 4px 15px;
-  /* Adjust icon size */
+  font-size: 16px;
-  cursor: pointer;
+  outline: none;
-  /* Change cursor to pointer on hover */
+  background-color: #019863; /* Set background color */
-  width: 24px;
+  display: flex;
-  /* Set width for icon */
+  align-items: center;
-  height: 24px;
+  margin-top: -11px;
-  /* Set height for icon */
-  fill: #888;
-  /* Adjust fill color */
 }
 .rectangle {
   position: relative;
-  height: 200px;
+  min-height: 200px;
   overflow: hidden;
   border: 3px dashed #fbebcd;
   border-radius: 11px 11px 0 0;
@@ -291,7 +287,7 @@
   text-align: center;
   font-family: Arial, sans-serif; /* Optional font */
   color: #333; /* Optional text color */
-  margin-bottom: 0.5rem; /* Add spacing between text and button */
+  margin: 25px;
 }
 
 .bold-text {

src/components/MusicPlayer.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
-import API_BASE_URL from "../config.js";
 import "./MusicPlayer.css";
 import MusicComponent from "./MusicComponent";
+import Switch from "react-switch";
 
 export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLogin, queue }) {
   const [currentTime, setCurrentTime] = useState(0);
@@ -14,6 +14,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   const [currentSong, setCurrentSong] = useState([]);
   const [songs, setSongs] = useState([]);
   const [paused, setPaused] = useState([]);
+  const [getRecommendedMusic, setGetRecommendedMusic] = useState(false);
 
   const [lyrics, setLyrics] = useState([]);
   const [currentLines, setCurrentLines] = useState({
@@ -87,7 +88,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
         currentSong &&
         currentSong[0]?.image
       ) {
-        const imageUrl = currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM' ? currentSong[0].image : '';
+        const imageUrl = currentSong[0]?.trackId != 'kCGs5_oCtBE' && currentSong[0]?.trackId != 'O8eYd7oAZtA' ? currentSong[0].image : '';
         try {
           // const dominantColor = await getDominantColor(imageUrl);
           // // Calculate luminance (YIQ color space) to determine if subtitle should be black or white
@@ -149,6 +150,12 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
       });
     });
 
+    socket.on("updateQueue", ({ getRecommendedMusic }) => {
+      if (getRecommendedMusic == undefined) return; 
+      setGetRecommendedMusic(getRecommendedMusic); // Only set the queue if it's a valid non-empty array
+      console.log("Updated config:", getRecommendedMusic); // Log the valid queue
+    });
+
     return () => {
       socket.off("searchResponse");
     };
@@ -248,6 +255,15 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
     };
   }, [songName]);
 
+  const changeIsGetRecommendedMusic = () => {
+    const isGetRecommendedMusic = !getRecommendedMusic;
+    setGetRecommendedMusic(isGetRecommendedMusic)
+    const token = localStorage.getItem("auth");
+    if (socket != null && token) {
+      socket.emit("configPlayer", { token, shopId, getRecommendedMusic: isGetRecommendedMusic });
+    }
+  }
+
   useEffect(() => {
     if (socket != null && debouncedSongName) {
       socket.emit("searchRequest", { shopId, songName: debouncedSongName });
@@ -345,7 +361,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
   useEffect(() => {
     // Update the messages based on currentSong
     const newMessages = [
-      currentSong != null && currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM' && currentSong[0]?.name != undefined
+      currentSong != null && currentSong[0]?.trackId != 'kCGs5_oCtBE' && currentSong[0]?.trackId != 'O8eYd7oAZtA' && currentSong[0]?.name != undefined
         ? `${currentSong[0]?.name} - ${currentSong[0]?.artist}`
         : "Menunggu musik favoritmu",
       "Klik untuk putar musik favoritmu"
@@ -430,7 +446,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
         <div
           className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
           {currentSong && currentSong[0]?.name
-            ? (viewing && currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM' ? currentSong[0]?.name : text)
+            ? (viewing && currentSong[0]?.trackId != 'kCGs5_oCtBE' && currentSong[0]?.trackId != 'O8eYd7oAZtA' ? currentSong[0]?.name : text)
             :
             viewing ? messages[0] : text}
         </div>
@@ -438,7 +454,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
           <div className="current-artist">
             {
               currentSong &&
-                currentSong[0]?.artist && currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM' 
+                currentSong[0]?.artist && currentSong[0]?.trackId != 'kCGs5_oCtBE' && currentSong[0]?.trackId != 'O8eYd7oAZtA'
                 ? currentSong[0]?.artist
                 : "Pilih hits terbaikmu dibawah!"}
           </div>
@@ -452,15 +468,24 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
             ref={expandableContainerRef}
           >
             {user.cafeId == shopId || user.userId == shopOwnerId && (
+              <>
                 <div className="auth-box">
-                <input
+                  <div
-                  type="text"
-                  placeholder={
-                    isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player"
-                  }
                     onClick={handleSetPlayer}
-                />
+                  >{isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player"}</div>
                 </div>
+                <div className="config-box">
+                  <div
+                  >
+                    Dapatkan rekomendasi musik &nbsp;
+                    <div><Switch
+                      onChange={() => changeIsGetRecommendedMusic()}
+                      checked={getRecommendedMusic}
+                    /></div>
+
+                  </div>
+                </div>
+              </>
             )}
             <div className="search-box">
               <input
@@ -480,7 +505,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 justifyContent: songName === "" && queue && queue.length > 0 && queue.length < 3 || songName != '' ? 'flex-start' : 'center'
               }}
             >
-              {songName == "" && queue && queue.length < 1 && (
+              {(songName == "" && queue && queue.length < 2 || (queue[0] != undefined && queue.length < 1 && queue[0][5]) == true) && (
                 <div className="middle-text">
                   <span className="bold-text">Antrian kosong</span><br />
                   <span className="normal-text">Pilih musikmu</span>
@@ -507,7 +532,28 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                 queue &&
                 Array.isArray(queue) &&
                 queue.length > 0 && (
-                  queue.map((song, index) => (
+                  queue
+                    .filter(song => song[5] !== true) // Filter out songs where song[5] is true or undefined
+                    .map((song, index) => (
+                      <MusicComponent
+                        key={index}
+                        song={song}
+                        min={song[3] ? 0 : -100}
+                        max={song[3] ? 0 : 100}
+                        onDecision={(vote) => onDecision(song[0].trackId, vote)}
+                      />
+                    ))
+                )
+              }
+
+              {
+                songName === "" &&
+                queue &&
+                Array.isArray(queue) &&
+                queue.length > 0 && (
+                  queue
+                    .filter(song => song[5] === true) // Filter out songs where song[5] is true or undefined
+                    .map((song, index) => (
                       <MusicComponent
                         key={index}
                         song={song}