github/SlimeVR-Server
1
1
Fork 0
mirror of https://github.com/SlimeVR/SlimeVR-Server.git synced 2026-04-06 02:01:58 +02:00
Code Issues 161 Packages Projects Releases Wiki Activity

Add preload component (#854)

Browse Source
This commit is contained in:
Uriel
2023-09-26 08:42:34 -03:00
committed by GitHub
parent e37b11844f
commit 2bc50b2bc2
5 changed files with 90 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gui/package.json
View File

@@ -31,6 +31,7 @@
"react": "^18.0.0",
"react-dev-utils": "^12.0.0",
"react-dom": "^18.0.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.29.0",
"react-modal": "3.15.1",
"react-responsive": "^9.0.2",
@@ -77,6 +78,7 @@
"@types/file-saver": "^2.0.5",
"@types/react": "18.0.25",
"@types/react-dom": "^18.0.5",
"@types/react-helmet": "^6.1.6",
"@types/react-modal": "3.13.1",
"@types/three": "^0.148.0",
"@typescript-eslint/eslint-plugin": "^5.60.1",

2
gui/src/App.tsx
View File

@@ -52,6 +52,7 @@ import { VRModePage } from './components/vr-mode/VRModePage';
import { InterfaceSettings } from './components/settings/pages/InterfaceSettings';
import { error, log } from './utils/logging';
import { AppLayout } from './AppLayout';
import { Preload } from './components/Preload';
export const GH_REPO = 'SlimeVR/SlimeVR-Server';
export const VersionContext = createContext('');
@@ -252,6 +253,7 @@ export default function App() {
<StatusProvider>
<VersionContext.Provider value={updateFound}>
<div className="h-full w-full text-standard bg-background-80 text-background-10">
<Preload />
<div className="flex-col h-full">
{!websocketAPI.isConnected && (
<>

48
gui/src/components/Preload.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { Helmet } from 'react-helmet';
export function Preload() {
return (
<Helmet>
<link rel="preload" href="/images/front-standing-pose.webp" as="image" />
<link rel="preload" href="/images/slime-girl.webp" as="image" />
<link rel="preload" href="/images/mounting-reset-pose.webp" as="image" />
<link rel="preload" href="/images/reset-pose.webp" as="image" />
<link rel="preload" href="/images/slimes.webp" as="image" />
<link
rel="preload"
href="/sounds/quick-reset-started-sound.mp3"
as="audio"
/>
<link
rel="preload"
href="/sounds/full-reset-started-sound.mp3"
as="audio"
/>
<link
rel="preload"
href="/sounds/mounting-reset-started-sound.mp3"
as="audio"
/>
<link rel="preload" href="/sounds/first-tap.mp3" as="audio" />
<link rel="preload" href="/sounds/second-tap.mp3" as="audio" />
<link rel="preload" href="/sounds/third-tap.mp3" as="audio" />
<link rel="preload" href="/sounds/fourth-tap.mp3" as="audio" />
<link rel="preload" href="/sounds/fifth-tap.mp3" as="audio" />
<link rel="preload" href="/sounds/end-tap.mp3" as="audio" />
<link rel="preload" href="/sounds/tapextrasetup.mp3" as="audio" />
<link
rel="preload"
href="/models/tracker.gltf"
as="fetch"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/models/extension.gltf"
as="fetch"
crossOrigin="anonymous"
/>
</Helmet>
);
}

18
gui/src/sounds/sounds.tsx
View File

@@ -15,24 +15,6 @@ const tapSetupSound5 = new Audio('/sounds/fifth-tap.mp3');
const tapSetupSoundEnd = new Audio('/sounds/end-tap.mp3');
const tapSetupExtraSound = new Audio('/sounds/tapextrasetup.mp3');
const sounds = [
quickResetStartedSound,
fullResetStartedSound,
mountingResetStartedSound,
tapSetupSound1,
tapSetupSound2,
tapSetupSound3,
tapSetupSound4,
tapSetupSound5,
tapSetupSoundEnd,
tapSetupExtraSound,
];
sounds.forEach((s) => {
s.play();
setTimeout(() => s.pause(), 10);
});
function restartAndPlay(audio: HTMLAudioElement, volume: number) {
audio.volume = Math.min(1, Math.pow(volume, Math.E) + 0.05);
if (audio.paused) {

38
package-lock.json generated
View File

@@ -48,6 +48,7 @@
"react": "^18.0.0",
"react-dev-utils": "^12.0.0",
"react-dom": "^18.0.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.29.0",
"react-modal": "3.15.1",
"react-responsive": "^9.0.2",
@@ -65,6 +66,7 @@
"@types/file-saver": "^2.0.5",
"@types/react": "18.0.25",
"@types/react-dom": "^18.0.5",
"@types/react-helmet": "^6.1.6",
"@types/react-modal": "3.13.1",
"@types/three": "^0.148.0",
"@typescript-eslint/eslint-plugin": "^5.60.1",
@@ -3394,6 +3396,15 @@
"@types/react": "*"
}
},
"node_modules/@types/react-helmet": {
"version": "6.1.6",
"resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.6.tgz",
"integrity": "sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-modal": {
"version": "3.13.1",
"resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
@@ -9333,6 +9344,25 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
},
"node_modules/react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
"dependencies": {
"object-assign": "^4.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.1.1",
"react-side-effect": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.3.0"
}
},
"node_modules/react-hook-form": {
"version": "7.45.4",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.4.tgz",
@@ -9446,6 +9476,14 @@
"react-dom": ">=16.8"
}
},
"node_modules/react-side-effect": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
"integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-use-measure": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",