From aba444ec8b6e8215a9c5fb958cebde858a64fb7c Mon Sep 17 00:00:00 2001 From: wukko Date: Sun, 4 Aug 2024 00:43:24 +0600 Subject: [PATCH] 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/i18n/en/dialog.json | 6 +- web/i18n/en/settings.json | 7 +- .../components/dialog/DialogContainer.svelte | 3 +- web/src/components/dialog/PickerDialog.svelte | 3 +- web/src/components/dialog/SavingDialog.svelte | 3 +- web/src/components/dialog/SmallDialog.svelte | 3 +- web/src/lib/api.ts | 85 ++++++++++++++++--- web/src/lib/download.ts | 2 +- web/src/lib/env.ts | 5 +- web/src/lib/settings/defaults.ts | 6 +- web/src/lib/types/dialog.ts | 1 + web/src/lib/types/settings.ts | 10 ++- web/src/routes/settings/+layout.svelte | 8 ++ .../routes/settings/processing/+page.svelte | 15 ++++ 14 files changed, 134 insertions(+), 23 deletions(-) create mode 100644 web/src/routes/settings/processing/+page.svelte diff --git a/web/i18n/en/dialog.json b/web/i18n/en/dialog.json index 13b5cf3e..6e9bb72e 100644 --- a/web/i18n/en/dialog.json +++ b/web/i18n/en/dialog.json @@ -8,6 +8,7 @@ "button.share": "share", "button.copy": "copy", "button.import": "import", + "button.continue": "continue", "reset.title": "reset all settings?", "reset.body": "are you sure you want to reset all settings? this action is immediate and irreversible.", @@ -22,5 +23,8 @@ "safety.title": "important safety notice", - "import.body": "importing unknown or corrupted files may unexpectedly alter or break cobalt functionality. only import files that you've personally exported and haven't modified. if you were asked to import this file by someone - don't do it.\n\nwe are not responsible for any harm caused by importing unknown setting files." + "import.body": "importing unknown or corrupted files may unexpectedly alter or break cobalt functionality. only import files that you've personally exported and haven't modified. if you were asked to import this file by someone - don't do it.\n\nwe are not responsible for any harm caused by importing unknown setting files.", + + "api.override.title": "processing instance override", + "api.override.body": "{{ value }} is now the processing instance. if you don't trust it, press \"cancel\" and it'll be ignored.\n\nyou can change your choice later in processing settings." } diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json index 4fc304af..fd38252f 100644 --- a/web/i18n/en/settings.json +++ b/web/i18n/en/settings.json @@ -6,6 +6,7 @@ "page.download": "downloading", "page.advanced": "advanced", "page.debug": "debug information", + "page.processing": "processing", "section.general": "general", "section.save": "save", @@ -103,5 +104,9 @@ "advanced.data": "settings data", "advanced.reset": "reset all settings", "advanced.import": "import", - "advanced.export": "export" + "advanced.export": "export", + + "processing.override": "default instance override", + "processing.override.title": "use instance-provided processing server", + "processing.override.description": "cobalt will use the processing server from DEFAULT_API when this is enabled." } diff --git a/web/src/components/dialog/DialogContainer.svelte b/web/src/components/dialog/DialogContainer.svelte index 3bb682e6..993efd7c 100644 --- a/web/src/components/dialog/DialogContainer.svelte +++ b/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 @@ - + {}} /> diff --git a/web/src/components/dialog/PickerDialog.svelte b/web/src/components/dialog/PickerDialog.svelte index 0f75f989..1fa5f5f5 100644 --- a/web/src/components/dialog/PickerDialog.svelte +++ b/web/src/components/dialog/PickerDialog.svelte @@ -16,6 +16,7 @@ export let id: string; export let items: Optional = undefined; export let buttons: Optional = undefined; + export let dismissable = true; let dialogDescription = "dialog.picker.description."; @@ -30,7 +31,7 @@ let close: () => void; - +
void; @@ -31,7 +32,7 @@ } - +
diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte index b105336b..ffdc2e93 100644 --- a/web/src/components/dialog/SmallDialog.svelte +++ b/web/src/components/dialog/SmallDialog.svelte @@ -17,11 +17,12 @@ export let bodyText = ""; export let bodySubText = ""; export let buttons: Optional = undefined; + export let dismissable = true; let close: () => void; - +
{#if meowbalt}
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts index dba83f1e..dfa3bb90 100644 --- a/web/src/lib/api.ts +++ b/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 = await fetch(`${apiURL}/api/json`, { + if (env.DEFAULT_API && !get(settings).processing.seenOverrideWarning) { + let _actions: { + resolve: () => void; + reject: () => void; + }; + + const promise = new Promise( + (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 = await fetch(api, { method: "POST", redirect: "manual", body: JSON.stringify(request), diff --git a/web/src/lib/download.ts b/web/src/lib/download.ts index 60227f21..fa09a5cc 100644 --- a/web/src/lib/download.ts +++ b/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 diff --git a/web/src/lib/env.ts b/web/src/lib/env.ts index d20d69ff..3334ebf3 100644 --- a/web/src/lib/env.ts +++ b/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; diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts index 58f46fec..e363fd34 100644 --- a/web/src/lib/settings/defaults.ts +++ b/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, } } diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts index d3d086e1..69c9ae32 100644 --- a/web/src/lib/types/dialog.ts +++ b/web/src/lib/types/dialog.ts @@ -18,6 +18,7 @@ export type DialogPickerItem = { type Dialog = { id: string, + dismissable?: boolean, }; type SmallDialog = Dialog & { diff --git a/web/src/lib/types/settings.ts b/web/src/lib/types/settings.ts index ff4c66b7..1c47c20f 100644 --- a/web/src/lib/types/settings.ts +++ b/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; diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte index 2232082e..1f5118ca 100644 --- a/web/src/routes/settings/+layout.svelte +++ b/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 @@ + + + + import { t } from "$lib/i18n/translations"; + + import SettingsCategory from "$components/settings/SettingsCategory.svelte"; + import SettingsToggle from "$components/buttons/SettingsToggle.svelte"; + + + + +