Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>
This commit is contained in:
parent
17fe5cecf0
commit
9ef4311586
@ -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
|
||||||
|
|||||||
@ -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 && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user