Fix audio/video issues not playing on Linux (#1151)

SlimeVR · Sep 13, 2024 · 7c96ee8 · 7c96ee8
1 parent 1c867ef
commit 7c96ee8
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 18 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -39,15 +39,15 @@ export default defineConfig({
   },
   plugins: [react(), i18nHotReload(), visualizer() as PluginOption],
   build: {
-    target: 'es2020',
+    target: 'es2022',
     emptyOutDir: true,
     commonjsOptions: {
       include: [/solarxr-protocol/, /node_modules/],
     },
   },
   optimizeDeps: {
     esbuildOptions: {
-      target: 'es2020',
+      target: 'es2022',
     },
     needsInterop: ['solarxr-protocol'],
     include: ['solarxr-protocol'],