Fixing small bugs

flake.nix

@@ -95,6 +95,7 @@
               freetype
               expat
               libayatana-appindicator
+              libusb1
             ])
             ++ lib.optionals pkgs.stdenv.isDarwin [
               pkgs.darwin.apple_sdk.frameworks.Security

gui/public/i18n/en/translation.ftl

@@ -19,6 +19,7 @@ tips-find_tracker = Not sure which tracker is which? Shake a tracker and it will
 tips-do_not_move_heels = Ensure your heels do not move during recording!
 tips-file_select = Drag & drop files to use, or <u>browse</u>.
 tips-tap_setup = You can slowly tap 2 times your tracker to choose it instead of selecting it from the menu.
+tips-turn_on_tracker = Using official SlimeVR trackers? Remember to <b><em>turn on your tracker</em></b> after connecting it to the PC!
 
 ## Body parts
 body_part-NONE = Unassigned
@@ -652,6 +653,7 @@ onboarding-assign_trackers-assigned = { $assigned } of { $trackers ->
 } assigned
 onboarding-assign_trackers-advanced = Show advanced assign locations
 onboarding-assign_trackers-next = I assigned all the trackers
+onboarding-assign_trackers-mirror_view = Mirror view
 
 ## Tracker assignment warnings
 # Note for devs, number is used for representing boolean states per bit.
@@ -761,8 +763,9 @@ onboarding-automatic_mounting-put_trackers_on-next = I have all my trackers on
 ## Tracker proportions method choose
 onboarding-choose_proportions = What proportion calibration method to use?
 # Multiline string
-onboarding-choose_proportions-description = Body proportions are used to know the measurements of your body. They're required to calculate the trackers' positions.
+onboarding-choose_proportions-description-v1 = Body proportions are used to know the measurements of your body. They're required to calculate the trackers' positions.
     When proportions of your body don't match the ones saved, your tracking precision will be worse and you will notice things like skating or sliding, or your body not matching your avatar well.
+    <b>You only need to measure your body once!</b> Unless they are wrong or your body has changed, then you don't need to do them again.
 onboarding-choose_proportions-auto_proportions = Automatic proportions
 # Italized text
 onboarding-choose_proportions-auto_proportions-subtitle = Recommended

gui/src/components/Preload.tsx

@@ -8,6 +8,8 @@ export function Preload() {
       <link rel="preload" href="/images/reset-pose.webp" as="image" />
       <link rel="preload" href="/images/slimes.webp" as="image" />
 
+      <link rel="preload" href="/videos/autobone.webm" as="video" />
+
       <link
         rel="preload"
         href="/sounds/quick-reset-started-sound.mp3"

gui/src/components/commons/BodyInteractions.tsx

@@ -12,6 +12,7 @@ export function BodyInteractions({
   width = 228,
   dotsSize = 15,
   variant = 'tracker-select',
+  mirror,
   onSelectRole,
 }: {
   leftControls?: ReactNode;
@@ -22,6 +23,7 @@ export function BodyInteractions({
   assignedRoles: BodyPart[];
   onSelectRole: (role: BodyPart) => void;
   highlightedRoles: BodyPart[];
+  mirror: boolean;
 }) {
   const { isMobile } = useBreakpoint('mobile');
 
@@ -166,7 +168,7 @@ export function BodyInteractions({
             variant === 'tracker-select' && 'mobile:mx-0 xs:mx-10'
           )}
         >
-          <PersonFrontIcon width={width}></PersonFrontIcon>
+          <PersonFrontIcon width={width} mirror={mirror}></PersonFrontIcon>
           {slotsButtonsPos.map(
             ({ top, left, height, width, id, hidden, buttonOffset }) => (
               <div

gui/src/components/commons/Input.tsx

@@ -98,10 +98,10 @@ export const InputInside = forwardRef<
         ></input>
         {type === 'password' && (
           <div
-            className="fill-background-10 absolute top-0 h-full flex flex-col justify-center right-0 p-4"
+            className="fill-background-10 absolute inset-y-0 right-0 pr-6 z-10 my-auto w-[16px] h-[16px]"
             onClick={togglePassword}
           >
-            <EyeIcon></EyeIcon>
+            <EyeIcon width={16} closed={forceText}></EyeIcon>
           </div>
         )}
         {error?.message && (

gui/src/components/commons/PersonFrontIcon.tsx

@@ -1,7 +1,36 @@
 import { BodyPart } from 'solarxr-protocol';
 
-export function PersonFrontIcon({ width }: { width?: number }) {
+export const SIDES = [
+  {
+    shoulder: BodyPart.LEFT_SHOULDER,
+    upperArm: BodyPart.LEFT_UPPER_ARM,
+    lowerArm: BodyPart.LEFT_LOWER_ARM,
+    hand: BodyPart.LEFT_HAND,
+    upperLeg: BodyPart.LEFT_UPPER_LEG,
+    lowerLeg: BodyPart.LEFT_LOWER_LEG,
+    foot: BodyPart.LEFT_FOOT,
+  },
+  {
+    shoulder: BodyPart.RIGHT_SHOULDER,
+    upperArm: BodyPart.RIGHT_UPPER_ARM,
+    lowerArm: BodyPart.RIGHT_LOWER_ARM,
+    hand: BodyPart.RIGHT_HAND,
+    upperLeg: BodyPart.RIGHT_UPPER_LEG,
+    lowerLeg: BodyPart.RIGHT_LOWER_LEG,
+    foot: BodyPart.RIGHT_FOOT,
+  },
+];
+
+export function PersonFrontIcon({
+  width,
+  mirror = true,
+}: {
+  width?: number;
+  mirror?: boolean;
+}) {
   const CIRCLE_RADIUS = 0.0001;
+  const left = +!mirror;
+  const right = +mirror;
 
   return (
     <svg
@@ -62,101 +91,101 @@ export function PersonFrontIcon({ width }: { width?: number }) {
         cx="128"
         cy="218"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.RIGHT_HAND]}
+        id={BodyPart[SIDES[right].hand]}
       />
       <circle
         className="body-part-circle"
         cx="115"
         cy="140"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.RIGHT_UPPER_ARM]}
+        id={BodyPart[SIDES[right].upperArm]}
       />
       <circle
         className="body-part-circle"
         cx="105"
         cy="105"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.RIGHT_SHOULDER]}
+        id={BodyPart[SIDES[right].shoulder]}
       />
       <circle
         className="body-part-circle"
         cx="125"
         cy="194"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.RIGHT_LOWER_ARM]}
+        id={BodyPart[SIDES[right].lowerArm]}
       />
       <circle
         className="body-part-circle"
         cx="97.004"
         cy="360"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.RIGHT_LOWER_LEG]}
+        id={BodyPart[SIDES[right].lowerLeg]}
       />
       <circle
         className="body-part-circle"
         cx="97"
         cy="250"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.RIGHT_UPPER_LEG]}
+        id={BodyPart[SIDES[right].upperLeg]}
       />
       <circle
         className="body-part-circle"
         cx="97.004"
         cy="380"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.RIGHT_FOOT]}
+        id={BodyPart[SIDES[right].foot]}
       />
 
       <circle
         className="body-part-circle"
         cx="36"
         cy="218"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.LEFT_HAND]}
+        id={BodyPart[SIDES[left].hand]}
       />
 
       <circle
         className="body-part-circle"
         cx="50"
         cy="140"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.LEFT_UPPER_ARM]}
+        id={BodyPart[SIDES[left].upperArm]}
       />
       <circle
         className="body-part-circle"
         cx="58"
         cy="105"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.LEFT_SHOULDER]}
+        id={BodyPart[SIDES[left].shoulder]}
       />
       <circle
         className="body-part-circle"
         cx="39"
         cy="194"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.LEFT_LOWER_ARM]}
+        id={BodyPart[SIDES[left].lowerArm]}
       />
       <circle
         className="body-part-circle"
         cx="67.004"
         cy="360"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.LEFT_LOWER_LEG]}
+        id={BodyPart[SIDES[left].lowerLeg]}
       />
 
       <circle
         className="body-part-circle"
         cx="67"
         cy="250"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.LEFT_UPPER_LEG]}
+        id={BodyPart[SIDES[left].upperLeg]}
       />
       <circle
         className="body-part-circle"
         cx="67.004"
         cy="380"
         r={CIRCLE_RADIUS}
-        id={BodyPart[BodyPart.LEFT_FOOT]}
+        id={BodyPart[SIDES[left].foot]}
       />
     </svg>
   );

gui/src/components/commons/icon/EyeIcon.tsx

@@ -1,12 +1,36 @@
-export function EyeIcon() {
-  return (
+export function EyeIcon({
+  width = 14,
+  closed = false,
+}: {
+  width?: number;
+  closed?: boolean;
+}) {
+  return closed ? (
     <svg
-      width="14"
-      height="10"
-      viewBox="0 0 14 10"
       xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="currentColor"
     >
-      <path d="M9.09817 4.99914C9.09817 6.11133 8.15709 7.01294 6.9962 7.01294C5.83532 7.01294 4.89424 6.11133 4.89424 4.99914C4.89424 3.88693 5.83532 2.98533 6.9962 2.98533C8.15709 2.98532 9.09817 3.88694 9.09817 4.99914ZM7 0.806091C5.79804 0.811423 4.55217 1.10403 3.37279 1.66426C2.49711 2.09735 1.64372 2.70838 0.90293 3.46257C0.539093 3.84756 0.0750283 4.40501 0 4.99979C0.00886667 5.515 0.561517 6.15093 0.90293 6.53703C1.5976 7.2616 2.42877 7.85557 3.37279 8.33578C4.47262 8.86954 5.68997 9.17685 7 9.19395C8.2031 9.18853 9.44869 8.89255 10.6268 8.33578C11.5024 7.90269 12.3563 7.29122 13.0971 6.53703C13.4609 6.15204 13.925 5.59457 14 4.99979C13.9911 4.48458 13.4385 3.84863 13.0971 3.46254C12.4024 2.73797 11.5708 2.14446 10.6268 1.66423C9.52751 1.13088 8.30716 0.82568 7 0.806091ZM6.99911 1.84732C8.8205 1.84732 10.297 3.25891 10.297 5.00025C10.297 6.74157 8.8205 8.15316 6.99911 8.15316C5.17773 8.15316 3.70124 6.74156 3.70124 5.00025C3.70124 3.25891 5.17773 1.84732 6.99911 1.84732Z" />
+      <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
+      <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
+      <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
+    </svg>
+  ) : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+      <path
+        fillRule="evenodd"
+        d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
+        clipRule="evenodd"
+      />
     </svg>
   );
 }

gui/src/components/commons/icon/PlayIcon.tsx

@@ -5,3 +5,20 @@ export function PlayIcon({ width = 33 }: { width?: number }) {
     </svg>
   );
 }
+
+export function PlayCircleIcon({ width = 24 }: { width?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      viewBox="0 0 24 24"
+      fill="inherit"
+    >
+      <path
+        fillRule="evenodd"
+        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}