From 7c96ee89c1eb9bad7819e9d1a9744348e97e0657 Mon Sep 17 00:00:00 2001
From: Uriel <imurx@proton.me>
Date: Fri, 13 Sep 2024 15:19:50 +0100
Subject: [PATCH] Fix audio/video issues not playing on Linux (#1151)

---
 .../autobone-steps/Recording.tsx              |  3 +-
 .../autobone-steps/StartRecording.tsx         |  5 ++-
 gui/src/sounds/sounds.tsx                     | 37 ++++++++++++++-----
 gui/src/utils/tauri.ts                        | 12 ++++++
 gui/tsconfig.json                             |  6 +--
 gui/vite.config.ts                            |  4 +-
 6 files changed, 49 insertions(+), 18 deletions(-)
 create mode 100644 gui/src/utils/tauri.ts

diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx
index ca434961be..17cc4052d0 100644
--- a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/Recording.tsx
@@ -8,6 +8,7 @@ import { P, match } from 'ts-pattern';
 import { AutoboneErrorModal } from './AutoboneErrorModal';
 import { PlayCircleIcon } from '@/components/commons/icon/PlayIcon';
 import { useDebouncedEffect } from '@/hooks/timeout';
+import { AUTOBONE_VIDEO } from './StartRecording';
 
 export function Recording({
   nextStep,
@@ -165,7 +166,7 @@ export function Recording({
         <video
           preload="auto"
           ref={videoRef}
-          src="/videos/autobone.webm"
+          src={AUTOBONE_VIDEO}
           className="min-w-[12rem] w-[12rem]"
           muted
           loop
diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx
index 6a72a22002..977b8c85bf 100644
--- a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx
+++ b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/StartRecording.tsx
@@ -6,6 +6,9 @@ import { useLocalization } from '@fluent/react';
 import { useEffect, useRef, useState } from 'react';
 import { PlayCircleIcon } from '@/components/commons/icon/PlayIcon';
 import { useDebouncedEffect } from '@/hooks/timeout';
+import { fetchResourceUrl } from '@/utils/tauri';
+
+export const AUTOBONE_VIDEO = await fetchResourceUrl('/videos/autobone.webm');
 
 export function StartRecording({
   nextStep,
@@ -98,7 +101,7 @@ export function StartRecording({
             <video
               preload="auto"
               ref={videoRef}
-              src="/videos/autobone.webm"
+              src={AUTOBONE_VIDEO}
               className="min-w-[12rem] w-[12rem]"
               muted
               loop
diff --git a/gui/src/sounds/sounds.tsx b/gui/src/sounds/sounds.tsx
index f5a23057e6..fbc6da1816 100644
--- a/gui/src/sounds/sounds.tsx
+++ b/gui/src/sounds/sounds.tsx
@@ -1,19 +1,36 @@
+import { fetchResourceUrl } from '@/utils/tauri';
 import { ResetType } from 'solarxr-protocol';
 
 const quickResetStartedSound = new Audio(
-  '/sounds/quick-reset-started-sound.mp3'
+  await fetchResourceUrl('/sounds/quick-reset-started-sound.mp3')
+);
+const fullResetStartedSound = new Audio(
+  await fetchResourceUrl('/sounds/full-reset-started-sound.mp3')
 );
-const fullResetStartedSound = new Audio('/sounds/full-reset-started-sound.mp3');
 const mountingResetStartedSound = new Audio(
-  '/sounds/mounting-reset-started-sound.mp3'
+  await fetchResourceUrl('/sounds/mounting-reset-started-sound.mp3')
+);
+const tapSetupSound1 = new Audio(
+  await fetchResourceUrl('/sounds/first-tap.mp3')
+);
+const tapSetupSound2 = new Audio(
+  await fetchResourceUrl('/sounds/second-tap.mp3')
+);
+const tapSetupSound3 = new Audio(
+  await fetchResourceUrl('/sounds/third-tap.mp3')
+);
+const tapSetupSound4 = new Audio(
+  await fetchResourceUrl('/sounds/fourth-tap.mp3')
+);
+const tapSetupSound5 = new Audio(
+  await fetchResourceUrl('/sounds/fifth-tap.mp3')
+);
+const tapSetupSoundEnd = new Audio(
+  await fetchResourceUrl('/sounds/end-tap.mp3')
+);
+const tapSetupExtraSound = new Audio(
+  await fetchResourceUrl('/sounds/tapextrasetup.mp3')
 );
-const tapSetupSound1 = new Audio('/sounds/first-tap.mp3');
-const tapSetupSound2 = new Audio('/sounds/second-tap.mp3');
-const tapSetupSound3 = new Audio('/sounds/third-tap.mp3');
-const tapSetupSound4 = new Audio('/sounds/fourth-tap.mp3');
-const tapSetupSound5 = new Audio('/sounds/fifth-tap.mp3');
-const tapSetupSoundEnd = new Audio('/sounds/end-tap.mp3');
-const tapSetupExtraSound = new Audio('/sounds/tapextrasetup.mp3');
 
 function restartAndPlay(audio: HTMLAudioElement, volume: number) {
   audio.volume = Math.min(1, Math.pow(volume, Math.E) + 0.05);
diff --git a/gui/src/utils/tauri.ts b/gui/src/utils/tauri.ts
new file mode 100644
index 0000000000..bf9c6145fb
--- /dev/null
+++ b/gui/src/utils/tauri.ts
@@ -0,0 +1,12 @@
+import { isTauri } from '@tauri-apps/api/core';
+import { type } from '@tauri-apps/plugin-os';
+
+/**
+ * Fetches the resource as a blob if necessary because of https://github.com/tauri-apps/tauri/issues/3725
+ * @param url static asset to fetch
+ * @returns URL
+ */
+export async function fetchResourceUrl(url: string) {
+  if (!isTauri() || type() !== 'linux') return url;
+  return URL.createObjectURL(await fetch(url).then((res) => res.blob()));
+}
diff --git a/gui/tsconfig.json b/gui/tsconfig.json
index 5b7b679bc8..1093a665f2 100644
--- a/gui/tsconfig.json
+++ b/gui/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2020",
+    "target": "es2022",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -17,9 +17,7 @@
     "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {
-        "@/*": [
-            "./src/*"
-        ],
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src"],
diff --git a/gui/vite.config.ts b/gui/vite.config.ts
index 502d59efaf..8df6d0e802 100644
--- a/gui/vite.config.ts
+++ b/gui/vite.config.ts
@@ -39,7 +39,7 @@ export default defineConfig({
   },
   plugins: [react(), i18nHotReload(), visualizer() as PluginOption],
   build: {
-    target: 'es2020',
+    target: 'es2022',
     emptyOutDir: true,
     commonjsOptions: {
       include: [/solarxr-protocol/, /node_modules/],
@@ -47,7 +47,7 @@ export default defineConfig({
   },
   optimizeDeps: {
     esbuildOptions: {
-      target: 'es2020',
+      target: 'es2022',
     },
     needsInterop: ['solarxr-protocol'],
     include: ['solarxr-protocol'],