Load images into UI

albumCover.go

@@ -21,6 +21,14 @@ type AlbumCoverInfo struct {
 var albumCoverCacheInfo = make(map[string]*AlbumCoverInfo)
 var cacheMutex = sync.RWMutex{}
 
+func generateCacheFilename(albumId string) string {
+	albumCacheFile, err := xdg.CacheFile(fmt.Sprintf("%s/%s", appname, albumId))
+	if err != nil {
+		panic(fmt.Sprint("error creating cacheFile url: ", err))
+	}
+	return albumCacheFile
+}
+
 // Loads a single album cover and caches it in XDG_CACHE_HOME
 // First it checks if the cover already exists in XDG_CACHE_HOME
 // If it doesn't, loads it and stores it
@@ -34,13 +42,10 @@ func loadAlbumCover(albumId string) {
 		return
 	}
 
-	albumCacheFile, err := xdg.CacheFile(fmt.Sprintf("%s/%s", appname, albumId))
+	albumCacheFile := generateCacheFilename(albumId)
-	if err != nil {
-		panic(fmt.Sprint("error creating cacheFile url: ", err))
-	}
 
 	// Attempt to read file
-	if _, err = os.Stat(albumCacheFile); err != nil {
+	if _, err := os.Stat(albumCacheFile); err == nil {
 		// File exists
 		log.Print("album cover: cache hit (disk): ", albumId)
 		cacheMutex.Lock()
@@ -90,6 +95,7 @@ func loadAlbumCover(albumId string) {
 	imgBytes := response.Body()
 
 	// Write the image to cache
+	log.Printf("write %s: %+v", albumId, imgBytes[:10])
 	err = os.WriteFile(albumCacheFile, imgBytes, 0644)
 	if err != nil {
 		coverInfo.Error = errors.New("error writing album cover to disk")
@@ -99,3 +105,31 @@ func loadAlbumCover(albumId string) {
 
 	log.Print("Loading albumCover for ", albumId, " successful")
 }
+
+// Tries to load the album cover
+func (a *App) GetAlbumCover(albumId string) ([]byte, error) {
+	cacheMutex.Lock()
+	coverInfo, ok := albumCoverCacheInfo[albumId]
+	cacheMutex.Unlock()
+	if !ok {
+		panic("Illegal state: Tried to load an album, but it wasn't on memory cache")
+	}
+
+	coverInfo.WaitGroup.Wait()
+
+	if coverInfo.Error != nil {
+		return nil, coverInfo.Error
+	}
+
+	// Read the file
+	filename := generateCacheFilename(albumId)
+	log.Print("reading: ", filename)
+	bytes, err := os.ReadFile(filename)
+	if err != nil {
+		log.Fatal("error getting album cover: ", err)
+		return nil, errors.New("error reading cover file")
+	}
+
+	log.Printf("%s : %+v", albumId, bytes[:10])
+	return bytes, nil
+}

frontend/src/routes/Home.tsx

@@ -1,5 +1,5 @@
-import { For, createResource, createSignal, onMount } from "solid-js";
+import { For, createMemo, createResource, createSignal, onMount } from "solid-js";
-import { GetRandomAlbums } from "../../wailsjs/go/main/App";
+import { GetAlbumCover, GetRandomAlbums } from "../../wailsjs/go/main/App";
 import { main } from "../../wailsjs/go/models";
 
 export function Home() {
@@ -24,11 +24,21 @@ export function Home() {
 }
 
 function Album(props: { album: main.Album }) {
+    const [coverBytes] = createResource(async() => await GetAlbumCover(props.album.id));
+
+    const base64Image = createMemo(() => {
+        if (coverBytes.state !== "ready") return "";
+
+        // At runtime this is a string, not a number array
+        const bytes = coverBytes() as unknown as string;
+        return `data:;base64,${bytes}`;
+    });
+
     return (
         <div class="inline-block mx-2 p-1 w-32 rounded bg-zinc-900">
             <img
                 class="inline-block rounded w-30 h-30 min-w-30 min-h-30"
-                src={props.album.mediumImageUrl}
+                src={base64Image()}
                 alt=""
             />
             <br />

frontend/wailsjs/go/main/App.d.ts

@@ -2,6 +2,8 @@
 // This file is automatically generated. DO NOT EDIT
 import {main} from '../models';
 
+export function GetAlbumCover(arg1:string):Promise<Array<number>>;
+
 export function GetRandomAlbums():Promise<Array<main.Album>>;
 
 export function Greet(arg1:string):Promise<string>;

frontend/wailsjs/go/main/App.js

@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetAlbumCover(arg1) {
+  return window['go']['main']['App']['GetAlbumCover'](arg1);
+}
+
 export function GetRandomAlbums() {
   return window['go']['main']['App']['GetRandomAlbums']();
 }