Added default page support

materialious/src/lib/Settings.svelte

@@ -10,6 +10,7 @@
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { ensureNoTrailingSlash, letterCase, titleCase, titleCases } from './misc';
+	import { getPages } from './navPages';
 	import {
 		authStore,
 		darkModeStore,
@@ -21,6 +22,7 @@
 		interfaceAmoledTheme,
 		interfaceAutoExpandComments,
 		interfaceAutoExpandDesc,
+		interfaceDefaultPage,
 		interfaceDisplayThumbnailAvatars,
 		interfaceForceCase,
 		interfaceLowBandwidthMode,
@@ -66,6 +68,7 @@
 	let region = get(interfaceRegionStore);
 	let forceCase = get(interfaceForceCase);
 	let defaultLanguage = get(playerDefaultLanguage);
+	let defaultPage = get(interfaceDefaultPage);
 
 	const languageNames = ISO6391.getAllCodes().map((code) =>
 		ISO6391.getName(code).toLocaleLowerCase()
@@ -385,6 +388,24 @@
 				<i>arrow_drop_down</i>
 			</div>
 
+			<div class="field label suffix border">
+				<select
+					name="defaultPage"
+					bind:value={defaultPage}
+					on:change={() => interfaceDefaultPage.set(defaultPage)}
+				>
+					{#each getPages() as page}
+						{#if !page.requiresAuth || get(authStore)}
+							<option selected={$interfaceDefaultPage === page.href} value={page.href}
+								>{page.name}</option
+							>
+						{/if}
+					{/each}
+				</select>
+				<label for="defaultPage">{$_('defaultPage')}</label>
+				<i>arrow_drop_down</i>
+			</div>
+
 			{#if !Capacitor.isNativePlatform()}
 				<div class="settings">
 					<h6>{$_('layout.bookmarklet')}</h6>

materialious/src/lib/externalSettings.ts

@@ -8,6 +8,7 @@ import {
 	interfaceAmoledTheme,
 	interfaceAutoExpandComments,
 	interfaceAutoExpandDesc,
+	interfaceDefaultPage,
 	interfaceDisplayThumbnailAvatars,
 	interfaceForceCase,
 	interfaceLowBandwidthMode,
@@ -207,6 +208,11 @@ const persistedStores: { name: string, store: Writable<any>, type: 'string' | 'b
 		name: 'defaultLanguage',
 		store: playerDefaultLanguage,
 		type: 'boolean'
+	},
+	{
+		name: 'defaultPage',
+		store: interfaceDefaultPage,
+		type: 'string'
 	}
 ];
 

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

@@ -24,6 +24,7 @@
 	"letterCase": "Letter case for titles",
 	"hideReplies": "Hide replies",
 	"hideVideo": "Hide video",
+	"defaultPage": "Default page",
 	"syncParty": {
 		"userJoined": "User joined your watch party.",
 		"userLeft": "User left your watch party.",

materialious/src/lib/navPages.ts

@@ -0,0 +1,39 @@
+import { _ } from 'svelte-i18n';
+import { get } from 'svelte/store';
+
+
+// Must be a func do to how i18n is loaded
+export function getPages(): { icon: string, href: string, name: string, requiresAuth: boolean; }[] {
+  return [
+    {
+      icon: 'home',
+      href: '/',
+      name: get(_)('pages.home'),
+      requiresAuth: false
+    },
+    {
+      icon: 'whatshot',
+      href: '/trending',
+      name: get(_)('pages.trending'),
+      requiresAuth: false
+    },
+    {
+      icon: 'subscriptions',
+      href: '/subscriptions',
+      name: get(_)('pages.subscriptions'),
+      requiresAuth: true
+    },
+    {
+      icon: 'video_library',
+      href: '/playlists',
+      name: get(_)('pages.playlists'),
+      requiresAuth: true
+    },
+    {
+      icon: 'history',
+      href: '/history',
+      name: get(_)('pages.history'),
+      requiresAuth: true
+    }
+  ];
+}

materialious/src/lib/store.ts

@@ -67,6 +67,7 @@ export const interfaceAutoExpandDesc: Writable<boolean> = persisted('autoExpandD
 export const interfaceAmoledTheme = persisted('amoledTheme', false);
 export const interfaceLowBandwidthMode = persisted('lowBandwidthMode', false);
 export const interfaceDisplayThumbnailAvatars = persisted('disableThumbnailAvatars', false);
+export const interfaceDefaultPage = persisted('defaultPage', '/');
 
 export const sponsorBlockStore = persisted('sponsorBlock', true);
 export const sponsorBlockUrlStore: Writable<string | null | undefined> = persisted(

materialious/src/lib/theme.ts

@@ -20,7 +20,7 @@ export async function getDynamicTheme(mode?: string): Promise<Record<string, str
 
 export async function setStatusBarColor() {
 	if (Capacitor.getPlatform() === 'android') {
-		const surfaceColor = (await getDynamicTheme())['--surface-container'];
+		const surfaceColor = get(interfaceAmoledTheme) ? '#000000' : (await getDynamicTheme())['--surface-container'];
 
 		await StatusBar.setBackgroundColor({
 			color: surfaceColor

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
-	import { navigating } from '$app/stores';
+
+	import { navigating, page } from '$app/stores';
 	import '$lib/android/http/androidRequests';
 	import colorTheme, { convertToHexColorCode } from '$lib/android/plugins/colorTheme';
 	import { getFeed } from '$lib/api/index';
@@ -8,6 +9,7 @@
 	import { bookmarkletLoadFromUrl, loadSettingsFromEnv } from '$lib/externalSettings';
 	import Logo from '$lib/Logo.svelte';
 	import MiniPlayer from '$lib/MiniPlayer.svelte';
+	import { getPages } from '$lib/navPages';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import Search from '$lib/Search.svelte';
 	import Settings from '$lib/Settings.svelte';
@@ -17,6 +19,7 @@
 		darkModeStore,
 		instanceStore,
 		interfaceAmoledTheme,
+		interfaceDefaultPage,
 		showWarningStore,
 		syncPartyPeerStore,
 		themeColorStore
@@ -47,39 +50,6 @@
 
 	let notifications: Notification[] = [];
 
-	const pages = [
-		{
-			icon: 'home',
-			href: '/',
-			name: $_('pages.home'),
-			requiresAuth: false
-		},
-		{
-			icon: 'whatshot',
-			href: '/trending',
-			name: $_('pages.trending'),
-			requiresAuth: false
-		},
-		{
-			icon: 'subscriptions',
-			href: '/subscriptions',
-			name: $_('pages.subscriptions'),
-			requiresAuth: true
-		},
-		{
-			icon: 'video_library',
-			href: '/playlists',
-			name: $_('pages.playlists'),
-			requiresAuth: true
-		},
-		{
-			icon: 'history',
-			href: '/history',
-			name: $_('pages.history'),
-			requiresAuth: true
-		}
-	];
-
 	interfaceAmoledTheme.subscribe(() => {
 		setAmoledTheme();
 	});
@@ -177,6 +147,19 @@
 	onMount(async () => {
 		ui();
 
+		if (
+			$interfaceDefaultPage &&
+			$interfaceDefaultPage !== '/' &&
+			$interfaceDefaultPage.startsWith('/') &&
+			$page.url.pathname === '/'
+		) {
+			getPages().forEach((page) => {
+				if (page.href === $interfaceDefaultPage && (!page.requiresAuth || $authStore)) {
+					goto($interfaceDefaultPage);
+				}
+			});
+		}
+
 		scrollableRoot = document.querySelector('.root');
 
 		loadSettingsFromEnv();
@@ -215,7 +198,7 @@
 
 <nav class="left m l small">
 	<header></header>
-	{#each pages as page}
+	{#each getPages() as page}
 		{#if !page.requiresAuth || isLoggedIn}
 			<a href={page.href} class:active={currentPage === page.name.toLowerCase()}
 				><i>{page.icon}</i>
@@ -296,7 +279,7 @@
 </nav>
 
 <nav class="bottom s">
-	{#each pages as page}
+	{#each getPages() as page}
 		{#if !page.requiresAuth || isLoggedIn}
 			<a class="round" href={page.href} class:active={currentPage === page.name.toLowerCase()}
 				><i>{page.icon}</i>