Added tv banner

README.md

@@ -19,6 +19,7 @@
 - [Invidious companion support.](./docs/DOCKER.md#invidious-companion-support)
 - [Invidious API extended integration.](https://github.com/Materialious/api-extended)
 - [YouTube.js](https://github.com/LuanRT/YouTube.js) fallback if Invidious fails loading videos for Desktop & Android.
+- Android TV support
 - Support for disabling certificate validation for homelab users.
 - Sync your watch progress between Invidious sessions.
 - Watch sync parties.
@@ -203,6 +204,9 @@ Help [translate Materialious via Weblate](https://toolate.othing.xyz/projects/ma
 ## Mobile
 <img src="./previews/mobile-preview.png" style="height: 500px"/>
 
+## Android TV
+![Preview of subscriptions page on Android TV](./previews/android-tv.png)
+
 ## Player
 ![Preview of player](./previews/player-preview.png)
 

materialious/android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,7 @@
     <application
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
+        android:banner="@drawable/banner"
         android:label="@string/app_name"
         android:supportsRtl="true"
         android:usesCleartextTraffic="true"

materialious/electron/capacitor.config.ts

@@ -1,18 +1,18 @@
 import type { CapacitorConfig } from '@capacitor/cli';
 
 const config: CapacitorConfig = {
-  appId: 'us.materialio.app',
-  appName: 'Materialious',
-  webDir: 'build',
-  plugins: {
-    CapacitorNodeJS: {
-      nodeDir: 'nodejs-android',
-    }
-  },
-  server: {
-    hostname: 'www.youtube.com',
-    androidScheme: 'https'
-  }
+	appId: 'us.materialio.app',
+	appName: 'Materialious',
+	webDir: 'build',
+	plugins: {
+		CapacitorNodeJS: {
+			nodeDir: 'nodejs-android'
+		}
+	},
+	server: {
+		hostname: 'www.youtube.com',
+		androidScheme: 'https'
+	}
 };
 
 export default config;

materialious/src/lib/android/plugins/androidTv.ts

@@ -1,9 +1,18 @@
 import { registerPlugin } from '@capacitor/core';
+import { WebPlugin } from '@capacitor/core';
 
 interface AndroidTV {
 	isAndroidTv: () => Promise<boolean>;
 }
 
-const androidTv = registerPlugin<AndroidTV>('AndroidTv');
+export class AndroidTvWeb extends WebPlugin implements AndroidTV {
+	async isAndroidTv(): Promise<boolean> {
+		return false;
+	}
+}
+
+const androidTv = registerPlugin<AndroidTV>('AndroidTv', {
+	web: new AndroidTvWeb()
+});
 
 export default androidTv;

materialious/src/lib/android/plugins/colorTheme.ts

@@ -1,28 +1,27 @@
-import { registerPlugin } from "@capacitor/core";
+import { registerPlugin } from '@capacitor/core';
 
 export interface ColorTheme {
-  getColorPalette: () => Promise<{
-    primary: number;
-    onPrimary: number;
-    secondary: number;
-    accent: number;
-  }>;
+	getColorPalette: () => Promise<{
+		primary: number;
+		onPrimary: number;
+		secondary: number;
+		accent: number;
+	}>;
 }
 
 export function convertToHexColorCode(color: number): string {
-  // Convert the negative number to a positive unsigned integer
-  const unsignedColor = color < 0 ? color + 0x100000000 : color;
+	// Convert the negative number to a positive unsigned integer
+	const unsignedColor = color < 0 ? color + 0x100000000 : color;
 
-  // Extract the RGB components
-  const r = (unsignedColor >> 16) & 0xff;
-  const g = (unsignedColor >> 8) & 0xff;
-  const b = unsignedColor & 0xff;
+	// Extract the RGB components
+	const r = (unsignedColor >> 16) & 0xff;
+	const g = (unsignedColor >> 8) & 0xff;
+	const b = unsignedColor & 0xff;
 
-  // Convert to hex format and pad with zeros if necessary
-  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+	// Convert to hex format and pad with zeros if necessary
+	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
 }
 
-
 const colorTheme = registerPlugin<ColorTheme>('ColorTheme');
 
 export default colorTheme;

materialious/src/lib/css/global.css

@@ -17,7 +17,7 @@ main.root {
 	overflow-y: auto;
 }
 
-main.root-not-tv {
+.root-not-tv {
 	padding-left: 7em !important;
 }
 

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

@@ -351,7 +351,7 @@
 	{/if}
 </dialog>
 
-<main class="responsive max root" tabindex="0" role="region" class:main.root-not-tv={!isAndroidTv}>
+<main class="responsive max root" tabindex="0" role="region" class:root-not-tv={!isAndroidTv}>
 	{#if isAndroidTv}
 		<div class="tabs">
 			{#each getPages() as navPage}