kediritechnopark/AnythingYouWant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit
2025-01-09 10:40:39 +07:00
parent 309c122824
commit 73de85e295
6 changed files with 103 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@@ -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
});

1
src/components/ItemTypeLister.js
View File

@@ -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,

1
src/components/MusicComponent.css
View File

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

9
src/components/MusicComponent.js
View File

@@ -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}

42
src/components/MusicPlayer.css
View File

@@ -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 {

78
src/components/MusicPlayer.js
View File

@@ -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,7 +404,7 @@ 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' : ''}` }}>
@@ -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"
}
<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,12 +532,33 @@ 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}
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)}
/>
))