Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>
This commit is contained in:
parent
0bbd36010a
commit
4a5acb5a79
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { IonSearchbar, IonList, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon, IonChip } from '@ionic/react';
|
||||
import { IonSearchbar, IonList, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonChip } from '@ionic/react';
|
||||
import { close, add, heart, heartOutline } from 'ionicons/icons';
|
||||
import { useArtists } from '../../hooks';
|
||||
import { useAppSelector } from '../../redux';
|
||||
@ -68,133 +68,140 @@ const Artists: React.FC = () => {
|
||||
const selectedArtistSongs = selectedArtist ? getSongsByArtist(selectedArtist) : [];
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-4">Artists</h1>
|
||||
|
||||
{/* Search Input */}
|
||||
<IonSearchbar
|
||||
placeholder="Search artists..."
|
||||
value={searchTerm}
|
||||
onIonInput={(e) => handleSearchChange(e.detail.value || '')}
|
||||
debounce={300}
|
||||
showClearButton="focus"
|
||||
/>
|
||||
<>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Artists</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-4">Artists</h1>
|
||||
|
||||
{/* Search Input */}
|
||||
<IonSearchbar
|
||||
placeholder="Search artists..."
|
||||
value={searchTerm}
|
||||
onIonInput={(e) => handleSearchChange(e.detail.value || '')}
|
||||
debounce={300}
|
||||
showClearButton="focus"
|
||||
/>
|
||||
|
||||
{/* Debug info */}
|
||||
<div className="mt-2 text-sm text-gray-500">
|
||||
Total songs loaded: {songsCount} | Showing: {artists.length} of {allArtists.length} artists | Search term: "{searchTerm}"
|
||||
{/* Debug info */}
|
||||
<div className="mt-2 text-sm text-gray-500">
|
||||
Total songs loaded: {songsCount} | Showing: {artists.length} of {allArtists.length} artists | Search term: "{searchTerm}"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Artists List */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
{songsCount === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Loading artists...</h3>
|
||||
<p className="text-sm text-gray-500">Please wait while songs are being loaded from the database</p>
|
||||
</div>
|
||||
) : artists.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
{searchTerm ? "No artists found" : "No artists available"}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{searchTerm ? "Try adjusting your search terms" : "Artists will appear here once songs are loaded"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<IonList>
|
||||
{artists.map((artist) => (
|
||||
<IonItem key={artist} button onClick={() => handleArtistClick(artist)}>
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{artist}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{getSongCountByArtist(artist)} song{getSongCountByArtist(artist) !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</IonLabel>
|
||||
<IonChip slot="end" color="primary">
|
||||
View Songs
|
||||
</IonChip>
|
||||
</IonItem>
|
||||
))}
|
||||
|
||||
{/* Infinite scroll trigger */}
|
||||
{hasMore && (
|
||||
<div
|
||||
ref={observerRef}
|
||||
className="py-4 text-center text-gray-500"
|
||||
>
|
||||
<div className="inline-flex items-center">
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Loading more artists...
|
||||
</div>
|
||||
{/* Artists List */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
{songsCount === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</IonList>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Artist Songs Modal */}
|
||||
<IonModal isOpen={!!selectedArtist} onDidDismiss={handleCloseArtistSongs}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Songs by {selectedArtist}</IonTitle>
|
||||
<IonButton slot="end" fill="clear" onClick={handleCloseArtistSongs}>
|
||||
<IonIcon icon={close} />
|
||||
</IonButton>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<IonList>
|
||||
{selectedArtistSongs.map((song) => (
|
||||
<IonItem key={song.key}>
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{song.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{song.artist}
|
||||
</p>
|
||||
</IonLabel>
|
||||
<div slot="end" className="flex gap-2">
|
||||
<IonButton
|
||||
fill="clear"
|
||||
size="small"
|
||||
onClick={() => handleAddToQueue(song)}
|
||||
>
|
||||
<IonIcon icon={add} slot="icon-only" />
|
||||
</IonButton>
|
||||
<IonButton
|
||||
fill="clear"
|
||||
size="small"
|
||||
onClick={() => handleToggleFavorite(song)}
|
||||
>
|
||||
<IonIcon icon={song.favorite ? heart : heartOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Loading artists...</h3>
|
||||
<p className="text-sm text-gray-500">Please wait while songs are being loaded from the database</p>
|
||||
</div>
|
||||
) : artists.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
{searchTerm ? "No artists found" : "No artists available"}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{searchTerm ? "Try adjusting your search terms" : "Artists will appear here once songs are loaded"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<IonList>
|
||||
{artists.map((artist) => (
|
||||
<IonItem key={artist} button onClick={() => handleArtistClick(artist)}>
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{artist}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{getSongCountByArtist(artist)} song{getSongCountByArtist(artist) !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</IonLabel>
|
||||
<IonChip slot="end" color="primary">
|
||||
View Songs
|
||||
</IonChip>
|
||||
</IonItem>
|
||||
))}
|
||||
|
||||
{/* Infinite scroll trigger */}
|
||||
{hasMore && (
|
||||
<div
|
||||
ref={observerRef}
|
||||
className="py-4 text-center text-gray-500"
|
||||
>
|
||||
<div className="inline-flex items-center">
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Loading more artists...
|
||||
</div>
|
||||
</div>
|
||||
</IonItem>
|
||||
))}
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</IonModal>
|
||||
</div>
|
||||
)}
|
||||
</IonList>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Artist Songs Modal */}
|
||||
<IonModal isOpen={!!selectedArtist} onDidDismiss={handleCloseArtistSongs}>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Songs by {selectedArtist}</IonTitle>
|
||||
<IonButton slot="end" fill="clear" onClick={handleCloseArtistSongs}>
|
||||
<IonIcon icon={close} />
|
||||
</IonButton>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<div className="p-4">
|
||||
<IonList>
|
||||
{selectedArtistSongs.map((song) => (
|
||||
<IonItem key={song.key}>
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{song.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{song.artist}
|
||||
</p>
|
||||
</IonLabel>
|
||||
<div slot="end" className="flex gap-2">
|
||||
<IonButton
|
||||
fill="clear"
|
||||
size="small"
|
||||
onClick={() => handleAddToQueue(song)}
|
||||
>
|
||||
<IonIcon icon={add} slot="icon-only" />
|
||||
</IonButton>
|
||||
<IonButton
|
||||
fill="clear"
|
||||
size="small"
|
||||
onClick={() => handleToggleFavorite(song)}
|
||||
>
|
||||
<IonIcon icon={song.favorite ? heart : heartOutline} slot="icon-only" />
|
||||
</IonButton>
|
||||
</div>
|
||||
</IonItem>
|
||||
))}
|
||||
</IonList>
|
||||
</div>
|
||||
</IonModal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -34,24 +34,22 @@ const Favorites: React.FC = () => {
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<div style={{ height: '100%', overflowY: 'auto' }}>
|
||||
<InfiniteScrollList
|
||||
items={favoritesItems}
|
||||
isLoading={favoritesCount === 0}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onAddToQueue={handleAddToQueue}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
context="favorites"
|
||||
title=""
|
||||
subtitle=""
|
||||
emptyTitle="No favorites yet"
|
||||
emptyMessage="Add songs to your favorites to see them here"
|
||||
loadingTitle="Loading favorites..."
|
||||
loadingMessage="Please wait while favorites data is being loaded"
|
||||
debugInfo={`Favorites items loaded: ${favoritesCount}`}
|
||||
/>
|
||||
</div>
|
||||
<InfiniteScrollList
|
||||
items={favoritesItems}
|
||||
isLoading={favoritesCount === 0}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onAddToQueue={handleAddToQueue}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
context="favorites"
|
||||
title=""
|
||||
subtitle=""
|
||||
emptyTitle="No favorites yet"
|
||||
emptyMessage="Add songs to your favorites to see them here"
|
||||
loadingTitle="Loading favorites..."
|
||||
loadingMessage="Please wait while favorites data is being loaded"
|
||||
debugInfo={`Favorites items loaded: ${favoritesCount}`}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -34,24 +34,22 @@ const NewSongs: React.FC = () => {
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<div style={{ height: '100%', overflowY: 'auto' }}>
|
||||
<InfiniteScrollList
|
||||
items={newSongsItems}
|
||||
isLoading={newSongsCount === 0}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onAddToQueue={handleAddToQueue}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
context="search"
|
||||
title=""
|
||||
subtitle=""
|
||||
emptyTitle="No new songs"
|
||||
emptyMessage="Check back later for new additions"
|
||||
loadingTitle="Loading new songs..."
|
||||
loadingMessage="Please wait while new songs data is being loaded"
|
||||
debugInfo={`New songs loaded: ${newSongsCount}`}
|
||||
/>
|
||||
</div>
|
||||
<InfiniteScrollList
|
||||
items={newSongsItems}
|
||||
isLoading={newSongsCount === 0}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onAddToQueue={handleAddToQueue}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
context="search"
|
||||
title=""
|
||||
subtitle=""
|
||||
emptyTitle="No new songs"
|
||||
emptyMessage="Check back later for new additions"
|
||||
loadingTitle="Loading new songs..."
|
||||
loadingMessage="Please wait while new songs data is being loaded"
|
||||
debugInfo={`New songs loaded: ${newSongsCount}`}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonIcon, IonChip } from '@ionic/react';
|
||||
import { IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonIcon, IonChip } from '@ionic/react';
|
||||
import { people, trash, time } from 'ionicons/icons';
|
||||
import { EmptyState } from '../../components/common';
|
||||
import { useSingers } from '../../hooks';
|
||||
@ -34,76 +34,74 @@ const Singers: React.FC = () => {
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
{singers.length} singer{singers.length !== 1 ? 's' : ''} in the party
|
||||
</p>
|
||||
|
||||
{/* Debug info */}
|
||||
<div className="mb-4 text-sm text-gray-500">
|
||||
Singers loaded: {singersCount}
|
||||
</div>
|
||||
|
||||
{/* Singers List */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
{singersCount === 0 ? (
|
||||
<EmptyState
|
||||
title="No singers yet"
|
||||
message="Singers will appear here when they join the party"
|
||||
icon={
|
||||
<svg className="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
) : singers.length === 0 ? (
|
||||
<EmptyState
|
||||
title="Loading singers..."
|
||||
message="Please wait while singers data is being loaded"
|
||||
icon={
|
||||
<svg className="h-12 w-12 text-gray-400 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<IonList>
|
||||
{singers.map((singer) => (
|
||||
<IonItemSliding key={singer.key}>
|
||||
<IonItem>
|
||||
<IonIcon icon={people} slot="start" color="primary" />
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{singer.name}
|
||||
</h3>
|
||||
<div className="flex items-center mt-1">
|
||||
<IonChip color="medium">
|
||||
<IonIcon icon={time} />
|
||||
{formatDate(singer.lastLogin)}
|
||||
</IonChip>
|
||||
</div>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
{/* Swipe to Remove (Admin Only) */}
|
||||
{isAdmin && (
|
||||
<IonItemOptions side="end">
|
||||
<IonItemOption
|
||||
color="danger"
|
||||
onClick={() => handleRemoveSinger(singer)}
|
||||
>
|
||||
<IonIcon icon={trash} slot="icon-only" />
|
||||
</IonItemOption>
|
||||
</IonItemOptions>
|
||||
)}
|
||||
</IonItemSliding>
|
||||
))}
|
||||
</IonList>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
{singers.length} singer{singers.length !== 1 ? 's' : ''} in the party
|
||||
</p>
|
||||
|
||||
{/* Debug info */}
|
||||
<div className="mb-4 text-sm text-gray-500">
|
||||
Singers loaded: {singersCount}
|
||||
</div>
|
||||
</IonContent>
|
||||
|
||||
{/* Singers List */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
{singersCount === 0 ? (
|
||||
<EmptyState
|
||||
title="No singers yet"
|
||||
message="Singers will appear here when they join the party"
|
||||
icon={
|
||||
<svg className="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
) : singers.length === 0 ? (
|
||||
<EmptyState
|
||||
title="Loading singers..."
|
||||
message="Please wait while singers data is being loaded"
|
||||
icon={
|
||||
<svg className="h-12 w-12 text-gray-400 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<IonList>
|
||||
{singers.map((singer) => (
|
||||
<IonItemSliding key={singer.key}>
|
||||
<IonItem>
|
||||
<IonIcon icon={people} slot="start" color="primary" />
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{singer.name}
|
||||
</h3>
|
||||
<div className="flex items-center mt-1">
|
||||
<IonChip color="medium">
|
||||
<IonIcon icon={time} />
|
||||
{formatDate(singer.lastLogin)}
|
||||
</IonChip>
|
||||
</div>
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
|
||||
{/* Swipe to Remove (Admin Only) */}
|
||||
{isAdmin && (
|
||||
<IonItemOptions side="end">
|
||||
<IonItemOption
|
||||
color="danger"
|
||||
onClick={() => handleRemoveSinger(singer)}
|
||||
>
|
||||
<IonIcon icon={trash} slot="icon-only" />
|
||||
</IonItemOption>
|
||||
</IonItemOptions>
|
||||
)}
|
||||
</IonItemSliding>
|
||||
))}
|
||||
</IonList>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonModal, IonButton, IonIcon, IonChip, IonAccordion, IonAccordionGroup } from '@ionic/react';
|
||||
import { IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, IonModal, IonButton, IonIcon, IonChip, IonAccordion, IonAccordionGroup } from '@ionic/react';
|
||||
import { close, documentText, add, heart, heartOutline } from 'ionicons/icons';
|
||||
import { useSongLists } from '../../hooks';
|
||||
import { useAppSelector } from '../../redux';
|
||||
@ -95,78 +95,76 @@ const SongLists: React.FC = () => {
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
{songLists.length} song list{songLists.length !== 1 ? 's' : ''} available
|
||||
</p>
|
||||
|
||||
{/* Debug info */}
|
||||
<div className="mb-4 text-sm text-gray-500">
|
||||
Song lists loaded: {songListCount}
|
||||
</div>
|
||||
|
||||
{/* Song Lists */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
{songListCount === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Loading song lists...</h3>
|
||||
<p className="text-sm text-gray-500">Please wait while song lists are being loaded</p>
|
||||
</div>
|
||||
) : songLists.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No song lists available</h3>
|
||||
<p className="text-sm text-gray-500">Song lists will appear here when they're available</p>
|
||||
</div>
|
||||
) : (
|
||||
<IonList>
|
||||
{songLists.map((songList) => (
|
||||
<IonItem key={songList.key} button onClick={() => handleSongListClick(songList.key!)}>
|
||||
<IonIcon icon={documentText} slot="start" color="primary" />
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{songList.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{songList.songs.length} song{songList.songs.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</IonLabel>
|
||||
<IonChip slot="end" color="primary">
|
||||
View Songs
|
||||
</IonChip>
|
||||
</IonItem>
|
||||
))}
|
||||
|
||||
{/* Infinite scroll trigger */}
|
||||
{hasMore && (
|
||||
<div
|
||||
ref={observerRef}
|
||||
className="py-4 text-center text-gray-500"
|
||||
>
|
||||
<div className="inline-flex items-center">
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Loading more song lists...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</IonList>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
{songLists.length} song list{songLists.length !== 1 ? 's' : ''} available
|
||||
</p>
|
||||
|
||||
{/* Debug info */}
|
||||
<div className="mb-4 text-sm text-gray-500">
|
||||
Song lists loaded: {songListCount}
|
||||
</div>
|
||||
</IonContent>
|
||||
|
||||
{/* Song Lists */}
|
||||
<div className="bg-white rounded-lg shadow">
|
||||
{songListCount === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Loading song lists...</h3>
|
||||
<p className="text-sm text-gray-500">Please wait while song lists are being loaded</p>
|
||||
</div>
|
||||
) : songLists.length === 0 ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg className="h-12 w-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No song lists available</h3>
|
||||
<p className="text-sm text-gray-500">Song lists will appear here when they're available</p>
|
||||
</div>
|
||||
) : (
|
||||
<IonList>
|
||||
{songLists.map((songList) => (
|
||||
<IonItem key={songList.key} button onClick={() => handleSongListClick(songList.key!)}>
|
||||
<IonIcon icon={documentText} slot="start" color="primary" />
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{songList.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{songList.songs.length} song{songList.songs.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</IonLabel>
|
||||
<IonChip slot="end" color="primary">
|
||||
View Songs
|
||||
</IonChip>
|
||||
</IonItem>
|
||||
))}
|
||||
|
||||
{/* Infinite scroll trigger */}
|
||||
{hasMore && (
|
||||
<div
|
||||
ref={observerRef}
|
||||
className="py-4 text-center text-gray-500"
|
||||
>
|
||||
<div className="inline-flex items-center">
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Loading more song lists...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</IonList>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Song List Modal */}
|
||||
<IonModal isOpen={!!finalSelectedList} onDidDismiss={handleCloseSongList}>
|
||||
@ -178,8 +176,8 @@ const SongLists: React.FC = () => {
|
||||
</IonButton>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<IonContent>
|
||||
{/* Remove IonContent, use a div instead */}
|
||||
<div>
|
||||
<IonAccordionGroup>
|
||||
{finalSelectedList?.songs.map((songListSong: SongListSong, idx) => {
|
||||
const availableSongs = checkSongAvailability(songListSong);
|
||||
@ -212,7 +210,7 @@ const SongLists: React.FC = () => {
|
||||
{isAvailable ? (
|
||||
<IonList>
|
||||
{availableSongs.map((song: Song, sidx) => (
|
||||
<IonItem key={song.key || `${song.title}-${song.artist}-${sidx}`}>
|
||||
<IonItem key={song.key || `${song.title}-${song.artist}-${sidx}`}>
|
||||
<IonLabel>
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
{song.title}
|
||||
@ -250,7 +248,7 @@ const SongLists: React.FC = () => {
|
||||
);
|
||||
})}
|
||||
</IonAccordionGroup>
|
||||
</IonContent>
|
||||
</div>
|
||||
</IonModal>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
import React from 'react';
|
||||
import { IonHeader, IonToolbar, IonTitle, IonChip, IonIcon } from '@ionic/react';
|
||||
import { trophy } from 'ionicons/icons';
|
||||
import { InfiniteScrollList } from '../../components/common';
|
||||
import { useTopPlayed } from '../../hooks';
|
||||
import { useAppSelector } from '../../redux';
|
||||
import { selectTopPlayed } from '../../redux';
|
||||
import type { TopPlayed, Song } from '../../types';
|
||||
|
||||
const Top100: React.FC = () => {
|
||||
console.log('Top100 component - RENDERING START');
|
||||
|
||||
const TopPlayed: React.FC = () => {
|
||||
const {
|
||||
topPlayedItems,
|
||||
hasMore,
|
||||
loadMore,
|
||||
handleAddToQueue,
|
||||
handleToggleFavorite,
|
||||
@ -17,18 +20,110 @@ const TopPlayed: React.FC = () => {
|
||||
const topPlayed = useAppSelector(selectTopPlayed);
|
||||
const topPlayedCount = Object.keys(topPlayed).length;
|
||||
|
||||
// Debug logging
|
||||
console.log('TopPlayed component - top played count:', topPlayedCount);
|
||||
console.log('TopPlayed component - top played items:', topPlayedItems);
|
||||
console.log('Top100 component - Redux data:', { topPlayedCount, topPlayedItems: topPlayedItems.length });
|
||||
|
||||
const renderExtraContent = (item: any, index: number) => (
|
||||
<div className="flex items-center space-x-2 px-4 py-2">
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<IonIcon icon="trophy" className="mr-1" />
|
||||
<span>#{index + 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// Mock data for testing
|
||||
const mockTopPlayedItems: TopPlayed[] = [
|
||||
{
|
||||
key: 'mock-1',
|
||||
title: 'Bohemian Rhapsody',
|
||||
artist: 'Queen',
|
||||
count: 156
|
||||
},
|
||||
{
|
||||
key: 'mock-2',
|
||||
title: 'Sweet Caroline',
|
||||
artist: 'Neil Diamond',
|
||||
count: 142
|
||||
},
|
||||
{
|
||||
key: 'mock-3',
|
||||
title: 'Don\'t Stop Believin\'',
|
||||
artist: 'Journey',
|
||||
count: 128
|
||||
},
|
||||
{
|
||||
key: 'mock-4',
|
||||
title: 'Livin\' on a Prayer',
|
||||
artist: 'Bon Jovi',
|
||||
count: 115
|
||||
},
|
||||
{
|
||||
key: 'mock-5',
|
||||
title: 'Wonderwall',
|
||||
artist: 'Oasis',
|
||||
count: 98
|
||||
},
|
||||
{
|
||||
key: 'mock-6',
|
||||
title: 'Hotel California',
|
||||
artist: 'Eagles',
|
||||
count: 87
|
||||
},
|
||||
{
|
||||
key: 'mock-7',
|
||||
title: 'Stairway to Heaven',
|
||||
artist: 'Led Zeppelin',
|
||||
count: 76
|
||||
},
|
||||
{
|
||||
key: 'mock-8',
|
||||
title: 'Imagine',
|
||||
artist: 'John Lennon',
|
||||
count: 65
|
||||
},
|
||||
{
|
||||
key: 'mock-9',
|
||||
title: 'Hey Jude',
|
||||
artist: 'The Beatles',
|
||||
count: 54
|
||||
},
|
||||
{
|
||||
key: 'mock-10',
|
||||
title: 'Yesterday',
|
||||
artist: 'The Beatles',
|
||||
count: 43
|
||||
}
|
||||
];
|
||||
|
||||
// Convert TopPlayed items to Song format for consistent UI
|
||||
const songItems: Song[] = mockTopPlayedItems.map((item: TopPlayed) => ({
|
||||
...item,
|
||||
path: '', // TopPlayed doesn't have path
|
||||
disabled: false,
|
||||
favorite: false,
|
||||
}));
|
||||
|
||||
// Use mock data for now
|
||||
const displayItems = songItems;
|
||||
const displayCount = songItems.length;
|
||||
const displayHasMore = false; // No more mock data to load
|
||||
|
||||
console.log('Top100 component - Mock data:', {
|
||||
displayItems: displayItems.length,
|
||||
displayCount,
|
||||
displayHasMore,
|
||||
firstItem: displayItems[0]
|
||||
});
|
||||
|
||||
console.log('Top100 component - About to render JSX');
|
||||
|
||||
// Wrapper functions to handle type conversion
|
||||
const handleAddToQueueWrapper = (song: Song) => {
|
||||
console.log('Top100 component - Add to Queue clicked:', song);
|
||||
const topPlayedItem = mockTopPlayedItems.find(item => item.key === song.key);
|
||||
if (topPlayedItem) {
|
||||
handleAddToQueue(topPlayedItem);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleFavoriteWrapper = (song: Song) => {
|
||||
console.log('Top100 component - Remove clicked:', song);
|
||||
const topPlayedItem = mockTopPlayedItems.find(item => item.key === song.key);
|
||||
if (topPlayedItem) {
|
||||
handleToggleFavorite(topPlayedItem);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -37,33 +132,41 @@ const TopPlayed: React.FC = () => {
|
||||
<IonTitle>
|
||||
Top 100 Played
|
||||
<IonChip color="primary" className="ml-2">
|
||||
{topPlayedItems.length}
|
||||
{displayItems.length}
|
||||
</IonChip>
|
||||
</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
|
||||
<div style={{ height: '100%', overflowY: 'auto' }}>
|
||||
<InfiniteScrollList
|
||||
items={topPlayedItems}
|
||||
isLoading={topPlayedCount === 0}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMore}
|
||||
onAddToQueue={handleAddToQueue}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
context="topPlayed"
|
||||
title=""
|
||||
subtitle=""
|
||||
emptyTitle="No top played songs"
|
||||
emptyMessage="Play some songs to see the top played list"
|
||||
loadingTitle="Loading top played songs..."
|
||||
loadingMessage="Please wait while top played data is being loaded"
|
||||
debugInfo={`Top played items loaded: ${topPlayedCount}`}
|
||||
renderExtraContent={renderExtraContent}
|
||||
/>
|
||||
</div>
|
||||
<InfiniteScrollList
|
||||
items={displayItems}
|
||||
isLoading={displayCount === 0}
|
||||
hasMore={displayHasMore}
|
||||
onLoadMore={loadMore}
|
||||
onAddToQueue={handleAddToQueueWrapper}
|
||||
onToggleFavorite={handleToggleFavoriteWrapper}
|
||||
context="topPlayed"
|
||||
title=""
|
||||
subtitle=""
|
||||
emptyTitle="No top played songs"
|
||||
emptyMessage="Play some songs to see the top played list"
|
||||
loadingTitle="Loading top played songs..."
|
||||
loadingMessage="Please wait while top played data is being loaded"
|
||||
debugInfo={`Top played items loaded: ${displayCount} (Mock Data)`}
|
||||
renderExtraContent={(item: Song, index: number) => (
|
||||
<div className="flex items-center space-x-2 px-4 py-2">
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<IonIcon icon={trophy} className="mr-1" />
|
||||
<span>#{index + 1}</span>
|
||||
</div>
|
||||
<IonChip color="primary">
|
||||
{item.count} play{item.count !== 1 ? 's' : ''}
|
||||
</IonChip>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopPlayed;
|
||||
export default Top100;
|
||||
Loading…
Reference in New Issue
Block a user