409/groove-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix!: performance issues related to lucide-svelte and shadcn

Browse Source
This commit is contained in:
Shawn
2024-11-29 04:01:01 +01:00
parent c89073e025
commit 1287b71580
9 changed files with 183 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/groove/Queue.svelte
View File

@@ -64,7 +64,7 @@
</script>
<form
class="flex h-full flex-col gap-1 overflow-y-auto pr-3"
class="flex h-full flex-col gap-1 overflow-y-auto"
method="POST"
use:enhance={submitPlayerAction}
>

165
src/lib/components/groove/TrackListing.svelte
View File

@@ -1,149 +1,42 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { getCoverUrl } from '$lib/covers';
import { getPlayerState } from '$lib/player.svelte';
import { AudioLines, Music2, ListMusic, ListEnd } from 'lucide-svelte';
import type { SubmitFunction } from '../../../routes/tracks/[hash]/$types';
import type { Track } from '$lib/proto/library';
import * as ContextMenu from '$lib/components/ui/context-menu';
import type { Action } from 'svelte/action';
import AudioLines from 'virtual:icons/lucide/audio-lines';
interface Props {
track: Track;
hideCover?: boolean;
action: Action;
currentlyPlaying?: boolean;
oncontextmenu?: (event: MouseEvent, hash: string) => any;
}
let { track, action, hideCover = false }: Props = $props();
let isOpen = $state(false);
const player = getPlayerState();
const submitPlayTrack: SubmitFunction = async () => {
return async ({ update, result }) => {
isOpen = false;
await update({
invalidateAll: false
});
if (result.type === 'success' && result.data && 'track' in result.data) {
player.queue = [];
player.currentlyPlaying = result.data.track ?? null;
player.progress = result.data.position;
player.isPaused = false;
}
};
};
const submitEnqueue: SubmitFunction = async () => {
return async ({ update, result }) => {
isOpen = false;
await update({
invalidateAll: false
});
if (result.type === 'success' && result.data && 'tracks' in result.data) {
player.queue = result.data.tracks;
}
};
};
function contextMenuItemClicked(e: MouseEvent) {
e.stopPropagation();
}
let { track, currentlyPlaying = false, oncontextmenu }: Props = $props();
</script>
<form
<div
class="flex flex-col gap-3"
method="POST"
action="/tracks/{track.hash}?/play"
use:enhance={submitPlayTrack}
use:action
data-track-hash={track.hash}
oncontextmenu={(e) => oncontextmenu?.(e, track.hash)}
>
<ContextMenu.Root bind:open={isOpen}>
<ContextMenu.Trigger>
<div class="relative aspect-square w-full">
<button
type="submit"
class="relative aspect-square h-full w-full overflow-hidden rounded-lg"
>
<img
class="aspect-square h-full w-full transform-gpu transition-all duration-150 hover:scale-105 hover:saturate-150"
src={hideCover ? undefined : getCoverUrl(track.hash)}
alt={track.name}
width="640"
height="640"
/>
</button>
<div
class="absolute bottom-6 left-2 size-4 animate-pulse"
class:hidden={player.currentlyPlaying?.hash !== track.hash}
>
<AudioLines class="text-primary" />
</div>
</div>
<div class="relative space-y-1 text-sm">
<h3 class="font-medium leading-none">{track.name}</h3>
<p class="text-xs text-muted-foreground">{track.artistName}</p>
</div>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item class="!p-0">
<form
class="flex w-full"
method="POST"
action="/tracks/{track.hash}?/play"
use:enhance={submitPlayTrack}
>
<button
type="submit"
class="flex w-full items-center px-2 py-1.5 focus:outline-0"
onclick={contextMenuItemClicked}
>
<Music2 class="mr-1 size-4" />
Play
</button>
</form>
</ContextMenu.Item>
<ContextMenu.Item class="!p-0">
<form
class="flex w-full"
method="POST"
action="/tracks/{track.hash}?/play-next"
use:enhance={submitEnqueue}
>
<button
type="submit"
class="flex w-full items-center px-2 py-1.5 focus:outline-0"
onclick={contextMenuItemClicked}
>
<ListMusic class="mr-1 size-4" />
Play Next
</button>
</form>
</ContextMenu.Item>
<ContextMenu.Item class="!p-0">
<form
class="flex w-full"
method="POST"
action="/tracks/{track.hash}?/add-to-queue"
use:enhance={submitEnqueue}
>
<button
type="submit"
class="flex w-full items-center px-2 py-1.5 focus:outline-0"
onclick={contextMenuItemClicked}
>
<ListEnd class="mr-1 size-4" />
Add to Queue
</button>
</form>
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Root>
</form>
<div class="relative aspect-square w-full">
<button
type="submit"
class="relative aspect-square h-full w-full overflow-hidden rounded-lg"
formaction="/tracks/{track.hash}?/play"
>
<img
class="aspect-square h-full w-full transform-gpu transition-all duration-150 hover:scale-105 hover:saturate-150"
src={getCoverUrl(track.hash)}
alt={track.name}
width="640"
height="640"
/>
</button>
<div class="absolute bottom-6 left-2 size-4 animate-pulse" class:hidden={!currentlyPlaying}>
<AudioLines class="text-primary" />
</div>
</div>
<div class="relative space-y-1 text-sm">
<h3 class="font-medium leading-none">{track.name}</h3>
<p class="text-xs text-muted-foreground">{track.artistName}</p>
</div>
</div>