Use improved persistent svelte store with native android preference

storage
2025-11-28 13:03:39 +13:00
parent c6e2ad9691
commit df6e9384b8
7 changed files with 319 additions and 116 deletions
@@ -13,6 +13,7 @@ dependencies {
    implementation project(':capacitor-app')
    implementation project(':capacitor-browser')
    implementation project(':capacitor-clipboard')
+    implementation project(':capacitor-preferences')
    implementation project(':capacitor-screen-orientation')
    implementation project(':capacitor-share')
    implementation project(':capacitor-nodejs')
@@ -14,6 +14,9 @@ project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-clipboard'
 project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')

+include ':capacitor-preferences'
+project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')
+
 include ':capacitor-screen-orientation'
 project(':capacitor-screen-orientation').projectDir = new File('../node_modules/@capacitor/screen-orientation/android')

@@ -16,8 +16,10 @@
 				"@capacitor/browser": "^7.0.0",
 				"@capacitor/clipboard": "^7.0.0",
 				"@capacitor/core": "^7.4.3",
+				"@capacitor/preferences": "^7.0.2",
 				"@capacitor/screen-orientation": "^7.0.0",
 				"@capacitor/share": "^7.0.2",
+				"@macfja/svelte-persistent-store": "^2.4.2",
 				"beercss": "^3.12.13",
 				"bgutils-js": "^3.2.0",
 				"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
@@ -36,7 +38,6 @@
 				"shaka-player": "^4.16.2",
 				"sponsorblock-api": "^0.2.4",
 				"svelte-infinite-loading": "^1.4.0",
-				"svelte-persisted-store": "^0.12.0",
 				"youtubei.js": "^16.0.1"
 			},
 			"devDependencies": {
@@ -2073,6 +2074,15 @@
 				"tslib": "^2.1.0"
 			}
 		},
+		"node_modules/@capacitor/preferences": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/@capacitor/preferences/-/preferences-7.0.2.tgz",
+			"integrity": "sha512-JVCy0/oc6RsRencLOZ8rMqjNxAlHs7awPJU/MXqangsJ48oO2PnYGHfCvci6WgIJlqyC0QhvWZaO1BR1lVkHWQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@capacitor/core": ">=7.0.0"
+			}
+		},
 		"node_modules/@capacitor/screen-orientation": {
 			"version": "7.0.2",
 			"resolved": "https://registry.npmjs.org/@capacitor/screen-orientation/-/screen-orientation-7.0.2.tgz",
@@ -2803,6 +2813,28 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@macfja/serializer": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/@macfja/serializer/-/serializer-1.1.4.tgz",
+			"integrity": "sha512-bUKIyLdSTyPfTgOvRqH8MkSDQhSaEGjUSvQlvnjA6tbeZDuY9u0WKieZNyqYwq3mPxytNd6Z5Lq2n4A3dA9HMA==",
+			"license": "MIT"
+		},
+		"node_modules/@macfja/svelte-persistent-store": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/@macfja/svelte-persistent-store/-/svelte-persistent-store-2.4.2.tgz",
+			"integrity": "sha512-ZAcWJcCnfZDIiy77Aoj9KQ6qDt6UmRZgUM3UHjmOY1IRf0SirDl1WgBFlVUMynRLERy4/EgZtWPqAMnh3cbCRA==",
+			"license": "MIT",
+			"dependencies": {
+				"@macfja/serializer": "^1.1.2",
+				"browser-cookies": "^1.2.0",
+				"idb-keyval": "^5.1.3 || ^6.2.1",
+				"sjcl-codec-hex": "^1.0.0",
+				"sjcl-es": "^2.0.0"
+			},
+			"peerDependencies": {
+				"svelte": "^3.0 || ^4.0 || ^5.0"
+			}
+		},
 		"node_modules/@material/material-color-utilities": {
 			"version": "0.2.7",
 			"resolved": "https://registry.npmjs.org/@material/material-color-utilities/-/material-color-utilities-0.2.7.tgz",
@@ -4531,6 +4563,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/browser-cookies": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/browser-cookies/-/browser-cookies-1.2.0.tgz",
+			"integrity": "sha512-cg2WuoOJo+F+g2XjEaP8nmeRp1vDHjt7sqpKJMsTNXKrpyIBNVslYJeehvs6FEddj8usV2+qyRSBEX244yN5/g==",
+			"license": "Unlicence"
+		},
 		"node_modules/browserslist": {
 			"version": "4.28.0",
 			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
@@ -7342,6 +7380,12 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/idb-keyval": {
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
+			"integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -11198,6 +11242,30 @@
 			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
 			"license": "MIT"
 		},
+		"node_modules/sjcl-bit-array": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/sjcl-bit-array/-/sjcl-bit-array-1.0.0.tgz",
+			"integrity": "sha512-xoR134YJa7AHToLqCWuLYGpAdcBuLbSgwXe9c5HTIN4vr5TILXO/jVF8pLeXDhC7JTOvpmXUkiOupawVNTZVdQ==",
+			"license": "BSD or GPL 2.0"
+		},
+		"node_modules/sjcl-codec-hex": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/sjcl-codec-hex/-/sjcl-codec-hex-1.0.0.tgz",
+			"integrity": "sha512-lBBjqky1BEH+WZdABR/iSl2Pu3HO8n8r2D7nkzYLZfcR9ke4kUGMvO0ztRkla5oi4Esbc9pOlBtyGeMjYOU0ng==",
+			"license": "BSD or GPL 2.0",
+			"dependencies": {
+				"sjcl-bit-array": "~1.0.0"
+			}
+		},
+		"node_modules/sjcl-es": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/sjcl-es/-/sjcl-es-2.0.0.tgz",
+			"integrity": "sha512-P8O+4pAt95XqmTlvvPdbmBggjAgSE0LQnhSEYUKYKepN176b/8K9zcVrrqhuLu5EUQyeCYy/56J9FzxvzvMavg==",
+			"license": "(BSD-2-Clause OR GPL-2.0-only)",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
 		"node_modules/slash": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -11751,18 +11819,6 @@
 			"integrity": "sha512-Jo+f/yr/HmZQuIiiKKzAHVFXdAUWHW2RBbrcQTil8JVk1sCm/riy7KTJVzjBgQvHasrFQYKF84zvtc9/Y4lFYg==",
 			"license": "MIT"
 		},
-		"node_modules/svelte-persisted-store": {
-			"version": "0.12.0",
-			"resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.12.0.tgz",
-			"integrity": "sha512-BdBQr2SGSJ+rDWH8/aEV5GthBJDapVP0GP3fuUCA7TjYG5ctcB+O9Mj9ZC0+Jo1oJMfZUd1y9H68NFRR5MyIJA==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.14"
-			},
-			"peerDependencies": {
-				"svelte": "^3.48.0 || ^4 || ^5"
-			}
-		},
 		"node_modules/tar": {
 			"version": "6.2.1",
 			"resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
@@ -48,8 +48,10 @@
 		"@capacitor/browser": "^7.0.0",
 		"@capacitor/clipboard": "^7.0.0",
 		"@capacitor/core": "^7.4.3",
+		"@capacitor/preferences": "^7.0.2",
 		"@capacitor/screen-orientation": "^7.0.0",
 		"@capacitor/share": "^7.0.2",
+		"@macfja/svelte-persistent-store": "^2.4.2",
 		"beercss": "^3.12.13",
 		"bgutils-js": "^3.2.0",
 		"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
@@ -68,7 +70,6 @@
 		"shaka-player": "^4.16.2",
 		"sponsorblock-api": "^0.2.4",
 		"svelte-infinite-loading": "^1.4.0",
-		"svelte-persisted-store": "^0.12.0",
 		"youtubei.js": "^16.0.1"
 	}
 }
@@ -53,7 +53,6 @@

 	interface Props {
 		data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
-		isSyncing?: boolean;
 		isEmbed?: boolean;
 		playerElement?: HTMLMediaElement | undefined;
 	}
@@ -172,6 +171,8 @@
 		document.addEventListener('fullscreenchange', async () => {
 			const isFullScreen = !!document.fullscreenElement;

+			console.log('isFullScreen', isFullScreen);
+
 			if (isFullScreen) {
 				// Ensure bar color is black while in fullscreen
 				await SafeArea.enable({
@@ -189,17 +190,22 @@

 			if (!$playerAndroidLockOrientation) return;

+			console.log(videoFormats[0]);
+
 			if (isFullScreen && videoFormats[0].resolution) {
 				const widthHeight = videoFormats[0].resolution.split('x');

 				if (widthHeight.length !== 2) return;

 				if (Number(widthHeight[0]) > Number(widthHeight[1])) {
+					console.log('needs to be landscape');
 					await ScreenOrientation.lock({ orientation: 'landscape' });
 				} else {
+					console.log('needs to be portrait');
 					await ScreenOrientation.lock({ orientation: 'portrait' });
 				}
 			} else {
+				console.log('reset to og');
 				await ScreenOrientation.lock({
 					orientation: (originalOrigination as ScreenOrientationResult).type
 				});
@@ -1,8 +1,13 @@
 import { Capacitor } from '@capacitor/core';
 import type Peer from 'peerjs';
 import type { DataConnection } from 'peerjs';
-import { persisted } from 'svelte-persisted-store';
 import { writable, type Writable } from 'svelte/store';
+import { Preferences } from '@capacitor/preferences';
+import {
+	persist,
+	createLocalStorage,
+	type StorageInterface
+} from '@macfja/svelte-persistent-store';
 import type { TitleCase } from './letterCasing';
 import type {
 	Channel,
@@ -17,6 +22,26 @@ import type {
 import { ensureNoTrailingSlash } from './misc';
 import type { PhasedDescription } from './timestamps';

+function createStorage(): StorageInterface<any> {
+	if (Capacitor.getPlatform() === 'android') {
+		return {
+			getValue(key: string): any | null {
+				return Preferences.get({ key: key }).then((value) => {
+					return value.value ? JSON.parse(value.value) : value.value;
+				});
+			},
+			deleteValue(key: string) {
+				Preferences.remove({ key: key });
+			},
+			setValue(key: string, value: any) {
+				Preferences.set({ key: key, value: JSON.stringify(value) });
+			}
+		};
+	} else {
+		return createLocalStorage();
+	}
+}
+
 function platformDependentDefault(givenValue: any, defaultValue: any): any {
 	if (typeof givenValue !== 'undefined' && givenValue !== null) {
 		return givenValue;
@@ -25,41 +50,93 @@ function platformDependentDefault(givenValue: any, defaultValue: any): any {
 	}
 }

-export const instanceStore: Writable<string> = persisted(
-	'invidiousInstance',
-	platformDependentDefault(
-		!import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE
-			? undefined
-			: ensureNoTrailingSlash(import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE),
-		'https://invidious.materialio.us'
-	)
+export const instanceStore: Writable<string> = persist(
+	writable(
+		platformDependentDefault(
+			!import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE
+				? undefined
+				: ensureNoTrailingSlash(import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE),
+			'https://invidious.materialio.us'
+		)
+	),
+	createStorage(),
+	'invidiousInstance'
 );

-export const authStore: Writable<null | { username: string; token: string }> = persisted(
-	'authToken',
-	null
+export const authStore: Writable<null | { username: string; token: string }> = persist(
+	writable(null),
+	createStorage(),
+	'authToken'
 );

-export const darkModeStore: Writable<null | boolean> = persisted('darkMode', null);
-export const themeColorStore: Writable<null | string> = persisted('themeColor', null);
+export const darkModeStore: Writable<null | boolean> = persist(
+	writable(null),
+	createStorage(),
+	'darkMode'
+);
+export const themeColorStore: Writable<null | string> = persist(
+	writable(null),
+	createStorage(),
+	'themeColor'
+);

-export const showWarningStore = persisted('showWarning', true);
+export const showWarningStore = persist(writable(true), createStorage(), 'showWarning');

-export const playerAutoPlayStore = persisted('autoPlay', true);
-export const playerAlwaysLoopStore = persisted('alwaysLoop', false);
-export const playerProxyVideosStore = persisted('proxyVideos', true);
-export const playerSavePlaybackPositionStore = persisted('savePlaybackPosition', true);
-export const playerTheatreModeByDefaultStore = persisted('theatreModeByDefault', false);
-export const playerDefaultQualityStore = persisted('defaultQuality', 'auto');
-export const playerAutoplayNextByDefaultStore = persisted('autoplayNextByDefault', false);
-export const playerYouTubeJsFallback = persisted('youTubeJsFallback', true);
-export const playerYouTubeJsAlways = persisted('youTubeJsAlways', false);
-export const playerAndroidLockOrientation = persisted('androidLockOrientation', true);
-export const playerDefaultLanguage = persisted('defaultLanguage', 'original');
-export const playerCCByDefault = persisted('CCByDefault', false);
-export const playerDefaultPlaybackSpeed: Writable<number> = persisted('defaultPlaybackSpeed', 1);
-export const playerStatisticsByDefault = persisted('playerStatistics', false);
-export const playerMiniplayerEnabled = persisted('miniplayerEnabled', true);
+export const playerAutoPlayStore = persist(writable(true), createStorage(), 'autoPlay');
+export const playerAlwaysLoopStore = persist(writable(false), createStorage(), 'alwaysLoop');
+export const playerProxyVideosStore = persist(writable(true), createStorage(), 'proxyVideos');
+export const playerSavePlaybackPositionStore = persist(
+	writable(true),
+	createStorage(),
+	'savePlaybackPosition'
+);
+export const playerTheatreModeByDefaultStore = persist(
+	writable(false),
+	createStorage(),
+	'theatreModeByDefault'
+);
+export const playerDefaultQualityStore = persist(
+	writable('auto'),
+	createStorage(),
+	'defaultQuality'
+);
+export const playerAutoplayNextByDefaultStore = persist(
+	writable(false),
+	createStorage(),
+	'autoplayNextByDefault'
+);
+export const playerYouTubeJsFallback = persist(
+	writable(true),
+	createStorage(),
+	'youTubeJsFallback'
+);
+export const playerYouTubeJsAlways = persist(writable(false), createStorage(), 'youTubeJsAlways');
+export const playerAndroidLockOrientation = persist(
+	writable(true),
+	createStorage(),
+	'androidLockOrientation'
+);
+export const playerDefaultLanguage = persist(
+	writable('original'),
+	createStorage(),
+	'defaultLanguage'
+);
+export const playerCCByDefault = persist(writable(false), createStorage(), 'CCByDefault');
+export const playerDefaultPlaybackSpeed: Writable<number> = persist(
+	writable(1),
+	createStorage(),
+	'defaultPlaybackSpeed'
+);
+export const playerStatisticsByDefault = persist(
+	writable(false),
+	createStorage(),
+	'playerStatistics'
+);
+export const playerMiniplayerEnabled = persist(
+	writable(true),
+	createStorage(),
+	'miniplayerEnabled'
+);
 export const playerPlaylistHistory: Writable<string[]> = writable([]);

 export interface PlayerState {
@@ -71,69 +148,124 @@ export interface PlayerState {
 export const playerState: Writable<PlayerState | undefined> = writable(undefined);
 export const playertheatreModeIsActive = writable(false);

-export const returnYtDislikesStore = persisted('returnYtDislikes', false);
-export const returnYTDislikesInstanceStore: Writable<string | null | undefined> = persisted(
-	'returnYTDislikesInstance',
-	platformDependentDefault(
-		import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE,
-		'https://ryd-proxy.materialio.us'
-	)
+export const returnYtDislikesStore = persist(writable(false), createStorage(), 'returnYtDislikes');
+export const returnYTDislikesInstanceStore: Writable<string | null | undefined> = persist(
+	writable(
+		platformDependentDefault(
+			import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE,
+			'https://ryd-proxy.materialio.us'
+		)
+	),
+	createStorage(),
+	'returnYTDislikesInstance'
 );

-export const synciousStore = persisted('syncious', false);
-export const synciousInstanceStore: Writable<string | null | undefined> = persisted(
-	'synciousInstance',
-	platformDependentDefault(
-		import.meta.env.VITE_DEFAULT_SYNCIOUS_INSTANCE ||
-			import.meta.env.VITE_DEFAULT_API_EXTENDED_INSTANCE,
-		'https://extended-api.materialio.us'
-	)
+export const synciousStore = persist(writable(false), createStorage(), 'syncious');
+export const synciousInstanceStore: Writable<string | null | undefined> = persist(
+	writable(
+		platformDependentDefault(
+			import.meta.env.VITE_DEFAULT_SYNCIOUS_INSTANCE ||
+				import.meta.env.VITE_DEFAULT_API_EXTENDED_INSTANCE,
+			'https://extended-api.materialio.us'
+		)
+	),
+	createStorage(),
+	'synciousInstance'
 );

-export const interfaceRegionStore: Writable<string> = persisted('interfaceRegion', 'US');
-export const interfaceSearchSuggestionsStore = persisted('searchSuggestions', true);
-export const interfaceForceCase: Writable<TitleCase> = persisted('forceCase', null);
-export const interfaceAutoExpandComments: Writable<boolean> = persisted('autoExpandComments', true);
-export const interfaceAutoExpandDesc: Writable<boolean> = persisted('autoExpandDesc', false);
-export const interfaceAutoExpandChapters: Writable<boolean> = persisted(
-	'autoExpandChapters',
-	false
+export const interfaceRegionStore: Writable<string> = persist(
+	writable('US'),
+	createStorage(),
+	'interfaceRegion'
 );
-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 interfaceAllowInsecureRequests = persisted('allowInsecureRequests', false);
-export const interfaceDisableAutoUpdate = persisted('disableAutoUpdate', false);
-
-export const sponsorBlockStore = persisted('sponsorBlock', true);
-export const sponsorBlockUrlStore: Writable<string | null | undefined> = persisted(
-	'sponsorBlockUrl',
-	import.meta.env.VITE_DEFAULT_SPONSERBLOCK_INSTANCE || 'https://sponsor.ajay.app'
+export const interfaceSearchSuggestionsStore = persist(
+	writable(true),
+	createStorage(),
+	'searchSuggestions'
 );
-export const sponsorBlockCategoriesStore: Writable<string[]> = persisted(
-	'sponsorBlockCategories',
-	[]
+export const interfaceForceCase: Writable<TitleCase> = persist(
+	writable(null),
+	createStorage(),
+	'forceCase'
 );
-export const sponsorBlockDisplayToastStore: Writable<boolean> = persisted(
-	'sponsorBlockDisplayToast',
-	false
+export const interfaceAutoExpandComments: Writable<boolean> = persist(
+	writable(true),
+	createStorage(),
+	'autoExpandComments'
 );
-export const sponsorBlockTimelineStore: Writable<boolean> = persisted(
-	'sponsorBlockTimeline',
-	false
+export const interfaceAutoExpandDesc: Writable<boolean> = persist(
+	writable(false),
+	createStorage(),
+	'autoExpandDesc'
+);
+export const interfaceAutoExpandChapters: Writable<boolean> = persist(
+	writable(false),
+	createStorage(),
+	'autoExpandChapters'
+);
+export const interfaceAmoledTheme = persist(writable(false), createStorage(), 'amoledTheme');
+export const interfaceLowBandwidthMode = persist(
+	writable(false),
+	createStorage(),
+	'lowBandwidthMode'
+);
+export const interfaceDisplayThumbnailAvatars = persist(
+	writable(false),
+	createStorage(),
+	'disableThumbnailAvatars'
+);
+export const interfaceDefaultPage = persist(writable('/'), createStorage(), 'defaultPage');
+export const interfaceSearchHistoryEnabled = persist(
+	writable(false),
+	createStorage(),
+	'searchHistoryEnabled'
+);
+export const interfaceAllowInsecureRequests = persist(
+	writable(false),
+	createStorage(),
+	'allowInsecureRequests'
+);
+export const interfaceDisableAutoUpdate = persist(
+	writable(false),
+	createStorage(),
+	'disableAutoUpdate'
 );

-export const deArrowInstanceStore = persisted(
-	'deArrowInstance',
-	import.meta.env.VITE_DEFAULT_DEARROW_INSTANCE || 'https://sponsor.ajay.app'
+export const sponsorBlockStore = persist(writable(true), createStorage(), 'sponsorBlock');
+export const sponsorBlockUrlStore: Writable<string | null | undefined> = persist(
+	writable(import.meta.env.VITE_DEFAULT_SPONSERBLOCK_INSTANCE || 'https://sponsor.ajay.app'),
+	createStorage(),
+	'sponsorBlockUrl'
 );
-export const deArrowEnabledStore = persisted('deArrowEnabled', false);
-export const deArrowTitlesOnly = persisted('deArrowTitlesOnly', true);
-export const deArrowThumbnailInstanceStore = persisted(
-	'deArrowThumbnailInstance',
-	import.meta.env.VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE || 'https://dearrow-thumb.ajay.app'
+export const sponsorBlockCategoriesStore: Writable<string[]> = persist(
+	writable([]),
+	createStorage(),
+	'sponsorBlockCategories'
+);
+export const sponsorBlockDisplayToastStore: Writable<boolean> = persist(
+	writable(false),
+	createStorage(),
+	'sponsorBlockDisplayToast'
+);
+export const sponsorBlockTimelineStore: Writable<boolean> = persist(
+	writable(false),
+	createStorage(),
+	'sponsorBlockTimeline'
+);
+
+export const deArrowInstanceStore = persist(
+	writable(import.meta.env.VITE_DEFAULT_DEARROW_INSTANCE || 'https://sponsor.ajay.app'),
+	createStorage(),
+	'deArrowInstance'
+);
+export const deArrowEnabledStore = persist(writable(false), createStorage(), 'deArrowEnabled');
+export const deArrowTitlesOnly = persist(writable(true), createStorage(), 'deArrowTitlesOnly');
+export const deArrowThumbnailInstanceStore = persist(
+	writable(
+		import.meta.env.VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE || 'https://dearrow-thumb.ajay.app'
+	),
+	createStorage(),
+	'deArrowThumbnailInstance'
 );

 export const syncPartyPeerStore: Writable<Peer | null> = writable(null);
@@ -144,7 +276,11 @@ export const playlistSettingsStore: Writable<Record<string, { shuffle: boolean;

 export const poTokenCacheStore: Writable<string | undefined> = writable();

-export const searchHistoryStore: Writable<string[]> = persisted('searchHistory', []);
+export const searchHistoryStore: Writable<string[]> = persist(
+	writable([]),
+	createStorage(),
+	'searchHistory'
+);

 export const feedCacheStore: Writable<{
 	[key: string]: (VideoBase | Video | PlaylistPageVideo)[];
@@ -10,34 +10,34 @@ export async function getDynamicTheme(mode?: string): Promise<Record<string, str

 	// @ts-ignore
 	const themes: string = givenSettings[mode ? mode : (ui('mode') as string)];
-	let themeVars: Record<string, string> = {};
+	const themeVars: Record<string, string> = {};
 	themes.split(';').forEach((keyVar) => {
-		let [key, value] = keyVar.split(':');
+		const [key, value] = keyVar.split(':');
 		themeVars[key] = value;
 	});
 	return themeVars;
 }

 export async function setStatusBarColor() {
-	if (Capacitor.getPlatform() === 'android') {
-		await tick();
+	if (Capacitor.getPlatform() !== 'android') return;

-		const surfaceColor = get(interfaceAmoledTheme)
-			? '#000000'
-			: (await getDynamicTheme())['--surface-container'];
+	await tick();

-		const contentColor = !get(darkModeStore) ? 'dark' : 'light';
+	const surfaceColor = get(interfaceAmoledTheme)
+		? '#000000'
+		: (await getDynamicTheme())['--surface-container'];

-		await SafeArea.enable({
-			config: {
-				customColorsForSystemBars: true,
-				statusBarColor: surfaceColor,
-				statusBarContent: contentColor,
-				navigationBarColor: surfaceColor,
-				navigationBarContent: contentColor
-			}
-		});
-	}
+	const contentColor = !get(darkModeStore) ? 'dark' : 'light';
+
+	await SafeArea.enable({
+		config: {
+			customColorsForSystemBars: true,
+			statusBarColor: surfaceColor,
+			statusBarContent: contentColor,
+			navigationBarColor: surfaceColor,
+			navigationBarContent: contentColor
+		}
+	});
 }

 export function setAmoledTheme() {