Added backend option

materialious/src/lib/api/index.ts

@@ -3,6 +3,7 @@ import { Capacitor } from '@capacitor/core';
 import { get } from 'svelte/store';
 import {
 	authStore,
+	backendInUseStore,
 	deArrowInstanceStore,
 	deArrowThumbnailInstanceStore,
 	instanceStore,
@@ -199,9 +200,11 @@ export async function getSearch(
 	options: SearchOptions,
 	fetchOptions?: RequestInit
 ): Promise<SearchResults> {
-	searchSetDefaults(options);
+	if (get(backendInUseStore) === 'yt') {
+		return await getSearchYTjs(search, options);
+	}
 
-	await getSearchYTjs(search, options);
+	searchSetDefaults(options);
 
 	const path = buildPath('search');
 	path.search = new URLSearchParams({ ...options, q: search }).toString();

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

@@ -16,6 +16,7 @@
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import {
 		authStore,
+		backendInUseStore,
 		darkModeStore,
 		feedCacheStore,
 		instanceStore,
@@ -116,6 +117,11 @@
 		ui('#dialog-settings');
 	}
 
+	async function setBackend(event: Event) {
+		const select = event.target as HTMLSelectElement;
+		backendInUseStore.set(select.value as 'ivg' | 'yt');
+	}
+
 	function allowInsecureRequests() {
 		if (!Capacitor.isNativePlatform()) return;
 		interfaceAllowInsecureRequests.set(!$interfaceAllowInsecureRequests);
@@ -147,20 +153,38 @@
 </script>
 
 {#if Capacitor.isNativePlatform()}
-	<form onsubmit={setInstance}>
-		<nav>
-			<div class="field label border max" class:invalid={invalidInstance}>
-				<input tabindex="0" bind:value={invidiousInstance} name="invidious-instance" type="text" />
-				<label tabindex="-1" for="invidious-instance">{$_('layout.instanceUrl')}</label>
-				{#if invalidInstance}
-					<span class="error">{$_('invalidInstance')}</span>
-				{/if}
-			</div>
-			<button class="square round">
-				<i>done</i>
-			</button>
-		</nav>
-	</form>
+	<div class="field label suffix border">
+		<select name="backend-in-use" onchange={setBackend}>
+			<option selected={$backendInUseStore === 'ivg'} value="ivg">Invidious</option>
+			<option selected={$backendInUseStore === 'yt'} value="yt">YouTube</option>
+		</select>
+		<label for="backend-in-use">{$_('backend')}</label>
+		<i>arrow_drop_down</i>
+	</div>
+
+	{#if $backendInUseStore === 'ivg'}
+		<form onsubmit={setInstance}>
+			<nav>
+				<div class="field label border max" class:invalid={invalidInstance}>
+					<input
+						tabindex="0"
+						bind:value={invidiousInstance}
+						name="invidious-instance"
+						type="text"
+					/>
+					<label tabindex="-1" for="invidious-instance">{$_('layout.instanceUrl')}</label>
+					{#if invalidInstance}
+						<span class="error">{$_('invalidInstance')}</span>
+					{/if}
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+	{:else}
+		<div class="space"></div>
+	{/if}
 
 	{#if isMobile()}
 		{#if invalidInstance}

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

@@ -15,6 +15,7 @@
 	"videos": "videos",
 	"cancel": "Cancel",
 	"create": "Create",
+	"backend": "Backend",
 	"filters": {
 		"filters": "Filters",
 		"type": "Type",

materialious/src/lib/store.ts

@@ -24,8 +24,8 @@ import type {
 	VideoBase,
 	VideoPlay
 } from './api/model';
-import { ensureNoTrailingSlash } from './misc';
 import type { PhasedDescription } from './description';
+import { ensureNoTrailingSlash } from './misc';
 
 function createListenerFunctions(): {
 	callListeners: (eventKey: string, newValue: any) => void;
@@ -101,6 +101,12 @@ export const instanceStore: Writable<string> = persist(
 	'invidiousInstance'
 );
 
+export const backendInUseStore: Writable<'ivg' | 'yt'> = persist(
+	writable('ivg'),
+	createStorage(),
+	'backendInUse'
+);
+
 export const authStore: Writable<null | { username: string; token: string }> = persist(
 	writable(null),
 	createStorage(),