web: updated api endpoint & params, default instance override

- dialogs can be undismissable now (impossible to click away by pressing the bg behind it)
- added security warning about api override
- moved default api url to env
- added new processing settings page

web/src/lib/api.ts

@@ -1,33 +1,94 @@
 import { get } from "svelte/store";
-import settings from "$lib/state/settings";
+
+import env, { apiURL } from "$lib/env";
+import { t } from "$lib/i18n/translations";
+import settings, { updateSetting } from "$lib/state/settings";
+import { createDialog } from "$lib/dialogs";
+
 import type { CobaltAPIResponse } from "$lib/types/api";
 import type { Optional } from "$lib/types/generic";
 
-const apiURL = "https://api.cobalt.tools";
-
 const request = async (url: string) => {
     const saveSettings = get(settings).save;
 
     const request = {
         url,
 
-        isAudioOnly: saveSettings.downloadMode === "audio",
-        isAudioMuted: saveSettings.downloadMode === "mute",
-        aFormat: saveSettings.audioFormat,
-        isTTFullAudio: saveSettings.tiktokFullAudio,
-        dubLang: saveSettings.youtubeDubBrowserLang,
+        downloadMode: saveSettings.downloadMode,
 
-        vCodec: saveSettings.youtubeVideoCodec,
-        vQuality: saveSettings.videoQuality,
+        audioFormat: saveSettings.audioFormat,
+        tiktokFullAudio: saveSettings.tiktokFullAudio,
+        youtubeDubBrowserLang: saveSettings.youtubeDubBrowserLang,
 
-        filenamePattern: saveSettings.filenameStyle,
+        youtubeVideoCodec: saveSettings.youtubeVideoCodec,
+        videoQuality: saveSettings.videoQuality,
+
+        filenameStyle: saveSettings.filenameStyle,
         disableMetadata: saveSettings.disableMetadata,
 
         twitterGif: saveSettings.twitterGif,
         tiktokH265: saveSettings.tiktokH265,
     }
 
-    const response: Optional<CobaltAPIResponse> = await fetch(`${apiURL}/api/json`, {
+    if (env.DEFAULT_API && !get(settings).processing.seenOverrideWarning) {
+        let _actions: {
+            resolve: () => void;
+            reject: () => void;
+        };
+
+        const promise = new Promise<void>(
+            (resolve, reject) => (_actions = { resolve, reject })
+        ).catch(() => {
+            return {}
+        });
+
+        createDialog({
+            id: "security-api-override",
+            type: "small",
+            icon: "warn-red",
+            title: get(t)("dialog.api.override.title"),
+            bodyText: get(t)("dialog.api.override.body", { value: env.DEFAULT_API }),
+            dismissable: false,
+            buttons: [
+                {
+                    text: get(t)("dialog.button.cancel"),
+                    main: false,
+                    action: () => {
+                        _actions.reject();
+                        updateSetting({
+                            processing: {
+                                seenOverrideWarning: true,
+                            },
+                        })
+                    },
+                },
+                {
+                    text: get(t)("dialog.button.continue"),
+                    color: "red",
+                    main: true,
+                    timeout: 5000,
+                    action: () => {
+                        _actions.resolve();
+                        updateSetting({
+                            processing: {
+                                allowDefaultOverride: true,
+                                seenOverrideWarning: true,
+                            },
+                        })
+                    },
+                },
+            ],
+        })
+
+        await promise;
+    }
+
+    let api = apiURL;
+    if (env.DEFAULT_API && get(settings).processing.allowDefaultOverride) {
+        api = env.DEFAULT_API;
+    }
+
+    const response: Optional<CobaltAPIResponse> = await fetch(api, {
         method: "POST",
         redirect: "manual",
         body: JSON.stringify(request),

web/src/lib/download.ts

@@ -9,7 +9,7 @@ import { createDialog } from "$lib/dialogs";
 import type { DialogInfo } from "$lib/types/dialog";
 
 export const openSavingDialog = (url: string, body: string | void) => {
-    let dialogData: DialogInfo = {
+    const dialogData: DialogInfo = {
         type: "saving",
         id: "saving",
         url

web/src/lib/env.ts

@@ -4,6 +4,7 @@ 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,
 }
 
 const donate = {
@@ -20,5 +21,7 @@ const donate = {
     }
 };
 
-export { donate };
+const apiURL = "https://api.cobalt.tools";
+
+export { donate, apiURL };
 export default variables;

web/src/lib/settings/defaults.ts

@@ -28,7 +28,11 @@ const defaultSettings: CobaltSettings = {
         youtubeDubBrowserLang: false,
     },
     privacy: {
-        disableAnalytics: false
+        disableAnalytics: false,
+    },
+    processing: {
+        allowDefaultOverride: false,
+        seenOverrideWarning: false,
     }
 }
 

web/src/lib/types/dialog.ts

@@ -18,6 +18,7 @@ export type DialogPickerItem = {
 
 type Dialog = {
     id: string,
+    dismissable?: boolean,
 };
 
 type SmallDialog = Dialog & {

web/src/lib/types/settings.ts

@@ -22,9 +22,14 @@ type CobaltSettingsAdvanced = {
 };
 
 type CobaltSettingsPrivacy = {
-    disableAnalytics: boolean
+    disableAnalytics: boolean,
 };
 
+type CobaltSettingsProcessing = {
+    allowDefaultOverride: boolean,
+    seenOverrideWarning: boolean,
+}
+
 type CobaltSettingsSave = {
     audioFormat: typeof audioFormatOptions[number],
     disableMetadata: boolean,
@@ -44,7 +49,8 @@ export type CurrentCobaltSettings = {
     advanced: CobaltSettingsAdvanced,
     appearance: CobaltSettingsAppearance,
     save: CobaltSettingsSave,
-    privacy: CobaltSettingsPrivacy
+    privacy: CobaltSettingsPrivacy,
+    processing: CobaltSettingsProcessing,
 };
 
 export type CobaltSettings = CurrentCobaltSettings;