ok

2025-01-09 10:40:39 +07:00
parent 309c122824
commit 73de85e295
6 changed files with 103 additions and 54 deletions
--- a/src/components/ItemTypeLister.js
+++ b/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,
--- a/src/components/MusicComponent.css
+++ b/src/components/MusicComponent.css
@@ -10,6 +10,7 @@

 .decisionbgrnd {
  position: absolute;
+  overflow: hidden;
  height: 90%;
  width: 200vw;
  transform: scale(1.01,1.194);
--- a/src/components/MusicComponent.js
+++ b/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" }}>
-                <h1 className="decision">{song[4] ? "next up" : "skipped"}</h1></div>}
+            {song[3] && song[5] !== true ? <div className="decisionbgrnd" style={{ backgroundColor: song[4] ? "green" : "red" }}>
+                <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}
--- a/src/components/MusicPlayer.css
+++ b/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 {
-  color: white; /* Placeholder text color */
-  font-weight: bold;
-  opacity: 0.7; /* Optional: Adjust visibility */
-  text-align: center;
+.config-box {
+  display: flex;
+  align-items: center;
+  padding: 10px;
 }
-
-.auth-box .auth-icon {
-  margin-right: 5px;
-  color: #888;
-  font-size: 20px;
-  /* Adjust icon size */
-  cursor: pointer;
-  /* Change cursor to pointer on hover */
-  width: 24px;
-  /* Set width for icon */
-  height: 24px;
-  /* Set height for icon */
-  fill: #888;
-  /* Adjust fill color */
+.config-box > div:first-child {
+  flex-grow: 1;
+  border: none;
+  border-radius: 25px; /* Round the corners */
+  padding: 4px 15px;
+  font-size: 16px;
+  outline: none;
+  background-color: #019863; /* Set background color */
+  display: flex;
+  align-items: center;
+  margin-top: -11px;
 }
 .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 {
--- a/src/components/MusicPlayer.js
+++ b/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"
@@ -388,8 +404,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
  function modifyUrl(url) {
    // Use a regular expression to find the part of the URL that starts with '='
    return url.replace(/=(w\d+)-(h\d+)-/, '=w255-h255-');
-}
-  
+  }
+
  return (
    <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
      <div
@@ -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
-                  type="text"
-                  placeholder={
-                    isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player"
-                  }
-                  onClick={handleSetPlayer}
-                />
-              </div>
+              <>
+                <div className="auth-box">
+                  <div
+                    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,15 +532,36 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                queue &&
                Array.isArray(queue) &&
                queue.length > 0 && (
-                  queue.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)}
-                    />
-                  ))
+                  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}
+                        min={song[3] ? 0 : -100}
+                        max={song[3] ? 0 : 100}
+                        onDecision={(vote) => onDecision(song[0].trackId, vote)}
+                      />
+                    ))
                )
              }
              {/* {songName == "" && queue && queue.length > 0 && queue.length < 3 && (