Minor fix to status bar color change

materialious/src/lib/Player.svelte

@@ -19,6 +19,7 @@
 		getBestThumbnail,
 		proxyVideoUrl,
 		pullBitratePreference,
+		setStatusBarColor,
 		videoLength,
 		type PhasedDescription
 	} from './misc';
@@ -408,6 +409,17 @@
 					await AudioPlayer.initialize(audioId);
 				}
 
+				if (Capacitor.getPlatform() === 'android') {
+					player.addEventListener('fullscreen-change', async (event: FullscreenChangeEvent) => {
+						if (event.detail) {
+							// Ensure bar color is black while in fullscreen
+							await StatusBar.setBackgroundColor({ color: '#000000' });
+						} else {
+							await setStatusBarColor();
+						}
+					});
+				}
+
 				if (get(playerAndroidLockOrientation)) {
 					const videoFormats = data.video.adaptiveFormats.filter((format) =>
 						format.type.startsWith('video/')
@@ -430,6 +442,7 @@
 						} else {
 							await StatusBar.setOverlaysWebView({ overlay: false });
 							await StatusBar.show();
+
 							await ScreenOrientation.lock({
 								orientation: (originalOrigination as ScreenOrientationResult).type
 							});

materialious/src/lib/misc.ts

@@ -1,11 +1,14 @@
 import { pushState } from '$app/navigation';
 import { page } from '$app/stores';
+import { Capacitor } from '@capacitor/core';
+import { StatusBar } from '@capacitor/status-bar';
 import he from 'he';
 import humanNumber from 'human-number';
 import type Peer from 'peerjs';
 import { get } from 'svelte/store';
 import type { Image } from './api/model';
 import { instanceStore, interfaceForceCase } from './store';
+import { getDynamicTheme } from './theme';
 
 
 export type TitleCase = 'uppercase' | 'lowercase' | 'sentence case' | 'title case' | null;
@@ -288,3 +291,12 @@ export function ensureNoTrailingSlash(url: any): string {
 
 	return url.endsWith('/') ? url.slice(0, -1) : url;
 }
+
+
+export async function setStatusBarColor() {
+	if (Capacitor.getPlatform() === 'android') {
+		await StatusBar.setBackgroundColor({
+			color: (await getDynamicTheme())['--surface-container']
+		});
+	}
+}

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

@@ -8,6 +8,7 @@
 	import { bookmarkletLoadFromUrl, loadSettingsFromEnv } from '$lib/externalSettings';
 	import Logo from '$lib/Logo.svelte';
 	import MiniPlayer from '$lib/MiniPlayer.svelte';
+	import { setStatusBarColor } from '$lib/misc';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import Search from '$lib/Search.svelte';
 	import Settings from '$lib/Settings.svelte';
@@ -22,12 +23,11 @@
 		themeColorStore
 	} from '$lib/store';
 	import SyncParty from '$lib/SyncParty.svelte';
-	import { getDynamicTheme, setAmoledTheme, setTheme } from '$lib/theme';
+	import { setAmoledTheme, setTheme } from '$lib/theme';
 	import Thumbnail from '$lib/Thumbnail.svelte';
 	import { App } from '@capacitor/app';
 	import { Browser } from '@capacitor/browser';
 	import { Capacitor } from '@capacitor/core';
-	import { StatusBar } from '@capacitor/status-bar';
 	import 'beercss';
 	import ui from 'beercss';
 	import 'material-dynamic-colors';
@@ -89,11 +89,7 @@
 		setTheme();
 		setAmoledTheme();
 
-		if (Capacitor.getPlatform() === 'android') {
-			await StatusBar.setBackgroundColor({
-				color: (await getDynamicTheme())['--surface-container']
-			});
-		}
+		await setStatusBarColor();
 	});
 
 	App.addListener('appUrlOpen', (data) => {
@@ -198,9 +194,7 @@
 					const colorPalette = await colorTheme.getColorPalette();
 					themeHex = convertToHexColorCode(colorPalette.primary);
 					await ui('theme', themeHex);
-					await StatusBar.setBackgroundColor({
-						color: (await getDynamicTheme())['--surface-container']
-					});
+					await setStatusBarColor();
 				} catch {}
 			}
 		}

materialious/vite.config.ts

@@ -38,6 +38,9 @@ export default defineConfig({
 		sveltekit()
 	],
 	optimizeDeps: {
-		exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
+		exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
+	},
+	ssr: {
+		noExternal: ['beercss']
 	}
 });