kediritechnopark/kedaimaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
insvrgent
2025-01-06 16:56:13 +07:00
parent 918c923143
commit a172e9c453
2 changed files with 77 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/MusicPlayer.css
View File

@@ -302,18 +302,19 @@
.search-button { .search-button {
display: block; display: block;
margin: 1rem auto 0; margin: 1rem auto 0;
flex-grow: 1; flex-grow: 1;
border: none; border: none;
border-radius: 25px; border-radius: 25px;
padding: 10px 15px; padding: 10px 15px;
font-size: 16px; font-size: 16px;
outline: none; outline: none;
background-color: #f4efe6; background-color: #f4efe6; /* Original color */
color: black; color: black;
font-weight: bold; font-weight: bold;
transition: background-color 1s ease; /* Smoothly transition background color over 1 second */
} }
.search-button:hover { .search-button.clicked {
background-color: #0056b3; background-color: #d0c7b3; /* The color when clicked */
} }

126
src/components/MusicPlayer.js
View File

@@ -27,6 +27,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
const [subtitleBG, setSubtitleBG] = useState("white"); const [subtitleBG, setSubtitleBG] = useState("white");
const [backgroundImage, setBackgroundImage] = useState(""); const [backgroundImage, setBackgroundImage] = useState("");
const [clicked, setClicked] = useState(false);
const [canvaz, setCanvaz] = useState(''); const [canvaz, setCanvaz] = useState('');
const [videoSrc, setVideoSrc] = useState(''); const [videoSrc, setVideoSrc] = useState('');
@@ -371,9 +373,16 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
}, [currentSong]); // Run effect when currentSong changes }, [currentSong]); // Run effect when currentSong changes
const handleButtonClick = () => { const handleButtonClick = () => {
setClicked(true);
if (inputRef.current) { if (inputRef.current) {
inputRef.current.focus(); // Focus the input when the button is clicked inputRef.current.focus(); // Focus the input when the button is clicked
} }
// After 1 second, remove the "clicked" class to let the color gradually return to the original
setTimeout(() => {
setClicked(false);
}, 1000); // 1 second timeout (same as the CSS transition duration)
}; };
return ( return (
@@ -471,14 +480,14 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
/> />
</div> </div>
)} )}
<div className="search-box"> <div className="search-box">
<input <input
ref={inputRef} // Attach the ref to the input field ref={inputRef} // Attach the ref to the input field
type="text" type="text"
placeholder="Cari musik..." placeholder="Cari musik..."
value={songName} value={songName}
onChange={handleInputChange} onChange={handleInputChange}
/> />
</div> </div>
<div <div
@@ -486,60 +495,69 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
style={{ style={{
justifyContent: songName === "" && queue.length > 0 && queue.length < 3 || songName != '' ? 'flex-start' : 'center' justifyContent: songName === "" && queue.length > 0 && queue.length < 3 || songName != '' ? 'flex-start' : 'center'
}} }}
> >
{songName == "" && queue.length < 1 && ( {songName == "" && queue.length < 1 && (
<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>
<button className="search-button" onClick={handleButtonClick}>Cari musik</button> <button
className={`search-button ${clicked ? 'clicked' : ''}`}
</div> onClick={handleButtonClick}
)} >
{songName != "" && Cari musik
songs.map((song, index) => ( </button>
<MusicComponent </div>
key={index} )}
song={song} {songName != "" &&
min={0} songs.map((song, index) => (
max={100}
onDecision={(e) => onRequest(song)}
/>
))}
{
songName === "" &&
queue &&
Array.isArray(queue) &&
queue.length > 0 && (
queue.map((song, index) => (
<MusicComponent <MusicComponent
key={index} key={index}
song={song} song={song}
min={-100} min={0}
max={100} max={100}
onDecision={(vote) => onDecision(song.trackId, vote)} onDecision={(e) => onRequest(song)}
/> />
)) ))}
) {
} songName === "" &&
{songName == "" && queue.length > 0 && queue.length < 3 && ( queue &&
Array.isArray(queue) &&
queue.length > 0 && (
queue.map((song, index) => (
<MusicComponent
key={index}
song={song}
min={-100}
max={100}
onDecision={(vote) => onDecision(song.trackId, vote)}
/>
))
)
}
{songName == "" && queue.length > 0 && queue.length < 3 && (
<div className="middle-text">
<span className="normal-text">Tambahkan musikmu</span>
<button
className={`search-button ${clicked ? 'clicked' : ''}`}
onClick={handleButtonClick}
>
Cari musik
</button>
</div>
)}
</div>
<div className="middle-text">
<span className="normal-text">Tambahkan musikmu</span>
<button className="search-button" onClick={handleButtonClick}>Cari musik</button>
</div>
)}
</div> </div>
<div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
<h5>
{expanded ? '⋀' : 'Lihat antrian musik'}
</h5>
</div> </div></>
<div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
<h5>
{expanded ? '⋀' : 'Lihat antrian musik'}
</h5>
</div></>
} }
</div > </div >
); );