Some tiny state fixes

Author: NellowTCS

Build/src/hooks/useKomorebi.ts

@@ -3,6 +3,7 @@ import { KomorebiEngine } from "../core/engine/engine";
 import type {
   Track,
   Playlist,
+  PlaylistFolder,
   EngineState,
   QueueState,
 } from "../core/engine/types";
@@ -31,6 +32,7 @@ export interface UseKomorebiReturn {
   isLoading: boolean;
 
   state: EngineState;
+  songs: Track[];
   currentTrack: Track | null;
   isPlaying: boolean;
   currentTime: number;
@@ -75,6 +77,14 @@ export interface UseKomorebiReturn {
   getSongsByAlbum: (album: string) => Track[];
 }
 
+declare global {
+  interface MusicLibrary {
+    songs: Track[];
+    playlists: (Playlist | PlaylistFolder)[];
+    favorites: string[];
+  }
+}
+
 const DEFAULT_QUEUE: QueueState = {
   tracks: [],
   currentIndex: -1,
@@ -123,6 +133,7 @@ export function useKomorebi(
   const [error, setError] = useState<string | null>(null);
 
   const [state, setState] = useState<EngineState>(createInitialState);
+  const [songs, setSongs] = useState<Track[]>([]);
   const [currentTrack, setCurrentTrack] = useState<Track | null>(null);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -180,6 +191,8 @@ export function useKomorebi(
     engine.on("ready", handleReady);
 
     const handleLibraryChange = () => {
+      console.log("[handleLibraryChange] called, songs:", library.getState().songs.length);
+      setSongs([...library.getState().songs]);
       setState(engine.getState());
     };
     library.on("songadded", handleLibraryChange);
@@ -213,6 +226,8 @@ export function useKomorebi(
 
     loadLibrary().then(() => {
       setIsReady(true);
+      console.log("[loadLibrary] setting songs:", library.getState().songs.length);
+      setSongs([...library.getState().songs]);
       setState(engine.getState());
     });
 
@@ -381,6 +396,7 @@ export function useKomorebi(
   }, []);
 
   const addSong = useCallback((song: Track) => {
+    console.log("[addSong] called", { songId: song.id, title: song.title });
     libraryRef.current?.addSong(song);
   }, []);
 
@@ -437,6 +453,7 @@ export function useKomorebi(
     isLoading,
 
     state,
+    songs,
     currentTrack,
     isPlaying: state.state === "playing",
     currentTime,

Build/src/ui/components/features/Home.tsx

@@ -82,11 +82,11 @@ const PlaylistCardItem = React.memo<{
 
 export const Home: React.FC<HomeProps> = ({ komorebi, onAddMusic }) => {
   const { t } = useTranslation();
-  const { currentTrack, library, playSong, getFavorites } = komorebi;
+  const { currentTrack, library, songs: komorebiSongs, playSong, getFavorites } = komorebi;
   const { goToSongs } = useNavigation();
 
   const libraryState = library.getState();
-  const songs = libraryState.songs;
+  const songs = komorebiSongs;
   const playlists = libraryState.playlists;
   const favorites = libraryState.favorites;
 

Build/src/ui/components/features/Playlist.tsx

@@ -27,7 +27,7 @@ export const PlaylistView = memo(function PlaylistView({
   komorebi,
 }: PlaylistViewProps) {
   const { t } = useTranslation();
-  const library = komorebi.library;
+  const { songs, library } = komorebi;
   const libraryState = library.getState();
   const [playlistSearchQuery, setPlaylistSearchQuery] = useState("");
   const [playlistImages, setPlaylistImages] = useState<Record<string, string>>(
@@ -170,7 +170,7 @@ export const PlaylistView = memo(function PlaylistView({
       isCancelled = true;
       clearTimeout(timeoutId);
     };
-  }, [libraryState.playlists, libraryState.songs]);
+  }, [libraryState.playlists, songs]);
 
   const filteredPlaylists = useMemo(
     () =>
@@ -266,10 +266,10 @@ export const PlaylistView = memo(function PlaylistView({
     const allSongs: Playlist = {
       id: "all-songs",
       name: t("allSongs"),
-      songs: libraryState.songs,
+      songs: songs,
     };
     komorebi.playSong(allSongs.songs[0], allSongs);
-  }, [libraryState.songs, komorebi, t]);
+  }, [songs, komorebi, t]);
 
   const handleShare = useCallback(
     (playlist: Playlist) => {
@@ -425,7 +425,7 @@ export const PlaylistView = memo(function PlaylistView({
         >
           <Icon name="music" size={16} decorative />
           {t("allSongs")}
-          <span className={styles.songCount}>{libraryState.songs.length}</span>
+          <span className={styles.songCount}>{songs.length}</span>
         </button>
 
         <button
@@ -434,7 +434,7 @@ export const PlaylistView = memo(function PlaylistView({
             handlePlaylistSelect({
               id: "favorites",
               name: t("favorites.favorites"),
-              songs: libraryState.songs.filter((s) =>
+              songs: songs.filter((s) =>
                 libraryState.favorites.includes(s.id),
               ),
             })

Build/src/ui/components/layout/MainContent.tsx

@@ -218,8 +218,14 @@ export const MainContent = ({
 }: MainContentProps) => {
   const { t } = useTranslation();
   const { state: navState, goToSongs, goHome } = useNavigation();
-  const library = komorebi.library;
-  const libraryState = library.getState();
+  const { songs, library } = komorebi;
+  console.log("[MainContent] songs:", songs.length, "library songs:", library.getState().songs.length);
+
+  const libraryState: MusicLibrary = {
+    songs,
+    playlists: library.getState().playlists,
+    favorites: library.getState().favorites,
+  };
 
   const [songSearchQuery, setSongSearchQuery] = useState("");
   const [sortBy, setSortBy] = useState<
@@ -274,24 +280,24 @@ export const MainContent = ({
 
   const songsToDisplay = React.useMemo(() => {
     if (navState.view === "artist" && navState.artist) {
-      return libraryState.songs.filter(
+      return songs.filter(
         (song: Track) => song.artist === navState.artist,
       );
     } else if (navState.view === "album" && navState.album) {
-      return libraryState.songs.filter(
+      return songs.filter(
         (song: Track) => song.album === navState.album,
       );
     } else if (engineState.currentPlaylist) {
       return engineState.currentPlaylist.songs;
     } else {
-      return libraryState.songs;
+      return songs;
     }
   }, [
     navState.view,
     navState.artist,
     navState.album,
     engineState.currentPlaylist,
-    libraryState.songs,
+    songs,
   ]);
 
   const filteredSongs = React.useMemo(() => {
@@ -370,7 +376,7 @@ export const MainContent = ({
     e.stopPropagation();
     const wasFavorite = library.isFavorite(songId);
     toggleFavorite(songId);
-    const song = libraryState.songs.find((s) => s.id === songId);
+    const song = songs.find((s) => s.id === songId);
     if (song) {
       toast.success(
         wasFavorite
@@ -583,7 +589,7 @@ export const MainContent = ({
       {/* Add To Popover */}
       <AddToPopover
         songs={selectedSongs
-          .map((id) => libraryState.songs.find((s) => s.id === id))
+          .map((id) => songs.find((s) => s.id === id))
           .filter((s): s is Track => s !== undefined)}
         library={libraryState}
         onCreatePlaylist={createPlaylist}