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

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

@ -1,7 +1,7 @@
import React, { useState } from 'react'; 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 { 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 { useArtists } from '../../hooks';
import { useAppSelector } from '../../redux'; import { useAppSelector } from '../../redux';
import { selectSongs } from '../../redux'; import { selectSongs } from '../../redux';
@ -83,61 +83,23 @@ const Artists: React.FC = () => {
<ModalHeader title={`Songs by ${selectedArtist}`} onClose={handleCloseArtistSongs} /> <ModalHeader title={`Songs by ${selectedArtist}`} onClose={handleCloseArtistSongs} />
<IonContent> <IonContent>
<div style={{ padding: '10px' }}> <InfiniteScrollList
<InfiniteScrollList items={selectedArtistSongs}
items={selectedArtistSongs} isLoading={false}
isLoading={false} hasMore={false}
hasMore={false} onLoadMore={() => {}}
onLoadMore={() => {}} renderItem={(song) => (
renderItem={(song, index) => ( <SongItem
<IonItem song={song}
key={song.key} context="search"
detail={false} showAddButton={true}
style={{ showInfoButton={true}
'--min-height': '60px', showFavoriteButton={false}
'--border-style': 'none', />
'--padding-start': '0', )}
'--padding-end': '0', emptyTitle="No songs found"
'--inner-padding-start': '0', emptyMessage="This artist has no songs in the catalog"
'--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>
</IonContent> </IonContent>
</IonModal> </IonModal>