web: respect reduced motion & transparency preferences

also cleaned up settings & device libs

web/src/lib/device.ts

@@ -8,10 +8,13 @@ const android = ua.includes("android") || ua.includes("diordna");
 
 const mobile = iOS || android;
 
-const preferredLocale = navigator.language.toLowerCase().slice(0, 2);
+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 device = {
     is: {
         iPhone,
@@ -20,7 +23,11 @@ const device = {
         android,
         mobile,
     },
-    preferredLocale,
+    prefers: {
+        language,
+        reducedMotion,
+        reducedTransparency,
+    },
     userAgent: navigator.userAgent,
 }
 

web/src/lib/settings/defaults.ts

@@ -4,10 +4,6 @@ import type { CobaltSettings } from "$lib/types/settings";
 
 const defaultSettings: CobaltSettings = {
     schemaVersion: 1,
-    accessibility: {
-        reduceAnimations: false,
-        reduceTransparency: false,
-    },
     advanced: {
         debug: false,
     },
@@ -15,11 +11,8 @@ const defaultSettings: CobaltSettings = {
         theme: "auto",
         language: defaultLocale,
         autoLanguage: true,
-    },
-    general: {
-        customProcessingEndpoint: "",
-        seenOnboarding: false,
-        seenSafetyWarning: false,
+        reduceMotion: false,
+        reduceTransparency: false,
     },
     save: {
         audioFormat: "mp3",
@@ -34,9 +27,6 @@ const defaultSettings: CobaltSettings = {
         youtubeVideoCodec: "h264",
         youtubeDubBrowserLang: false,
     },
-    privacy: {
-        trafficAnalytics: true,
-    },
 }
 
 const defaultSettingsPage = () => {

web/src/lib/types/settings.ts

@@ -1,10 +1,5 @@
 import languages from '$i18n/languages.json';
 
-export type CobaltSettingsAccessibility = {
-    reduceAnimations: boolean,
-    reduceTransparency: boolean,
-};
-
 export const themeOptions = ["auto", "light", "dark"] as const;
 export const audioFormatOptions = ["best", "mp3", "ogg", "wav", "opus"] as const;
 export const downloadModeOptions = ["auto", "audio", "mute"] as const;
@@ -16,18 +11,14 @@ type CobaltSettingsAppearance = {
     theme: typeof themeOptions[number],
     language: keyof typeof languages,
     autoLanguage: boolean,
+    reduceMotion: boolean,
+    reduceTransparency: boolean,
 };
 
 type CobaltSettingsAdvanced = {
     debug: boolean,
 };
 
-type CobaltSettingsGeneral = {
-    customProcessingEndpoint: string,
-    seenOnboarding: boolean,
-    seenSafetyWarning: boolean,
-};
-
 type CobaltSettingsSave = {
     audioFormat: typeof audioFormatOptions[number],
     disableMetadata: boolean,
@@ -42,18 +33,11 @@ type CobaltSettingsSave = {
     youtubeDubBrowserLang: boolean,
 };
 
-type CobaltSettingsPrivacy = {
-    trafficAnalytics: boolean,
-};
-
 export type CobaltSettings = {
     schemaVersion: number,
-    accessibility: CobaltSettingsAccessibility,
     advanced: CobaltSettingsAdvanced,
     appearance: CobaltSettingsAppearance,
-    general: CobaltSettingsGeneral,
     save: CobaltSettingsSave,
-    privacy: CobaltSettingsPrivacy,
 };
 
 export type DownloadModeOption = CobaltSettings['save']['downloadMode'];