48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
|
import { NowPlaying } from './NowPlaying'
|
||
|
|
import type { QueueItem } from './QueueList'
|
||
|
|
|
||
|
|
export function PlayerBar({ track }: { track: QueueItem | null }) {
|
||
|
|
return (
|
||
|
|
<div className="player-bar">
|
||
|
|
<NowPlaying track={track} />
|
||
|
|
<div className="controls">
|
||
|
|
<div className="ctrl-btns">
|
||
|
|
<button className="ctrl-btn" id="btnPrev">
|
||
|
|
⏮
|
||
|
|
</button>
|
||
|
|
<button className="ctrl-btn ctrl-btn-main" id="btnPlayPause">
|
||
|
|
▶
|
||
|
|
</button>
|
||
|
|
<button className="ctrl-btn" id="btnNext">
|
||
|
|
⏭
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="progress-row">
|
||
|
|
<span className="time" id="timeElapsed">
|
||
|
|
0:00
|
||
|
|
</span>
|
||
|
|
<div className="progress-bar" id="progressBar">
|
||
|
|
<div className="progress-fill" id="progressFill" style={{ width: '0%' }} />
|
||
|
|
</div>
|
||
|
|
<span className="time" id="timeDuration">
|
||
|
|
0:00
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="volume-row">
|
||
|
|
<span className="vol-icon" id="volIcon">
|
||
|
|
🔊
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
className="volume-slider"
|
||
|
|
id="volSlider"
|
||
|
|
min={0}
|
||
|
|
max={100}
|
||
|
|
defaultValue={80}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|