Improvements

materialious/src/lib/components/ItemsList.svelte

@@ -71,7 +71,6 @@
 	}
 
 	function setupAndroidTVNavigation() {
-		console.log('gridElement', gridElement);
 		if (!$isAndroidTvStore || !gridElement) return;
 
 		focusableItems = Array.from(
@@ -117,6 +116,11 @@
 
 		switch (direction) {
 			case 'left':
+				if (currentFocusIndex % columns === 0) {
+					lastFocusIndex = currentFocusIndex;
+					updateTabIndex(currentFocusIndex);
+					return true;
+				}
 				newIndex = Math.max(0, currentFocusIndex - 1);
 				break;
 			case 'right':
@@ -128,7 +132,6 @@
 					// Store current position before leaving and ensure it stays focusable
 					lastFocusIndex = currentFocusIndex;
 					updateTabIndex(currentFocusIndex);
-					// Allow the event to bubble up to parent navigation
 					return true;
 				}
 				newIndex = Math.max(0, currentFocusIndex - columns);
@@ -218,7 +221,6 @@
 </script>
 
 <div class={classes} class:android-container={$isAndroidTvStore}>
-	<div class="space"></div>
 	<div class="grid" bind:this={gridElement}>
 		{#each items as item, index}
 			<ContentColumn>

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

@@ -84,7 +84,7 @@
 </script>
 
 <dialog id="dialog-settings" class={dialogType + ' surface-container'}>
-	<nav class="s" style="margin-bottom: 1em;">
+	<nav class="s m" style="margin-bottom: 1em;">
 		<h4 class="max">{$_('layout.settings')}</h4>
 		<button class="circle transparent" data-ui="#dialog-settings"><i>close</i></button>
 	</nav>

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

@@ -253,14 +253,7 @@
 <svelte:head>
 	{@html webManifestLink}
 
-	{#if $isAndroidTvStore}
-		<style>
-			:focus {
-				outline: 4px solid var(--primary);
-				box-shadow: none !important;
-			}
-		</style>
-	{:else if Capacitor.getPlatform() === 'android'}
+	{#if Capacitor.getPlatform() === 'android' && !$isAndroidTvStore}
 		<style>
 			nav.top {
 				height: 120px;
@@ -270,27 +263,26 @@
 </svelte:head>
 
 <div>
-	{#if !$isAndroidTvStore}
-		<nav class="left m l surface-container">
-			<header
-				role="presentation"
-				onclick={() => goto($interfaceDefaultPage)}
-				style="cursor: pointer;"
-				tabindex="-1"
-			>
-				<Logo />
-			</header>
-			{#each getPages() as navPage}
-				{#if !navPage.requiresAuth || isLoggedIn}
-					<a href={navPage.href} class:active={$page.url.href.endsWith(navPage.href)}
-						><i>{navPage.icon}</i>
-						<div>{navPage.name}</div>
-					</a>
-				{/if}
-			{/each}
-		</nav>
-	{/if}
-	<nav class="top" id="top-content">
+	<nav class="left m l surface-container" class:tv-nav={$isAndroidTvStore}>
+		<header
+			role="presentation"
+			onclick={() => goto($interfaceDefaultPage)}
+			style="cursor: pointer;"
+			tabindex="-1"
+			class="small-padding"
+		>
+			<Logo />
+		</header>
+		{#each getPages() as navPage}
+			{#if !navPage.requiresAuth || isLoggedIn}
+				<a href={navPage.href} class:active={$page.url.href.endsWith(navPage.href)}
+					><i>{navPage.icon}</i>
+					<div>{navPage.name}</div>
+				</a>
+			{/if}
+		{/each}
+	</nav>
+	<nav class="top" id="top-content" class:tv-nav={$isAndroidTvStore}>
 		{#if !mobileSearchShow}
 			<button
 				onclick={() => (mobileSearchShow = !mobileSearchShow)}
@@ -391,23 +383,6 @@
 	</dialog>
 
 	<main id="main-content" class="responsive max root" tabindex="0" role="region">
-		{#if $isAndroidTvStore}
-			<div class="tabs">
-				{#each getPages() as navPage}
-					{#if !navPage.requiresAuth || isLoggedIn}
-						<a
-							href={navPage.href}
-							class:active={$page.url.href.endsWith(navPage.href)}
-							class="active"
-							data-sveltekit-preload-data="off"
-						>
-							<i>{navPage.icon}</i>
-							<span>{navPage.name}</span>
-						</a>
-					{/if}
-				{/each}
-			</div>
-		{/if}
 		{#if $navigating}
 			<PageLoading />
 		{:else}
@@ -444,3 +419,10 @@
 		</nav>
 	</form>
 </dialog>
+
+<style>
+	.tv-nav {
+		min-inline-size: 0.5rem;
+		padding: 0;
+	}
+</style>

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

@@ -6,8 +6,6 @@
 </script>
 
 {#if data.popularDisabled}
-	<div class="space"></div>
-
 	<nav class="center-align">
 		<p>Popular page has been disabled</p>
 	</nav>

materialious/src/routes/(no-layout)/tv/[slug]/+page.svelte

@@ -123,9 +123,8 @@
 	<article id="shown-info" transition:fade>
 		<h5>{letterCase(data.video.title)}</h5>
 		<Author bind:subscribed video={data.video} />
-		<div class="space"></div>
 		<LikesDislikes video={data.video} returnYTDislikes={data.streamed.returnYTDislikes} />
-		<article>
+		<article class="border">
 			<Description video={data.video} description={data.content.description} />
 		</article>
 
@@ -176,5 +175,7 @@
 		height: 50%;
 		z-index: 101;
 		overflow-y: scroll;
+		border-bottom-left-radius: 0px;
+		border-bottom-right-radius: 0px;
 	}
 </style>

materialious/src/routes/+layout.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { isAndroidTvStore } from '$lib/store';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	{#if $isAndroidTvStore}
+		<style>
+			:focus {
+				outline: 4px solid var(--primary);
+				box-shadow: none !important;
+			}
+		</style>
+	{/if}
+</svelte:head>
+
+{@render children?.()}