Fixes to StatusBar and NavigationBar logic

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 80
-        versionName "1.6.29"
+        versionCode 81
+        versionName "1.6.30"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.6.29",
+	"version": "1.6.30",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.6.29",
+	"version": "1.6.30",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

materialious/src/lib/Player.svelte

@@ -4,7 +4,8 @@
 	import { page } from '$app/stores';
 	import { Capacitor } from '@capacitor/core';
 	import { ScreenOrientation, type ScreenOrientationResult } from '@capacitor/screen-orientation';
-	import { StatusBar } from '@capacitor/status-bar';
+	import { StatusBar, Style } from '@capacitor/status-bar';
+	import { NavigationBar } from '@hugotomazi/capacitor-navigation-bar';
 	import { AudioPlayer } from '@mediagrid/capacitor-native-audio';
 	import type { Page } from '@sveltejs/kit';
 	import { SponsorBlock, type Category, type Segment } from 'sponsorblock-api';
@@ -434,6 +435,10 @@
 						if (event.detail) {
 							// Ensure bar color is black while in fullscreen
 							await StatusBar.setBackgroundColor({ color: '#000000' });
+							await NavigationBar.setColor({
+								color: '#000000'
+							});
+							await StatusBar.setStyle({ style: Style.Dark });
 						} else {
 							await setStatusBarColor();
 						}

materialious/src/lib/theme.ts

@@ -2,6 +2,7 @@ import { Capacitor } from '@capacitor/core';
 import { StatusBar, Style } from '@capacitor/status-bar';
 import { NavigationBar } from '@hugotomazi/capacitor-navigation-bar';
 import ui from 'beercss';
+import { tick } from 'svelte';
 import { get } from 'svelte/store';
 import { darkModeStore, interfaceAmoledTheme } from './store';
 
@@ -20,6 +21,8 @@ export async function getDynamicTheme(mode?: string): Promise<Record<string, str
 
 export async function setStatusBarColor() {
 	if (Capacitor.getPlatform() === 'android') {
+		await tick();
+
 		const surfaceColor = get(interfaceAmoledTheme) ? '#000000' : (await getDynamicTheme())['--surface-container'];
 
 		await StatusBar.setBackgroundColor({

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

@@ -50,8 +50,10 @@
 
 	let notifications: Notification[] = [];
 
-	interfaceAmoledTheme.subscribe(() => {
+	interfaceAmoledTheme.subscribe(async () => {
 		setAmoledTheme();
+
+		await setStatusBarColor();
 	});
 
 	darkModeStore.subscribe(async () => {
@@ -176,11 +178,12 @@
 					const colorPalette = await colorTheme.getColorPalette();
 					themeHex = convertToHexColorCode(colorPalette.primary);
 					await ui('theme', themeHex);
-					await setStatusBarColor();
 				} catch {}
 			}
 		}
 
+		await setStatusBarColor();
+
 		setTheme();
 		setAmoledTheme();
 

update_versions.py

@@ -5,7 +5,7 @@ import json
 import os
 import re
 
-LATEST_VERSION = "1.6.29"
+LATEST_VERSION = "1.6.30"
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")
 
 ROOT_PACKAGE = os.path.join(WORKING_DIR, "package.json")