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/components/dialog/DialogContainer.svelte

@@ -5,6 +5,7 @@
     import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
 
     export let id: string;
+    export let dismissable = true;
 
     let dialogParent: HTMLDialogElement;
 
@@ -32,5 +33,5 @@
 
 <dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
     <slot></slot>
-    <DialogBackdropClose closeFunc={close} />
+    <DialogBackdropClose closeFunc={dismissable ? close : () => {}} />
 </dialog>

web/src/components/dialog/PickerDialog.svelte

@@ -16,6 +16,7 @@
     export let id: string;
     export let items: Optional<DialogPickerItem[]> = undefined;
     export let buttons: Optional<DialogButton[]> = undefined;
+    export let dismissable = true;
 
     let dialogDescription = "dialog.picker.description.";
 
@@ -30,7 +31,7 @@
     let close: () => void;
 </script>
 
-<DialogContainer {id} bind:close>
+<DialogContainer {id} {dismissable} bind:close>
     <div
         class="dialog-body picker-dialog"
         class:three-columns={items && items.length <= 3}

web/src/components/dialog/SavingDialog.svelte

@@ -19,6 +19,7 @@
     export let id: string;
     export let url: string;
     export let bodyText: string = "";
+    export let dismissable = true;
 
     let close: () => void;
 
@@ -31,7 +32,7 @@
     }
 </script>
 
-<DialogContainer {id} bind:close>
+<DialogContainer {id} {dismissable} bind:close>
     <div class="dialog-body popup-body">
         <div class="meowbalt-container">
             <Meowbalt emotion="question" />

web/src/components/dialog/SmallDialog.svelte

@@ -17,11 +17,12 @@
     export let bodyText = "";
     export let bodySubText = "";
     export let buttons: Optional<DialogButton[]> = undefined;
+    export let dismissable = true;
 
     let close: () => void;
 </script>
 
-<DialogContainer {id} bind:close>
+<DialogContainer {id} {dismissable} bind:close>
     <div class="dialog-body small-dialog" class:meowbalt-visible={meowbalt}>
         {#if meowbalt}
             <div class="meowbalt-container">

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;

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

@@ -17,6 +17,7 @@
     import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
     import IconBug from "@tabler/icons-svelte/IconBug.svelte";
     import IconLock from "@tabler/icons-svelte/IconLock.svelte";
+    import IconCloudNetwork from "@tabler/icons-svelte/IconCloudNetwork.svelte";
 
     import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
 
@@ -129,6 +130,13 @@
             </SettingsNavSection>
 
             <SettingsNavSection>
+                <SettingsNavTab
+                    tabName="processing"
+                    tabLink="processing"
+                    iconColor="gray"
+                >
+                    <IconCloudNetwork />
+                </SettingsNavTab>
                 <SettingsNavTab
                     tabName="advanced"
                     tabLink="advanced"

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+</script>
+
+<SettingsCategory sectionId="override" title={$t("settings.processing.override")}>
+    <SettingsToggle
+        settingContext="processing"
+        settingId="allowDefaultOverride"
+        title={$t("settings.processing.override.title")}
+        description={$t("settings.processing.override.description")}
+    />
+</SettingsCategory>