feat: volume settings
This commit is contained in:
Face
parent
8a69bbca88
commit
95df713b06
16 changed files with 1794 additions and 112 deletions
|
|
@ -7,7 +7,7 @@
|
|||
import AppSidebar from '$lib/components/self/AppSidebar.svelte';
|
||||
|
||||
import { USER_DATA } from '$lib/stores/user-data';
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount, onDestroy } from 'svelte'; // onDestroy is already imported
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { ModeWatcher } from 'mode-watcher';
|
||||
import { page } from '$app/state';
|
||||
|
|
@ -18,12 +18,10 @@
|
|||
children: any;
|
||||
}>();
|
||||
|
||||
USER_DATA.set(data?.userSession ?? null);
|
||||
|
||||
$effect(() => {
|
||||
if (data?.userSession) {
|
||||
USER_DATA.set(data.userSession);
|
||||
} else {
|
||||
USER_DATA.set(null);
|
||||
}
|
||||
USER_DATA.set(data?.userSession ?? null);
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
|
|
@ -84,7 +82,7 @@
|
|||
const titleMap: Record<string, string> = {
|
||||
'/': 'Home',
|
||||
'/market': 'Market',
|
||||
'/portfolio': 'Portfolio',
|
||||
'/portfolio': 'Portfolio',
|
||||
'/leaderboard': 'Leaderboard',
|
||||
'/coin/create': 'Create Coin',
|
||||
'/settings': 'Settings',
|
||||
|
|
|
|||
68
website/src/routes/api/settings/volume/+server.ts
Normal file
68
website/src/routes/api/settings/volume/+server.ts
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import { auth } from '$lib/auth';
|
||||
import { error, json } from '@sveltejs/kit';
|
||||
import { db } from '$lib/server/db';
|
||||
import { user } from '$lib/server/db/schema';
|
||||
import { eq } from 'drizzle-orm';
|
||||
|
||||
export async function POST({ request }) {
|
||||
const session = await auth.api.getSession({
|
||||
headers: request.headers
|
||||
});
|
||||
|
||||
if (!session?.user) {
|
||||
throw error(401, 'Not authenticated');
|
||||
}
|
||||
|
||||
try {
|
||||
const { master, muted } = await request.json();
|
||||
|
||||
if (typeof master !== 'number' || master < 0 || master > 1) {
|
||||
throw error(400, 'Invalid master volume');
|
||||
}
|
||||
if (typeof muted !== 'boolean') {
|
||||
throw error(400, 'Invalid muted setting');
|
||||
}
|
||||
|
||||
await db.update(user)
|
||||
.set({
|
||||
volumeMaster: master.toString(),
|
||||
volumeMuted: muted,
|
||||
updatedAt: new Date()
|
||||
})
|
||||
.where(eq(user.id, Number(session.user.id)));
|
||||
|
||||
return json({ success: true });
|
||||
} catch (e) {
|
||||
console.error('Volume settings save failed:', e);
|
||||
throw error(500, 'Failed to save volume settings');
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET({ request }) {
|
||||
const session = await auth.api.getSession({
|
||||
headers: request.headers
|
||||
});
|
||||
|
||||
if (!session?.user) {
|
||||
throw error(401, 'Not authenticated');
|
||||
}
|
||||
|
||||
try {
|
||||
const userData = await db.select({
|
||||
volumeMaster: user.volumeMaster,
|
||||
volumeMuted: user.volumeMuted
|
||||
}).from(user).where(eq(user.id, Number(session.user.id)));
|
||||
|
||||
if (!userData[0]) {
|
||||
throw error(404, 'User not found');
|
||||
}
|
||||
|
||||
return json({
|
||||
master: parseFloat(userData[0].volumeMaster),
|
||||
muted: userData[0].volumeMuted
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Volume settings load failed:', e);
|
||||
throw error(500, 'Failed to load volume settings');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { auth } from '$lib/auth';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
export const load: PageServerLoad = async (event) => {
|
||||
const session = await auth.api.getSession({
|
||||
headers: event.request.headers
|
||||
});
|
||||
if (!session?.user) throw error(401, 'Not authenticated');
|
||||
|
||||
return { user: session.user };
|
||||
};
|
||||
|
|
@ -7,27 +7,28 @@
|
|||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import * as Avatar from '$lib/components/ui/avatar';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Slider } from '$lib/components/ui/slider';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { CheckIcon } from 'lucide-svelte';
|
||||
import { CheckIcon, Volume2Icon, VolumeXIcon } from 'lucide-svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { MAX_FILE_SIZE } from '$lib/data/constants';
|
||||
import { volumeSettings } from '$lib/stores/volume-settings';
|
||||
import { USER_DATA } from '$lib/stores/user-data';
|
||||
|
||||
let { data } = $props();
|
||||
let name = $state($USER_DATA?.name || '');
|
||||
let bio = $state($USER_DATA?.bio ?? '');
|
||||
let username = $state($USER_DATA?.username || '');
|
||||
|
||||
let name = $state(data.user.name);
|
||||
let bio = $state(data.user.bio ?? '');
|
||||
let username = $state(data.user.username);
|
||||
|
||||
const initialUsername = data.user.username;
|
||||
const initialUsername = $USER_DATA?.username || '';
|
||||
let avatarFile: FileList | undefined = $state(undefined);
|
||||
|
||||
let previewUrl: string | null = $state(null);
|
||||
let currentAvatarUrl = $derived(previewUrl || getPublicUrl(data.user.image ?? null));
|
||||
let currentAvatarUrl = $derived(previewUrl || getPublicUrl($USER_DATA?.image ?? null));
|
||||
|
||||
let isDirty = $derived(
|
||||
name !== data.user.name ||
|
||||
bio !== (data.user.bio ?? '') ||
|
||||
username !== data.user.username ||
|
||||
name !== ($USER_DATA?.name || '') ||
|
||||
bio !== ($USER_DATA?.bio ?? '') ||
|
||||
username !== ($USER_DATA?.username || '') ||
|
||||
avatarFile !== undefined
|
||||
);
|
||||
|
||||
|
|
@ -37,6 +38,9 @@
|
|||
let usernameAvailable: boolean | null = $state(null);
|
||||
let checkingUsername = $state(false);
|
||||
|
||||
let masterVolume = $state(($USER_DATA?.volumeMaster || 0) * 100);
|
||||
let isMuted = $state($USER_DATA?.volumeMuted || false);
|
||||
|
||||
function beforeUnloadHandler(e: BeforeUnloadEvent) {
|
||||
if (isDirty) {
|
||||
e.preventDefault();
|
||||
|
|
@ -45,6 +49,8 @@
|
|||
|
||||
onMount(() => {
|
||||
window.addEventListener('beforeunload', beforeUnloadHandler);
|
||||
volumeSettings.setMaster($USER_DATA?.volumeMaster || 0);
|
||||
volumeSettings.setMuted($USER_DATA?.volumeMuted || false);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
|
|
@ -121,93 +127,167 @@
|
|||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
const debouncedSaveVolume = debounce(async (settings: { master: number; muted: boolean }) => {
|
||||
try {
|
||||
const response = await fetch('/api/settings/volume', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(settings)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save volume settings');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to save volume settings:', error);
|
||||
toast.error('Failed to save volume settings');
|
||||
}
|
||||
}, 500);
|
||||
|
||||
async function saveVolumeToServer(settings: { master: number; muted: boolean }) {
|
||||
debouncedSaveVolume(settings);
|
||||
}
|
||||
|
||||
function handleMasterVolumeChange(value: number) {
|
||||
masterVolume = value;
|
||||
const normalizedValue = value / 100;
|
||||
volumeSettings.setMaster(normalizedValue);
|
||||
saveVolumeToServer({ master: normalizedValue, muted: isMuted });
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
isMuted = !isMuted;
|
||||
volumeSettings.setMuted(isMuted);
|
||||
saveVolumeToServer({ master: masterVolume / 100, muted: isMuted });
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto max-w-2xl p-6">
|
||||
<h1 class="mb-6 text-2xl font-bold">Settings</h1>
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Profile Settings</Card.Title>
|
||||
<Card.Description>Update your profile information</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="mb-6 flex items-center gap-4">
|
||||
<div
|
||||
class="group relative cursor-pointer"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={handleAvatarClick}
|
||||
onkeydown={(e) => e.key === 'Enter' && handleAvatarClick()}
|
||||
>
|
||||
<Avatar.Root class="size-20">
|
||||
<Avatar.Image src={currentAvatarUrl} alt={name} />
|
||||
<Avatar.Fallback>?</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
|
||||
<div class="space-y-6">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Profile Settings</Card.Title>
|
||||
<Card.Description>Update your profile information</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="mb-6 flex items-center gap-4">
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
class="group relative cursor-pointer"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={handleAvatarClick}
|
||||
onkeydown={(e) => e.key === 'Enter' && handleAvatarClick()}
|
||||
>
|
||||
<span class="text-xs text-white">Change</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">{name}</h3>
|
||||
<p class="text-muted-foreground text-sm">@{username}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
bind:this={fileInput}
|
||||
onchange={handleAvatarChange}
|
||||
/>
|
||||
|
||||
<form onsubmit={handleSubmit} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Display Name</Label>
|
||||
<Input id="name" bind:value={name} required />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="username">Username</Label>
|
||||
<div class="relative">
|
||||
<span class="text-muted-foreground absolute left-3 top-4 -translate-y-1/2 transform"
|
||||
>@</span
|
||||
<Avatar.Root class="size-20">
|
||||
<Avatar.Image src={currentAvatarUrl} alt={name} />
|
||||
<Avatar.Fallback>?</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
>
|
||||
<Input
|
||||
id="username"
|
||||
bind:value={username}
|
||||
required
|
||||
pattern={'^[a-zA-Z0-9_]{3,30}$'}
|
||||
class="pl-8"
|
||||
/>
|
||||
<div class="absolute right-3 top-1.5">
|
||||
{#if checkingUsername}
|
||||
<span class="text-muted-foreground text-sm">Checking…</span>
|
||||
{:else if username !== initialUsername}
|
||||
{#if usernameAvailable}
|
||||
<CheckIcon class="text-success" />
|
||||
{:else}
|
||||
<span class="text-destructive text-sm">Taken</span>
|
||||
{/if}
|
||||
{/if}
|
||||
<span class="text-xs text-white">Change</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold">{name}</h3>
|
||||
<p class="text-muted-foreground text-sm">@{username}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
bind:this={fileInput}
|
||||
onchange={handleAvatarChange}
|
||||
/>
|
||||
|
||||
<form onsubmit={handleSubmit} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Display Name</Label>
|
||||
<Input id="name" bind:value={name} required />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="username">Username</Label>
|
||||
<div class="relative">
|
||||
<span class="text-muted-foreground absolute left-3 top-4 -translate-y-1/2 transform"
|
||||
>@</span
|
||||
>
|
||||
<Input
|
||||
id="username"
|
||||
bind:value={username}
|
||||
required
|
||||
pattern={'^[a-zA-Z0-9_]{3,30}$'}
|
||||
class="pl-8"
|
||||
/>
|
||||
<div class="absolute right-3 top-1.5">
|
||||
{#if checkingUsername}
|
||||
<span class="text-muted-foreground text-sm">Checking…</span>
|
||||
{:else if username !== initialUsername}
|
||||
{#if usernameAvailable}
|
||||
<CheckIcon class="text-success" />
|
||||
{:else}
|
||||
<span class="text-destructive text-sm">Taken</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted-foreground text-xs">
|
||||
Only letters, numbers, underscores. 3–30 characters.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="bio">Bio</Label>
|
||||
<Textarea id="bio" bind:value={bio} rows={4} placeholder="Tell us about yourself" />
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={loading || !isDirty}>
|
||||
{loading ? 'Saving…' : 'Save Changes'}
|
||||
</Button>
|
||||
</form>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Audio Settings</Card.Title>
|
||||
<Card.Description>Adjust volume for game sounds</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<Label class="text-base font-medium">Volume</Label>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="ghost" size="sm" onclick={toggleMute} class="h-8 w-8 p-0">
|
||||
{#if isMuted}
|
||||
<VolumeXIcon class="h-4 w-4" />
|
||||
{:else}
|
||||
<Volume2Icon class="h-4 w-4" />
|
||||
{/if}
|
||||
</Button>
|
||||
<span class="text-muted-foreground w-10 text-right text-sm"
|
||||
>{Math.round(masterVolume)}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<Slider
|
||||
type="single"
|
||||
value={masterVolume}
|
||||
onValueChange={handleMasterVolumeChange}
|
||||
max={100}
|
||||
step={1}
|
||||
disabled={isMuted}
|
||||
/>
|
||||
<p class="text-muted-foreground text-xs">
|
||||
Only letters, numbers, underscores. 3–30 characters.
|
||||
Controls all game sounds including effects and background audio
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="bio">Bio</Label>
|
||||
<Textarea id="bio" bind:value={bio} rows={4} placeholder="Tell us about yourself" />
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={loading || !isDirty}>
|
||||
{loading ? 'Saving…' : 'Save Changes'}
|
||||
</Button>
|
||||
</form>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue