Removed image state

src/renderer/windows/app/modules/library/library.state.ts

@@ -1,7 +1,18 @@
+import type { Label, Album } from '@doombox/types/library';
+
 import { populateAlbums } from '../../state/selectors';
 import store from '../../state/store';
 
-export default store.select(state => ({
+export default store.selectAsync<{
+  current: string | null
+  dir: string | null
+  data: Array<Album<string> | Label<string, string>>
+}>({
+  current: null,
+  dir: null,
+  data: []
+}, async state => ({
+  dir: await window.ipc.os.image(),
   current: state.player.current.id,
   data: Array.from(state.entities.label.values())
     .map(label => [

src/renderer/windows/app/modules/library/library.tsx

@@ -23,7 +23,7 @@ const Library: Component<LibraryProps> = () => {
 
   const component = new forgo.Component<LibraryProps>({
     render() {
-      const state = subscribe('Library', component);
+      const state = subscribe(component);
 
       return (
         <VirtualGrid
@@ -56,6 +56,7 @@ const Library: Component<LibraryProps> = () => {
                 <LibraryAlbum
                   action={Action.PlayAlbum}
                   album={cell}
+                  dir={state.dir}
                   current={state.current}
                 />
               );

src/renderer/windows/app/modules/library/libraryAlbum/libraryAlbum.tsx

@@ -7,12 +7,12 @@ import Icon from '@doombox/components/icon/icon';
 import cx from '@doombox/renderer/css/cx';
 
 import { imageSelector } from '../../../state/selectors';
-import store from '../../../state/store';
 
 import './libraryAlbum.scss';
 
 export type LibraryAlbumProps = {
   album: Album
+  dir: string | null
   current: string | null
   action: string
 };
@@ -35,19 +35,28 @@ const LibraryAlbum: Component<LibraryAlbumProps> = () => {
           {props.album.image ? (
             <picture>
               <source
-                srcset={imageSelector(store.state)(props.album.image, 256)}
+                srcset={(props.dir ?
+                  imageSelector(props.dir)(props.album.image, 256) :
+                  new URL('../icons/icon_light.png').href
+                )}
                 media="(min-width: 960px) and (min-height: 720px)"
                 width={256}
                 height={256}
               />
               <source
-                srcset={imageSelector(store.state)(props.album.image, 192)}
+                srcset={(props.dir ?
+                  imageSelector(props.dir)(props.album.image, 192) :
+                  new URL('../icons/icon_light.png').href
+                )}
                 media="(min-width: 720px) and (min-height: 480px)"
                 width={192}
                 height={192}
               />
               <img
-                srcset={imageSelector(store.state)(props.album.image, 128)}
+                srcset={(props.dir ?
+                  imageSelector(props.dir)(props.album.image, 128) :
+                  new URL('../icons/icon_light.png').href
+                )}
                 alt=''
                 width={128}
                 height={128}

src/renderer/windows/app/state/actions/library.actions.ts

@@ -89,6 +89,7 @@ export const search = async (query: string) => {
     }));
   } else {
     const library = await window.ipc.library.select(query);
+    const dir = await window.ipc.os.image();
 
     store.set(produce(draft => {
       draft.route.home = Route.Home.Search;
@@ -97,14 +98,14 @@ export const search = async (query: string) => {
         .map(song => ({
           ...song,
           image: song.image ?
-            imageSelector(draft)(song.image, 128) :
+            imageSelector(dir)(song.image, 128) :
             null
         }));
       draft.search.albums = library.albums
         .map(album => ({
           ...album,
           image: album.image ?
-            imageSelector(draft)(album.image, 128) :
+            imageSelector(dir)(album.image, 128) :
             null
         }));
       draft.search.labels = library.labels;

src/renderer/windows/app/state/actions/player.actions.ts

@@ -45,8 +45,9 @@ export const play = async (id: string) => {
     };
 
     if (song.image) {
+      const dir = await window.ipc.os.image();
       const artwork = await Promise.all([96, 128, 192, 256, 384, 512].map(async size => {
-        const response = await fetch(imageSelector(store.state)(song.image!, size));
+        const response = await fetch(imageSelector(dir)(song.image!, size));
         const blob = await response.blob();
         const src = await readFile(blob);
 

src/renderer/windows/app/state/ipc.ts

@@ -10,14 +10,12 @@ const createEntity = <T extends object, K extends keyof T>(arr: T[], k: K): Map<
 
 export default async (store: Store<State>) => {
   const [
-    thumbs,
     user,
     cache,
     theme,
     playlists,
     library
   ] = await Promise.all([
-    window.ipc.os.image(),
     window.ipc.user.get(),
     window.ipc.cache.get(),
     window.ipc.theme.get(),
@@ -26,7 +24,6 @@ export default async (store: Store<State>) => {
   ]);
 
   store.set(produce(draft => {
-    draft.dir.thumbs = thumbs;
     draft.user = user;
     draft.player.muted = cache.player.muted;
     draft.player.volume = cache.player.volume;

src/renderer/windows/app/state/selectors.ts

@@ -3,8 +3,8 @@ import type { Album, Label, Song } from '@doombox/types/library';
 
 import { AudioStatus } from '../../../lib/audio/audio';
 
-export const imageSelector = (state: State) => (id: string, size: number) =>
-  new URL(`${id}/${size}.jpg`, `${state.dir.thumbs}/`).href;
+export const imageSelector = (dir: string) => (id: string, size: number) =>
+  new URL(`${id}/${size}.jpg`, `${dir}/`).href;
 
 export const currentPlayerSelector = (state: State) => () =>
   state.entities.song.get(state.player.current.id ?? '');

src/renderer/windows/app/state/state.ts

@@ -6,9 +6,6 @@ import type { ThemeShape } from '@doombox/types/shapes/theme.shape';
 import type { UserShape } from '@doombox/types/shapes/user.shape';
 
 export type State = {
-  dir: {
-    thumbs: string
-  }
   route: {
     app: Route.App
     home: Route.Home

src/renderer/windows/app/state/store.ts

@@ -18,9 +18,6 @@ const store = new Store<State>({
     home: Route.Home.Library,
     search: Route.Search.Song
   },
-  dir: {
-    thumbs: ''
-  },
   queue: {
     title: 'Queue',
     index: 0,