Show search box on popular disable

materialious/src/lib/api/index.ts

@@ -68,6 +68,20 @@ export function setRegion(url: URL): URL {
 	return url;
 }
 
+export class HTTPError {
+	msg: string;
+	response: Response;
+
+	constructor(msg: string, response: Response) {
+		this.msg = msg;
+		this.response = response;
+	}
+
+	toString() {
+		return this.msg;
+	}
+}
+
 export async function fetchErrorHandle(response: Response): Promise<Response> {
 	if (!response.ok) {
 		let message = 'Internal error';
@@ -80,8 +94,9 @@ export async function fetchErrorHandle(response: Response): Promise<Response> {
 			// Continue regardless of error
 		}
 
-		throw Error(
-			`${response.status} - ${response.statusText}\n${decodeURIComponent(response.url)}\n${message}`
+		throw new HTTPError(
+			`${response.status} - ${response.statusText}\n${decodeURIComponent(response.url)}\n${message}`,
+			response
 		);
 	}
 

materialious/src/lib/components/Logo.svelte

@@ -6,9 +6,10 @@
 
 	interface Props {
 		classes?: string;
+		size?: string;
 	}
 
-	let { classes = '' }: Props = $props();
+	let { classes = '', size = '70px' }: Props = $props();
 
 	let fillColor = $state('');
 
@@ -35,8 +36,8 @@
 <svg
 	version="1.1"
 	class={classes}
-	height="100%"
-	width="70px"
+	height={size}
+	width={size}
 	xml:space="preserve"
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="50.17 104.37 109.67 88.27"

materialious/src/lib/components/player/settings/Settings.svelte

@@ -20,6 +20,11 @@
 			setActiveVideoTrack();
 			setActiveAudioTrack();
 		});
+
+		player.addEventListener('trackschanged', () => {
+			setActiveVideoTrack();
+			setActiveAudioTrack();
+		});
 	});
 
 	function setActiveVideoTrack() {

materialious/src/lib/store.ts

@@ -375,3 +375,5 @@ export const channelCacheStore: Writable<{
 		displayContent: { [key: string]: ChannelContent };
 	};
 }> = writable({});
+
+export const hideSearchStore: Writable<boolean> = writable(false);

materialious/src/routes/(app)/+layout.svelte

@@ -24,7 +24,8 @@
 		rawMasterKeyStore,
 		syncPartyPeerStore,
 		themeColorStore,
-		backendInUseStore
+		backendInUseStore,
+		hideSearchStore
 	} from '$lib/store';
 	import { Capacitor } from '@capacitor/core';
 	import 'beercss';
@@ -237,10 +238,11 @@
 
 			<div class="max m l"></div>
 
-			<div class="m l">
-				<Search />
-			</div>
-
+			{#if !$hideSearchStore}
+				<div class="m l">
+					<Search />
+				</div>
+			{/if}
 			{#if !mobileSearchShow}
 				<div class="max"></div>
 			{/if}

materialious/src/routes/(app)/+page.svelte

@@ -1,23 +1,40 @@
 <script lang="ts">
 	import ItemsList from '$lib/components/layout/ItemsList.svelte';
-	import { _ } from '$lib/i18n/index';
-	import { feedCacheStore } from '$lib/store';
+	import Logo from '$lib/components/Logo.svelte';
+	import Search from '$lib/components/Search.svelte';
+	import { feedCacheStore, hideSearchStore } from '$lib/store';
+	import { onDestroy, onMount } from 'svelte';
 
 	let { data } = $props();
+
+	onMount(() => {
+		if (data.popularDisabled) {
+			hideSearchStore.set(true);
+		}
+	});
+
+	onDestroy(() => {
+		hideSearchStore.set(false);
+	});
 </script>
 
 {#if data.popularDisabled}
-	<div class="center-align">
+	<div class="center">
 		<div class="space"></div>
-		<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24"
-			><path
-				style="fill: var(--secondary);"
-				d="M11.25 21.975Q9.3 21.825 7.612 21t-2.937-2.162q-1.25-1.338-1.963-3.1T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12v.475q-.425-.275-.988-.537t-1.037-.438q-.2-3.15-2.488-5.325T12 4q-1.4 0-2.638.45T7.1 5.7l6.125 6.125q-.475.2-.912.463t-.863.562L5.7 7.1q-.8 1.025-1.25 2.263T4 12q0 2.475 1.338 4.438T8.8 19.325q.45.7 1.125 1.425t1.325 1.225ZM17 20q1.475 0 2.738-.675T21.75 17.5q-.75-1.15-2.013-1.825T17 15q-1.475 0-2.738.675T12.25 17.5q.75 1.15 2.013 1.825T17 20Zm0 2q-2.4 0-4.288-1.263T10 17.5q.825-1.975 2.713-3.238T17 13q2.4 0 4.288 1.263T24 17.5q-.825 1.975-2.713 3.238T17 22Zm0-3q-.625 0-1.063-.438T15.5 17.5q0-.625.438-1.063T17 16q.625 0 1.063.438T18.5 17.5q0 .625-.438 1.063T17 19Z"
-			/></svg
-		>
-		<h1>{$_('disabled')}</h1>
-		<p>{$_('popularPageDisabled')}</p>
+		<Logo size="200px" />
+		<h1>Materialious</h1>
+		<Search />
 	</div>
 {:else}
 	<ItemsList items={$feedCacheStore.popular ?? []} />
 {/if}
+
+<style>
+	.center {
+		height: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+</style>

materialious/src/routes/(app)/+page.ts

@@ -1,6 +1,6 @@
 import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
-import { getPopular } from '$lib/api/index';
+import { getPopular, HTTPError } from '$lib/api/index';
 import { isYTBackend } from '$lib/misc';
 import { feedCacheStore, invidiousInstanceStore } from '$lib/store';
 import { error } from '@sveltejs/kit';
@@ -22,18 +22,18 @@ export async function load() {
 	let popularDisabled: boolean = false;
 
 	if (!popular) {
-		let errorMsg: Error | undefined;
+		let errorObj: HTTPError | undefined;
 		try {
 			popular = await getPopular();
 		} catch (popularError) {
-			errorMsg = popularError as Error;
+			if (popularError instanceof HTTPError) errorObj = popularError;
 		}
 
-		if (errorMsg) {
-			if (errorMsg.toString() === 'Error: Administrator has disabled this endpoint.') {
+		if (errorObj) {
+			if (errorObj.response.status === 403) {
 				popularDisabled = true;
 			} else {
-				throw error(500, errorMsg);
+				throw error(500, errorObj.toString());
 			}
 		}
 

materialious/src/routes/+layout.ts

@@ -12,7 +12,8 @@ import {
 	invidiousInstanceStore,
 	interfaceDefaultPage,
 	isAndroidTvStore,
-	rawMasterKeyStore
+	rawMasterKeyStore,
+	hideSearchStore
 } from '$lib/store';
 import { get, type Writable } from 'svelte/store';
 import { Capacitor } from '@capacitor/core';