diff --git a/materialious/src/lib/bookmarklet.ts b/materialious/src/lib/bookmarklet.ts new file mode 100644 index 00000000..fd137a68 --- /dev/null +++ b/materialious/src/lib/bookmarklet.ts @@ -0,0 +1,154 @@ +import { page } from "$app/stores"; +import { get } from "svelte/store"; +import { + darkMode, + deArrowEnabled, + deArrowInstance, + deArrowThumbnailInstance, + interfaceSearchSuggestions, + playerAlwaysLoop, + playerAutoPlay, + playerAutoplayNextByDefault, + playerDash, + playerListenByDefault, + playerProxyVideos, + playerSavePlaybackPosition, + playerTheatreModeByDefault, + returnYTDislikesInstance, + sponsorBlock, + sponsorBlockCategories, + sponsorBlockUrl, + themeColor +} from "../store"; + +const persistedStores = [ + { + name: 'returnYTDislikesInstance', + store: returnYTDislikesInstance, + type: 'string' + }, + { + name: 'darkMode', + store: darkMode, + type: 'boolean' + }, + { + name: 'themeColor', + store: themeColor, + type: 'string' + }, + { + name: 'autoPlay', + store: playerAutoPlay, + type: 'boolean' + }, + { + name: 'alwaysLoop', + store: playerAlwaysLoop, + type: 'boolean' + }, + { + name: 'proxyVideos', + store: playerProxyVideos, + type: 'boolean' + }, + { + name: 'listenByDefault', + store: playerListenByDefault, + type: 'boolean' + }, + { + name: 'savePlaybackPosition', + store: playerSavePlaybackPosition, + type: 'boolean' + }, + { + name: 'dashEnabled', + store: playerDash, + type: 'boolean' + }, + { + name: 'theatreModeByDefault', + store: playerTheatreModeByDefault, + type: 'boolean' + }, + { + name: 'autoplayNextByDefault', + store: playerAutoplayNextByDefault, + type: 'boolean' + }, + { + name: 'returnYtDislikes', + store: returnYTDislikesInstance, + type: 'boolean' + }, + { + name: 'searchSuggestions', + store: interfaceSearchSuggestions, + type: 'boolean' + }, + { + name: 'sponsorBlock', + store: sponsorBlock, + type: 'boolean' + }, + { + name: 'sponsorBlockUrl', + store: sponsorBlockUrl, + type: 'string' + }, + { + name: 'sponsorBlockCategories', + store: sponsorBlockCategories, + type: 'array' + }, + { + name: 'deArrowInstance', + store: deArrowInstance, + type: 'string' + }, + { + name: 'deArrowEnabled', + store: deArrowEnabled, + type: 'boolean' + }, + { + name: 'deArrowThumbnailInstance', + store: deArrowThumbnailInstance, + type: 'string' + } +]; + +export function bookmarkletSaveToUrl(): string { + const url = new URL(import.meta.env.VITE_DEFAULT_FRONTEND_URL); + + persistedStores.forEach(store => { + let value = get(store.store); + if (value) { + url.searchParams.set(store.name, value.toString()); + } + }); + + return url.toString(); +} + +export function bookmarkletLoadFromUrl() { + const currentPage = get(page); + + persistedStores.forEach(store => { + let paramValue = currentPage.url.searchParams.get(store.name); + if (paramValue) { + let value: any; + + if (store.type === 'array') { + value = paramValue.split(','); + } else if (store.type === 'boolean') { + value = paramValue === 'true'; + } else { + value = paramValue; + } + + store.store.set(value); + } + }); +} \ No newline at end of file diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte index 00da59b9..a110199d 100644 --- a/materialious/src/routes/+layout.svelte +++ b/materialious/src/routes/+layout.svelte @@ -6,6 +6,7 @@ import PageLoading from '$lib/PageLoading.svelte'; import Search from '$lib/Search.svelte'; import Thumbnail from '$lib/Thumbnail.svelte'; + import { bookmarkletLoadFromUrl, bookmarkletSaveToUrl } from '$lib/bookmarklet'; import type { PlayerEvents } from '$lib/player'; import 'beercss'; import 'material-dynamic-colors'; @@ -217,6 +218,8 @@ onMount(async () => { ui(); + bookmarkletLoadFromUrl(); + const isDark = get(darkMode); if (isDark === null) { @@ -652,6 +655,15 @@ + +
+
Bookmarklet
+ +