Minor improvements

materialious/src/lib/components/layout/ItemsList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { _ } from '$lib/i18n';
 	import { removePlaylistVideo } from '$lib/api';
-	import { invidiousAuthStore, feedLastItemId } from '$lib/store';
+	import { invidiousAuthStore, feedLastItemId, isAndroidTvStore } from '$lib/store';
 	import ContentColumn from '$lib/components/layout/ContentColumn.svelte';
 	import { onMount } from 'svelte';
 	import Thumbnail from '$lib/components/thumbnail/VideoThumbnail.svelte';
@@ -12,6 +12,7 @@
 	import NoResults from '$lib/components/NoResults.svelte';
 	import { SpatialMenu } from 'melt/builders';
 	import { mergeAttrs } from 'melt';
+	import { Capacitor } from '@capacitor/core';
 
 	interface Props {
 		items?: feedItems;
@@ -27,17 +28,12 @@
 		classes = 'page right active'
 	}: Props = $props();
 
-	let gridElement: HTMLElement | undefined = $state();
-
 	async function removePlaylistItem(indexId: string) {
 		if (!playlistId) return;
 		await removePlaylistVideo(playlistId, indexId);
 	}
 
 	onMount(async () => {
-		const first = gridElement?.querySelector('[tabindex="0"]') as HTMLElement;
-		first?.focus();
-
 		if (!$feedLastItemId) return;
 
 		const element = document.getElementById($feedLastItemId);
@@ -67,14 +63,21 @@
 		}
 	}
 
-	const spatialMenu = new SpatialMenu({ wrap: false, crossAxis: true, scrollBehavior: 'smooth' });
+	const spatialMenu = new SpatialMenu({
+		wrap: false,
+		crossAxis: false,
+		scrollBehavior: 'instant'
+	});
 </script>
 
-<div class={classes + ' item-container'}>
+<div
+	class={classes}
+	class:item-container={Capacitor.getPlatform() !== 'android' || $isAndroidTvStore}
+>
 	{#if items.length === 0}
 		<NoResults />
 	{/if}
-	<div class="grid" bind:this={gridElement} {...spatialMenu.root}>
+	<div class="grid" {...spatialMenu.root} onkeyup={onKeyup}>
 		{#each items as item, index (index)}
 			{@const uniqueItemId = extractUniqueId(item)}
 			{@const spatialItem = spatialMenu.getItem(item, { onSelect: () => goToItem(uniqueItemId) })}
@@ -121,7 +124,7 @@
 		padding: 0 1em;
 	}
 
-	.android-tv-item {
+	.item-select {
 		transition:
 			transform 0.15s ease,
 			box-shadow 0.15s ease;
@@ -134,4 +137,9 @@
 		position: relative;
 		outline: 1px solid var(--primary);
 	}
+
+	.grid:focus {
+		outline: none !important;
+		box-shadow: none !important;
+	}
 </style>

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

@@ -164,6 +164,7 @@
 
 <div>
 	<nav
+		id="left-nav"
 		class="left m l surface-container"
 		class:tv-nav={$isAndroidTvStore}
 		class:hide={$playertheatreModeIsActive}
@@ -326,7 +327,7 @@
 		{/if}
 	</dialog>
 
-	<main id="main-content" class="responsive max root">
+	<main id="main-content" tabindex="0" class="responsive max root">
 		{#if $playerState}
 			<div class="grid">
 				<div

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

@@ -1,14 +1,30 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 	import Logo from '$lib/components/Logo.svelte';
 	import Search from '$lib/components/Search.svelte';
-	import { feedCacheStore, hideSearchStore } from '$lib/store';
+	import {
+		feedCacheStore,
+		hideSearchStore,
+		invidiousAuthStore,
+		isAndroidTvStore
+	} from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
+	import { get } from 'svelte/store';
 
 	let { data } = $props();
 
 	onMount(() => {
 		if (data.popularDisabled) {
+			if ($isAndroidTvStore) {
+				if (get(invidiousAuthStore)) {
+					goto(resolve('/subscriptions', {}), { replaceState: true });
+					return;
+				}
+				goto(resolve('/search', {}), { replaceState: true });
+				return;
+			}
 			hideSearchStore.set(true);
 		}
 	});

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

@@ -1,13 +1,13 @@
 import { resolve } from '$app/paths';
 import { getPopular, HTTPError } from '$lib/api/index';
 import { isYTBackend } from '$lib/misc';
-import { feedCacheStore, invidiousInstanceStore, isAndroidTvStore } from '$lib/store';
+import { feedCacheStore, invidiousInstanceStore } from '$lib/store';
 import { error, redirect } from '@sveltejs/kit';
 import { get } from 'svelte/store';
 
 export async function load() {
 	if (isYTBackend()) {
-		throw redirect(307, resolve('/subscriptions', {}));
+		throw redirect(302, resolve('/subscriptions', {}));
 	}
 
 	if (!get(invidiousInstanceStore)) {
@@ -42,10 +42,6 @@ export async function load() {
 		);
 	}
 
-	if (popularDisabled && get(isAndroidTvStore)) {
-		throw redirect(307, resolve('/search', {}));
-	}
-
 	return {
 		popularDisabled: popularDisabled
 	};

materialious/src/routes/+layout.svelte

@@ -137,8 +137,13 @@
 
 	{#if $isAndroidTvStore}
 		<style>
-			:focus {
-				outline: 4px solid var(--primary);
+			not(.item-select):focus {
+				outline: 2px solid var(--primary);
+				box-shadow: none !important;
+			}
+
+			.item-select:focus {
+				outline: none !important;
 				box-shadow: none !important;
 			}
 		</style>