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

173
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,62 +116,60 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
{getStatusText()} {getStatusText()}
</span> </span>
</div> </div>
{/* Control Buttons */} {/* Control Buttons */}
{currentState === PlayerState.playing ? ( {hasSongsInQueue && (
<div <>
className="flex items-center cursor-pointer hover:bg-gray-800" {currentState === PlayerState.playing ? (
style={{ padding: '12px 0px' }} <div
onClick={handlePause} className="flex items-center cursor-pointer hover:bg-gray-800"
> style={{ padding: '12px 0px' }}
<IonIcon onClick={handlePause}
icon={pauseOutline} >
style={{ <IonIcon
marginRight: '12px', icon={pauseOutline}
fontSize: '20px' style={{
}} marginRight: '12px',
/> fontSize: '20px'
<span style={{ fontWeight: '500' }}>Pause</span> }}
</div> />
) : ( <span style={{ fontWeight: '500' }}>Pause</span>
<div </div>
className="flex items-center cursor-pointer hover:bg-gray-800" ) : (
style={{ padding: '12px 0px' }} <div
onClick={handlePlay} className="flex items-center cursor-pointer hover:bg-gray-800"
> style={{ padding: '12px 0px' }}
<IonIcon onClick={handlePlay}
icon={playOutline} >
style={{ <IonIcon
marginRight: '12px', icon={playOutline}
fontSize: '20px' style={{
}} marginRight: '12px',
/> fontSize: '20px'
<span style={{ fontWeight: '500' }}>Play</span> }}
</div> />
<span style={{ fontWeight: '500' }}>Play</span>
</div>
)}
{currentState !== PlayerState.stopped && (
<div
className="flex items-center cursor-pointer hover:bg-gray-800"
style={{ padding: '12px 0px' }}
onClick={handleStop}
>
<IonIcon
icon={stopOutline}
style={{
marginRight: '12px',
fontSize: '20px'
}}
/>
<span style={{ fontWeight: '500' }}>Stop</span>
</div>
)}
</>
)} )}
{currentState !== PlayerState.stopped && (
<div
className="flex items-center cursor-pointer hover:bg-gray-800"
style={{ padding: '12px 0px' }}
onClick={handleStop}
>
<IonIcon
icon={stopOutline}
style={{
marginRight: '12px',
fontSize: '20px'
}}
/>
<span style={{ fontWeight: '500' }}>Stop</span>
</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,42 +188,42 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant
</IonChip> </IonChip>
</div> </div>
</div> </div>
{/* Only show controls if there are songs in the queue */}
<div className="mt-4 flex items-center justify-center space-x-3"> {hasSongsInQueue && (
{currentState === PlayerState.playing ? ( <div className="mt-4 flex items-center justify-center space-x-3">
<ActionButton {currentState === PlayerState.playing ? (
onClick={handlePause} <ActionButton
variant={ActionButtonVariant.PRIMARY} onClick={handlePause}
size={ActionButtonSize.SMALL} variant={ActionButtonVariant.PRIMARY}
icon={Icons.PAUSE} size={ActionButtonSize.SMALL}
iconSlot={ActionButtonIconSlot.ICON_ONLY} icon={Icons.PAUSE}
/> iconSlot={ActionButtonIconSlot.ICON_ONLY}
) : ( />
<ActionButton ) : (
onClick={handlePlay} <ActionButton
variant={ActionButtonVariant.PRIMARY} onClick={handlePlay}
size={ActionButtonSize.SMALL} variant={ActionButtonVariant.PRIMARY}
icon={Icons.PLAY} size={ActionButtonSize.SMALL}
iconSlot={ActionButtonIconSlot.ICON_ONLY} icon={Icons.PLAY}
disabled={!hasSongsInQueue} iconSlot={ActionButtonIconSlot.ICON_ONLY}
/> disabled={!hasSongsInQueue}
)} />
)}
{currentState !== PlayerState.stopped && ( {currentState !== PlayerState.stopped && (
<ActionButton <ActionButton
onClick={handleStop} onClick={handleStop}
variant={ActionButtonVariant.DANGER} variant={ActionButtonVariant.DANGER}
size={ActionButtonSize.SMALL} size={ActionButtonSize.SMALL}
icon={Icons.STOP} icon={Icons.STOP}
iconSlot={ActionButtonIconSlot.ICON_ONLY} iconSlot={ActionButtonIconSlot.ICON_ONLY}
/> />
)} )}
</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>
)} )}