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-07 09:32:12 +07:00
parent a172e9c453
commit 0c99be55ec
2 changed files with 38 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/MusicPlayer.css
View File

@@ -77,7 +77,7 @@
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
/* Text shadow for readability */
margin-bottom: -47px;
margin-bottom: 25px;
}
.progress-container {
@@ -198,14 +198,19 @@
flex-grow: 1;
border: none;
border-radius: 25px;
/* Round the corners */
padding: 10px 15px;
font-size: 16px;
outline: none;
/* Remove default outline */
background-color: #f4efe6;
text-align: center;
transition: background-color 0.3s ease; /* Smooth transition for the effect */
}
.search-box input[type="text"].clicked {
background-color: #d0c7b3; /* The color when clicked */
}
.search-box input[type="text"]::placeholder {
font-weight: bold;
opacity: 0.7;

73
src/components/MusicPlayer.js
View File

@@ -84,11 +84,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
const fetchColor = async () => {
if (
currentSong.item &&
currentSong.item.album &&
currentSong.item.album.images[0]
currentSong &&
currentSong.image
) {
const imageUrl = currentSong.item.album.images[0].url;
const imageUrl = currentSong.image;
try {
const dominantColor = await getDominantColor(imageUrl);
// Calculate luminance (YIQ color space) to determine if subtitle should be black or white
@@ -128,10 +127,11 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
});
socket.on("updateCurrentSong", (response) => {
console.log(response)
setCurrentSong(response);
setCurrentTime(response.progress_ms / 1000); // Convert milliseconds to seconds
setLyricProgressMs(response.progress_ms);
setTrackLength(convertToMilliseconds(response.item.length));
// setCurrentTime(response.progress_ms / 1000); // Convert milliseconds to seconds
// setLyricProgressMs(response.progress_ms);
// setTrackLength(convertToMilliseconds(response.item.length));
});
@@ -345,8 +345,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
useEffect(() => {
// Update the messages based on currentSong
const newMessages = [
currentSong != null && currentSong.item != undefined
? `${currentSong.item.artists[0].name} - ${currentSong.item.name}`
currentSong != null && currentSong != undefined
? `${currentSong.name} - ${currentSong.artist}`
: "Menunggu musik favoritmu",
"Klik untuk putar musik favoritmu"
];
@@ -385,12 +385,17 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
}, 1000); // 1 second timeout (same as the CSS transition duration)
};
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
onClick={toggleView}
className="current-bgr"
style={{ backgroundImage: `url(${backgroundImage})` }}
style={{ backgroundImage: `url(${modifyUrl(backgroundImage)})` }}
// style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
>
{/* <video
@@ -424,43 +429,21 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
<div className="current-info" >
<div
className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
{currentSong.item && currentSong.item.name
? (viewing ? currentSong.item.name : text)
{currentSong && currentSong.name
? (viewing ? currentSong.name : text)
:
viewing ? messages[0] : text}
</div>
{viewing && <>
<div className="current-artist">
{currentSong.item &&
currentSong.item.album &&
currentSong.item.album.images[0] &&
currentSong.item.artists[0].name
? currentSong.item.artists[0].name
{
currentSong &&
currentSong.image &&
currentSong.artist
? currentSong.artist
: "Pilih hits terbaikmu dibawah!"}
</div>
<div className="progress-container">
<div
className="current-time"
style={{ visibility: currentSong.item ? "visible" : "hidden" }}
>
{formatTime(currentTime)}
</div>
<input
type="range"
min="0"
max={trackLength}
value={currentTime}
className="progress-bar"
style={{ visibility: currentSong.item ? "visible" : "hidden" }}
disabled
/>
<div
className="track-length"
style={{ visibility: currentSong.item ? "visible" : "hidden" }}
>
{formatTime(trackLength)}
</div>
</div></>
</>
}
</div>
{viewing &&
@@ -482,21 +465,23 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
)}
<div className="search-box">
<input
ref={inputRef} // Attach the ref to the input field
ref={inputRef}
type="text"
placeholder="Cari musik..."
value={songName}
onChange={handleInputChange}
className={clicked ? 'clicked' : ''}
/>
</div>
<div
className="rectangle"
style={{
justifyContent: songName === "" && 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.length < 1 && (
{songName == "" && queue && queue.length < 1 && (
<div className="middle-text">
<span className="bold-text">Antrian kosong</span><br />
<span className="normal-text">Pilih musikmu</span>
@@ -534,7 +519,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
))
)
}
{songName == "" && queue.length > 0 && queue.length < 3 && (
{songName == "" && queue && queue.length > 0 && queue.length < 3 && (
<div className="middle-text">
<span className="normal-text">Tambahkan musikmu</span>