kediritechnopark/groovee
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

98
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,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 && (