Add iOS support

.github/workflows/gradle.yaml

@@ -143,6 +143,51 @@ jobs:
           files: |
             ./SlimeVR-android.apk
 
+  bundle-ios:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Get tags
+        run: git fetch --tags origin --recurse-submodules=no --force
+
+      - name: Set up JDK 17
+        uses: actions/setup-java@v4
+        with:
+          java-version: "17"
+          distribution: "adopt"
+
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@v4
+
+      - uses: pnpm/action-setup@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - run: pnpm i
+
+      - name: Build GUI
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          NODE_OPTIONS: --max-old-space-size=4096
+        run: cd gui && pnpm run build
+
+      - name: Build with Gradle
+        run: ./gradlew :server:ios:createIPA
+
+      - name: Upload the iOS Build Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          # Artifact name
+          name: "SlimeVR-iOS" # optional, default is artifact
+          # A file, directory or wildcard pattern that describes what to upload
+          path: server/ios/build/robovmx-build/tmp/Main.ipa
+
   bundle-linux:
     strategy:
       matrix:

gradle.properties

@@ -18,3 +18,4 @@ spotlessVersion=7.0.2
 shadowJarVersion=8.3.2
 buildconfigVersion=5.5.0
 grgitVersion=5.2.2
+robovmVersion=10.2.2.4-SNAPSHOT

gui/src-tauri/icons/ios/Contents.json

@@ -0,0 +1,116 @@
+{
+  "images" : [
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "filename" : "AppIcon-20x20@2x 1.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "76x76"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "76x76"
+    },
+    {
+      "filename" : "AppIcon-83.5x83.5@2x 1.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
+    },
+    {
+      "filename" : "AppIcon-512@2x 1.png",
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "iphone",
+      "scale" : "1x",
+      "size" : "20x20"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

gui/src/components/EmptyLayout.tsx

@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
 import { TopBar } from './TopBar';
 import './EmptyLayout.scss';
+import classNames from 'classnames';
 
 export function EmptyLayout({ children }: { children: ReactNode }) {
   return (
     <div className="empty-layout h-full">
-      <div style={{ gridArea: 't' }}>
+      <div
+        style={{ gridArea: 't' }}
+        className={classNames(window.__IOS__ && 'mobile:mt-10')}
+      >
         <TopBar></TopBar>
       </div>
       <div style={{ gridArea: 'c' }} className="mt-2 relative">

gui/src/components/MainLayout.tsx

@@ -60,7 +60,10 @@ export function MainLayout({
   return (
     <div className="">
       <div className="main-layout w-full h-screen">
-        <div style={{ gridArea: 't' }}>
+        <div
+          style={{ gridArea: 't' }}
+          className={classNames(window.__IOS__ && 'mobile:mt-10')}
+        >
           <TopBar></TopBar>
         </div>
         <div style={{ gridArea: 's' }} className="overflow-y-auto">
@@ -71,7 +74,8 @@ export function MainLayout({
           className={classNames(
             'overflow-y-auto mr-2 my-2 mobile:m-0',
             'flex flex-col rounded-xl',
-            background && 'bg-background-70'
+            background && 'bg-background-70',
+            window.__IOS__ && 'mobile:mt-10'
           )}
         >
           {children}

gui/src/components/TopBar.tsx

@@ -232,19 +232,22 @@ export function TopBar({
               </>
             )}
 
-            {!isTauri && !showVersionMobile && !config?.decorations && (
-              <div
-                className="flex flex-row gap-2"
-                {...(doesMatchSettings ? showVersionBind : {})}
-              >
+            {!isTauri &&
+              !showVersionMobile &&
+              !config?.decorations &&
+              !window.__IOS__ && (
                 <div
-                  className="flex justify-around flex-col xs:hidden"
-                  data-tauri-drag-region
+                  className="flex flex-row gap-2"
+                  {...(doesMatchSettings ? showVersionBind : {})}
                 >
-                  <Typography variant="section-title">SlimeVR</Typography>
+                  <div
+                    className="flex justify-around flex-col xs:hidden"
+                    data-tauri-drag-region
+                  >
+                    <Typography variant="section-title">SlimeVR</Typography>
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
           </div>
           <div
             className="flex justify-end items-center px-2 gap-2 z-50"

gui/src/components/WidgetsComponent.tsx

@@ -66,9 +66,9 @@ export function WidgetsComponent() {
           bodyPartsToReset="fingers"
         ></ResetButton>
         <ClearMountingButton></ClearMountingButton>
-        {(typeof __ANDROID__ === 'undefined' || !__ANDROID__?.isThere()) && (
-          <BVHButton></BVHButton>
-        )}
+        {(!window.__IOS__ ||
+          typeof __ANDROID__ === 'undefined' ||
+          !__ANDROID__?.isThere()) && <BVHButton></BVHButton>}
         <TrackingPauseButton></TrackingPauseButton>
       </div>
       <div className="w-full">

gui/src/components/onboarding/OnboardingLayout.tsx

@@ -6,6 +6,7 @@ import { useBreakpoint } from '@/hooks/breakpoint';
 import { SkipSetupButton } from './SkipSetupButton';
 import { SkipSetupWarningModal } from './SkipSetupWarningModal';
 import './OnboardingLayout.scss';
+import classNames from 'classnames';
 
 export function OnboardingLayout({ children }: { children: ReactNode }) {
   const { isMobile } = useBreakpoint('mobile');
@@ -14,10 +15,19 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
 
   return !state.alonePage ? (
     <div className="onboarding-layout h-full">
-      <div style={{ gridArea: 't' }}>
+      <div
+        style={{ gridArea: 't' }}
+        className={classNames(window.__IOS__ && 'mobile:mt-10')}
+      >
         <TopBar progress={state.progress}></TopBar>
       </div>
-      <div style={{ gridArea: 'c' }} className="mt-2 relative">
+      <div
+        style={{ gridArea: 'c' }}
+        className={classNames(
+          'relative mt-2',
+          window.__IOS__ && 'mobile:mt-12'
+        )}
+      >
         <div className="absolute top-12 mobile:top-0 right-2 z-50">
           <SkipSetupButton
             visible={true}

gui/src/components/settings/SettingsLayout.tsx

@@ -9,6 +9,7 @@ import { useLocalization } from '@fluent/react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import './SettingsLayout.scss';
 import { useVRCConfig } from '@/hooks/vrc-config';
+import classNames from 'classnames';
 
 export function SettingSelectorMobile() {
   const { l10n } = useLocalization();
@@ -84,7 +85,12 @@ export function SettingSelectorMobile() {
   };
 
   return (
-    <div className="fixed top-12 z-50 px-4 w-full">
+    <div
+      className={classNames(
+        'fixed top-12 z-50 px-4 w-full',
+        window.__IOS__ && 'mobile:mt-10'
+      )}
+    >
       <Dropdown
         control={control}
         display="block"
@@ -107,7 +113,10 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
   return (
     <>
       <div className="settings-layout h-full">
-        <div style={{ gridArea: 't' }}>
+        <div
+          style={{ gridArea: 't' }}
+          className={classNames(window.__IOS__ && 'mobile:mt-10')}
+        >
           <TopBar></TopBar>
         </div>
         <div style={{ gridArea: 'n' }}>
@@ -118,7 +127,10 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
         </div>
         <div
           style={{ gridArea: 'c' }}
-          className="xs:pl-2 xs:pb-2 xs:mt-2 mobile:mt-7 overflow-y-auto"
+          className={classNames(
+            'xs:pl-2 xs:pb-2 xs:mt-2 overflow-y-auto',
+            window.__IOS__ ? 'mobile:mt-[4.25rem]' : 'mobile:mt-7'
+          )}
         >
           {isMobile && <SettingSelectorMobile></SettingSelectorMobile>}
           {children}

gui/src/components/settings/pages/InterfaceSettings.tsx

@@ -248,27 +248,33 @@ export function InterfaceSettings() {
               </>
             )}
 
-            <Typography bold>
-              {l10n.getString('settings-general-interface-discord_presence')}
-            </Typography>
-            <div className="flex flex-col pt-1 pb-2">
-              <Typography color="secondary">
-                {l10n.getString(
-                  'settings-general-interface-discord_presence-description'
-                )}
-              </Typography>
-            </div>
-            <div className="grid sm:grid-cols-2 pb-4">
-              <CheckBox
-                variant="toggle"
-                control={control}
-                outlined
-                name="behavior.discordPresence"
-                label={l10n.getString(
-                  'settings-general-interface-discord_presence-label'
-                )}
-              />
-            </div>
+            {isTauri() && (
+              <>
+                <Typography bold>
+                  {l10n.getString(
+                    'settings-general-interface-discord_presence'
+                  )}
+                </Typography>
+                <div className="flex flex-col pt-1 pb-2">
+                  <Typography color="secondary">
+                    {l10n.getString(
+                      'settings-general-interface-discord_presence-description'
+                    )}
+                  </Typography>
+                </div>
+                <div className="grid sm:grid-cols-2 pb-4">
+                  <CheckBox
+                    variant="toggle"
+                    control={control}
+                    outlined
+                    name="behavior.discordPresence"
+                    label={l10n.getString(
+                      'settings-general-interface-discord_presence-label'
+                    )}
+                  />
+                </div>
+              </>
+            )}
 
             <Typography bold>
               {l10n.getString('settings-general-interface-dev_mode')}

gui/src/vite-env.d.ts

@@ -12,6 +12,7 @@ declare const __ANDROID__:
 
 interface Window {
   readonly isTauri: boolean;
+  readonly __IOS__: boolean | undefined;
 }
 
 declare module 'tailwind-gradient-mask-image';