Merge pull request #5374 from mozilla/nametag-fixes-1

Nametag fixes
Hubs-Foundation · Apr 21, 2022 · 0cffd5f · 0cffd5f
2 parents aba81a3 + 66dcd5d
commit 0cffd5f
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/src/components/name-tag.js b/src/components/name-tag.js
@@ -5,6 +5,7 @@ import qsTruthy from "../utils/qs_truthy";
 import { findAncestorWithComponent } from "../utils/scene-graph";
 import { THREE } from "aframe";
 import { setMatrixWorld } from "../utils/three-utils";
+import nextTick from "../utils/next-tick";
 
 const DEBUG = qsTruthy("debug");
 const NAMETAG_BACKGROUND_PADDING = 0.05;
@@ -50,8 +51,6 @@ AFRAME.registerComponent("name-tag", {
     this.onModelIkFirstTick = this.onModelIkFirstTick.bind(this);
     this.onStateChanged = this.onStateChanged.bind(this);
 
-    this.avatarRig = document.getElementById("avatar-rig").object3D;
-
     this.nametag = this.el.object3D;
     this.nametagIdentityName = this.el.querySelector(".identityName").object3D;
     this.nametagBackground = this.el.querySelector(".nametag-background").object3D;
@@ -74,15 +73,15 @@ AFRAME.registerComponent("name-tag", {
     });
 
     if (DEBUG) {
-      this.avatarBBAAHelper = new THREE.Box3Helper(this.avatarAABB, 0xffff00);
-      this.el.sceneEl.object3D.add(this.avatarBBAAHelper);
+      this.avatarAABBHelper = new THREE.Box3Helper(this.avatarAABB, 0xffff00);
+      this.el.sceneEl.object3D.add(this.avatarAABBHelper);
     }
 
     this.onStateChanged();
   },
 
   remove() {
-    if (DEBUG) this.el.sceneEl.object3D.remove(this.avatarBBAAHelper);
+    if (DEBUG) this.el.sceneEl.object3D.remove(this.avatarAABBHelper);
   },
 
   tick: (() => {
@@ -135,9 +134,9 @@ AFRAME.registerComponent("name-tag", {
       }
 
       if (DEBUG) {
-        this.updateAvatarModelBBAA();
-        this.avatarBBAAHelper.matrixNeedsUpdate = true;
-        this.avatarBBAAHelper.updateMatrixWorld(true);
+        this.updateAvatarModelAABB();
+        this.avatarAABBHelper.matrixNeedsUpdate = true;
+        this.avatarAABBHelper.updateMatrixWorld(true);
       }
     };
   })(),
@@ -219,12 +218,13 @@ AFRAME.registerComponent("name-tag", {
     this.model = model;
   },
 
-  onModelIkFirstTick() {
+  async onModelIkFirstTick() {
+    await nextTick();
     this.ikRoot = findAncestorWithComponent(this.el, "ik-root").object3D;
     this.neck = this.ikRoot.el.querySelector(".Neck").object3D;
     this.audioAnalyzer = this.ikRoot.el.querySelector(".AvatarRoot").components["networked-audio-analyser"];
 
-    this.updateAvatarModelBBAA();
+    this.updateAvatarModelAABB();
     const tmpVector = new THREE.Vector3();
     this.nametagHeight =
       Math.abs(tmpVector.subVectors(this.ikRoot.position, this.avatarAABBCenter).y) +
@@ -301,7 +301,7 @@ AFRAME.registerComponent("name-tag", {
     });
   },
 
-  updateAvatarModelBBAA() {
+  updateAvatarModelAABB() {
     if (!this.model) return;
     this.avatarAABB.setFromObject(this.model);
     this.avatarAABB.getSize(this.avatarAABBSize);

diff --git a/src/react-components/preferences-screen.js b/src/react-components/preferences-screen.js
@@ -119,17 +119,29 @@ export class NumberRangeSelector extends Component {
               e.target.focus();
               e.target.select();
             }}
-            onBlur={() => {
-              this.setState({ isFocused: false });
+            onBlur={e => {
+              const sanitizedInput = sanitize(e.target.value);
+              const numberOrReset = isNaN(parseFloat(sanitizedInput)) ? undefined : parseFloat(sanitizedInput);
+              this.setState({
+                displayValue:
+                  numberOrReset === undefined
+                    ? this.props.store.state.preferences[this.props.storeKey].toFixed(this.props.digits)
+                    : Math.min(Math.max(this.props.min, numberOrReset), this.props.max).toFixed(this.props.digits),
+                isFocused: false
+              });
             }}
             onFocus={() => {
               this.setState({ isFocused: true });
             }}
             onChange={e => {
               const sanitizedInput = sanitize(e.target.value);
-              this.setState({ displayValue: sanitizedInput, digitsFromUser: countDigits(sanitizedInput) });
               const numberOrReset = isNaN(parseFloat(sanitizedInput)) ? undefined : parseFloat(sanitizedInput);
-              this.props.setValue(numberOrReset);
+              const finalValue = Math.min(Math.max(this.props.min, numberOrReset), this.props.max);
+              this.setState({
+                displayValue: numberOrReset === undefined ? "" : finalValue,
+                digitsFromUser: countDigits(sanitizedInput)
+              });
+              this.props.setValue(finalValue);
             }}
           />
         </div>

diff --git a/src/systems/name-tag-visibility-system.js b/src/systems/name-tag-visibility-system.js
@@ -33,14 +33,14 @@ export class NameTagVisibilitySystem {
         if (this.nametagVisibility === "showSpeaking") {
           const now = Date.now();
           if (!nametag.isTalking && nametag.wasTalking) {
-            if (now - nametag.lastUpdateTime > 1000) {
+            if (now - nametag.lastUpdateTime > 3000) {
               nametag.shouldBeVisible = false;
             }
           } else if (nametag.isTalking && !nametag.wasTalking) {
             nametag.lastUpdateTime = Date.now();
             nametag.shouldBeVisible = true;
           } else if (!nametag.isTalking && !nametag.wasTalking) {
-            if (now - nametag.lastUpdateTime > 1000) {
+            if (now - nametag.lastUpdateTime > 3000) {
               nametag.shouldBeVisible = false;
             }
           }
@@ -49,8 +49,10 @@ export class NameTagVisibilitySystem {
         } else if (this.nametagVisibility === "showNone") {
           nametag.shouldBeVisible = false;
         } else if (this.nametagVisibility === "showClose") {
-          nametag.el.object3D.getWorldPosition(worldPos);
-          nametag.shouldBeVisible = worldPos.sub(avatarRigWorldPos).lengthSq() < this.nametagVisibilityDistance;
+          if (nametag.ikRoot) {
+            nametag.ikRoot.getWorldPosition(worldPos);
+            nametag.shouldBeVisible = worldPos.sub(avatarRigWorldPos).lengthSq() < this.nametagVisibilityDistance;
+          }
         } else {
           nametag.shouldBeVisible = true;
         }