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

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

Browse Source
This commit is contained in:
Matt Bruce 2025-07-18 11:41:19 -05:00
parent b4c7a06b2c
commit 0b383504ae
2 changed files with 46 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/features/Queue/Queue.tsx
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import { IonItem, IonItemSliding, IonItemOptions, IonItemOption, IonIcon, IonLabel, IonChip } from '@ionic/react'; import { IonItem, IonItemSliding, IonItemOptions, IonItemOption, IonIcon, IonLabel } from '@ionic/react';
import { trash, arrowUp, arrowDown } from 'ionicons/icons'; import { trash, arrowUp, arrowDown } from 'ionicons/icons';
import { ActionButton, PlayerControls, InfiniteScrollList, PageHeader } from '../../components/common'; import { ActionButton, InfiniteScrollList, PageHeader } from '../../components/common';
import { useQueue } from '../../hooks'; import { useQueue } from '../../hooks';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectQueue, selectPlayerState } from '../../redux'; import { selectQueue, selectPlayerState, selectIsAdmin } from '../../redux';
import { PlayerState } from '../../types'; import { PlayerState } from '../../types';
import type { QueueItem } from '../../types'; import type { QueueItem } from '../../types';
@ -20,23 +20,26 @@ const Queue: React.FC = () => {
const queue = useAppSelector(selectQueue); const queue = useAppSelector(selectQueue);
const playerState = useAppSelector(selectPlayerState); const playerState = useAppSelector(selectPlayerState);
const isAdmin = useAppSelector(selectIsAdmin);
const queueCount = Object.keys(queue).length; const queueCount = Object.keys(queue).length;
// Debug logging // Debug logging
console.log('Queue component - queue count:', queueCount); console.log('Queue component - queue count:', queueCount);
console.log('Queue component - queue items:', queueItems); console.log('Queue component - queue items:', queueItems);
console.log('Queue component - player state:', playerState); console.log('Queue component - player state:', playerState);
console.log('Queue component - isAdmin:', isAdmin);
console.log('Queue component - canReorder:', canReorder);
// Check if first item can be deleted (only when stopped or paused) // Check if items can be deleted (admin can delete any item when not playing)
const canDeleteFirstItem = playerState?.state === PlayerState.stopped || playerState?.state === PlayerState.paused; const canDeleteItems = isAdmin && (playerState?.state === PlayerState.stopped || playerState?.state === PlayerState.paused);
console.log('Queue component - canDeleteFirstItem:', canDeleteFirstItem); console.log('Queue component - canDeleteItems:', canDeleteItems);
console.log('Queue component - canReorder:', canReorder); console.log('Queue component - canReorder:', canReorder);
// Render queue item for InfiniteScrollList // Render queue item for InfiniteScrollList
const renderQueueItem = (queueItem: QueueItem, index: number) => { const renderQueueItem = (queueItem: QueueItem, index: number) => {
console.log(`Queue item ${index}: order=${queueItem.order}, key=${queueItem.key}`); console.log(`Queue item ${index}: order=${queueItem.order}, key=${queueItem.key}`);
const canDelete = index === 0 ? canDeleteFirstItem : true; const canDelete = isAdmin; // Allow admin to delete any item
return ( return (
<IonItemSliding key={queueItem.key}> <IonItemSliding key={queueItem.key}>
@ -48,7 +51,10 @@ const Queue: React.FC = () => {
{/* Song Info */} {/* Song Info */}
<IonLabel> <IonLabel>
<h3 className="text-sm font-medium text-gray-900 truncate"> <p className="text-sm bold-title truncate">
{queueItem.singer.name}
</p>
<h3 className="text-sm bold-title truncate">
{queueItem.song.title} {queueItem.song.title}
</h3> </h3>
<p className="text-sm text-gray-500 truncate"> <p className="text-sm text-gray-500 truncate">
@ -56,14 +62,10 @@ const Queue: React.FC = () => {
</p> </p>
</IonLabel> </IonLabel>
{/* Singer Pill - Moved to far right */}
<IonChip slot="end" color="medium">
{queueItem.singer.name}
</IonChip>
{/* Admin Controls */} {/* Admin Controls */}
{canReorder && ( {(canReorder || isAdmin) && (
<div slot="end" className="flex flex-col gap-1 ml-2"> <div slot="end" className="flex items-center gap-2 ml-2">
<div className="flex flex-col gap-1">
{queueItem.order > 2 && ( {queueItem.order > 2 && (
<ActionButton <ActionButton
onClick={() => handleMoveUp(queueItem)} onClick={() => handleMoveUp(queueItem)}
@ -83,6 +85,16 @@ const Queue: React.FC = () => {
</ActionButton> </ActionButton>
)} )}
</div> </div>
{canDelete && (
<ActionButton
onClick={() => handleRemoveFromQueue(queueItem)}
variant="danger"
size="sm"
>
<IonIcon icon={trash} />
</ActionButton>
)}
</div>
)} )}
</IonItem> </IonItem>
@ -108,12 +120,7 @@ const Queue: React.FC = () => {
subtitle={`${queueStats.totalSongs} song${queueStats.totalSongs !== 1 ? 's' : ''} in queue`} subtitle={`${queueStats.totalSongs} song${queueStats.totalSongs !== 1 ? 's' : ''} in queue`}
/> />
{/* Player Controls - Only visible to admin users */}
<div className="max-w-4xl mx-auto p-6 mb-6">
<div style={{ paddingLeft: '16px' }}>
<PlayerControls variant="dark" />
</div>
</div>
<div className="max-w-4xl mx-auto p-6"> <div className="max-w-4xl mx-auto p-6">
{/* Queue List */} {/* Queue List */}

5
src/index.css
View File

@ -100,6 +100,11 @@ ion-modal ion-button {
color: #111827 !important; color: #111827 !important;
} }
/* Override Ionic label text color for song titles */
ion-item ion-label .bold-title {
color: #111827 !important;
}
/* Input field styling to match search box */ /* Input field styling to match search box */
.visible-input { .visible-input {
border: 1px solid #d1d5db !important; border: 1px solid #d1d5db !important;