web-player: remove dead code and unused props
This commit is contained in:
@@ -81,10 +81,8 @@
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
{#if helperText}
|
||||
<p class="text-sm text-fg-2">{helperText}</p>
|
||||
{:else}
|
||||
<span></span>
|
||||
{/if}
|
||||
<div class="flex shrink-0 items-center gap-3">
|
||||
<div class="ml-auto flex shrink-0 items-center gap-3">
|
||||
<Button type="button" variant="secondary" onclick={onCancel}>Cancelar</Button>
|
||||
<Button type="submit" disabled={submitting || !canSubmit}>
|
||||
{submitting ? submittingLabel : submitLabel}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<a
|
||||
href="/user/{ownerUserId}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="block max-w-full truncate hover:text-fg-2 hover:underline {klass}"
|
||||
class="block max-w-full truncate hover:underline {klass}"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
size: Size;
|
||||
shape?: 'auto' | 'round';
|
||||
imageSize?: 'small' | 'medium' | 'large';
|
||||
fallback?: 'music' | 'gradient' | 'none';
|
||||
alt?: string;
|
||||
class?: string;
|
||||
children?: Snippet;
|
||||
@@ -21,7 +20,6 @@
|
||||
size,
|
||||
shape = 'auto',
|
||||
imageSize,
|
||||
fallback = 'music',
|
||||
alt = '',
|
||||
class: klass = '',
|
||||
children
|
||||
@@ -116,7 +114,7 @@
|
||||
onerror={() => (singleFailed = true)}
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
{:else if fallback === 'music'}
|
||||
{:else}
|
||||
<div class="grid h-full w-full place-items-center bg-surface">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="h-2/5 w-2/5 text-fg-2">
|
||||
<path
|
||||
@@ -124,10 +122,6 @@
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{:else if fallback === 'gradient'}
|
||||
<div class="h-full w-full bg-(image:--mf-cover-grad)"></div>
|
||||
{:else}
|
||||
<div class="h-full w-full bg-surface"></div>
|
||||
{/if}
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
size?: number;
|
||||
barWidth?: number;
|
||||
paused?: boolean;
|
||||
overlay?: boolean;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
size = 13,
|
||||
barWidth = 2,
|
||||
paused = false,
|
||||
overlay = false,
|
||||
class: klass = ''
|
||||
}: Props = $props();
|
||||
let { paused = false, overlay = false, class: klass = '' }: Props = $props();
|
||||
|
||||
const delays = [0, 0.3, 0.6];
|
||||
</script>
|
||||
@@ -30,11 +22,11 @@
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-end justify-center gap-0.5 {klass}" style="height:{size}px">
|
||||
<div class="flex h-3.5 items-end justify-center gap-0.5 {klass}">
|
||||
{#each delays as delay (delay)}
|
||||
<span
|
||||
class="rounded-full bg-accent"
|
||||
style="width:{barWidth}px; height:100%; animation:equalize .9s ease-in-out {delay}s infinite; animation-play-state:{paused
|
||||
class="h-full w-0.5 rounded-full bg-accent"
|
||||
style="animation:equalize .9s ease-in-out {delay}s infinite; animation-play-state:{paused
|
||||
? 'paused'
|
||||
: 'running'}"
|
||||
></span>
|
||||
|
||||
@@ -5,12 +5,11 @@
|
||||
|
||||
interface Props {
|
||||
following: boolean;
|
||||
userId?: string;
|
||||
invalidateAll?: boolean;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { following: initial, userId, invalidateAll = false, class: klass = '' }: Props = $props();
|
||||
let { following: initial, invalidateAll = false, class: klass = '' }: Props = $props();
|
||||
|
||||
let following = $state(untrack(() => initial));
|
||||
let submitting = $state(false);
|
||||
@@ -30,9 +29,6 @@
|
||||
};
|
||||
}}
|
||||
>
|
||||
{#if userId}
|
||||
<input type="hidden" name="userId" value={userId} />
|
||||
{/if}
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
class?: string;
|
||||
art?: Snippet;
|
||||
overlay?: Snippet;
|
||||
badge?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -34,8 +33,7 @@
|
||||
titleClass = '',
|
||||
class: klass = '',
|
||||
art,
|
||||
overlay,
|
||||
badge
|
||||
overlay
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
@@ -61,7 +59,6 @@
|
||||
<span class="min-w-0 truncate text-sm {active ? 'text-accent-soft' : 'text-fg'} {titleClass}"
|
||||
>{title}</span
|
||||
>
|
||||
{@render badge?.()}
|
||||
</div>
|
||||
<ArtistLink name={artist} {ownerUserId} class="mt-0.5 text-xs text-fg-2" />
|
||||
</div>
|
||||
|
||||
@@ -138,8 +138,6 @@
|
||||
role="button"
|
||||
tabindex="0"
|
||||
use:pressable={() => onPlay(i)}
|
||||
onclick={(event) => event.stopPropagation()}
|
||||
onkeydown={(event) => event.stopPropagation()}
|
||||
class="flex min-w-0 flex-1 text-left"
|
||||
>
|
||||
<MediaIdentity
|
||||
@@ -173,13 +171,7 @@
|
||||
</span>
|
||||
{#if rowAction}
|
||||
{#if rowAction.action}
|
||||
<form
|
||||
method="POST"
|
||||
action={rowAction.action}
|
||||
use:enhance={() =>
|
||||
async ({ update }) =>
|
||||
update()}
|
||||
>
|
||||
<form method="POST" action={rowAction.action} use:enhance>
|
||||
<input type="hidden" name="trackId" value={track.id} />
|
||||
<IconButton type="submit" label={rowAction.label} size="xs" revealOnHover>
|
||||
<rowAction.icon class="size-icon-sm" />
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
type?: 'button' | 'submit';
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg';
|
||||
shape?: 'square' | 'round';
|
||||
tone?: 'muted' | 'subtle' | 'plain';
|
||||
plain?: boolean;
|
||||
pressed?: boolean;
|
||||
surface?: boolean;
|
||||
revealOnHover?: boolean;
|
||||
@@ -22,7 +22,7 @@
|
||||
type = 'button',
|
||||
size = 'sm',
|
||||
shape = 'square',
|
||||
tone = 'muted',
|
||||
plain = false,
|
||||
pressed,
|
||||
surface = false,
|
||||
revealOnHover = false,
|
||||
@@ -40,18 +40,12 @@
|
||||
lg: 'size-10'
|
||||
};
|
||||
|
||||
const TEXT: Record<'muted' | 'subtle' | 'plain', string> = {
|
||||
muted: 'text-fg-2 hover:text-fg',
|
||||
subtle: 'text-fg-2 hover:text-fg',
|
||||
plain: 'text-fg-2 hover:text-fg'
|
||||
};
|
||||
|
||||
const background = $derived(
|
||||
surface ? 'bg-surface-2 hover:bg-surface-hover' : tone === 'plain' ? '' : 'hover:bg-hover'
|
||||
surface ? 'bg-surface-2 hover:bg-surface-hover' : plain ? '' : 'hover:bg-hover'
|
||||
);
|
||||
|
||||
const classes = $derived(
|
||||
`grid place-items-center transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none ${SIZE[size]} ${shape === 'round' ? 'rounded-full' : 'rounded-control'} ${pressed ? 'text-accent' : TEXT[tone]} ${background} ${
|
||||
`grid place-items-center transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none ${SIZE[size]} ${shape === 'round' ? 'rounded-full' : 'rounded-control'} ${pressed ? 'text-accent' : 'text-fg-2 hover:text-fg'} ${background} ${
|
||||
revealOnHover ? 'sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100' : ''
|
||||
} ${klass}`
|
||||
);
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
class="relative z-(--z-raised) flex-1 px-4 py-1.5 text-center text-xs font-medium transition-colors {value ===
|
||||
option.value
|
||||
? 'text-ink'
|
||||
: 'text-fg-2 hover:text-fg-2'}"
|
||||
: 'text-fg-2'}"
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user