@memori.ai/memori-react 7.8.8 → 7.9.1

package/src/components/Avatar/AvatarView/AvatarComponent/components/halfbodyAvatar.tsx

@@ -1,168 +1,150 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Object3D, SkinnedMesh, Vector3 } from 'three';
+import { useEffect, useMemo, useRef } from 'react';
+import { Object3D, SkinnedMesh } from 'three';
 import { useGLTF } from '@react-three/drei';
+import { useGraph, useFrame, useThree } from '@react-three/fiber';
 import { correctMaterials, isSkinnedMesh } from '../../../../../helpers/utils';
-import { useGraph, dispose, useFrame } from '@react-three/fiber';
-import { useAvatarBlink } from '../../utils/useEyeBlink';
-import useHeadMovement from '../../utils/useHeadMovement';
+import { MorphTargetController } from './MorphTargetController';
+import { AvatarPositionController } from './PositionController';
+import {
+  AVATAR_POSITION,
+  SCALE_LERP_FACTOR,
+  AVATAR_POSITION_ZOOMED,
+} from './constants';
 import { hideHands } from '../../utils/utils';
-import { AnimationMixer, MathUtils } from 'three';
+import useHeadMovement from '../../utils/useHeadMovement';
 
 interface HalfBodyAvatarProps {
   url: string;
   setMorphTargetInfluences: (morphTargetInfluences: any) => void;
-  headMovement?: boolean;
-  speaking?: boolean;
-  onLoaded?: () => void;
   setMorphTargetDictionary: (morphTargetDictionary: any) => void;
-  eyeBlink?: boolean;
-  morphTargetInfluences: any;
   updateCurrentViseme: (currentTime: number) => any;
-  morphTargetSmoothing?: number;
+  eyeBlink?: boolean;
+  heightValue?: number; // 0-100 slider value
+  avatarHeight: number;
+  avatarDepth: number;
+  onLoaded?: () => void;
+  onCameraZChange: (value: number) => void;
+  headMovement?: boolean;
 }
 
-const AVATAR_POSITION = new Vector3(0, -0.6, 0);
-// Blink configuration
-const BLINK_CONFIG = {
-  minInterval: 1000,
-  maxInterval: 5000,
-  blinkDuration: 150,
-};
-
 export default function HalfBodyAvatar({
   url,
   setMorphTargetInfluences,
   setMorphTargetDictionary,
-  eyeBlink,
-  onLoaded,
-  morphTargetSmoothing = 0.5,
   updateCurrentViseme,
+  eyeBlink = false,
+  avatarHeight = 50,
+  avatarDepth = 0,
+  headMovement = false,
+  onLoaded,
+  onCameraZChange,
 }: HalfBodyAvatarProps) {
   const { scene } = useGLTF(url);
   const { nodes, materials } = useGraph(scene);
-  const mixer = useRef(new AnimationMixer(scene));
-  const avatarMeshRef = useRef<SkinnedMesh | null>(null);
+  const { camera } = useThree();
 
-  // Blink state
-  const lastBlinkTime = useRef(0);
-  const nextBlinkTime = useRef(0);
-  const isBlinking = useRef(false);
-  const blinkStartTime = useRef(0);
+  const morphTargetControllerRef = useRef<MorphTargetController>();
+  const positionControllerRef = useRef<AvatarPositionController>();
+  const targetCameraZRef = useRef(camera.position.z);
 
-  const headMeshRef = useRef<SkinnedMesh>();
 
-  useEffect(() => {
-    correctMaterials(materials);
+  useHeadMovement(headMovement, nodes);
+  
+  const blinkStateRef = useRef({
+    isBlinking: false,
+    lastBlinkTime: 0,
+    nextBlinkTime: 0,
+    blinkStartTime: 0,
+  });
 
-    scene.traverse((object: Object3D) => {
-      if (object instanceof SkinnedMesh) {
-        if (object.name === 'GBNL__Head' || object.name === 'Wolf3D_Avatar') {
-          headMeshRef.current = object;
-          if (object.morphTargetDictionary && object.morphTargetInfluences) {
-            setMorphTargetDictionary(object.morphTargetDictionary);
-
-            const initialInfluences = Object.keys(
-              object.morphTargetDictionary
-            ).reduce((acc, key) => ({ ...acc, [key]: 0 }), {});
-            setMorphTargetInfluences(initialInfluences);
-          }
-        }
+  // Find head mesh
+  const headMesh = useMemo(() => {
+    let foundMesh: SkinnedMesh | undefined;
+    scene?.traverse((object: Object3D) => {
+      if (
+        object instanceof SkinnedMesh &&
+        (object.name === 'GBNL__Head' || object.name === 'Wolf3D_Avatar')
+      ) {
+        foundMesh = object;
       }
     });
+    return foundMesh;
+  }, [scene]);
 
-    onLoaded?.();
+  // Initialize controllers
+  useEffect(() => {
+    if (!positionControllerRef.current) {
+      positionControllerRef.current = new AvatarPositionController(
+        AVATAR_POSITION,
+        AVATAR_POSITION_ZOOMED,
+      );
+    }
 
+    if (headMesh) {
+      morphTargetControllerRef.current = new MorphTargetController(headMesh);
+
+      if (headMesh.morphTargetDictionary && headMesh.morphTargetInfluences) {
+        setMorphTargetDictionary(headMesh.morphTargetDictionary);
+        const initialInfluences = Object.keys(headMesh.morphTargetDictionary)
+          .reduce((acc, key) => ({ ...acc, [key]: 0 }), {});
+        setMorphTargetInfluences(initialInfluences);
+      }
+    }
+
+    correctMaterials(materials);
+    onLoaded?.();
+    hideHands(nodes);
+    
     return () => {
       Object.values(materials).forEach(material => material.dispose());
       Object.values(nodes)
         .filter(isSkinnedMesh)
         .forEach(mesh => mesh.geometry.dispose());
     };
-  }, [materials, nodes, url, onLoaded, scene]);
-  useFrame(state => {
-
-    if (
-      headMeshRef.current &&
-      headMeshRef.current.morphTargetDictionary &&
-      headMeshRef.current.morphTargetInfluences
-    ) {
-      const currentTime = state.clock.getElapsedTime() * 1000; // Convert to milliseconds
-
-      // Handle blinking
-      let blinkValue = 0;
-      if (eyeBlink) {
-        if (currentTime >= nextBlinkTime.current && !isBlinking.current) {
-          isBlinking.current = true;
-          blinkStartTime.current = currentTime;
-          lastBlinkTime.current = currentTime;
-          nextBlinkTime.current =
-            currentTime +
-            Math.random() *
-              (BLINK_CONFIG.maxInterval - BLINK_CONFIG.minInterval) +
-            BLINK_CONFIG.minInterval;
-        }
-
-        if (isBlinking.current) {
-          const blinkProgress =
-            (currentTime - blinkStartTime.current) / BLINK_CONFIG.blinkDuration;
-          if (blinkProgress <= 0.5) {
-            // Eyes closing
-            blinkValue = blinkProgress * 2;
-          } else if (blinkProgress <= 1) {
-            // Eyes opening
-            blinkValue = 2 - blinkProgress * 2;
-          } else {
-            // Blink finished
-            isBlinking.current = false;
-            blinkValue = 0;
-          }
-        }
-      }
+  }, [materials, nodes, url, onLoaded, scene, headMesh]);
 
-      const currentViseme = updateCurrentViseme(currentTime / 1000);
+  useEffect(() => {
+    if (positionControllerRef.current) {
+      positionControllerRef.current.updateHeight(avatarHeight, true);
+    }
+  }, [avatarHeight]);
+
+  useEffect(() => {
+    if (positionControllerRef.current && onCameraZChange) {
+      const newCameraZ = positionControllerRef.current.updateDepth(avatarDepth, true);
+      onCameraZChange(newCameraZ);
+    }
+  }, [avatarDepth, onCameraZChange]);
+
+  // Animation and morphing update loop
+  useFrame((state) => {
+    const currentTime = state.clock.elapsedTime * 1000;
 
-      // Update morph targets
-      Object.entries(headMeshRef.current.morphTargetDictionary).forEach(
-        ([key, index]) => {
-          if (typeof index === 'number') {
-            let targetValue = 0;
-
-            // Handle visemes (additive layer)
-            if (currentViseme && key === currentViseme.name) {
-              targetValue += currentViseme.weight * 1.3; // Amplify the effect
-            }
-
-            // Handle blinking (additive layer, only for 'eyesClosed')
-            if (key === 'eyesClosed' && eyeBlink) {
-              targetValue += blinkValue;
-            }
-
-            // Clamp the final value between 0 and 1
-            targetValue = MathUtils.clamp(targetValue, 0, 1);
-
-            // Apply smoothing
-            if (
-              headMeshRef.current &&
-              headMeshRef.current.morphTargetInfluences
-            ) {
-              headMeshRef.current.morphTargetInfluences[index] = MathUtils.lerp(
-                headMeshRef.current.morphTargetInfluences[index],
-                targetValue,
-                morphTargetSmoothing
-              );
-            }
-          }
-        }
+    // Update morph targets
+    if (morphTargetControllerRef.current) {
+      const currentViseme = updateCurrentViseme(currentTime / 1000);
+      morphTargetControllerRef.current.updateMorphTargets(
+        currentTime,
+        {},
+        currentViseme,
+        eyeBlink,
+        blinkStateRef.current,
       );
+    }
 
-      // Update the animation mixer
-      mixer.current.update(0.01); // Fixed delta time for consistent animation speed
+    // Update scale with smooth transition
+    if (scene && positionControllerRef.current) {
+      const newScale = positionControllerRef.current.updateScale(SCALE_LERP_FACTOR);
+      scene.scale.copy(newScale);
     }
   });
 
+  // Get current position from controller
+  const position = positionControllerRef.current?.getPosition() || AVATAR_POSITION;
+
   return (
-    <group position={AVATAR_POSITION}>
+    <group position={position}>
       <primitive object={scene} />
     </group>
   );
-}
+}

package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.css

@@ -0,0 +1,99 @@
+.memori--position-controls {
+  position: fixed;
+  z-index: 1000;
+  top: auto; /* Remove top positioning */
+  top: 65px; /* Position from bottom to avoid overlapping with buttons */
+  left: 15px; /* Remove left positioning */
+  display: flex;
+  width: 350px; /* Fixed width */
+  max-width: 90%; /* Maximum width relative to screen */
+  height: 300px;
+  flex-direction: column;
+  padding: 16px;
+  border-radius: 16px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background-color: var(--memori-inner-bg, #fff);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  gap: 0.5rem;
+  text-align: left;
+  transform: none; /* Remove transform */
+}
+
+/* Slider adjustments */
+.memori--slider-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  gap: 0.75rem;
+}
+
+.memori--slider-label {
+  margin-bottom: 4px;
+  font-size: 1rem;
+}
+
+/* Button adjustments */
+.memori--preset-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 8px;
+  gap: 8px;
+}
+
+.memori--preset-buttons button {
+  min-height: 36px;
+  flex: 1;
+  padding: 8px 4px;
+  font-size: 0.9rem;
+}
+
+/* Close button */
+.memori--position-controls-close {
+  position: absolute;
+  top: -25px;
+  right: -30px;
+  border-radius: 50%;
+  background-color: var(--memori-inner-bg, #fff);
+}
+
+.memori--position-controls-close-button {
+  min-width: 36px;
+  min-height: 36px;
+  padding: 8px;
+}
+
+/* Totem specific adjustments */
+@media screen and (max-width: 480px) {
+  .memori--position-controls {
+    right: 10px;
+    bottom: 80px;
+    width: 280px;
+  }
+  
+  .memori--preset-buttons button {
+    padding: 6px 4px;
+    font-size: 0.85rem;
+  }
+  
+  .memori--slider-container {
+    padding: 6px 0;
+  }
+}
+
+/* Portrait/vertical orientation */
+@media screen and (min-height: 800px) {
+  .memori--position-controls {
+    bottom: 120px;
+  }
+  
+  .memori--slider-label {
+    font-size: 1.1rem;
+  }
+  
+  .memori--preset-buttons button {
+    padding: 10px 6px;
+    font-size: 1rem;
+  }
+}

package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useRef } from 'react';
+import { setLocalConfig } from '../../../../../helpers/configuration';
+import { useTranslation } from 'react-i18next';
+import Slider from '../../../../../components/ui/Slider';
+import './positionControls.css';
+import Button from '../../../../ui/Button';
+import Close from '../../../../icons/Close';
+
+interface PositionControlsProps {
+  avatarHeight: number;
+  avatarDepth: number;
+  halfBody: boolean;
+  setAvatarHeight: (value: number) => void;
+  setAvatarDepth: (value: number) => void;
+  setEnablePositionControls: (value: boolean) => void;
+}
+
+// eslint-disable-next-line no-undef
+const PositionControls: React.FC<PositionControlsProps> = ({
+  avatarHeight,
+  avatarDepth,
+  setAvatarHeight,
+  setAvatarDepth,
+  halfBody,
+  setEnablePositionControls,
+}: PositionControlsProps) => {
+  const normalPosition = halfBody ? { height: 80, depth: 50 } : { height: 25, depth: 25 };
+  const zoomedPosition = halfBody ? { height: 55, depth: 10 } : { height: 15, depth: 5 };
+  const farPosition = halfBody ? { height: 100, depth: 80 } : { height: 65, depth: 100 };
+  const settingsRef = useRef<Record<string, any>>({
+    height: avatarHeight,
+    depth: avatarDepth,
+    zoomed: false,
+    normal: false,
+    far: false,
+  });
+  const { t } = useTranslation();
+
+  // Update settings when values change externally
+  useEffect(() => {
+    settingsRef.current.height = avatarHeight;
+    settingsRef.current.depth = avatarDepth;
+  }, [avatarHeight, avatarDepth]);
+
+  // Keyboard controls for depth
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === '-' || event.key === '_' && settingsRef.current.depth < 100) {
+        const newValue = Math.min(settingsRef.current.depth + 10, 100);
+        setAvatarDepth(newValue);
+        setLocalConfig('avatarDepth', newValue);
+      } else if (
+        (event.key === '+' || event.key === '=') &&
+        settingsRef.current.depth > -100
+      ) {
+        const newValue = Math.max(settingsRef.current.depth - 10, -100);
+        setAvatarDepth(newValue);
+        setLocalConfig('avatarDepth', newValue);
+      }
+    };
+
+    //add event listeners for plus and minus
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [setAvatarDepth]);
+
+  useEffect(() => {
+    const handleArrowUp = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowUp' && settingsRef.current.height < 100) {
+        const newValue = settingsRef.current.height + 5;
+        setAvatarHeight(newValue);
+        setLocalConfig('avatarHeight', newValue);
+      }
+    };
+
+    const handleArrowDown = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowDown' && settingsRef.current.height > 0) {
+        const newValue = settingsRef.current.height - 5;
+        setAvatarHeight(newValue);
+        setLocalConfig('avatarHeight', newValue);
+      }
+    };
+
+    window.addEventListener('keydown', handleArrowUp);
+    window.addEventListener('keydown', handleArrowDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleArrowUp);
+      window.removeEventListener('keydown', handleArrowDown);
+    };
+  }, [setAvatarHeight]);
+
+  return (
+    <div className="memori--position-controls">
+      <div className="memori--position-controls-close">
+        <Button
+          ghost
+          icon={<Close />}
+          outlined
+          danger
+          shape="circle"
+          className="memori--position-controls-close-button"
+          onClick={() => {
+            setEnablePositionControls(false);
+          }}
+        />
+      </div>
+      <div className="memori--slider-container">
+        <Slider
+          defaultValue={settingsRef.current.height}
+          min={0.5}
+          max={100}
+          label={<label className="memori--slider-label">{t('write_and_speak.height')}</label>}
+          step={1}
+          onChange={(value: number) => {
+            setAvatarHeight(value);
+            setLocalConfig('avatarHeight', value);
+          }}
+        />
+      </div>
+      <div className="memori--slider-container">
+        <Slider
+          defaultValue={settingsRef.current.depth}
+          min={0.5}
+          max={100}
+          step={5}
+          label={<label className="memori--slider-label">{t('write_and_speak.depth')}</label>}
+          onChange={(value: number) => {
+            setAvatarDepth(value);
+            setLocalConfig('avatarDepth', value);
+          }}
+        />
+      </div>
+      <div className="memori--preset-buttons">
+        <Button
+          outlined
+          isActive={
+            avatarHeight === (halfBody ? zoomedPosition.height : normalPosition.height) &&
+            avatarDepth === (halfBody ? zoomedPosition.depth : normalPosition.depth)
+          }
+          onClick={() => {
+            setAvatarHeight(zoomedPosition.height);
+            setAvatarDepth(zoomedPosition.depth);
+            setLocalConfig('avatarHeight', zoomedPosition.height);
+            setLocalConfig('avatarDepth', zoomedPosition.depth);
+          }}
+        >
+          {t('write_and_speak.zoomed')}
+        </Button>
+        <Button
+          outlined
+          isActive={
+            avatarHeight === (halfBody ? normalPosition.height : zoomedPosition.height) &&
+            avatarDepth === (halfBody ? normalPosition.depth : zoomedPosition.depth)
+          }
+          onClick={() => {
+            setAvatarHeight(normalPosition.height);
+            setAvatarDepth(normalPosition.depth);
+            setLocalConfig('avatarHeight', normalPosition.height);
+            setLocalConfig('avatarDepth', normalPosition.depth);
+          }}
+        >
+          {t('write_and_speak.normal')}
+        </Button>
+        <Button
+          outlined
+          isActive={
+            avatarHeight === (halfBody ? farPosition.height : normalPosition.height) &&
+            avatarDepth === (halfBody ? farPosition.depth : normalPosition.depth)
+          }
+          onClick={() => {
+            setAvatarHeight(farPosition.height);
+            setAvatarDepth(farPosition.depth);
+            setLocalConfig('avatarHeight', farPosition.height);
+            setLocalConfig('avatarDepth', farPosition.depth);
+          }}
+        >
+          {t('write_and_speak.far')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default PositionControls;