diff --git a/capacitor/package.json b/capacitor/package.json index 972ee39..7f6689f 100644 --- a/capacitor/package.json +++ b/capacitor/package.json @@ -3,7 +3,7 @@ "private": true, "scripts": { "build:app": "build:web && build:android", - "build:web": "cross-env NODE_ENV=development webpack build", + "build:web": "cross-env NODE_ENV=production webpack build", "build:android": "cap build android", "build:ios": "run-s build:app cap-run:ios", "cap:android-emulator": "cap run android --target=Pixel_XL_API_33 --external --public-host=10.5.0.2 && dev:localhost-bind", @@ -40,11 +40,14 @@ "@capacitor/core": "^5.5.1", "@capacitor/ios": "^5.5.1", "@capacitor/status-bar": "^5.0.6", - "@mauricewegner/capacitor-navigation-bar": "^2.0.3", "@superfrogbe/cordova-plugin-chrome-apps-sockets-udp": "github:superfrogbe/cordova-plugin-chrome-apps-sockets-udp", + "capacitor-plugin-safe-area": "^2.0.5", "common": "workspace:*", "cordova-plugin-chrome-apps-common": "^1.0.7", "cordova-plugin-chrome-apps-sockets-tcp": "github:KoenLav/cordova-plugin-chrome-apps-sockets-tcp", + "cordova-plugin-navigationbar": "^1.0.31", + "cordova-plugin-screen-orientation": "^3.0.4", + "es6-promise-plugin": "^4.2.2", "webpack-merge": "^5.10.0" } } diff --git a/capacitor/src/webtorrent.js b/capacitor/src/webtorrent.js index cd2f0c4..b884010 100644 --- a/capacitor/src/webtorrent.js +++ b/capacitor/src/webtorrent.js @@ -1,23 +1,24 @@ +/* globals navigationbar */ import TorrentClient from 'common/modules/webtorrent.js' import { ipcRendererWebTorrent } from './ipc.js' import { StatusBar, Style } from '@capacitor/status-bar' -import { NavigationBar } from '@mauricewegner/capacitor-navigation-bar' +import { SafeArea } from 'capacitor-plugin-safe-area' + +SafeArea.addListener('safeAreaChanged', data => { + const { insets } = data + for (const [key, value] of Object.entries(insets)) { + document.documentElement.style.setProperty( + `--safe-area-${key}`, + `${value}px` + ) + } +}) StatusBar.hide() StatusBar.setStyle({ style: Style.Dark }) StatusBar.setOverlaysWebView({ overlay: true }) -NavigationBar.setColor({ color: '#17191c' }) -function hideAndroidNavBar () { - NavigationBar.hide() - // NavigationBar.setTransparency({ isTransparent: true }) -} - -screen.orientation.addEventListener('change', () => { - hideAndroidNavBar() -}) - -hideAndroidNavBar() +navigationbar.setUp(true) globalThis.chrome.runtime = { lastError: false, id: 'something' } diff --git a/common/App.svelte b/common/App.svelte index bbe06e4..516e285 100644 --- a/common/App.svelte +++ b/common/App.svelte @@ -60,7 +60,7 @@ } @media (min-width: 769px) { .page-wrapper { - padding-left: env(safe-area-inset-left) !important; + padding-left: env(safe-area-inset-left, var(--safe-area-left)) !important; } } diff --git a/common/css.css b/common/css.css index 5fcd51b..699f3f1 100644 --- a/common/css.css +++ b/common/css.css @@ -22,6 +22,8 @@ --gray-color-light: hsl(var(--gray-color-light-hsl)); --gray-color-light-hsl: var(--gray-color-base-hue), 10%, 28%; --gray-color-base-hue: 216; + --safe-area-top: 0px; + --safe-area-left: 0px; color-scheme: dark; } diff --git a/common/views/Player/Player.svelte b/common/views/Player/Player.svelte index 5773b94..a881d2a 100644 --- a/common/views/Player/Player.svelte +++ b/common/views/Player/Player.svelte @@ -1377,7 +1377,7 @@ } .top { - padding-top: env(safe-area-inset-top) !important; + padding-top: env(safe-area-inset-top, var(--safe-area-top)) !important; } } diff --git a/common/webpack.config.cjs b/common/webpack.config.cjs index cadd2da..89a4c32 100644 --- a/common/webpack.config.cjs +++ b/common/webpack.config.cjs @@ -78,7 +78,7 @@ module.exports = (parentDir, alias = {}, aliasFields = 'browser', filename = 'ap - + Miru diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8d6013e..d9fcbd8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -71,12 +71,12 @@ importers: '@capacitor/status-bar': specifier: ^5.0.6 version: 5.0.6(@capacitor/core@5.5.1) - '@mauricewegner/capacitor-navigation-bar': - specifier: ^2.0.3 - version: 2.0.3(@capacitor/core@5.5.1) '@superfrogbe/cordova-plugin-chrome-apps-sockets-udp': specifier: github:superfrogbe/cordova-plugin-chrome-apps-sockets-udp version: github.com/superfrogbe/cordova-plugin-chrome-apps-sockets-udp/4b740017299c81cfc7d5b49c7d6122a6650b57d4 + capacitor-plugin-safe-area: + specifier: ^2.0.5 + version: 2.0.5(@capacitor/core@5.5.1) common: specifier: workspace:* version: link:../common @@ -86,6 +86,15 @@ importers: cordova-plugin-chrome-apps-sockets-tcp: specifier: github:KoenLav/cordova-plugin-chrome-apps-sockets-tcp version: github.com/KoenLav/cordova-plugin-chrome-apps-sockets-tcp/f06fbc33befc34709210f657bf6674aea0ca8f88 + cordova-plugin-navigationbar: + specifier: ^1.0.31 + version: 1.0.31 + cordova-plugin-screen-orientation: + specifier: ^3.0.4 + version: 3.0.4 + es6-promise-plugin: + specifier: ^4.2.2 + version: 4.2.2 webpack-merge: specifier: ^5.10.0 version: 5.10.0 @@ -669,14 +678,6 @@ packages: - supports-color dev: true - /@mauricewegner/capacitor-navigation-bar@2.0.3(@capacitor/core@5.5.1): - resolution: {integrity: sha512-E8HTcVkZEqm4tLJ7MpkTlqc93mboUSbJL41fFbvEaVwBhpgenEezkK268RxwQDij5hkudZmo4/eRXG3aJQwrzQ==} - peerDependencies: - '@capacitor/core': ^4.0.1 || ^5.0.0 - dependencies: - '@capacitor/core': 5.5.1 - dev: false - /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2088,6 +2089,14 @@ packages: /caniuse-lite@1.0.30001551: resolution: {integrity: sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==} + /capacitor-plugin-safe-area@2.0.5(@capacitor/core@5.5.1): + resolution: {integrity: sha512-Lg3P+/aW2/+C3gz2/xZFdfjgkOJ/ZSFTmZSxLaSY6lIudOTjwVpjoxhAyKUz1tc13Carjqdlq01yRrr++XOzAg==} + peerDependencies: + '@capacitor/core': ^5.0.0 + dependencies: + '@capacitor/core': 5.5.1 + dev: false + /chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} @@ -2567,6 +2576,16 @@ packages: engines: {'0': {name: cordova, version: '>=3.0.0'}} dev: false + /cordova-plugin-navigationbar@1.0.31: + resolution: {integrity: sha512-xt9tx5Aprf052OvuG2JohjRkkU/6U6XQ8mXOx93HaHFz6cCZI1+B0pl/uoyU/FkJsP41QIw1upnMdzgav11ifw==} + engines: {'0': {name: cordova, version: '>=3.0.0'}} + dev: false + + /cordova-plugin-screen-orientation@3.0.4: + resolution: {integrity: sha512-AswRuUKJ8J3HycUilTJsIB50aa9TLrwndPNBFG+wfAPhHEqIBF0HaD0q3HbAK7ypgmaj0cvbzk84qP51IcTfrQ==} + engines: {cordovaDependencies: {4.0.0: {cordova: '>100'}}} + dev: false + /cordova-res@0.15.4: resolution: {integrity: sha512-TjFZhjUtK8qq4DVrgR+KI7tKcUL704cnkTPRhHbKlCPzefHoz1tBOX93wc76dOMmOWKTsbJz83DIm6mqdp5Pmg==} engines: {node: '>=10.3.0'} @@ -3322,6 +3341,10 @@ packages: dev: true optional: true + /es6-promise-plugin@4.2.2: + resolution: {integrity: sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA==} + dev: false + /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'}