From 73de85e295302d90acab41ac5572ae9fb9b7f72e Mon Sep 17 00:00:00 2001 From: zadit <75159257+insvrgent@users.noreply.github.com> Date: Thu, 9 Jan 2025 10:40:39 +0700 Subject: [PATCH] ok --- src/App.js | 6 +- src/components/ItemTypeLister.js | 1 + src/components/MusicComponent.css | 1 + src/components/MusicComponent.js | 9 ++- src/components/MusicPlayer.css | 42 ++++++------- src/components/MusicPlayer.js | 98 +++++++++++++++++++++++-------- 6 files changed, 103 insertions(+), 54 deletions(-) diff --git a/src/App.js b/src/App.js index 63490b2..57cf6a6 100644 --- a/src/App.js +++ b/src/App.js @@ -265,9 +265,9 @@ function App() { navigate("/guest-side"); }); - socket.on("updateQueue", (response) => { - setQueue(response); // Only set the queue if it's a valid non-empty array - console.log("Updated Queue:", response); // Log the valid queue + socket.on("updateQueue", ({queue}) => { + setQueue(queue); // Only set the queue if it's a valid non-empty array + console.log("Updated Queue:", queue); // Log the valid queue }); diff --git a/src/components/ItemTypeLister.js b/src/components/ItemTypeLister.js index 17423c6..7f62cc1 100644 --- 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, diff --git a/src/components/MusicComponent.css b/src/components/MusicComponent.css index 9e53010..d39cf8a 100644 --- 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); diff --git a/src/components/MusicComponent.js b/src/components/MusicComponent.js index 75d5394..e809487 100644 --- 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] &&
-

{song[4] ? "next up" : "skipped"}

} + {song[3] && song[5] !== true ?
+

{song[4] ? "next up" : "skipped"}

+ : + +
+

rekomendasi

} +
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 { diff --git a/src/components/MusicPlayer.js b/src/components/MusicPlayer.js index 779e226..edb1107 100644 --- 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 (
{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}
@@ -438,7 +454,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
{ 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!"}
@@ -452,15 +468,24 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo ref={expandableContainerRef} > {user.cafeId == shopId || user.userId == shopOwnerId && ( -
- -
+ <> +
+
{isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player"}
+
+
+
+ Dapatkan rekomendasi musik   +
changeIsGetRecommendedMusic()} + checked={getRecommendedMusic} + />
+ +
+
+ )}
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) && (
Antrian kosong
Pilih musikmu @@ -507,15 +532,36 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo queue && Array.isArray(queue) && queue.length > 0 && ( - queue.map((song, index) => ( - onDecision(song[0].trackId, vote)} - /> - )) + queue + .filter(song => song[5] !== true) // Filter out songs where song[5] is true or undefined + .map((song, index) => ( + 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) => ( + onDecision(song[0].trackId, vote)} + /> + )) ) } {/* {songName == "" && queue && queue.length > 0 && queue.length < 3 && (