fernando/wails-player
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix album animations when loading/unloading

Browse Source
This commit is contained in:
Araozu 2024-05-31 14:34:27 -05:00
parent a224d5baf8
commit 60eb0d3ff1
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/routes/Home.tsx
View File

@ -74,12 +74,15 @@ function Album(props: { albums: Array<main.Album | null>, idx: number }) {
const [coverBytes, {mutate, refetch}] = createResource<Array<number> | null>(async() => GetAlbumCover(props.albums[props.idx]?.id ?? "")); const [coverBytes, {mutate, refetch}] = createResource<Array<number> | null>(async() => GetAlbumCover(props.albums[props.idx]?.id ?? ""));
const [albumName, setAlbumName] = createSignal(""); const [albumName, setAlbumName] = createSignal("");
const [artistName, setArtistName] = createSignal(""); const [artistName, setArtistName] = createSignal("");
const [imageBase64, setImageBase64] = createSignal("");
const [imgReady, setImgReady] = createSignal(false);
const album = createMemo(() => props.albums[props.idx]); const album = createMemo(() => props.albums[props.idx]);
createEffect(() => { createEffect(() => {
const a = album(); const a = album();
if (a === null) { if (a === null) {
setImgReady(false);
mutate(null); mutate(null);
return; return;
} else { } else {
@ -90,31 +93,35 @@ function Album(props: { albums: Array<main.Album | null>, idx: number }) {
refetch(); refetch();
}); });
const base64Image = createMemo(() => { createEffect(() => {
if (coverBytes.state !== "ready") return ""; const status = coverBytes.state;
if (status === "ready") {
// At runtime this is a string, not a number array const bytes = coverBytes();
const bytes = coverBytes() as unknown as string; if (bytes === null) return;
return `data:;base64,${bytes}`; console.log("new image pushed, ");
setImageBase64(`data:;base64,${coverBytes()}`);
setImgReady(true);
}
}); });
const isNull = createMemo(() => !album()); const isNull = createMemo(() => !album());
const opacity = createMemo(() => `${isNull() ? "opacity-0" : "opacity-100"} transition-opacity`); const opacity = createMemo(() => `${isNull() ? "opacity-0" : "opacity-100"} transition-opacity`);
const imgOpacity = createMemo(() => (imgReady() && !isNull() ? "opacity-100" : "opacity-0"));
return ( return (
<div class="inline-block mx-2 p-1 w-32 rounded bg-zinc-900"> <div class="inline-block mx-2 p-1 w-32 rounded bg-zinc-900">
<div class="w-30 h-30" > <div class="w-30 h-30" >
<img <img
class={`inline-block rounded w-30 h-30 transition-opacity ${coverBytes.state === "ready" ? "opacity-100" : "opacity-0"}`} class={`inline-block rounded w-30 h-30 transition-opacity ${imgOpacity()}`}
src={base64Image()} src={imageBase64()}
alt="" alt=""
/> />
</div> </div>
<div class={`text-sm overflow-hidden overflow-ellipsis pt-1 ${opacity()}`}> <div class={`text-sm overflow-hidden overflow-ellipsis pt-1 ${opacity()}`} title={albumName()}>
{albumName()} {albumName()}
</div> </div>
<div class={`text-xs overflow-hidden overflow-ellipsis ${opacity()}`}> <div class={`text-xs overflow-hidden overflow-ellipsis ${opacity()}`} title={artistName()}>
{artistName()} {artistName()}
</div> </div>

3
session.go
View File

@ -5,7 +5,6 @@ import (
"fmt" "fmt"
"log" "log"
"sync" "sync"
"time"
"github.com/go-resty/resty/v2" "github.com/go-resty/resty/v2"
) )
@ -90,8 +89,6 @@ func loadAlbums(serverUrl string) {
log.Print("begin loadAlbums") log.Print("begin loadAlbums")
time.Sleep(5 * time.Second)
var errorData AuthError var errorData AuthError
response, err := client.R(). response, err := client.R().
SetHeader("x-nd-authorization", fmt.Sprintf("Bearer %s", LoggedUser.Token)). SetHeader("x-nd-authorization", fmt.Sprintf("Bearer %s", LoggedUser.Token)).