kediritechnopark/kedaimaster
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"); 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
}); });

1
src/components/ItemTypeLister.js
View File

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

1
src/components/MusicComponent.css
View File

@@ -10,6 +10,7 @@
.decisionbgrnd { .decisionbgrnd {
position: absolute; position: absolute;
overflow: hidden;
height: 90%; height: 90%;
width: 200vw; width: 200vw;
transform: scale(1.01,1.194); 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} onTouchEnd={handleTouchEnd}
style={{ transform: `translateX(${positionX}px)` }} style={{ transform: `translateX(${positionX}px)` }}
ref={containerRef}> 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> <div className="bgrnd" style={{ backgroundColor: backgroundColor }}></div>
<img <img
src={song[0]?.image || song.image} src={song[0]?.image || song.image}

42
src/components/MusicPlayer.css
View File

@@ -130,7 +130,7 @@
} }
.expandable-container > div:first-child { .expandable-container > div:first-child {
padding-top: 21px; padding-top: 20px;
-webkit-touch-callout: none; /* iOS Safari */ -webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ -webkit-user-select: none; /* Safari */
@@ -238,7 +238,7 @@
padding: 10px; padding: 10px;
} }
.auth-box input[type="text"] { .auth-box div {
flex-grow: 1; flex-grow: 1;
border: none; border: none;
border-radius: 25px; border-radius: 25px;
@@ -250,30 +250,26 @@
/* Remove default outline */ /* 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 { .rectangle {
position: relative; position: relative;
height: 200px; min-height: 200px;
overflow: hidden; overflow: hidden;
border: 3px dashed #fbebcd; border: 3px dashed #fbebcd;
border-radius: 11px 11px 0 0; border-radius: 11px 11px 0 0;
@@ -291,7 +287,7 @@
text-align: center; text-align: center;
font-family: Arial, sans-serif; /* Optional font */ font-family: Arial, sans-serif; /* Optional font */
color: #333; /* Optional text color */ color: #333; /* Optional text color */
margin-bottom: 0.5rem; /* Add spacing between text and button */ margin: 25px;
} }
.bold-text { .bold-text {

98
src/components/MusicPlayer.js
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import API_BASE_URL from "../config.js";
import "./MusicPlayer.css"; import "./MusicPlayer.css";
import MusicComponent from "./MusicComponent"; import MusicComponent from "./MusicComponent";
import Switch from "react-switch";
export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLogin, queue }) { export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLogin, queue }) {
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
@@ -14,6 +14,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
const [currentSong, setCurrentSong] = useState([]); const [currentSong, setCurrentSong] = useState([]);
const [songs, setSongs] = useState([]); const [songs, setSongs] = useState([]);
const [paused, setPaused] = useState([]); const [paused, setPaused] = useState([]);
const [getRecommendedMusic, setGetRecommendedMusic] = useState(false);
const [lyrics, setLyrics] = useState([]); const [lyrics, setLyrics] = useState([]);
const [currentLines, setCurrentLines] = useState({ const [currentLines, setCurrentLines] = useState({
@@ -87,7 +88,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
currentSong && currentSong &&
currentSong[0]?.image 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 { try {
// const dominantColor = await getDominantColor(imageUrl); // const dominantColor = await getDominantColor(imageUrl);
// // Calculate luminance (YIQ color space) to determine if subtitle should be black or white // // 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 () => { return () => {
socket.off("searchResponse"); socket.off("searchResponse");
}; };
@@ -248,6 +255,15 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
}; };
}, [songName]); }, [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(() => { useEffect(() => {
if (socket != null && debouncedSongName) { if (socket != null && debouncedSongName) {
socket.emit("searchRequest", { shopId, songName: debouncedSongName }); socket.emit("searchRequest", { shopId, songName: debouncedSongName });
@@ -345,7 +361,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
useEffect(() => { useEffect(() => {
// Update the messages based on currentSong // Update the messages based on currentSong
const newMessages = [ 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}` ? `${currentSong[0]?.name} - ${currentSong[0]?.artist}`
: "Menunggu musik favoritmu", : "Menunggu musik favoritmu",
"Klik untuk putar musik favoritmu" "Klik untuk putar musik favoritmu"
@@ -388,8 +404,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
function modifyUrl(url) { function modifyUrl(url) {
// Use a regular expression to find the part of the URL that starts with '=' // Use a regular expression to find the part of the URL that starts with '='
return url.replace(/=(w\d+)-(h\d+)-/, '=w255-h255-'); return url.replace(/=(w\d+)-(h\d+)-/, '=w255-h255-');
} }
return ( return (
<div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}> <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
<div <div
@@ -430,7 +446,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
<div <div
className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}> className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
{currentSong && currentSong[0]?.name {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} viewing ? messages[0] : text}
</div> </div>
@@ -438,7 +454,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
<div className="current-artist"> <div className="current-artist">
{ {
currentSong && 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 ? currentSong[0]?.artist
: "Pilih hits terbaikmu dibawah!"} : "Pilih hits terbaikmu dibawah!"}
</div> </div>
@@ -452,15 +468,24 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
ref={expandableContainerRef} ref={expandableContainerRef}
> >
{user.cafeId == shopId || user.userId == shopOwnerId && ( {user.cafeId == shopId || user.userId == shopOwnerId && (
<div className="auth-box"> <>
<input <div className="auth-box">
type="text" <div
placeholder={ onClick={handleSetPlayer}
isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player" >{isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player"}</div>
} </div>
onClick={handleSetPlayer} <div className="config-box">
/> <div
</div> >
Dapatkan rekomendasi musik &nbsp;
<div><Switch
onChange={() => changeIsGetRecommendedMusic()}
checked={getRecommendedMusic}
/></div>
</div>
</div>
</>
)} )}
<div className="search-box"> <div className="search-box">
<input <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' 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"> <div className="middle-text">
<span className="bold-text">Antrian kosong</span><br /> <span className="bold-text">Antrian kosong</span><br />
<span className="normal-text">Pilih musikmu</span> <span className="normal-text">Pilih musikmu</span>
@@ -507,15 +532,36 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
queue && queue &&
Array.isArray(queue) && Array.isArray(queue) &&
queue.length > 0 && ( queue.length > 0 && (
queue.map((song, index) => ( queue
<MusicComponent .filter(song => song[5] !== true) // Filter out songs where song[5] is true or undefined
key={index} .map((song, index) => (
song={song} <MusicComponent
min={song[3]? 0 : -100} key={index}
max={song[3]? 0 : 100} song={song}
onDecision={(vote) => onDecision(song[0].trackId, vote)} 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 && ( {/* {songName == "" && queue && queue.length > 0 && queue.length < 3 && (