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-04 06:57:36 +07:00
parent 3a899e197a
commit 59a9d299c5
11 changed files with 187 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/MusicPlayer.js
View File

@@ -31,6 +31,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
const [canvaz, setCanvaz] = useState('');
const [videoSrc, setVideoSrc] = useState('');
const videoRef = useRef(null);
const inputRef = useRef(null); // Create a ref to the input field
useEffect(() => {
@@ -368,6 +370,11 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
}
}, [currentSong]); // Run effect when currentSong changes
const handleButtonClick = () => {
if (inputRef.current) {
inputRef.current.focus(); // Focus the input when the button is clicked
}
};
return (
<div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
@@ -464,22 +471,30 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
/>
</div>
)}
<div className="search-box" style={{}}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
className="search-icon"
>
<path d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z" />
</svg>
<input
type="text"
placeholder="cari..."
value={songName}
onChange={handleInputChange}
/>
<div className="search-box">
<input
ref={inputRef} // Attach the ref to the input field
type="text"
placeholder="Cari musik..."
value={songName}
onChange={handleInputChange}
/>
</div>
<div
className="rectangle"
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
@@ -506,24 +521,26 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
))
)
}
{songName == "" && queue.length < 1 && (
<div className="rectangle">
<div className="diagonal-text">Antrian kosong - Pilih musikmu</div>
</div>
)}
{songName == "" && queue.length > 0 && queue.length < 3 && (
<div className="rectangle">
<div className="diagonal-text">Drop Your Hits</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}>
<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 >
);
}