From f37b8a7eb0124a29fea079fe87f3c9f72e70d6d1 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Fri, 24 Jan 2025 03:47:33 +1300 Subject: [PATCH] Improved Material you nav and status bar --- materialious/android/app/build.gradle | 4 ++-- .../android/app/capacitor.build.gradle | 1 + .../android/capacitor.settings.gradle | 3 +++ materialious/electron/package.json | 2 +- materialious/package-lock.json | 14 +++++++++-- materialious/package.json | 3 ++- materialious/src/lib/Player.svelte | 14 ++--------- materialious/src/lib/misc.ts | 11 --------- materialious/src/lib/theme.ts | 23 +++++++++++++++++++ materialious/src/routes/(app)/+layout.svelte | 3 +-- update_versions.py | 2 +- 11 files changed, 48 insertions(+), 32 deletions(-) diff --git a/materialious/android/app/build.gradle b/materialious/android/app/build.gradle index c317a96d..c128c36c 100644 --- a/materialious/android/app/build.gradle +++ b/materialious/android/app/build.gradle @@ -7,8 +7,8 @@ android { applicationId "us.materialio.app" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion - versionCode 79 - versionName "1.6.28" + versionCode 80 + versionName "1.6.29" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" aaptOptions { // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps. diff --git a/materialious/android/app/capacitor.build.gradle b/materialious/android/app/capacitor.build.gradle index 6f5750f8..14775e3e 100644 --- a/materialious/android/app/capacitor.build.gradle +++ b/materialious/android/app/capacitor.build.gradle @@ -15,6 +15,7 @@ dependencies { implementation project(':capacitor-screen-orientation') implementation project(':capacitor-status-bar') implementation project(':capgo-inappbrowser') + implementation project(':hugotomazi-capacitor-navigation-bar') implementation project(':mediagrid-capacitor-native-audio') implementation project(':capacitor-nodejs') diff --git a/materialious/android/capacitor.settings.gradle b/materialious/android/capacitor.settings.gradle index 5afe2907..b4eac4f4 100644 --- a/materialious/android/capacitor.settings.gradle +++ b/materialious/android/capacitor.settings.gradle @@ -20,6 +20,9 @@ project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacit include ':capgo-inappbrowser' project(':capgo-inappbrowser').projectDir = new File('../node_modules/@capgo/inappbrowser/android') +include ':hugotomazi-capacitor-navigation-bar' +project(':hugotomazi-capacitor-navigation-bar').projectDir = new File('../node_modules/@hugotomazi/capacitor-navigation-bar/android') + include ':mediagrid-capacitor-native-audio' project(':mediagrid-capacitor-native-audio').projectDir = new File('../node_modules/@mediagrid/capacitor-native-audio/android') diff --git a/materialious/electron/package.json b/materialious/electron/package.json index 1dc3c1c2..99541ed0 100644 --- a/materialious/electron/package.json +++ b/materialious/electron/package.json @@ -1,6 +1,6 @@ { "name": "Materialious", - "version": "1.6.28", + "version": "1.6.29", "description": "Modern material design for Invidious.", "author": { "name": "Ward Pearce", diff --git a/materialious/package-lock.json b/materialious/package-lock.json index e1e7cb25..ba7b7c2d 100644 --- a/materialious/package-lock.json +++ b/materialious/package-lock.json @@ -1,12 +1,12 @@ { "name": "materialious", - "version": "1.6.27", + "version": "1.6.28", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "materialious", - "version": "1.6.27", + "version": "1.6.28", "dependencies": { "@capacitor-community/electron": "^5.0.1", "@capacitor/android": "^6.1.2", @@ -19,6 +19,7 @@ "@capacitor/status-bar": "^6.0.1", "@capgo/inappbrowser": "^6.6.8", "@ffmpeg/ffmpeg": "^0.12.10", + "@hugotomazi/capacitor-navigation-bar": "^4.0.1", "@mediagrid/capacitor-native-audio": "^1.0.0", "beercss": "^3.8.0", "bgutils-js": "^3.1.1", @@ -2177,6 +2178,15 @@ "tslib": "^2.4.0" } }, + "node_modules/@hugotomazi/capacitor-navigation-bar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@hugotomazi/capacitor-navigation-bar/-/capacitor-navigation-bar-4.0.1.tgz", + "integrity": "sha512-CtG9c2mxH1hxNvr8+PsoMhfKxoUkv17DQGqt82Y65gM4UARBe0Dp2fa8Eeo+ZzybJ1nRwSAiB4kEQ3nx5UpT1A==", + "license": "MIT", + "peerDependencies": { + "@capacitor/core": "^4.0.1 || ^5.0.0 || ^6.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/materialious/package.json b/materialious/package.json index e5b9ed42..c99fd238 100644 --- a/materialious/package.json +++ b/materialious/package.json @@ -1,6 +1,6 @@ { "name": "materialious", - "version": "1.6.28", + "version": "1.6.29", "private": true, "scripts": { "dev": "vite dev", @@ -53,6 +53,7 @@ "@capacitor/status-bar": "^6.0.1", "@capgo/inappbrowser": "^6.6.8", "@ffmpeg/ffmpeg": "^0.12.10", + "@hugotomazi/capacitor-navigation-bar": "^4.0.1", "@mediagrid/capacitor-native-audio": "^1.0.0", "beercss": "^3.8.0", "bgutils-js": "^3.1.1", diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte index 4848e89e..47409705 100644 --- a/materialious/src/lib/Player.svelte +++ b/materialious/src/lib/Player.svelte @@ -19,7 +19,6 @@ getBestThumbnail, proxyVideoUrl, pullBitratePreference, - setStatusBarColor, videoLength, type PhasedDescription } from './misc'; @@ -43,7 +42,7 @@ synciousInstanceStore, synciousStore } from './store'; - import { getDynamicTheme } from './theme'; + import { getDynamicTheme, setStatusBarColor } from './theme'; export let data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null }; export let audioMode = false; @@ -365,6 +364,7 @@ if (get(playerAutoPlayStore)) { player.play(); + player.exitFullscreen(); } await loadPlayerPos(); }); @@ -424,8 +424,6 @@ } if (Capacitor.getPlatform() === 'android') { - let initialFullscreen = true; - const videoFormats = data.video.adaptiveFormats.filter((format) => format.type.startsWith('video/') ); @@ -433,14 +431,6 @@ originalOrigination = await ScreenOrientation.orientation(); player.addEventListener('fullscreen-change', async (event: FullscreenChangeEvent) => { - // A bit of a hack to fix Android automatically - // fullscreening when opening a video. - if (initialFullscreen) { - player.exitFullscreen(); - initialFullscreen = false; - return; - } - if (event.detail) { // Ensure bar color is black while in fullscreen await StatusBar.setBackgroundColor({ color: '#000000' }); diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts index 5e8a42ee..b75ab48d 100644 --- a/materialious/src/lib/misc.ts +++ b/materialious/src/lib/misc.ts @@ -1,14 +1,11 @@ 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; @@ -291,11 +288,3 @@ 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'] - }); - } -} \ No newline at end of file diff --git a/materialious/src/lib/theme.ts b/materialious/src/lib/theme.ts index bc176374..b7d887fd 100644 --- a/materialious/src/lib/theme.ts +++ b/materialious/src/lib/theme.ts @@ -1,3 +1,6 @@ +import { Capacitor } from '@capacitor/core'; +import { StatusBar, Style } from '@capacitor/status-bar'; +import { NavigationBar } from '@hugotomazi/capacitor-navigation-bar'; import ui from 'beercss'; import { get } from 'svelte/store'; import { darkModeStore, interfaceAmoledTheme } from './store'; @@ -15,6 +18,26 @@ export async function getDynamicTheme(mode?: string): Promise