Add more info to album page
This commit is contained in:
parent
7958a00050
commit
7b3b5f7136
5 changed files with 69 additions and 5 deletions
|
@ -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",
|
||||||
|
|
35
src/lib/components/ui/checkbox/checkbox.svelte
Normal file
35
src/lib/components/ui/checkbox/checkbox.svelte
Normal 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>
|
6
src/lib/components/ui/checkbox/index.ts
Normal file
6
src/lib/components/ui/checkbox/index.ts
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import Root from "./checkbox.svelte";
|
||||||
|
export {
|
||||||
|
Root,
|
||||||
|
//
|
||||||
|
Root as Checkbox,
|
||||||
|
};
|
|
@ -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">
|
||||||
|
|
13
yarn.lock
13
yarn.lock
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue