Fix many GUI bugs found (#1129)

SlimeVR · Aug 7, 2024 · 9238c72 · 9238c72
1 parent 518fe8d
commit 9238c72
Show file tree

Hide file tree

Showing 21 changed files with 141 additions and 148 deletions.
diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
@@ -780,11 +780,11 @@ onboarding-choose_mounting = What mounting calibration method to use?
 onboarding-choose_mounting-description = Mounting orientation corrects for the placement of trackers on your body.
 onboarding-choose_mounting-auto_mounting = Automatic mounting
 # Italized text
-onboarding-choose_mounting-auto_mounting-label = Experimental
+onboarding-choose_mounting-auto_mounting-label-v2 = Recommended
 onboarding-choose_mounting-auto_mounting-description = This will automatically detect the mounting orientations for all of your trackers from 2 poses
 onboarding-choose_mounting-manual_mounting = Manual mounting
 # Italized text
-onboarding-choose_mounting-manual_mounting-label = Recommended
+onboarding-choose_mounting-manual_mounting-label-v2 = Might not be precise enough
 onboarding-choose_mounting-manual_mounting-description = This will let you choose the mounting orientation manually for each tracker
 # Multiline text
 onboarding-choose_mounting-manual_modal-title = Are you sure you want to do

diff --git a/gui/src-tauri/src/presence.rs b/gui/src-tauri/src/presence.rs
@@ -9,7 +9,6 @@ const APP_ID: ds::AppId = 1237970689009647639;
 
 pub struct DiscordClient {
 	pub discord: ds::Discord,
-	pub user: ds::user::User,
 	pub wheel: ds::wheel::Wheel,
 }
 
@@ -43,11 +42,7 @@ async fn make_client(subs: ds::Subscriptions) -> Result<Option<DiscordClient>> {
 
 	log::info!(target: "discord_presence", "connected to Discord, local user name is {}", user.username);
 
-	Ok(Some(DiscordClient {
-		discord,
-		user,
-		wheel,
-	}))
+	Ok(Some(DiscordClient { discord, wheel }))
 }
 
 async fn client_exists(client: &State<'_, ExposedClient>) -> bool {

diff --git a/gui/src/components/commons/BodyInteractions.tsx b/gui/src/components/commons/BodyInteractions.tsx
@@ -173,8 +173,7 @@ export function BodyInteractions({
             ({ top, left, height, width, id, hidden, buttonOffset }) => (
               <div
                 key={id}
-                hidden={hidden}
-                className="absolute z-10"
+                className={classNames('absolute z-10', hidden && 'hidden')}
                 onClick={() => onSelectRole((BodyPart as any)[id])}
                 style={{
                   top: top + height / 2 - dotsSize / 2 + buttonOffset.top,

diff --git a/gui/src/components/commons/Typography.tsx b/gui/src/components/commons/Typography.tsx
@@ -1,3 +1,4 @@
+import { useConfig } from '@/hooks/config';
 import classNames from 'classnames';
 import { createElement, ReactNode, useMemo } from 'react';
 
@@ -8,6 +9,7 @@ export function Typography({
   whitespace = 'whitespace-normal',
   children,
   italic = false,
+  truncate = false,
   textAlign,
 }: {
   variant?:
@@ -18,6 +20,7 @@ export function Typography({
     | 'mobile-title';
   bold?: boolean;
   italic?: boolean;
+  truncate?: boolean;
   block?: boolean;
   color?: 'primary' | 'secondary' | string;
   whitespace?:
@@ -45,6 +48,7 @@ export function Typography({
     };
     return tags[variant];
   }, [variant]);
+  const { config } = useConfig();
 
   return createElement(
     tag,
@@ -65,6 +69,9 @@ export function Typography({
         whitespace,
         textAlign,
         italic && 'italic',
+        truncate && 'leading-3 text-ellipsis',
+        truncate && (config?.textSize ?? 12) > 12 && 'line-clamp-1',
+        truncate && (config?.textSize ?? 12) <= 12 && 'line-clamp-2',
       ]),
     },
     children || []

diff --git a/gui/src/components/onboarding/pages/CalibrationTutorial.tsx b/gui/src/components/onboarding/pages/CalibrationTutorial.tsx
@@ -2,12 +2,16 @@ import { Localized, useLocalization } from '@fluent/react';
 import { useOnboarding } from '@/hooks/onboarding';
 import { Button } from '@/components/commons/Button';
 import { Typography } from '@/components/commons/Typography';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ProgressBar } from '@/components/commons/ProgressBar';
 import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
 import { useCountdown } from '@/hooks/countdown';
 import classNames from 'classnames';
 import { TaybolIcon } from '@/components/commons/icon/TaybolIcon';
+import { useTrackers } from '@/hooks/tracker';
+import { useRestCalibrationTrackers } from '@/hooks/imu-logic';
+import { averageVector, Vector3FromVec3fT } from '@/maths/vector3';
+import { Vector3 } from 'three';
 
 export enum CalibrationStatus {
   SUCCESS,
@@ -17,17 +21,58 @@ export enum CalibrationStatus {
 }
 
 export const IMU_CALIBRATION_TIME = 4;
+const ACCEL_TOLERANCE = 0.2; // m/s^2
 
 export function CalibrationTutorialPage() {
   const { l10n } = useLocalization();
   const { applyProgress } = useOnboarding();
   const [calibrationStatus, setCalibrationStatus] = useState(
     CalibrationStatus.WAITING
   );
-  const { timer, isCounting, startCountdown } = useCountdown({
+  const { timer, isCounting, startCountdown, abortCountdown } = useCountdown({
     duration: IMU_CALIBRATION_TIME,
     onCountdownEnd: () => setCalibrationStatus(CalibrationStatus.SUCCESS),
   });
+  const { useConnectedIMUTrackers } = useTrackers();
+  const connectedIMUTrackers = useConnectedIMUTrackers();
+  const restCalibrationTrackers =
+    useRestCalibrationTrackers(connectedIMUTrackers);
+  const [rested, setRested] = useState(false);
+  const lastValueMap = useRef(new Map<number, Vector3[]>());
+  useEffect(() => {
+    const accelLength = restCalibrationTrackers.every((x) => {
+      if (
+        x.tracker.trackerId?.trackerNum === undefined ||
+        x.tracker.trackerId.deviceId?.id === undefined ||
+        !x.tracker.linearAcceleration
+      )
+        return false;
+
+      const trackerId =
+        x.tracker.trackerId.trackerNum + (x.tracker.trackerId.trackerNum << 8);
+      const lastValues = lastValueMap.current.get(trackerId) ?? [];
+      lastValueMap.current.set(trackerId, lastValues);
+
+      const vec3 = Vector3FromVec3fT(x.tracker.linearAcceleration);
+      if (lastValues.length > 5) {
+        lastValues.shift();
+        const avg = averageVector(lastValues).lengthSq();
+        lastValues.push(vec3);
+        return vec3.lengthSq() <= avg + ACCEL_TOLERANCE ** 2;
+      }
+      lastValues.push(vec3);
+      return false;
+    });
+
+    setRested(accelLength || restCalibrationTrackers.length === 0);
+  }, [restCalibrationTrackers]);
+
+  useEffect(() => {
+    if (calibrationStatus === CalibrationStatus.CALIBRATING && !rested) {
+      setCalibrationStatus(CalibrationStatus.ERROR);
+      abortCountdown();
+    }
+  }, [calibrationStatus, rested]);
 
   const progressBarClass = useMemo(() => {
     switch (calibrationStatus) {
@@ -101,7 +146,8 @@ export function CalibrationTutorialPage() {
                   progress={
                     isCounting
                       ? (IMU_CALIBRATION_TIME - timer) / IMU_CALIBRATION_TIME
-                      : calibrationStatus === CalibrationStatus.SUCCESS
+                      : calibrationStatus === CalibrationStatus.SUCCESS ||
+                          calibrationStatus === CalibrationStatus.ERROR
                         ? 1
                         : 0
                   }
@@ -127,9 +173,11 @@ export function CalibrationTutorialPage() {
                     setCalibrationStatus(CalibrationStatus.CALIBRATING);
                     startCountdown();
                   }}
-                  disabled={isCounting}
-                  hidden={CalibrationStatus.SUCCESS === calibrationStatus}
-                  className="xs:ml-auto"
+                  disabled={isCounting || !rested}
+                  className={classNames(
+                    'xs:ml-auto',
+                    CalibrationStatus.SUCCESS === calibrationStatus && 'hidden'
+                  )}
                 >
                   {l10n.getString('onboarding-calibration_tutorial-calibrate')}
                 </Button>
@@ -148,7 +196,7 @@ export function CalibrationTutorialPage() {
           </div>
           <div className="mobile:hidden flex self-center w-[32rem] mobile:absolute">
             <div className="stroke-none xs:fill-background-10 mobile:fill-background-50 mobile:blur-sm">
-              <TaybolIcon width="500"></TaybolIcon>
+              <TaybolIcon width="450"></TaybolIcon>
             </div>
           </div>
         </div>

diff --git a/gui/src/components/onboarding/pages/ConnectTracker.tsx b/gui/src/components/onboarding/pages/ConnectTracker.tsx
@@ -21,7 +21,7 @@ import { ProgressBar } from '@/components/commons/ProgressBar';
 import { TipBox } from '@/components/commons/TipBox';
 import { Typography } from '@/components/commons/Typography';
 import { TrackerCard } from '@/components/tracker/TrackerCard';
-import { useBnoExists } from '@/hooks/imu-logic';
+import { useIsRestCalibrationTrackers } from '@/hooks/imu-logic';
 import './ConnectTracker.scss';
 
 const statusLabelMap = {
@@ -67,7 +67,7 @@ export function ConnectTrackersPage() {
 
   const connectedIMUTrackers = useConnectedIMUTrackers();
 
-  const bnoExists = useBnoExists(connectedIMUTrackers);
+  const bnoExists = useIsRestCalibrationTrackers(connectedIMUTrackers);
 
   useEffect(() => {
     if (!state.wifi) {

diff --git a/gui/src/components/onboarding/pages/ResetTutorial.tsx b/gui/src/components/onboarding/pages/ResetTutorial.tsx
@@ -134,9 +134,11 @@ export function ResetTutorialPage() {
             </Button>
 
             <Button
-              hidden={curIndex + 1 >= order.length}
               variant="secondary"
-              className="ml-auto"
+              className={classNames(
+                'ml-auto',
+                curIndex + 1 >= order.length && 'hidden'
+              )}
               onClick={() => {
                 setCurIndex(curIndex + 1);
               }}

diff --git a/gui/src/components/onboarding/pages/WifiCreds.tsx b/gui/src/components/onboarding/pages/WifiCreds.tsx
@@ -6,7 +6,7 @@ import { Input } from '@/components/commons/Input';
 import { Typography } from '@/components/commons/Typography';
 import classNames from 'classnames';
 import { useTrackers } from '@/hooks/tracker';
-import { useBnoExists } from '@/hooks/imu-logic';
+import { useIsRestCalibrationTrackers } from '@/hooks/imu-logic';
 
 export function WifiCredsPage() {
   const { l10n } = useLocalization();
@@ -17,7 +17,7 @@ export function WifiCredsPage() {
 
   applyProgress(0.2);
 
-  const bnoExists = useBnoExists(connectedIMUTrackers);
+  const isRestCalibration = useIsRestCalibrationTrackers(connectedIMUTrackers);
 
   return (
     <form
@@ -97,7 +97,7 @@ export function WifiCredsPage() {
                 variant="secondary"
                 className={state.alonePage ? 'opacity-0' : ''}
                 to={
-                  bnoExists
+                  isRestCalibration
                     ? '/onboarding/calibration-tutorial'
                     : '/onboarding/assign-tutorial'
                 }

diff --git a/gui/src/components/onboarding/pages/assignment-preparation/AssignmentTutorial.tsx b/gui/src/components/onboarding/pages/assignment-preparation/AssignmentTutorial.tsx
@@ -3,7 +3,7 @@ import { useOnboarding } from '@/hooks/onboarding';
 import { Button } from '@/components/commons/Button';
 import { Typography } from '@/components/commons/Typography';
 import { useTrackers } from '@/hooks/tracker';
-import { useBnoExists } from '@/hooks/imu-logic';
+import { useIsRestCalibrationTrackers } from '@/hooks/imu-logic';
 import { StickerSlime } from './StickerSlime';
 import { TrackerArrow } from './TrackerArrow';
 import { ExtensionArrow } from './ExtensionArrow';
@@ -13,7 +13,7 @@ export function AssignmentTutorialPage() {
   const { applyProgress } = useOnboarding();
   const { useConnectedIMUTrackers } = useTrackers();
   const connectedIMUTrackers = useConnectedIMUTrackers();
-  const bnoExists = useBnoExists(connectedIMUTrackers);
+  const isRestCalibration = useIsRestCalibrationTrackers(connectedIMUTrackers);
 
   applyProgress(0.46);
 
@@ -67,7 +67,7 @@ export function AssignmentTutorialPage() {
               <Button
                 variant="secondary"
                 to={
-                  bnoExists
+                  isRestCalibration
                     ? '/onboarding/calibration-tutorial'
                     : '/onboarding/wifi-creds'
                 }

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
@@ -7,6 +7,7 @@ import { useLocalization } from '@fluent/react';
 import { P, match } from 'ts-pattern';
 import { AutoboneErrorModal } from './AutoboneErrorModal';
 import { PlayCircleIcon } from '@/components/commons/icon/PlayIcon';
+import { useDebouncedEffect } from '@/hooks/timeout';
 
 export function Recording({
   nextStep,
@@ -52,6 +53,14 @@ export function Recording({
     setPaused(videoRef.current.paused);
   }
 
+  useDebouncedEffect(
+    () => {
+      if (paused) videoRef.current?.pause();
+    },
+    [paused],
+    250
+  );
+
   useEffect(() => {
     if (!active && !paused) {
       toggleVideo();
@@ -154,7 +163,7 @@ export function Recording({
         </div>
 
         <video
-          preload=""
+          preload="auto"
           ref={videoRef}
           src="/videos/autobone.webm"
           className="min-w-[12rem] w-[12rem]"

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
@@ -5,6 +5,7 @@ import { Typography } from '@/components/commons/Typography';
 import { useLocalization } from '@fluent/react';
 import { useEffect, useRef, useState } from 'react';
 import { PlayCircleIcon } from '@/components/commons/icon/PlayIcon';
+import { useDebouncedEffect } from '@/hooks/timeout';
 
 export function StartRecording({
   nextStep,
@@ -33,6 +34,14 @@ export function StartRecording({
     setPaused(videoRef.current.paused);
   }
 
+  useDebouncedEffect(
+    () => {
+      if (paused) videoRef.current?.pause();
+    },
+    [paused],
+    250
+  );
+
   useEffect(() => {
     if (!active && !paused) toggleVideo();
   }, [active]);
@@ -87,7 +96,7 @@ export function StartRecording({
             </div>
 
             <video
-              preload=""
+              preload="auto"
               ref={videoRef}
               src="/videos/autobone.webm"
               className="min-w-[12rem] w-[12rem]"

diff --git a/gui/src/components/onboarding/pages/mounting/ManualMounting.tsx b/gui/src/components/onboarding/pages/mounting/ManualMounting.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { AssignTrackerRequestT, BodyPart, RpcMessage } from 'solarxr-protocol';
 import { FlatDeviceTracker } from '@/hooks/app';
 import { useOnboarding } from '@/hooks/onboarding';
@@ -20,7 +20,7 @@ export function ManualMountingPage() {
   const { l10n } = useLocalization();
   const { applyProgress, state } = useOnboarding();
   const { sendRPCPacket } = useWebsocketAPI();
-  const { setConfig, config } = useConfig();
+  const { config } = useConfig();
 
   const [selectedRole, setSelectRole] = useState<BodyPart>(BodyPart.NONE);
 
@@ -29,10 +29,6 @@ export function ManualMountingPage() {
   const { useAssignedTrackers } = useTrackers();
   const assignedTrackers = useAssignedTrackers();
 
-  useEffect(() => {
-    setConfig({ doneManualMounting: true });
-  }, []);
-
   const trackerPartGrouped = useMemo(
     () =>
       assignedTrackers.reduce<{ [key: number]: FlatDeviceTracker[] }>(