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-20 21:02:21 -05:00
parent 1347f582bc
commit 3a323edeb6
2 changed files with 37 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/common/SongInfo.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import {
IonModal, IonContent,
IonButton, IonIcon, IonList, IonItem, IonLabel
IonButton, IonIcon
} from '@ionic/react';
import {
add, heart, heartOutline, ban, checkmark, people
@ -11,7 +11,7 @@ import { selectIsAdmin, selectFavorites, selectSongs, selectQueue } from '../../
import { useActions } from '../../hooks/useActions';
import { useModal } from '../../hooks/useModalContext';
import { ModalHeader } from './ModalHeader';
import { ModalHeader, InfiniteScrollList, SongItem } from './index';
import { SongInfoDisplay } from './SongItem';
import type { Song, QueueItem } from '../../types';
@ -152,24 +152,23 @@ const SongInfo: React.FC<SongInfoProps> = ({ isOpen, onClose, song }) => {
/>
<IonContent>
<div className="p-4">
{artistSongs.length > 0 ? (
<IonList>
{artistSongs.map((artistSong) => (
<IonItem key={artistSong.path}>
<IonLabel>
<div className="text-base font-bold">{artistSong.title}</div>
<div className="text-sm text-gray-500 dark:text-gray-400">{artistSong.path}</div>
</IonLabel>
</IonItem>
))}
</IonList>
) : (
<div className="p-4 text-center text-gray-500 dark:text-gray-400">
No other songs found by this artist
</div>
<InfiniteScrollList
items={artistSongs}
isLoading={false}
hasMore={false}
onLoadMore={() => {}}
renderItem={(song) => (
<SongItem
song={song}
context="search"
showAddButton={true}
showInfoButton={true}
showFavoriteButton={false}
/>
)}
</div>
emptyTitle="No songs found"
emptyMessage="No other songs found by this artist"
/>
</IonContent>
</IonModal>
</>

76
src/features/Artists/Artists.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { IonSearchbar, IonModal, IonContent, IonItem } from '@ionic/react';
import { IonSearchbar, IonModal, IonContent } from '@ionic/react';
import { list } from 'ionicons/icons';
import { InfiniteScrollList, SongItem, ListItem, NumberDisplay, ModalHeader } from '../../components/common';
import { InfiniteScrollList, SongItem, ListItem, ModalHeader } from '../../components/common';
import { useArtists } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectSongs } from '../../redux';
@ -83,61 +83,23 @@ const Artists: React.FC = () => {
<ModalHeader title={`Songs by ${selectedArtist}`} onClose={handleCloseArtistSongs} />
<IonContent>
<div style={{ padding: '10px' }}>
<InfiniteScrollList
items={selectedArtistSongs}
isLoading={false}
hasMore={false}
onLoadMore={() => {}}
renderItem={(song, index) => (
<IonItem
key={song.key}
detail={false}
style={{
'--min-height': '60px',
'--border-style': 'none',
'--padding-start': '0',
'--padding-end': '0',
'--inner-padding-start': '0',
'--inner-padding-end': '0',
'--padding-top': '0',
'--padding-bottom': '0',
margin: '5px 0',
display: 'flex',
alignItems: 'center'
}}
>
{/* Number */}
<div style={{
flexShrink: 0,
display: 'flex',
alignItems: 'center'
}}>
<NumberDisplay number={index + 1} />
</div>
{/* Song Item Content - placed directly after NumberDisplay like in ListItem */}
<div style={{
flex: 1,
display: 'flex',
alignItems: 'center'
}}>
<div style={{ width: '100%' }}>
<SongItem
song={song}
context="search"
showAddButton={true}
showInfoButton={true}
showFavoriteButton={false}
/>
</div>
</div>
</IonItem>
)}
emptyTitle="No songs found"
emptyMessage="This artist has no songs in the catalog"
/>
</div>
<InfiniteScrollList
items={selectedArtistSongs}
isLoading={false}
hasMore={false}
onLoadMore={() => {}}
renderItem={(song) => (
<SongItem
song={song}
context="search"
showAddButton={true}
showInfoButton={true}
showFavoriteButton={false}
/>
)}
emptyTitle="No songs found"
emptyMessage="This artist has no songs in the catalog"
/>
</IonContent>
</IonModal>