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 14:16:24 -05:00
parent e556b4949d
commit 8626251f33
5 changed files with 116 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,12 @@
import React, { useState } from 'react';
import { IonSearchbar, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonContent, IonItem } from '@ionic/react';
import { close, list } from 'ionicons/icons';
import { InfiniteScrollList, SongItem, ListItem, NumberDisplay } from '../../components/common';
import { InfiniteScrollList, SongItem, ListItem, NumberDisplay, SongInfo } from '../../components/common';
import { useArtists } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectSongs } from '../../redux';
import { debugLog } from '../../utils/logger';
import type { Song } from '../../types';
const Artists: React.FC = () => {
const {
@ -22,6 +23,8 @@ const Artists: React.FC = () => {
const songs = useAppSelector(selectSongs);
const songsCount = Object.keys(songs).length;
const [selectedArtist, setSelectedArtist] = useState<string | null>(null);
const [selectedSong, setSelectedSong] = useState<Song | null>(null);
const [isSongInfoOpen, setIsSongInfoOpen] = useState(false);
// Debug logging
debugLog('Artists component - artists count:', artists.length);
@ -37,6 +40,16 @@ const Artists: React.FC = () => {
setSelectedArtist(null);
};
const handleSongInfo = (song: Song) => {
setSelectedSong(song);
setIsSongInfoOpen(true);
};
const handleCloseSongInfo = () => {
setIsSongInfoOpen(false);
setSelectedSong(null);
};
const selectedArtistSongs = selectedArtist ? getSongsByArtist(selectedArtist) : [];
// Render artist item for InfiniteScrollList
@ -135,7 +148,7 @@ const Artists: React.FC = () => {
song={song}
context="search"
onAddToQueue={() => handleAddToQueue(song)}
onSelectSinger={() => {}} // Info button functionality
onSelectSinger={() => handleSongInfo(song)}
showAddButton={true}
showInfoButton={true}
showFavoriteButton={false}
@ -150,6 +163,15 @@ const Artists: React.FC = () => {
</div>
</IonContent>
</IonModal>
{/* Song Info Modal */}
{selectedSong && (
<SongInfo
isOpen={isSongInfoOpen}
onClose={handleCloseSongInfo}
song={selectedSong}
/>
)}
</div>
</>
);

25
src/features/History/History.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { IonChip, IonIcon } from '@ionic/react';
import { time } from 'ionicons/icons';
import { InfiniteScrollList, SongItem } from '../../components/common';
import { InfiniteScrollList, SongItem, SongInfo } from '../../components/common';
import { useHistory } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectHistory, selectIsAdmin } from '../../redux';
@ -21,11 +21,23 @@ const History: React.FC = () => {
const history = useAppSelector(selectHistory);
const isAdmin = useAppSelector(selectIsAdmin);
const historyCount = Object.keys(history).length;
const [selectedSong, setSelectedSong] = React.useState<Song | null>(null);
const [isSongInfoOpen, setIsSongInfoOpen] = React.useState(false);
// Debug logging
debugLog('History component - history count:', historyCount);
debugLog('History component - history items:', historyItems);
const handleSongInfo = (song: Song) => {
setSelectedSong(song);
setIsSongInfoOpen(true);
};
const handleCloseSongInfo = () => {
setIsSongInfoOpen(false);
setSelectedSong(null);
};
// Render extra content for history items (play date)
const renderExtraContent = (item: Song) => {
if (item.date) {
@ -53,7 +65,7 @@ const History: React.FC = () => {
song={song}
context="history"
onAddToQueue={() => handleAddToQueue(song)}
onSelectSinger={() => {}} // Info button functionality
onSelectSinger={() => handleSongInfo(song)}
onDeleteItem={() => handleDeleteFromHistory(song)}
isAdmin={isAdmin}
showAddButton={true}
@ -70,6 +82,15 @@ const History: React.FC = () => {
loadingTitle="Loading history..."
loadingMessage="Please wait while history data is being loaded"
/>
{/* Song Info Modal */}
{selectedSong && (
<SongInfo
isOpen={isSongInfoOpen}
onClose={handleCloseSongInfo}
song={selectedSong}
/>
)}
</>
);
};

24
src/features/NewSongs/NewSongs.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { InfiniteScrollList, SongItem } from '../../components/common';
import { InfiniteScrollList, SongItem, SongInfo } from '../../components/common';
import { useNewSongs } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectNewSongsArray } from '../../redux';
@ -16,11 +16,23 @@ const NewSongs: React.FC = () => {
const newSongsArray = useAppSelector(selectNewSongsArray);
const newSongsCount = newSongsArray.length;
const [selectedSong, setSelectedSong] = React.useState<Song | null>(null);
const [isSongInfoOpen, setIsSongInfoOpen] = React.useState(false);
// Debug logging
debugLog('NewSongs component - new songs count:', newSongsCount);
debugLog('NewSongs component - new songs items:', newSongsItems);
const handleSongInfo = (song: Song) => {
setSelectedSong(song);
setIsSongInfoOpen(true);
};
const handleCloseSongInfo = () => {
setIsSongInfoOpen(false);
setSelectedSong(null);
};
return (
<>
<InfiniteScrollList<Song>
@ -33,6 +45,7 @@ const NewSongs: React.FC = () => {
song={song}
context="search"
onAddToQueue={() => handleAddToQueue(song)}
onSelectSinger={() => handleSongInfo(song)}
showAddButton={true}
showInfoButton={true}
showFavoriteButton={false}
@ -43,6 +56,15 @@ const NewSongs: React.FC = () => {
loadingTitle="Loading new songs..."
loadingMessage="Please wait while new songs data is being loaded"
/>
{/* Song Info Modal */}
{selectedSong && (
<SongInfo
isOpen={isSongInfoOpen}
onClose={handleCloseSongInfo}
song={selectedSong}
/>
)}
</>
);
};

25
src/features/SongLists/SongLists.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useMemo, useCallback } from 'react';
import { IonItem, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonChip, IonContent, IonList, IonAccordionGroup, IonAccordion } from '@ionic/react';
import { close, list } from 'ionicons/icons';
import { InfiniteScrollList, SongItem, ListItem, TwoLineDisplay, NumberDisplay } from '../../components/common';
import { InfiniteScrollList, SongItem, ListItem, TwoLineDisplay, NumberDisplay, SongInfo } from '../../components/common';
import { useSongLists } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectSongList } from '../../redux';
@ -22,6 +22,8 @@ const SongLists: React.FC = () => {
const songListCount = Object.keys(songListData).length;
const [selectedSongList, setSelectedSongList] = useState<string | null>(null);
const [expandedSongKey, setExpandedSongKey] = useState<string | null>(null);
const [selectedSong, setSelectedSong] = useState<Song | null>(null);
const [isSongInfoOpen, setIsSongInfoOpen] = useState(false);
@ -39,6 +41,16 @@ const SongLists: React.FC = () => {
setExpandedSongKey(expandedSongKey === songKey ? null : songKey);
}, [expandedSongKey]);
const handleSongInfo = useCallback((song: Song) => {
setSelectedSong(song);
setIsSongInfoOpen(true);
}, []);
const handleCloseSongInfo = useCallback(() => {
setIsSongInfoOpen(false);
setSelectedSong(null);
}, []);
const finalSelectedList = selectedSongList
? allSongLists.find(list => list.key === selectedSongList)
: null;
@ -132,7 +144,7 @@ const SongLists: React.FC = () => {
song={song}
context="search"
onAddToQueue={() => handleAddToQueue(song)}
onSelectSinger={() => {}} // Info button functionality
onSelectSinger={() => handleSongInfo(song)}
showAddButton={true}
showInfoButton={true}
showFavoriteButton={false}
@ -173,6 +185,15 @@ const SongLists: React.FC = () => {
</IonAccordionGroup>
</IonContent>
</IonModal>
{/* Song Info Modal */}
{selectedSong && (
<SongInfo
isOpen={isSongInfoOpen}
onClose={handleCloseSongInfo}
song={selectedSong}
/>
)}
</div>
</>
);

25
src/features/TopPlayed/Top100.tsx
View File

@ -4,7 +4,7 @@ import { close, list } from 'ionicons/icons';
import { useTopPlayed } from '../../hooks';
import { useAppSelector } from '../../redux';
import { selectTopPlayed, selectSongsArray } from '../../redux';
import { InfiniteScrollList, SongItem, ListItem } from '../../components/common';
import { InfiniteScrollList, SongItem, ListItem, SongInfo } from '../../components/common';
import { filterSongs } from '../../utils/dataProcessing';
import { debugLog } from '../../utils/logger';
import { useSongOperations } from '../../hooks';
@ -27,6 +27,8 @@ const Top100: React.FC = () => {
const { addToQueue } = useSongOperations();
const { showSuccess, showError } = useToast();
const [selectedTopPlayed, setSelectedTopPlayed] = useState<TopPlayed | null>(null);
const [selectedSong, setSelectedSong] = useState<Song | null>(null);
const [isSongInfoOpen, setIsSongInfoOpen] = useState(false);
debugLog('Top100 component - Redux data:', { topPlayedCount, topPlayedItems: topPlayedItems.length });
@ -38,6 +40,16 @@ const Top100: React.FC = () => {
setSelectedTopPlayed(null);
}, []);
const handleSongInfo = useCallback((song: Song) => {
setSelectedSong(song);
setIsSongInfoOpen(true);
}, []);
const handleCloseSongInfo = useCallback(() => {
setIsSongInfoOpen(false);
setSelectedSong(null);
}, []);
// Find songs that match the selected top played item
const selectedSongs = useMemo(() => {
if (!selectedTopPlayed) return [];
@ -141,7 +153,7 @@ const Top100: React.FC = () => {
song={song}
context="search"
onAddToQueue={() => handleAddToQueue(song)}
onSelectSinger={() => {}} // Info button functionality
onSelectSinger={() => handleSongInfo(song)}
showAddButton={true}
showInfoButton={true}
showFavoriteButton={false}
@ -150,6 +162,15 @@ const Top100: React.FC = () => {
</IonList>
</IonContent>
</IonModal>
{/* Song Info Modal */}
{selectedSong && (
<SongInfo
isOpen={isSongInfoOpen}
onClose={handleCloseSongInfo}
song={selectedSong}
/>
)}
</>
);
};