buzzert/QueueCube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More rich metadata with NowPlaying

Browse Source
This commit is contained in:
James Magahern
2025-02-15 22:15:59 -08:00
parent d465dbf6fb
commit a3801f6698
7 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/NowPlaying.tsx
View File

@@ -23,15 +23,14 @@ interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
const NowPlaying: React.FC<NowPlayingProps> = (props) => {
return (
<div className={classNames(props.className, 'bg-black/50 h-[150px] p-5')}>
<div className={classNames(props.className, 'bg-black/50 h-fit p-5')}>
<div className="flex flex-col w-full gap-2">
<div className="flex flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center">
<div className="flex-grow min-w-0">
<div className="text-white text-lg font-bold truncate">{props.songName}</div>
<div className="text-white text-sm truncate">{props.fileName}</div>
<div className="flex flex-col md:flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center gap-4">
<div className="flex-grow min-w-0 w-full md:w-auto text-white">
<div className="text-lg font-bold truncate text-center md:text-left">{props.songName}</div>
<div className="text-sm truncate text-center md:text-left">{props.fileName}</div>
</div>
<div className="flex flex-row items-center gap-4">
<div className="flex flex-row items-center gap-4 justify-center md:justify-end">
<div className="flex items-center gap-2 text-white">
<FaVolumeUp size={20} />
<input
@@ -42,7 +41,7 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
onMouseDown={() => props.onVolumeWillChange(props.volume)}
onMouseUp={() => props.onVolumeDidChange(props.volume)}
onChange={(e) => props.onVolumeSettingChange(Number(e.target.value))}
className="w-24 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full hover:[&::-webkit-slider-thumb]:bg-violet-300"
className="fancy-slider w-48 md:w-24 h-2"
/>
</div>