mirror of
https://github.com/wukko/cobalt.git
synced 2025-05-03 07:34:26 +02:00
web/settings/advanced: add cache clearing, refactor data management
This commit is contained in:
wukko
parent
cff47da742
commit
1f79bf6e52
@ -21,5 +21,6 @@
|
||||
"show_input": "show input",
|
||||
"hide_input": "hide input",
|
||||
"restore_input": "restore input",
|
||||
"clear_input": "clear input"
|
||||
"clear_input": "clear input",
|
||||
"clear_cache": "clear cache"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"reset.title": "reset all data?",
|
||||
"reset.body": "are you sure you want to reset all data? this action is immediate and irreversible.",
|
||||
"reset_settings.title": "reset all settings?",
|
||||
"reset_settings.body": "are you sure you want to reset all settings? this action is immediate and irreversible.",
|
||||
|
||||
"picker.title": "select what to save",
|
||||
"picker.description.desktop": "click an item to save it. images can also be saved via the right click menu.",
|
||||
@ -21,5 +21,8 @@
|
||||
"safety.custom_instance.body": "custom instances can potentially pose privacy & safety risks.\n\nbad instances can:\n1. redirect you away from cobalt and try to scam you.\n2. log all information about your requests, store it forever, and use it to track you.\n3. serve you malicious files (such as malware).\n4. force you to watch ads, or make you pay for downloading.\n\nafter this point, we can't protect you. please be mindful of what instances to use and always trust your gut. if anything feels off, come back to this page, reset the custom instance, and report it to us on github.",
|
||||
|
||||
"processing.ongoing": "cobalt is currently processing media in this tab. going away will abort it. are you sure you want to do this?",
|
||||
"processing.title.ongoing": "processing will be cancelled"
|
||||
"processing.title.ongoing": "processing will be cancelled",
|
||||
|
||||
"clear_cache.title": "clear all cache?",
|
||||
"clear_cache.body": "all files from the processing queue will be removed and on-device features will take longer to load. this action is immediate and irreversible."
|
||||
}
|
||||
|
||||
@ -111,8 +111,6 @@
|
||||
"advanced.debug.title": "enable features for nerds",
|
||||
"advanced.debug.description": "gives you easy access to app info that can be useful for debugging. enabling this does not affect functionality of cobalt in any way.",
|
||||
|
||||
"advanced.data": "data management",
|
||||
|
||||
"advanced.local-processing": "local processing",
|
||||
"advanced.local-processing.title": "mux and convert media on device",
|
||||
"advanced.local-processing.description": "when downloading media, cobalt will use on-device processing to mux or convert it. exclusive local features such as remux or convert are not affected, they always run locally.",
|
||||
@ -126,5 +124,8 @@
|
||||
"processing.access_key.description": "cobalt will use this key to make requests to the processing instance instead of other authentication methods. make sure the instance supports api keys!",
|
||||
|
||||
"processing.custom_instance.input.alt_text": "custom instance domain",
|
||||
"processing.access_key.input.alt_text": "u-u-i-d access key"
|
||||
"processing.access_key.input.alt_text": "u-u-i-d access key",
|
||||
|
||||
"advanced.settings_data": "settings data",
|
||||
"advanced.local_storage": "local storage"
|
||||
}
|
||||
|
||||
42
web/src/components/settings/ClearStorageButton.svelte
Normal file
42
web/src/components/settings/ClearStorageButton.svelte
Normal file
@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/translations";
|
||||
import { createDialog } from "$lib/state/dialogs";
|
||||
import { clearQueue } from "$lib/state/queen-bee/queue";
|
||||
import { clearCacheStorage, clearFileStorage } from "$lib/storage";
|
||||
|
||||
import IconFileShredder from "@tabler/icons-svelte/IconFileShredder.svelte";
|
||||
import DataSettingsButton from "$components/settings/DataSettingsButton.svelte";
|
||||
|
||||
const clearDialog = () => {
|
||||
createDialog({
|
||||
id: "wipe-confirm",
|
||||
type: "small",
|
||||
icon: "warn-red",
|
||||
title: $t("dialog.clear_cache.title"),
|
||||
bodyText: $t("dialog.clear_cache.body"),
|
||||
buttons: [
|
||||
{
|
||||
text: $t("button.cancel"),
|
||||
main: false,
|
||||
action: () => {},
|
||||
},
|
||||
{
|
||||
text: $t("button.clear"),
|
||||
color: "red",
|
||||
main: true,
|
||||
timeout: 2000,
|
||||
action: async () => {
|
||||
clearQueue();
|
||||
await clearFileStorage();
|
||||
await clearCacheStorage();
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<DataSettingsButton id="clear-cache" click={clearDialog} danger>
|
||||
<IconFileShredder />
|
||||
{$t("button.clear_cache")}
|
||||
</DataSettingsButton>
|
||||
32
web/src/components/settings/DataSettingsButton.svelte
Normal file
32
web/src/components/settings/DataSettingsButton.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
export let id: string;
|
||||
export let click: () => void;
|
||||
export let danger = false;
|
||||
</script>
|
||||
|
||||
<button {id} class="button data-button" class:danger on:click={click}>
|
||||
<slot></slot>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.data-button {
|
||||
padding: 8px 14px;
|
||||
width: max-content;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.data-button :global(svg) {
|
||||
stroke-width: 1.8px;
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.data-button.danger {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.data-button.danger:hover {
|
||||
background-color: var(--dark-red);
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,7 @@
|
||||
import { validateSettings } from "$lib/settings/validate";
|
||||
import { storedSettings, updateSetting, loadFromString } from "$lib/state/settings";
|
||||
|
||||
import ActionButton from "$components/buttons/ActionButton.svelte";
|
||||
import DataSettingsButton from "$components/settings/DataSettingsButton.svelte";
|
||||
import ResetSettingsButton from "$components/settings/ResetSettingsButton.svelte";
|
||||
|
||||
import IconFileExport from "@tabler/icons-svelte/IconFileExport.svelte";
|
||||
@ -95,16 +95,16 @@
|
||||
</script>
|
||||
|
||||
<div class="button-row" id="settings-data-transfer">
|
||||
<ActionButton id="import-settings" click={importSettings}>
|
||||
<DataSettingsButton id="import-settings" click={importSettings}>
|
||||
<IconFileImport />
|
||||
{$t("button.import")}
|
||||
</ActionButton>
|
||||
</DataSettingsButton>
|
||||
|
||||
{#if $storedSettings.schemaVersion}
|
||||
<ActionButton id="export-settings" click={exportSettings}>
|
||||
<DataSettingsButton id="export-settings" click={exportSettings}>
|
||||
<IconFileExport />
|
||||
{$t("button.export")}
|
||||
</ActionButton>
|
||||
</DataSettingsButton>
|
||||
{/if}
|
||||
|
||||
{#if $storedSettings.schemaVersion}
|
||||
|
||||
@ -3,15 +3,16 @@
|
||||
import { createDialog } from "$lib/state/dialogs";
|
||||
import { resetSettings } from "$lib/state/settings";
|
||||
|
||||
import IconTrash from "@tabler/icons-svelte/IconTrash.svelte";
|
||||
import IconRestore from "@tabler/icons-svelte/IconRestore.svelte";
|
||||
import DataSettingsButton from "$components/settings/DataSettingsButton.svelte";
|
||||
|
||||
const resetDialog = () => {
|
||||
createDialog({
|
||||
id: "wipe-confirm",
|
||||
type: "small",
|
||||
icon: "warn-red",
|
||||
title: $t("dialog.reset.title"),
|
||||
bodyText: $t("dialog.reset.body"),
|
||||
title: $t("dialog.reset_settings.title"),
|
||||
bodyText: $t("dialog.reset_settings.body"),
|
||||
buttons: [
|
||||
{
|
||||
text: $t("button.cancel"),
|
||||
@ -30,26 +31,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<button id="setting-button-reset" class="button" on:click={resetDialog}>
|
||||
<IconTrash />
|
||||
<DataSettingsButton id="reset-settings" click={resetDialog} danger>
|
||||
<IconRestore />
|
||||
{$t("button.reset")}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
#setting-button-reset {
|
||||
background-color: var(--red);
|
||||
color: var(--white);
|
||||
width: max-content;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
#setting-button-reset:hover {
|
||||
background-color: var(--dark-red);
|
||||
}
|
||||
|
||||
#setting-button-reset :global(svg) {
|
||||
stroke-width: 2px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</DataSettingsButton>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { t } from "$lib/i18n/translations";
|
||||
import { getStorageQuota } from "$lib/storage";
|
||||
|
||||
import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
|
||||
import ManageSettings from "$components/settings/ManageSettings.svelte";
|
||||
import SettingsCategory from "$components/settings/SettingsCategory.svelte";
|
||||
import ClearStorageButton from "$components/settings/ClearStorageButton.svelte";
|
||||
</script>
|
||||
|
||||
<SettingsCategory sectionId="debug" title={$t("settings.advanced.debug")}>
|
||||
@ -15,6 +17,10 @@
|
||||
/>
|
||||
</SettingsCategory>
|
||||
|
||||
<SettingsCategory sectionId="data" title={$t("settings.advanced.data")}>
|
||||
<SettingsCategory sectionId="settings-data" title={$t("settings.advanced.settings_data")}>
|
||||
<ManageSettings />
|
||||
</SettingsCategory>
|
||||
|
||||
<SettingsCategory sectionId="local-storage" title={$t("settings.advanced.local_storage")}>
|
||||
<ClearStorageButton />
|
||||
</SettingsCategory>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user