update(mobile): fix status bar overlapping in ios

android/app/capacitor.build.gradle

@@ -9,7 +9,10 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-camera')
+    implementation project(':capacitor-filesystem')
     implementation project(':capacitor-splash-screen')
+    implementation project(':capacitor-status-bar')
 
 }
 

android/capacitor.settings.gradle

@@ -2,5 +2,14 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-camera'
+project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
+
+include ':capacitor-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')
+
 include ':capacitor-splash-screen'
 project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

ios/App/App.xcodeproj/project.pbxproj

@@ -354,7 +354,7 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = com.uplink.app;
+				PRODUCT_BUNDLE_IDENTIFIER = com.uplink.satellite.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
@@ -373,7 +373,7 @@
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = com.uplink.app;
+				PRODUCT_BUNDLE_IDENTIFIER = com.uplink.satellite.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;

ios/App/App/Info.plist

@@ -2,10 +2,14 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Uplink requires access to save photos to your library</string>
+	<key>NSPhotoLibraryAddUsageDescription</key>
+	<string>Uplink needs access to the photo library to allow users to select photos</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>Uplink</string>
+	<string>Uplink</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -43,6 +47,18 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
+	<key>NSCameraUsageDescription</key>
+	<string>Uplink needs access to the camera to allow users to take photos</string>
+	<key>LSApplicationCategoryType</key>
+	<string>public.app-category.social-networking</string>
+	<key>UIFileSharingEnabled</key>
+	<true/>
+	<key>LSSupportsOpeningDocumentsInPlace</key>
+	<true/>
+	<key>UIStatusBarHidden</key>
+	<true/>
+	<key>UIStatusBarStyle</key>
+	<string>UIStatusBarStyleDefault</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
 </dict>

ios/App/Podfile

@@ -11,7 +11,10 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
+  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
 end
 
 target 'App' do

ios/App/Podfile.lock

@@ -1,28 +1,46 @@
 PODS:
   - Capacitor (6.1.2):
     - CapacitorCordova
+  - CapacitorCamera (6.1.0):
+    - Capacitor
   - CapacitorCordova (6.1.2)
+  - CapacitorFilesystem (6.0.1):
+    - Capacitor
   - CapacitorSplashScreen (6.0.2):
     - Capacitor
+  - CapacitorStatusBar (6.0.1):
+    - Capacitor
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorCamera (from `../../node_modules/@capacitor/camera`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorFilesystem (from `../../node_modules/@capacitor/filesystem`)"
   - "CapacitorSplashScreen (from `../../node_modules/@capacitor/splash-screen`)"
+  - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
 
 EXTERNAL SOURCES:
   Capacitor:
     :path: "../../node_modules/@capacitor/ios"
+  CapacitorCamera:
+    :path: "../../node_modules/@capacitor/camera"
   CapacitorCordova:
     :path: "../../node_modules/@capacitor/ios"
+  CapacitorFilesystem:
+    :path: "../../node_modules/@capacitor/filesystem"
   CapacitorSplashScreen:
     :path: "../../node_modules/@capacitor/splash-screen"
+  CapacitorStatusBar:
+    :path: "../../node_modules/@capacitor/status-bar"
 
 SPEC CHECKSUMS:
   Capacitor: 679f9673fdf30597493a6362a5d5bf233d46abc2
+  CapacitorCamera: 81ce64062cd82b82cc75a79616fda4bd09d7f643
   CapacitorCordova: f48c89f96c319101cd2f0ce8a2b7449b5fb8b3dd
+  CapacitorFilesystem: 37fb3aa5c945b4539ab11c74a5c57925a302bf24
   CapacitorSplashScreen: 250df9ef8014fac5c7c1fd231f0f8b1d8f0b5624
+  CapacitorStatusBar: b81d4fb5d4e0064c712018071b3ab4b810b39a63
 
-PODFILE CHECKSUM: d641883bb20843cf484024fa8ccc257a419b4040
+PODFILE CHECKSUM: 61b0550d222ba6f684ca396712001255df65838f
 
-COCOAPODS: 1.16.1
+COCOAPODS: 1.16.2

ios/App/PrivacyInfo.xcprivacy

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>NSPrivacyTracking</key>
+    <false/>
+    <key>NSPrivacyAccessedAPITypes</key>
+    <array>
+      <dict>
+        <key>NSPrivacyAccessedAPIType</key>
+        <string>NSPrivacyAccessedAPICategoryUserDefaults</string>
+        <key>NSPrivacyAccessedAPITypeReasons</key>
+        <array>
+          <string>CA92.1</string>
+        </array>
+      </dict>
+    </array>
+    <key>NSPrivacyTrackingDomains</key>
+    <array/>
+  </dict>
+</plist>

package.json

@@ -35,10 +35,13 @@
     "type": "module",
     "dependencies": {
         "@capacitor/android": "^6.1.2",
+        "@capacitor/camera": "^6.1.0",
         "@capacitor/cli": "^6.1.2",
         "@capacitor/core": "^6.1.2",
+        "@capacitor/filesystem": "^6.0.1",
         "@capacitor/ios": "^6.1.2",
         "@capacitor/splash-screen": "^6.0.2",
+        "@capacitor/status-bar": "^6.0.1",
         "@dicebear/collection": "^9.0.1",
         "@dicebear/core": "^9.0.1",
         "@dicebear/identicon": "^9.0.1",

src/app.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
         <link rel="manifest" href="/manifest.json" />
         %sveltekit.head%
     </head>

src/lib/components/ui/InstallBanner.svelte

@@ -10,7 +10,7 @@
         Windows = "Windows",
         MacOS = "MacOS",
         Android = "Android",
-       /* iOS = "iOS", */
+        iOS = "iOS",
         Linux = "Linux",
         Other = "Other",
     }
@@ -66,11 +66,11 @@
             icon: Shape.Android,
             download: DOWNLOAD_LINKS.Android,
         },
-      /*  [Platform.iOS]: {
+        [Platform.iOS]: {
             text: "iPhone",
             icon: Shape.Apple,
             download: DOWNLOAD_LINKS.iOS,
-        }, */
+        },
         [Platform.Linux]: {
             text: "Linux",
             icon: Shape.Code,

src/lib/config.ts

@@ -52,8 +52,8 @@ export const INTEGRATIONS = {
 }
 
 export const DOWNLOAD_LINKS = {
-    Android:  "https://github.com/Satellite-im/UplinkWeb/releases/download/v2.0.1/Uplink_2.0.1.apk",
-   // iOS: "https://github.com/Satellite-im/UplinkWeb/releases/download/v2.0.1/Uplink.ipa",
+    Android: "https://github.com/Satellite-im/UplinkWeb/releases/download/v2.0.1/Uplink_2.0.1.apk",
+    iOS: "https://github.com/Satellite-im/UplinkWeb/releases/download/v2.0.1/Uplink.ipa",
     Windows: "https://github.com/Satellite-im/UplinkWeb/releases/download/v2.0.1/Uplink_2.0.1.msi",
     Mac: "https://github.com/Satellite-im/UplinkWeb/releases/download/v2.0.1/Uplink_2.0.1.dmg",
     Linux: "https://github.com/Satellite-im/UplinkWeb/releases/download/v2.0.1/Uplink_2.0.1.deb",

src/lib/utils/DetectPlatform.ts

@@ -0,0 +1,19 @@
+export enum Platform {
+    Windows = "Windows",
+    MacOS = "MacOS",
+    Android = "Android",
+    iOS = "iOS",
+    Linux = "Linux",
+    Other = "Other",
+}
+
+export function detectPlatform(): Platform {
+    const userAgent = navigator.userAgent.toLowerCase()
+
+    if (userAgent.includes("windows")) return Platform.Windows
+    if (userAgent.includes("mac")) return Platform.MacOS
+    if (userAgent.includes("android")) return Platform.Android
+    if (/iphone|ipad|ipod/.test(userAgent)) return Platform.iOS
+    if (userAgent.includes("linux")) return Platform.Linux
+    return Platform.Other
+}

src/routes/+layout.svelte

@@ -22,13 +22,14 @@
     import { _, locale } from "svelte-i18n"
     import { initializeLocale } from "$lib/lang/index"
     import CircularProgressIndicator from "$lib/components/loading/CircularProgressIndicator.svelte"
-    import VideoPreview from "$lib/components/calling/VideoPreview.svelte"
     import MouseListener from "$lib/components/ui/MouseListener.svelte"
     import InstallBanner from "$lib/components/ui/InstallBanner.svelte"
     import Market from "$lib/components/market/Market.svelte"
     import { swipe } from "$lib/components/ui/Swipe"
+    import { detectPlatform } from "$lib/utils/DetectPlatform"
 
     TimeAgo.addDefaultLocale(en)
+    const platform = detectPlatform()
     let keybinds: Keybind[]
     let devmode: boolean = get(SettingsStore.state).devmode
     let color: string = get(UIStore.state.color)
@@ -40,6 +41,10 @@
     let cssOverride: string = get(UIStore.state.cssOverride)
     let muted: boolean = get(Store.state.devices.muted)
     let deafened: boolean = get(Store.state.devices.deafened)
+    let isIos: boolean = false
+    let isAndroid: boolean = false
+    isIos = platform === "iOS"
+    isAndroid = platform === "Android"
 
     function handleKeybindMatch(event: CustomEvent<any>) {
         let keybind: Keybind = event.detail
@@ -229,8 +234,6 @@
     Store.state.devices.muted.subscribe(state => (muted = state))
     Store.state.devices.deafened.subscribe(state => (deafened = state))
 
-    console.log("Arriving here on +layout")
-
     window.addEventListener(
         "click",
         () => {
@@ -274,6 +277,8 @@
 {#if isLocaleSet}
     <div
         id="app"
+        class:is-ios-padding={isIos}
+        class:is-android-padding={isAndroid}
         use:swipe
         on:swipeleft={_ => {
             UIStore.closeSidebar()
@@ -307,4 +312,13 @@
         flex: 1;
         overflow: hidden;
     }
+    /* iOS padding to avoid overlap with the status bar */
+    .is-ios-padding {
+        padding-top: env(safe-area-inset-top, 20px);
+    }
+
+    /* Android-specific padding adjustment if needed */
+    .is-android-padding {
+        padding-top: 0;
+    }
 </style>