mbrucedogs/singsalot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

Browse Source
This commit is contained in:
mbrucedogs 2025-07-21 08:25:04 -05:00
parent e480fe4828
commit cef20f59c5
1 changed files with 87 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/common/PlayerControls.tsx
View File

@ -87,6 +87,9 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
}; };
const getStatusText = () => { const getStatusText = () => {
if (!hasSongsInQueue) {
return 'No songs in queue';
}
switch (currentState) { switch (currentState) {
case PlayerState.playing: case PlayerState.playing:
return 'Currently Playing'; return 'Currently Playing';
@ -113,8 +116,9 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
{getStatusText()} {getStatusText()}
</span> </span>
</div> </div>
{/* Control Buttons */} {/* Control Buttons */}
{hasSongsInQueue && (
<>
{currentState === PlayerState.playing ? ( {currentState === PlayerState.playing ? (
<div <div
className="flex items-center cursor-pointer hover:bg-gray-800" className="flex items-center cursor-pointer hover:bg-gray-800"
@ -146,7 +150,6 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
<span style={{ fontWeight: '500' }}>Play</span> <span style={{ fontWeight: '500' }}>Play</span>
</div> </div>
)} )}
{currentState !== PlayerState.stopped && ( {currentState !== PlayerState.stopped && (
<div <div
className="flex items-center cursor-pointer hover:bg-gray-800" className="flex items-center cursor-pointer hover:bg-gray-800"
@ -163,12 +166,10 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
<span style={{ fontWeight: '500' }}>Stop</span> <span style={{ fontWeight: '500' }}>Stop</span>
</div> </div>
)} )}
</>
)}
{!hasSongsInQueue && ( {!hasSongsInQueue && (
<div style={{ <div style={{ padding: '12px 0px', marginLeft: 0 }} className="text-xs text-gray-400">
padding: '12px 0px',
marginLeft: '32px' // Align with text after icon
}} className="text-xs text-gray-400">
Add songs to queue to enable playback controls Add songs to queue to enable playback controls
</div> </div>
)} )}
@ -187,7 +188,8 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
</IonChip> </IonChip>
</div> </div>
</div> </div>
{/* Only show controls if there are songs in the queue */}
{hasSongsInQueue && (
<div className="mt-4 flex items-center justify-center space-x-3"> <div className="mt-4 flex items-center justify-center space-x-3">
{currentState === PlayerState.playing ? ( {currentState === PlayerState.playing ? (
<ActionButton <ActionButton
@ -207,7 +209,6 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
disabled={!hasSongsInQueue} disabled={!hasSongsInQueue}
/> />
)} )}
{currentState !== PlayerState.stopped && ( {currentState !== PlayerState.stopped && (
<ActionButton <ActionButton
onClick={handleStop} onClick={handleStop}
@ -218,11 +219,11 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
/> />
)} )}
</div> </div>
)}
<div className="mt-3 text-xs text-center"> <div className="mt-3 text-xs text-center">
Admin controls - Only visible to admin users Admin controls - Only visible to admin users
{!hasSongsInQueue && ( {!hasSongsInQueue && (
<div className="mt-1 text-orange-600"> <div className="mt-1 text-orange-600" style={{ marginLeft: 0 }}>
Add songs to queue to enable playback controls Add songs to queue to enable playback controls
</div> </div>
)} )}