web: make everything ssr-compatible

web/src/components/save/Omnibox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
+    import { browser } from "$app/environment";
     import { SvelteComponent, tick } from "svelte";
 
     import env from "$lib/env";
@@ -43,7 +44,7 @@
     };
 
     $: linkFromHash = $page.url.hash.replace("#", "") || "";
-    $: linkFromQuery = $page.url.searchParams.get("u") || "";
+    $: linkFromQuery = (browser ? $page.url.searchParams.get("u") : 0) || "";
 
     $: if (linkFromHash || linkFromQuery) {
         if (validLink(linkFromHash)) {

web/src/lib/device.ts

@@ -1,45 +1,55 @@
-const ua = navigator.userAgent.toLowerCase();
-
-const iPhone = ua.includes("iphone os");
-const iPad = !iPhone && ua.includes("mac os") && navigator.maxTouchPoints > 0;
-
-const iOS = iPhone || iPad;
-const android = ua.includes("android") || ua.includes("diordna");
-
-const mobile = iOS || android;
-
-const language = navigator.language.toLowerCase().slice(0, 2);
-
-const installed = window.matchMedia('(display-mode: standalone)').matches;
-
-const reducedMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
-const reducedTransparency = window.matchMedia(`(prefers-reduced-transparency: reduce)`).matches;
-
-const app = {
-    is: {
-        installed
-    }
-}
+import { browser } from '$app/environment'
 
 const device = {
-    is: {
+    is: {},
+    prefers: {},
+    supports: {},
+    userAgent: 'sveltekit server'
+};
+
+const app = {
+    is: {}
+}
+
+if (browser) {
+    const ua = navigator.userAgent.toLowerCase();
+
+    const iPhone = ua.includes("iphone os");
+    const iPad = !iPhone && ua.includes("mac os") && navigator.maxTouchPoints > 0;
+
+    const iOS = iPhone || iPad;
+    const android = ua.includes("android") || ua.includes("diordna");
+
+    const mobile = iOS || android;
+
+    const language = navigator.language.toLowerCase().slice(0, 2);
+
+    const installed = window.matchMedia('(display-mode: standalone)').matches;
+
+    const reducedMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+    const reducedTransparency = window.matchMedia(`(prefers-reduced-transparency: reduce)`).matches;
+
+    app.is = { installed };
+    device.is = {
         iPhone,
         iPad,
         iOS,
         android,
         mobile,
-    },
-    prefers: {
+    };
+
+    device.prefers = {
         language,
         reducedMotion,
         reducedTransparency,
-    },
-    supports: {
+    };
+
+    device.supports = {
         share: navigator.share !== undefined,
         directDownload: !(installed && iOS),
-    },
-    userAgent: navigator.userAgent,
+    };
+
+    device.userAgent = navigator.userAgent;
 }
 
-
 export { device, app };

web/src/lib/env.ts

@@ -1,11 +1,20 @@
-import { env } from "$env/dynamic/public";
+import * as _env from "$env/static/public";
+
+const getEnv = (_key: string) => {
+    const env = _env as Record<string, string | undefined>;
+    const key = `PUBLIC_${_key}`;
+
+    if (key in env) {
+        return env[key];
+    }
+}
 
 const variables = {
-    HOST: env.PUBLIC_HOST,
-    PLAUSIBLE_HOST: env.PUBLIC_PLAUSIBLE_HOST,
-    PLAUSIBLE_ENABLED: env.PUBLIC_HOST && env.PUBLIC_PLAUSIBLE_HOST,
-    DEFAULT_API: env.PUBLIC_DEFAULT_API,
-    TURNSTILE_KEY: env.PUBLIC_TURNSTILE_KEY,
+    HOST: getEnv('HOST'),
+    PLAUSIBLE_HOST: getEnv('PLAUSIBLE_HOST'),
+    PLAUSIBLE_ENABLED: getEnv('HOST') && getEnv('PLAUSIBLE_HOST'),
+    DEFAULT_API: getEnv('DEFAULT_API'),
+    TURNSTILE_KEY: getEnv('TURNSTILE_KEY'),
 }
 
 const contacts = {

web/src/lib/libav.ts

@@ -2,6 +2,7 @@ import mime from "mime";
 import LibAV, { type LibAV as LibAVInstance } from "@imput/libav.js-remux-cli";
 import type { FFmpegProgressCallback, FFmpegProgressEvent, FFmpegProgressStatus, FileInfo, RenderParams } from "./types/libav";
 import type { FfprobeData } from "fluent-ffmpeg";
+import { browser } from "$app/environment";
 
 export default class LibAVWrapper {
     libav: Promise<LibAVInstance> | null;
@@ -10,12 +11,12 @@ export default class LibAVWrapper {
 
     constructor(onProgress?: FFmpegProgressCallback) {
         this.libav = null;
-        this.concurrency = Math.min(4, navigator.hardwareConcurrency);
+        this.concurrency = Math.min(4, browser ? navigator.hardwareConcurrency : 0);
         this.onProgress = onProgress;
     }
 
     async init() {
-        if (!this.libav) {
+        if (this.concurrency && !this.libav) {
             this.libav = LibAV.LibAV({
                 yesthreads: true,
                 base: '/_libav'

web/src/lib/state/settings.ts

@@ -1,4 +1,5 @@
 import { derived, readable, type Updater } from 'svelte/store';
+import { browser } from '$app/environment';
 import { merge } from 'ts-deepmerge';
 
 import type {
@@ -43,6 +44,9 @@ const migrate = (settings: AllPartialSettingsWithSchema): PartialSettings => {
 
 
 const loadFromStorage = () => {
+    if (!browser)
+        return {};
+
     const settings = localStorage.getItem('settings');
     if (!settings) {
         const migrated = migrateOldSettings();

web/src/lib/state/theme.ts

@@ -1,4 +1,5 @@
 import { readable, derived, type Readable } from 'svelte/store';
+import { browser } from '$app/environment';
 
 import settings from '$lib/state/settings';
 import { themeOptions } from '$lib/types/settings';
@@ -7,19 +8,25 @@ type Theme = typeof themeOptions[number];
 
 let set: (_: Theme) => void;
 
-const browserPreference = () =>
-    window.matchMedia('(prefers-color-scheme: light)')
-        .matches ? 'light' : 'dark';
+const browserPreference = () => {
+    if (!browser || window.matchMedia('(prefers-color-scheme: light)').matches) {
+        return 'light';
+    }
+
+    return 'dark'
+}
 
 const browserPreferenceReadable = readable(
     browserPreference(),
     _set => { set = _set }
 )
 
-const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+if (browser) {
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
 
-if (matchMedia.addEventListener) {
-    matchMedia.addEventListener('change', () => set(browserPreference()));
+    if (matchMedia.addEventListener) {
+        matchMedia.addEventListener('change', () => set(browserPreference()));
+    }
 }
 
 export default derived(

web/src/routes/settings/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { page } from "$app/stores";
+    import { browser } from "$app/environment";
 
     import settings from "$lib/state/settings";
     import { version } from "$lib/version";
@@ -38,7 +39,7 @@
     $: isMobile = screenWidth <= 750;
     $: isHome = $page.url.pathname === "/settings";
     $: {
-        if (!isMobile && isHome) {
+        if (browser && !isMobile && isHome) {
             goto(defaultSettingsPage(), { replaceState: true });
         }
     }

web/src/routes/settings/debug/+page.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
+    import { onMount } from "svelte";
+    import { goto } from "$app/navigation";
+
     import { device, app } from "$lib/device";
     import { version } from "$lib/version";
     import settings, { storedSettings } from "$lib/state/settings";
-
-    import { goto } from "$app/navigation";
     import { defaultSettingsPage } from "$lib/settings/defaults";
 
-    $: {
+    onMount(() => {
         if (!$settings.advanced.debug) {
             goto(defaultSettingsPage(), { replaceState: true });
         }
-    }
+    });
 </script>
 
 {#if $settings.advanced.debug}

web/src/routes/updates/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { t } from "$lib/i18n/translations";
     import { page } from "$app/stores";
+    import { browser } from "$app/environment";
 
+    import { t } from "$lib/i18n/translations";
     import { getAllChangelogs } from "$lib/changelogs";
-    import type { ChangelogImport } from "$lib/types/changelogs";
     import type { Optional } from "$lib/types/generic";
+    import type { ChangelogImport } from "$lib/types/changelogs";
 
     import ChangelogEntry from "$components/changelog/ChangelogEntry.svelte";
 
@@ -36,7 +37,10 @@
             page: changelogs[version]() as Promise<ChangelogImport>,
         };
 
-        window.location.hash = version;
+        if (browser) {
+            window.location.hash = version;
+        }
+
         await changelog.page;
     };