From 422e4d523d217c21ad52622a25a60f0a5e0dbe06 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Fri, 24 Jan 2025 17:25:31 +1300 Subject: [PATCH] Moved settings into separated components --- materialious/src/lib/components/Search.svelte | 18 +- .../src/lib/components/Settings.svelte | 905 ------------------ .../components/Settings/ApiExtended.svelte | 37 + .../Settings/DataPreferences.svelte | 16 + .../lib/components/Settings/DeArrow.svelte | 66 ++ .../lib/components/Settings/Interface.svelte | 262 +++++ .../src/lib/components/Settings/Player.svelte | 260 +++++ .../src/lib/components/Settings/RYD.svelte | 37 + .../lib/components/Settings/Settings.svelte | 205 ++++ .../components/Settings/SponsorBlock.svelte | 115 +++ materialious/src/lib/i18n/locales/en.json | 1 + materialious/src/lib/store.ts | 3 + materialious/src/routes/(app)/+layout.svelte | 2 +- materialious/static/style.css | 4 + 14 files changed, 1024 insertions(+), 907 deletions(-) delete mode 100644 materialious/src/lib/components/Settings.svelte create mode 100644 materialious/src/lib/components/Settings/ApiExtended.svelte create mode 100644 materialious/src/lib/components/Settings/DataPreferences.svelte create mode 100644 materialious/src/lib/components/Settings/DeArrow.svelte create mode 100644 materialious/src/lib/components/Settings/Interface.svelte create mode 100644 materialious/src/lib/components/Settings/Player.svelte create mode 100644 materialious/src/lib/components/Settings/RYD.svelte create mode 100644 materialious/src/lib/components/Settings/Settings.svelte create mode 100644 materialious/src/lib/components/Settings/SponsorBlock.svelte diff --git a/materialious/src/lib/components/Search.svelte b/materialious/src/lib/components/Search.svelte index 3b2a82e7..aaf98ffe 100644 --- a/materialious/src/lib/components/Search.svelte +++ b/materialious/src/lib/components/Search.svelte @@ -4,7 +4,11 @@ import { createEventDispatcher, onMount } from 'svelte'; import { _ } from 'svelte-i18n'; import { getSearchSuggestions } from '../api'; - import { interfaceSearchSuggestionsStore } from '../store'; + import { + interfaceSearchHistoryEnabled, + interfaceSearchSuggestionsStore, + searchHistoryStore + } from '../store'; const dispatch = createEventDispatcher(); @@ -38,7 +42,12 @@ goto(`/search/${encodeURIComponent(search)}`); dispatch('searchSubmitted'); + suggestionsForSearch = []; showSearchBox = false; + + if ($interfaceSearchHistoryEnabled && !$searchHistoryStore.includes(search)) { + searchHistoryStore.set([search, ...$searchHistoryStore]); + } } function handleKeyDown(event: KeyboardEvent) { @@ -131,6 +140,13 @@ {/each} {/if} + {#if !suggestionsForSearch.length && $interfaceSearchHistoryEnabled} + {#each $searchHistoryStore as history} + +
{history}
+ + {/each} + {/if} {/if} diff --git a/materialious/src/lib/components/Settings.svelte b/materialious/src/lib/components/Settings.svelte deleted file mode 100644 index e361ba31..00000000 --- a/materialious/src/lib/components/Settings.svelte +++ /dev/null @@ -1,905 +0,0 @@ - - - - - -
- -
- {#if Capacitor.isNativePlatform()} -
{ - instanceStore.set(ensureNoTrailingSlash(invidiousInstance)); - authStore.set(null); - goto('/', { replaceState: true }); - ui('#dialog-settings'); - }} - > - -
- {/if} - -
- - - - -
- - {#if $darkModeStore} -
- -
- {/if} - -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - - arrow_drop_down -
- -
- - - arrow_drop_down -
- -
- - - arrow_drop_down -
- - {#if !Capacitor.isNativePlatform()} -
-
{$_('layout.bookmarklet')}
- -
- {/if} -
-
-
-
- - - arrow_drop_down -
- -
- -
- -
- -
- -
- -
- - {#if Capacitor.getPlatform() === 'android'} -
- -
- -
- -
- {/if} - - {#if Capacitor.isNativePlatform()} -
- -
- {/if} - -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - {#if Capacitor.isNativePlatform()} -
- -
- -
- -
- {/if} -
-
-

- - {$_('layout.dataPreferences.content')} - -

-
-
-
- returnYTDislikesInstanceStore.set(ensureNoTrailingSlash(returnYTInstance))} - > - -
- - -
-
-
- synciousInstanceStore.set(ensureNoTrailingSlash(synciousInstance))} - > - -
- - -
-
-
- sponsorBlockUrlStore.set(ensureNoTrailingSlash(sponsorBlockInstance))} - > - -
- - - - - - - -
- -

{$_('layout.sponsors.Catagories')}

- - {#each sponsorCategories as sponsor} -
- -
- {/each} -
-
-
deArrowInstanceStore.set(ensureNoTrailingSlash(deArrowUrl))} - > - -
- -
deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl)}> - -
- - - - -
-
- - - diff --git a/materialious/src/lib/components/Settings/ApiExtended.svelte b/materialious/src/lib/components/Settings/ApiExtended.svelte new file mode 100644 index 00000000..4165674b --- /dev/null +++ b/materialious/src/lib/components/Settings/ApiExtended.svelte @@ -0,0 +1,37 @@ + + +
+ synciousInstanceStore.set(ensureNoTrailingSlash(synciousInstance))} +> + +
+ + diff --git a/materialious/src/lib/components/Settings/DataPreferences.svelte b/materialious/src/lib/components/Settings/DataPreferences.svelte new file mode 100644 index 00000000..13b6652f --- /dev/null +++ b/materialious/src/lib/components/Settings/DataPreferences.svelte @@ -0,0 +1,16 @@ + + +

+ + {$_('layout.dataPreferences.content')} + +

diff --git a/materialious/src/lib/components/Settings/DeArrow.svelte b/materialious/src/lib/components/Settings/DeArrow.svelte new file mode 100644 index 00000000..62b08d47 --- /dev/null +++ b/materialious/src/lib/components/Settings/DeArrow.svelte @@ -0,0 +1,66 @@ + + +
deArrowInstanceStore.set(ensureNoTrailingSlash(deArrowUrl))}> + +
+ +
deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl)}> + +
+ + + + diff --git a/materialious/src/lib/components/Settings/Interface.svelte b/materialious/src/lib/components/Settings/Interface.svelte new file mode 100644 index 00000000..7e6facbc --- /dev/null +++ b/materialious/src/lib/components/Settings/Interface.svelte @@ -0,0 +1,262 @@ + + +{#if Capacitor.isNativePlatform()} +
{ + instanceStore.set(ensureNoTrailingSlash(invidiousInstance)); + authStore.set(null); + goto('/', { replaceState: true }); + ui('#dialog-settings'); + }} + > + +
+{/if} + +
+ + + + +
+ +{#if $darkModeStore} +
+ +
+{/if} + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + arrow_drop_down +
+ +
+ + + arrow_drop_down +
+ +
+ + + arrow_drop_down +
+ +{#if !Capacitor.isNativePlatform()} +
+
{$_('layout.bookmarklet')}
+ +
+{/if} diff --git a/materialious/src/lib/components/Settings/Player.svelte b/materialious/src/lib/components/Settings/Player.svelte new file mode 100644 index 00000000..04eff69c --- /dev/null +++ b/materialious/src/lib/components/Settings/Player.svelte @@ -0,0 +1,260 @@ + + +
+
+ + + arrow_drop_down +
+ +
+ +
+ +
+ +
+ +
+ +
+ +{#if Capacitor.getPlatform() === 'android'} +
+ +
+ +
+ +
+{/if} + +{#if Capacitor.isNativePlatform()} +
+ +
+{/if} + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +{#if Capacitor.isNativePlatform()} +
+ +
+ +
+ +
+{/if} diff --git a/materialious/src/lib/components/Settings/RYD.svelte b/materialious/src/lib/components/Settings/RYD.svelte new file mode 100644 index 00000000..57ddcad5 --- /dev/null +++ b/materialious/src/lib/components/Settings/RYD.svelte @@ -0,0 +1,37 @@ + + +
+ returnYTDislikesInstanceStore.set(ensureNoTrailingSlash(returnYTInstance))} +> + +
+ + diff --git a/materialious/src/lib/components/Settings/Settings.svelte b/materialious/src/lib/components/Settings/Settings.svelte new file mode 100644 index 00000000..5fdda82e --- /dev/null +++ b/materialious/src/lib/components/Settings/Settings.svelte @@ -0,0 +1,205 @@ + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + diff --git a/materialious/src/lib/components/Settings/SponsorBlock.svelte b/materialious/src/lib/components/Settings/SponsorBlock.svelte new file mode 100644 index 00000000..8bc10251 --- /dev/null +++ b/materialious/src/lib/components/Settings/SponsorBlock.svelte @@ -0,0 +1,115 @@ + + +
+ sponsorBlockUrlStore.set(ensureNoTrailingSlash(sponsorBlockInstance))} +> + +
+ + + + + + + +
+ +

{$_('layout.sponsors.Catagories')}

+ +{#each sponsorCategories as sponsor} +
+ +
+{/each} diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index fea99828..da4fdca1 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/materialious/src/lib/i18n/locales/en.json @@ -107,6 +107,7 @@ "customize": "Customize", "lowBandwidthMode": "Low bandwidth mode", "displayThumbnailAvatars": "Display channel avatars on thumbnail (Slow)", + "searchHistory": "Search history", "theme": { "theme": "Theme", "darkMode": "Dark mode", diff --git a/materialious/src/lib/store.ts b/materialious/src/lib/store.ts index 2acc3c82..0057923f 100644 --- a/materialious/src/lib/store.ts +++ b/materialious/src/lib/store.ts @@ -68,6 +68,7 @@ export const interfaceAmoledTheme = persisted('amoledTheme', false); export const interfaceLowBandwidthMode = persisted('lowBandwidthMode', false); export const interfaceDisplayThumbnailAvatars = persisted('disableThumbnailAvatars', false); export const interfaceDefaultPage = persisted('defaultPage', '/'); +export const interfaceSearchHistoryEnabled = persisted('searchHistoryEnabled', false); export const sponsorBlockStore = persisted('sponsorBlock', true); export const sponsorBlockUrlStore: Writable = persisted( @@ -110,3 +111,5 @@ export const miniPlayerSrcStore: Writable<{ video: VideoPlay; time: number; } | export const silenceSkipperStore: Writable = persisted('silenceSkipper', false); export const poTokenCacheStore: Writable = writable(); + +export const searchHistoryStore: Writable = persisted('searchHistory', []); diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte index 8b3a4893..39ee8dc7 100644 --- a/materialious/src/routes/(app)/+layout.svelte +++ b/materialious/src/routes/(app)/+layout.svelte @@ -10,7 +10,7 @@ import MiniPlayer from '$lib/components/MiniPlayer.svelte'; import PageLoading from '$lib/components/PageLoading.svelte'; import Search from '$lib/components/Search.svelte'; - import Settings from '$lib/components/Settings.svelte'; + import Settings from '$lib/components/Settings/Settings.svelte'; import SyncParty from '$lib/components/SyncParty.svelte'; import Thumbnail from '$lib/components/Thumbnail.svelte'; import { bookmarkletLoadFromUrl, loadSettingsFromEnv } from '$lib/externalSettings'; diff --git a/materialious/static/style.css b/materialious/static/style.css index 9a4c6f65..f6cdbba7 100644 --- a/materialious/static/style.css +++ b/materialious/static/style.css @@ -48,6 +48,10 @@ display: none !important; } +#dialog-settings form { + margin: 1em 0; +} + main.root { padding-left: 7em !important; padding-top: 5em !important;