From 2c1dacbc2fb7c97ee02c99b836f092f8484e578b Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:52:03 +0300
Subject: [PATCH] fix slider ssr

---
 website/src/routes/settings/+page.svelte | 30 +++++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/website/src/routes/settings/+page.svelte b/website/src/routes/settings/+page.svelte
index 24f13f6..a1e084a 100644
--- a/website/src/routes/settings/+page.svelte
+++ b/website/src/routes/settings/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { invalidateAll } from '$app/navigation';
+	import { browser } from '$app/environment';
 	import { getPublicUrl, debounce } from '$lib/utils';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
@@ -16,7 +17,6 @@
 	import { USER_DATA } from '$lib/stores/user-data';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import SEO from '$lib/components/self/SEO.svelte';
-	import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
 
 	let shouldSignIn = $state(false);
 	let name = $state($USER_DATA?.name || '');
@@ -421,14 +421,26 @@
 							>
 						</div>
 					</div>
-					<Slider
-						type="single"
-						value={masterVolume}
-						onValueChange={handleMasterVolumeChange}
-						max={100}
-						step={1}
-						disabled={isMuted}
-					/>
+					{#if browser}
+						<Slider
+							type="single"
+							value={masterVolume}
+							onValueChange={handleMasterVolumeChange}
+							max={100}
+							step={1}
+							disabled={isMuted}
+						/>
+					{:else}
+						<!-- Fallback slider for SSR -->
+						<div class="relative flex w-full touch-none select-none items-center">
+							<div class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+								<div
+									class="absolute h-full bg-primary transition-all"
+									style="width: {masterVolume}%"
+								></div>
+							</div>
+						</div>
+					{/if}
 					<p class="text-muted-foreground text-xs">
 						Controls all game sounds including effects and background audio
 					</p>