File Save RPC

gui/package.json

@@ -18,6 +18,7 @@
     "identity-obj-proxy": "^3.0.0",
     "intl-pluralrules": "^1.3.1",
     "ip-num": "^1.4.1",
+    "mime-types": "^2.1.35",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.0.1",
@@ -68,6 +69,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tauri-apps/cli": "^1.4.0",
     "@types/file-saver": "^2.0.5",
+    "@types/mime-types": "^2.1.1",
     "@types/react": "18.0.25",
     "@types/react-dom": "^18.0.5",
     "@types/react-modal": "3.13.1",

gui/src/App.tsx

@@ -13,6 +13,7 @@ import { Serial } from './components/settings/pages/Serial';
 import { SettingsLayoutRoute } from './components/settings/SettingsLayout';
 import {
   useProvideWebsocketApi,
+  useWebsocketAPI,
   WebSocketApiContext,
 } from './hooks/websocket-api';
 
@@ -48,10 +49,17 @@ import { CalibrationTutorialPage } from './components/onboarding/pages/Calibrati
 import { AssignmentTutorialPage } from './components/onboarding/pages/assignment-preparation/AssignmentTutorial';
 import { open } from '@tauri-apps/api/shell';
 import semver from 'semver';
-import { useBreakpoint } from './hooks/breakpoint';
+import { useBreakpoint, useIsTauri } from './hooks/breakpoint';
 import { VRModePage } from './components/vr-mode/VRModePage';
 import { InterfaceSettings } from './components/settings/pages/InterfaceSettings';
 import { error, log } from './utils/logging';
+import {
+  ComputerDirectory,
+  RpcMessage,
+  SaveFileNotificationT,
+} from 'solarxr-protocol';
+import mime from 'mime-types';
+import { resolveDir, saveFile } from './utils/a11y';
 
 export const GH_REPO = 'SlimeVR/SlimeVR-Server';
 export const VersionContext = createContext('');
@@ -60,10 +68,43 @@ export const SLIMEVR_DISCORD = 'https://discord.gg/slimevr';
 
 function Layout() {
   const { loading } = useConfig();
+  const { isMobile } = useBreakpoint('mobile');
+  const isTauri = useIsTauri();
+  const { useRPCPacket } = useWebsocketAPI();
+
+  useRPCPacket(
+    RpcMessage.SaveFileNotification,
+    async (fileSave: SaveFileNotificationT) => {
+      if (!fileSave.data) return;
+      let filename =
+        typeof fileSave.expectedFilename === 'string'
+          ? fileSave.expectedFilename
+          : 'data';
+
+      let mimeType = 'application/octet-stream';
+      if (typeof fileSave.fileExtension === 'string') {
+        filename += fileSave.fileExtension;
+      } else if (typeof fileSave.mimeType === 'string') {
+        mimeType = fileSave.mimeType;
+        filename += mime.extension(mimeType);
+      }
+
+      const file = new File([Uint8Array.from(fileSave.data)], filename, {
+        type: mimeType,
+      });
+
+      saveFile({
+        isTauri,
+        file,
+        defaultPath: await resolveDir(
+          fileSave.expectedDir ?? ComputerDirectory.Documents
+        ).catch(() => undefined),
+      });
+    }
+  );
 
   if (loading) return <></>;
 
-  const { isMobile } = useBreakpoint('mobile');
   return (
     <>
       <SerialDetectionModal></SerialDetectionModal>

gui/src/components/onboarding/pages/body-proportions/ProportionsChoose.tsx

@@ -10,12 +10,9 @@ import {
   SkeletonConfigRequestT,
 } from 'solarxr-protocol';
 import { useWebsocketAPI } from '../../../../hooks/websocket-api';
-import saveAs from 'file-saver';
-import { save } from '@tauri-apps/api/dialog';
-import { writeTextFile } from '@tauri-apps/api/fs';
 import { useIsTauri } from '../../../../hooks/breakpoint';
 import { useAppContext } from '../../../../hooks/app';
-import { error } from '../../../../utils/logging';
+import { saveFile } from '../../../../utils/a11y';
 
 export const MIN_HEIGHT = 0.4;
 export const MAX_HEIGHT = 4;
@@ -51,28 +48,19 @@ export function ProportionsChoose() {
   useRPCPacket(
     RpcMessage.SkeletonConfigResponse,
     (data: SkeletonConfigResponseT) => {
-      const blob = new Blob([JSON.stringify(data)], {
+      const file = new File([JSON.stringify(data)], 'body-proportions.json', {
         type: 'application/json',
       });
-      if (isTauri) {
-        save({
-          filters: [
-            {
-              name: l10n.getString('onboarding-choose_proportions-file_type'),
-              extensions: ['json'],
-            },
-          ],
-          defaultPath: 'body-proportions.json',
-        })
-          .then((path) =>
-            path ? writeTextFile(path, JSON.stringify(data)) : undefined
-          )
-          .catch((err) => {
-            error(err);
-          });
-      } else {
-        saveAs(blob, 'body-proportions.json');
-      }
+      saveFile({
+        isTauri,
+        file,
+        filters: [
+          {
+            name: l10n.getString('onboarding-choose_proportions-file_type'),
+            extensions: ['json'],
+          },
+        ],
+      });
     }
   );
 

gui/src/utils/a11y.ts

@@ -1,3 +1,10 @@
+import { DialogFilter, save } from '@tauri-apps/api/dialog';
+import { error } from './logging';
+import saveAs from 'file-saver';
+import { writeBinaryFile } from '@tauri-apps/api/fs';
+import { ComputerDirectory } from 'solarxr-protocol';
+import { documentDir } from '@tauri-apps/api/path';
+
 export function a11yClick(event: React.KeyboardEvent | React.MouseEvent) {
   if (event.type === 'click') {
     return true;
@@ -6,3 +13,54 @@ export function a11yClick(event: React.KeyboardEvent | React.MouseEvent) {
     return keyboard.key === 'Enter' || keyboard.key === ' ';
   }
 }
+
+export async function saveFile({
+  isTauri,
+  file,
+  filters,
+  defaultPath,
+}: {
+  isTauri: boolean;
+  file: File;
+  filters?: DialogFilter[];
+  defaultPath?: string;
+}): Promise<void> {
+  if (isTauri) {
+    await save({
+      filters,
+      defaultPath: defaultPath ? `${defaultPath}/${file.name}` : file.name,
+    })
+      .then(async (path) =>
+        path ? writeBinaryFile(path, await file.arrayBuffer()) : undefined
+      )
+      .catch((err) => {
+        error(err);
+      });
+  } else {
+    if ('share' in navigator) {
+      let canShare: boolean | null = null;
+      if ('canShare' in navigator) {
+        canShare = navigator.canShare({ files: [file] });
+      }
+      if (canShare || canShare === null) {
+        const shared = await navigator
+          .share({ files: [file] })
+          .then(() => true)
+          .catch((err) => {
+            error(err);
+            return false;
+          });
+
+        if (shared) return;
+      }
+    }
+    saveAs(file, file.name);
+  }
+}
+
+export function resolveDir(dir: ComputerDirectory): Promise<string> {
+  switch(dir) {
+    case ComputerDirectory.Documents:
+      return documentDir();
+  }
+}