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-07 18:05:23 +07:00
parent 8e8eab48c1
commit 309c122824
2 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/MusicPlayer.js
View File

@@ -38,71 +38,71 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
useEffect(() => { useEffect(() => {
const getDominantColor = async (imageSrc) => { // const getDominantColor = async (imageSrc) => {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
const img = new Image(); // const img = new Image();
img.crossOrigin = "Anonymous"; // img.crossOrigin = "Anonymous";
img.src = imageSrc; // img.src = imageSrc;
img.onload = () => { // img.onload = () => {
const canvas = document.createElement("canvas"); // const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d"); // const ctx = canvas.getContext("2d");
canvas.width = img.width; // canvas.width = img.width;
canvas.height = img.height; // canvas.height = img.height;
ctx.drawImage(img, 0, 0); // ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData( // const imageData = ctx.getImageData(
0, // 0,
0, // 0,
canvas.width, // canvas.width,
canvas.height, // canvas.height,
).data; // ).data;
const length = imageData.length; // const length = imageData.length;
let totalR = 0, // let totalR = 0,
totalG = 0, // totalG = 0,
totalB = 0; // totalB = 0;
for (let i = 0; i < length; i += 4) { // for (let i = 0; i < length; i += 4) {
totalR += imageData[i]; // totalR += imageData[i];
totalG += imageData[i + 1]; // totalG += imageData[i + 1];
totalB += imageData[i + 2]; // totalB += imageData[i + 2];
} // }
const averageR = Math.round(totalR / (length / 4)); // const averageR = Math.round(totalR / (length / 4));
const averageG = Math.round(totalG / (length / 4)); // const averageG = Math.round(totalG / (length / 4));
const averageB = Math.round(totalB / (length / 4)); // const averageB = Math.round(totalB / (length / 4));
resolve({ r: averageR, g: averageG, b: averageB }); // resolve({ r: averageR, g: averageG, b: averageB });
}; // };
img.onerror = (error) => { // img.onerror = (error) => {
reject(error); // reject(error);
}; // };
}); // });
}; // };
const fetchColor = async () => { const fetchColor = async () => {
if ( if (
currentSong && currentSong &&
currentSong[0]?.image currentSong[0]?.image
) { ) {
const imageUrl = currentSong[0].image; const imageUrl = currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM' ? 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
const luminance = // const luminance =
(0.299 * dominantColor.r + // (0.299 * dominantColor.r +
0.587 * dominantColor.g + // 0.587 * dominantColor.g +
0.114 * dominantColor.b) / // 0.114 * dominantColor.b) /
255; // 255;
if (luminance > 0.5) { // if (luminance > 0.5) {
setSubtitleColor("black"); // setSubtitleColor("black");
setSubtitleBG("white"); // setSubtitleBG("white");
} else { // } else {
setSubtitleColor("white"); // setSubtitleColor("white");
setSubtitleBG("black"); // setSubtitleBG("black");
} // }
setBackgroundImage(imageUrl); setBackgroundImage(imageUrl);
} catch (error) { } catch (error) {
console.error("Error fetching or processing image:", error); console.error("Error fetching or processing image:", error);
@@ -345,8 +345,8 @@ 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 != undefined currentSong != null && currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM' && currentSong[0]?.name != undefined
? `${currentSong.name} - ${currentSong.artist}` ? `${currentSong[0]?.name} - ${currentSong[0]?.artist}`
: "Menunggu musik favoritmu", : "Menunggu musik favoritmu",
"Klik untuk putar musik favoritmu" "Klik untuk putar musik favoritmu"
]; ];
@@ -430,7 +430,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]?.name : text) ? (viewing && currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM' ? currentSong[0]?.name : text)
: :
viewing ? messages[0] : text} viewing ? messages[0] : text}
</div> </div>
@@ -438,7 +438,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
<div className="current-artist"> <div className="current-artist">
{ {
currentSong && currentSong &&
currentSong[0]?.artist currentSong[0]?.artist && currentSong[0]?.trackId != 'QnkKrFKaqW4' && currentSong[0]?.trackId != 'fxU8dKWIZYM'
? currentSong[0]?.artist ? currentSong[0]?.artist
: "Pilih hits terbaikmu dibawah!"} : "Pilih hits terbaikmu dibawah!"}
</div> </div>

2
src/config.js
View File

@@ -1,5 +1,5 @@
// src/config.js // src/config.js
const API_BASE_URL = 'https://test.api.kedaimaster.com'; const API_BASE_URL = 'https://dev.api.kedaimaster.com';
export default API_BASE_URL; export default API_BASE_URL;