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

This commit is contained in:
mbrucedogs 2025-07-30 12:50:58 -05:00
parent 17fe5cecf0
commit 9ef4311586
2 changed files with 13 additions and 3 deletions

View File

@ -15,7 +15,7 @@ A real-time karaoke application designed for in-home party use with multi-user s
- **Artist Browsing** - Browse songs by artist with modal views - **Artist Browsing** - Browse songs by artist with modal views
- **Song Lists** - Predefined song collections with availability matching - **Song Lists** - Predefined song collections with availability matching
- **Top Played** - Popular songs based on play history - **Top Played** - Popular songs based on play history
- **New Songs** - Recently added songs to the catalog (see PRD for implementation details) - **New Songs** - Recently added songs to the catalog (see PRD for implementation details) (see PRD for implementation details) (see PRD for implementation details)
### **Admin Features** ### **Admin Features**
- **Queue Control** - Reorder and delete queue items - **Queue Control** - Reorder and delete queue items

View File

@ -10,7 +10,7 @@ import type { SongItemProps, QueueItem, Song } from '../../types';
import { SongItemContext } from '../../types'; import { SongItemContext } from '../../types';
import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types'; import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types';
import { Icons } from '../../constants'; import { Icons } from '../../constants';
import { star } from 'ionicons/icons'; import { star, heart } from 'ionicons/icons';
// Utility function to extract filename from path // Utility function to extract filename from path
const extractFilename = (path: string): string => { const extractFilename = (path: string): string => {
@ -31,12 +31,14 @@ export const SongInfoDisplay: React.FC<{
showCount?: boolean; showCount?: boolean;
showFullPath?: boolean; showFullPath?: boolean;
showTopPlayedStar?: boolean; showTopPlayedStar?: boolean;
showFavoriteHeart?: boolean;
}> = React.memo(({ }> = React.memo(({
song, song,
showPath = false, showPath = false,
showCount = false, showCount = false,
showFullPath = false, showFullPath = false,
showTopPlayedStar = false showTopPlayedStar = false,
showFavoriteHeart = false
}) => { }) => {
return ( return (
<IonLabel> <IonLabel>
@ -59,6 +61,13 @@ export const SongInfoDisplay: React.FC<{
style={{ fontSize: '1rem' }} style={{ fontSize: '1rem' }}
/> />
)} )}
{showFavoriteHeart && (
<IonIcon
icon={heart}
color="danger"
style={{ fontSize: '1rem' }}
/>
)}
{song.title} {song.title}
</div> </div>
<div <div
@ -312,6 +321,7 @@ const SongItem: React.FC<SongItemProps> = React.memo(({
showCount={shouldShowCount} showCount={shouldShowCount}
showFullPath={showFullPath} showFullPath={showFullPath}
showTopPlayedStar={isInTopPlayed} showTopPlayedStar={isInTopPlayed}
showFavoriteHeart={isInFavorites}
/> />
{showActions && ( {showActions && (