Add more info to album page

This commit is contained in:
Neshura 2024-05-02 04:11:54 +02:00
parent 7958a00050
commit 7b3b5f7136
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
5 changed files with 69 additions and 5 deletions

View file

@ -38,11 +38,12 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
"bits-ui": "^0.21.4", "bits-ui": "^0.21.7",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"formsnap": "^1.0.0", "formsnap": "^1.0.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"radix-icons-svelte": "^1.2.1", "radix-icons-svelte": "^1.2.1",
"svelte-radix": "^1.1.0",
"tailwind-merge": "^2.3.0", "tailwind-merge": "^2.3.0",
"tailwind-variants": "^0.2.1", "tailwind-variants": "^0.2.1",
"ts-md5": "^1.3.1", "ts-md5": "^1.3.1",

View file

@ -0,0 +1,35 @@
<script lang="ts">
import { Checkbox as CheckboxPrimitive } from "bits-ui";
import Check from "svelte-radix/Check.svelte";
import Minus from "svelte-radix/Minus.svelte";
import { cn } from "$lib/utils.js";
type $$Props = CheckboxPrimitive.Props;
type $$Events = CheckboxPrimitive.Events;
let className: $$Props["class"] = undefined;
export let checked: $$Props["checked"] = false;
export { className as class };
</script>
<CheckboxPrimitive.Root
class={cn(
"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
className
)}
bind:checked
on:click
{...$$restProps}
>
<CheckboxPrimitive.Indicator
class={cn("flex h-4 w-4 items-center justify-center text-current")}
let:isChecked
let:isIndeterminate
>
{#if isIndeterminate}
<Minus class="h-3.5 w-3.5" />
{:else}
<Check class={cn("h-3.5 w-3.5", !isChecked && "text-transparent")} />
{/if}
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>

View file

@ -0,0 +1,6 @@
import Root from "./checkbox.svelte";
export {
Root,
//
Root as Checkbox,
};

View file

@ -14,6 +14,7 @@
import {Button} from "$lib/components/ui/button"; import {Button} from "$lib/components/ui/button";
import {shuffle} from "$lib/utilities"; import {shuffle} from "$lib/utilities";
import {displayTime} from "$lib/utilities.js"; import {displayTime} from "$lib/utilities.js";
import {Checkbox} from "$lib/components/ui/checkbox";
class AlbumData { class AlbumData {
data: AlbumID3WithSongs = $state({}) data: AlbumID3WithSongs = $state({})
} }
@ -123,6 +124,19 @@
} }
} }
async function toggleStarred() {
const parameters = [
{key: "albumId", value: album.data.id}
];
if (album.data.starred) {
await OpenSubsonic.get("unstar", parameters);
}
else {
await OpenSubsonic.get("star", parameters)
}
fetchAlbumInfos();
}
onMount(() => { onMount(() => {
fetchAlbumInfos(); fetchAlbumInfos();
}) })
@ -140,6 +154,9 @@
<p>{album.info.lastFmUrl}</p> <p>{album.info.lastFmUrl}</p>
<p>{album.info.musicBrainzId}</p> <p>{album.info.musicBrainzId}</p>
<p>Length: {displayTime(album.data.duration)}</p> <p>Length: {displayTime(album.data.duration)}</p>
<p>{album.data.genre}</p>
<p>{"*".repeat(album.data.userRating)}</p>
<Checkbox id="starred" checked={album.data.starred} onclick={() => toggleStarred()} />
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">

View file

@ -805,10 +805,10 @@ binary-extensions@^2.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw== integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
bits-ui@^0.21.4: bits-ui@^0.21.7:
version "0.21.4" version "0.21.7"
resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.21.4.tgz#dac98b85f8a5bd01a12169ca1f2ce45a4aa63d1f" resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.21.7.tgz#bd43ee86194802396823880385e7575fbd2b3c3a"
integrity sha512-IL+7s19GW561jwkeYk23dwkTfQ9606I062qqv2AtjCdhhIdoOEJNVBX0kjP5xefSaS6ojL0HGG54att0aRTcAQ== integrity sha512-1PKp90ly1R6jexIiAUj1Dk4u2pln7ok+L8Vc0rHMY7pi7YZvadFNZvkp1G5BtmL8qh2xsn4MVNgKjPAQMCxW0A==
dependencies: dependencies:
"@internationalized/date" "^3.5.1" "@internationalized/date" "^3.5.1"
"@melt-ui/svelte" "0.76.2" "@melt-ui/svelte" "0.76.2"
@ -2286,6 +2286,11 @@ svelte-preprocess@^5.1.3:
sorcery "^0.11.0" sorcery "^0.11.0"
strip-indent "^3.0.0" strip-indent "^3.0.0"
svelte-radix@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/svelte-radix/-/svelte-radix-1.1.0.tgz#5fb0c8d37422ea4863649180f6277af2d8b70dd3"
integrity sha512-kyE9wZiJV937INGb+wiBkAjmGtQUUYRPkVL2Q+/gj+9Vog1Ewd2wNvNmpNMUd+c+euxoc5u5YZMuCUgky9EUPw==
svelte@^5.0.0-next: svelte@^5.0.0-next:
version "5.0.0-next.115" version "5.0.0-next.115"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.0.0-next.115.tgz#43fe80829eb6c783e891888a7df07a5d8f854a64" resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.0.0-next.115.tgz#43fe80829eb6c783e891888a7df07a5d8f854a64"