More Settings export to Export/Import

docs/DOCKER-FULL.md

@@ -112,7 +112,7 @@ volumes:
 ```
 
 ### Overwriting Materialious defaults
-Materialious lets you customize the default settings by overriding them with `PUBLIC_DEFAULT_SETTINGS`. To configure this easily, go to **Settings** → **Interface** and click "Export to JSON." For more details, check the [SETTINGS](./SETTINGS.md) page.
+Materialious lets you customize the default settings by overriding them with `PUBLIC_DEFAULT_SETTINGS`. To configure this easily, go to **Settings** → **Export/Import** and click "Copy to clipboard" under the "Settings" header. For more details, check the [SETTINGS](./SETTINGS.md) page.
 
 **Please note:** These overwrites only apply on 1st load & won't replace existing configuration stored in browser local storage.
 

materialious/src/lib/components/settings/ExportImport.svelte

@@ -7,6 +7,9 @@
 	import { postSubscribeInvidious } from '$lib/api/invidious/subscribe';
 	import { getSubscriptionsInvidious } from '$lib/api/invidious/feed';
 	import { backendInUseStore, invidiousAuthStore, invidiousInstanceStore } from '$lib/store';
+	import { Clipboard } from '@capacitor/clipboard';
+	import { settingsToJson } from '$lib/externalSettings';
+	import { downloadStringAsFile } from '$lib/misc';
 
 	async function importInvidiousSubs() {
 		const importedSubs = await getSubscriptionsInvidious();
@@ -128,3 +131,31 @@
 		<div>{$_('layout.backendEngine.importToMaterialious')}</div>
 	</button>
 {/if}
+
+<h3>{$_('layout.settings')}</h3>
+<div class="space"></div>
+<button
+	class="no-margin surface-container-highest"
+	onclick={async () => {
+		await Clipboard.write({ string: settingsToJson() });
+
+		addToast({
+			data: {
+				text: $_('player.share.copiedSuccess')
+			}
+		});
+	}}
+>
+	<i>content_copy</i>
+	<span>{$_('copy')}</span>
+</button>
+<div class="space"></div>
+<button
+	class="no-margin surface-container-highest"
+	onclick={async () => {
+		downloadStringAsFile(settingsToJson(), 'materialious-settings.json');
+	}}
+>
+	<i>download</i>
+	<span>{$_('player.download')}</span>
+</button>

materialious/src/lib/components/settings/Interface.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { bookmarkletSaveToUrl, settingsToJson } from '$lib/externalSettings/index';
+	import { bookmarkletSaveToUrl } from '$lib/externalSettings/index';
 	import { letterCase, titleCases } from '$lib/letterCasing';
 	import { setAmoledTheme } from '$lib/theme';
-	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
 	import ui from 'beercss';
 	import { iso31661 } from 'iso-3166';
@@ -466,26 +465,6 @@
 			<span>{$_('copyUrl')}</span>
 		</button>
 	</div>
-	<div class="space"></div>
-	<div class="settings">
-		<h6>{$_('layout.exportToJson')}</h6>
-		<div class="space"></div>
-		<button
-			class="no-margin"
-			onclick={async () => {
-				await Clipboard.write({ string: settingsToJson() });
-
-				addToast({
-					data: {
-						text: get(_)('player.share.copiedSuccess')
-					}
-				});
-			}}
-		>
-			<i>content_copy</i>
-			<span>{$_('copy')}</span>
-		</button>
-	</div>
 {/if}
 
 <style>

materialious/src/lib/i18n/locales/en.json

@@ -4,7 +4,7 @@
 	"popularPageDisabled": "Popular page has been disabled by Admins",
 	"premium": "Premium YouTube content can't be watched on Materialious.",
 	"copyUrl": "Copy URL",
-	"copy": "Copy JSON",
+	"copy": "Copy to clipboard",
 	"loadMore": "Load more",
 	"views": "views",
 	"login": "Login",