kediritechnopark/AnythingYouWant
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 {
display: block;
margin: 1rem auto 0;
flex-grow: 1;
border: none;
border-radius: 25px;
padding: 10px 15px;
font-size: 16px;
outline: none;
background-color: #f4efe6;
background-color: #f4efe6; /* Original color */
color: black;
font-weight: bold;
transition: background-color 1s ease; /* Smoothly transition background color over 1 second */
}
.search-button:hover {
background-color: #0056b3;
.search-button.clicked {
background-color: #d0c7b3; /* The color when clicked */
}

124
src/components/MusicPlayer.js
View File

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