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