@memori.ai/memori-react 7.4.6 → 7.5.0

package/src/components/AvatarView/index.tsx

@@ -1,101 +0,0 @@
-import { CSSProperties } from 'react';
-import React, { Suspense } from 'react';
-import Avatar from './components/avatar';
-import FullbodyAvatar, { AvatarProps } from './components/fullbodyAvatar';
-import Loader from './components/loader';
-import { Canvas } from '@react-three/fiber';
-import { OrbitControls, SpotLight, Environment } from '@react-three/drei';
-import { isAndroid, isiOS } from '../../helpers/utils';
-
-export interface Props {
-  url: string;
-  sex: 'MALE' | 'FEMALE';
-  fallbackImg?: string;
-  eyeBlink?: boolean;
-  headMovement?: boolean;
-  rotateAvatar?: boolean;
-  speaking?: boolean;
-  style?: CSSProperties;
-  fallback?: React.ReactNode;
-  halfBody?: boolean;
-  animation?: AvatarProps['animation'];
-}
-
-const defaultStylesHalfBody = {
-  width: '250px',
-  height: '250px',
-  backgroundColor: 'white',
-  borderRadius: '100%',
-};
-
-const defaultStylesFullBody = {
-  width: '500px',
-  height: '500px',
-  backgroundColor: 'white',
-};
-
-export default function AvatarView({
-  url,
-  sex,
-  fallbackImg,
-  style,
-  rotateAvatar,
-  eyeBlink,
-  headMovement,
-  speaking,
-  fallback,
-  halfBody = true,
-  animation,
-}: Props) {
-  const defaultStyles = halfBody
-    ? defaultStylesHalfBody
-    : defaultStylesFullBody;
-
-  return (
-    <Canvas
-      style={style || defaultStyles}
-      camera={
-        halfBody
-          ? {
-              fov: 40,
-              position: [0, 0, 0.6],
-            }
-          : { fov: 40, position: [0, 0.0000175, 3] }
-      }
-    >
-      <Suspense fallback={fallback || <Loader fallbackImg={fallbackImg} />}>
-        {isAndroid() || isiOS() ? (
-          <SpotLight
-            distance={100}
-            position={[-0.3, 0.2, 1.25]}
-            angle={Math.PI / 2}
-            attenuation={5}
-            anglePower={5}
-          />
-        ) : (
-          <Environment files="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/venice_sunset_1k.hdr" />
-        )}
-        {rotateAvatar && halfBody && (
-          <OrbitControls enablePan={false} enableZoom={false} />
-        )}
-        {halfBody ? (
-          <Avatar
-            url={url}
-            eyeBlink={eyeBlink}
-            headMovement={headMovement}
-            speaking={speaking}
-          />
-        ) : (
-          <FullbodyAvatar
-            url={url}
-            sex={sex}
-            eyeBlink={eyeBlink}
-            headMovement={headMovement}
-            speaking={speaking}
-            animation={animation}
-          />
-        )}
-      </Suspense>
-    </Canvas>
-  );
-}

package/src/components/AvatarView/utils/useEyeBlink.ts

@@ -1,48 +0,0 @@
-import { SkinnedMesh } from 'three';
-import { Nodes } from './utils';
-import { useEffect } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-let blinkTime: number = 999;
-let timeout: NodeJS.Timeout;
-
-let headMesh: SkinnedMesh;
-let morphIndex: number = 0;
-
-const setNextBlink = () => {
-  blinkTime = 0;
-  timeout = setTimeout(setNextBlink, Math.random() * 5000 + 2000);
-};
-
-export default function useEyeBlink(
-  enabled: boolean | undefined,
-  nodes: Nodes
-) {
-  useEffect(() => {
-    if (!enabled) return;
-
-    headMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar) as SkinnedMesh;
-
-    if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {
-      morphIndex = headMesh.morphTargetDictionary.eyesClosed;
-    }
-
-    timeout = setTimeout(setNextBlink, 3000);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [nodes, enabled]);
-
-  useFrame((_, delta) => {
-    if (!enabled) return;
-
-    if (blinkTime < 2 && headMesh?.morphTargetInfluences) {
-      let value = Math.abs(Math.sin((blinkTime * Math.PI) / 2));
-      blinkTime += delta * 10;
-      headMesh.morphTargetInfluences[morphIndex] = value;
-    } else if (headMesh?.morphTargetInfluences) {
-      headMesh.morphTargetInfluences[morphIndex] = 0;
-    }
-  });
-}

package/src/components/AvatarView/utils/useMouthSpeaking.ts

@@ -1,70 +0,0 @@
-import { Nodes } from './utils';
-import { SkinnedMesh } from 'three';
-import { useEffect } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-let mouthMoveTime: number = 999;
-let timeout: NodeJS.Timeout;
-
-let mouthMesh: SkinnedMesh;
-let mouthOpenMorphIndex: number = 0;
-let mouthSmileMorphIndex: number = 0;
-let mouthFunnerMorphIndex: number = 0;
-let mouthPuckerMorphIndex: number = 0;
-
-const setNextMouthOpen = () => {
-  mouthMoveTime = 0;
-  timeout = setTimeout(setNextMouthOpen, Math.random() * 500);
-};
-
-// https://learn.microsoft.com/it-it/azure/cognitive-services/speech-service/how-to-speech-synthesis-viseme?tabs=visemeid&pivots=programming-language-javascript
-
-export default function useMouthSpeaking(
-  speaking: boolean | undefined,
-  nodes: Nodes
-) {
-  useEffect(() => {
-    if (!speaking) return;
-
-    mouthMesh = (nodes.Wolf3D_Head ||
-      nodes.Wolf3D_Avatar ||
-      nodes.Wolf3D_Avatar001) as SkinnedMesh;
-
-    if (mouthMesh?.morphTargetDictionary && mouthMesh?.morphTargetInfluences) {
-      mouthOpenMorphIndex = mouthMesh.morphTargetDictionary.mouthOpen;
-      mouthSmileMorphIndex = mouthMesh.morphTargetDictionary.mouthSmile;
-      mouthFunnerMorphIndex = mouthMesh.morphTargetDictionary.mouthFunner;
-      mouthPuckerMorphIndex = mouthMesh.morphTargetDictionary.mouthPucker;
-    }
-
-    timeout = setTimeout(setNextMouthOpen, 200);
-    // timeout = setTimeout(visemeDD = 0.4, start - audioOffset);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [nodes, speaking]);
-
-  useFrame((_, delta) => {
-    if (!speaking) {
-      if (mouthMesh?.morphTargetInfluences) {
-        mouthMesh.morphTargetInfluences[mouthOpenMorphIndex] = 0;
-        mouthMesh.morphTargetInfluences[mouthSmileMorphIndex] = 0;
-        mouthMesh.morphTargetInfluences[mouthFunnerMorphIndex] = 0;
-        mouthMesh.morphTargetInfluences[mouthPuckerMorphIndex] = 0;
-      }
-    } else if (mouthMoveTime < 2 && mouthMesh?.morphTargetInfluences) {
-      let value = Math.abs(Math.sin((mouthMoveTime * Math.PI) / 2));
-      mouthMoveTime += delta * 10;
-      mouthMesh.morphTargetInfluences[mouthOpenMorphIndex] = value / 3;
-      mouthMesh.morphTargetInfluences[mouthSmileMorphIndex] = value / 10;
-      mouthMesh.morphTargetInfluences[mouthFunnerMorphIndex] = value / 7;
-      mouthMesh.morphTargetInfluences[mouthPuckerMorphIndex] = value / 5;
-    } else if (mouthMesh?.morphTargetInfluences) {
-      mouthMesh.morphTargetInfluences[mouthOpenMorphIndex] = 0;
-      mouthMesh.morphTargetInfluences[mouthSmileMorphIndex] = 0;
-      mouthMesh.morphTargetInfluences[mouthFunnerMorphIndex] = 0;
-      mouthMesh.morphTargetInfluences[mouthPuckerMorphIndex] = 0;
-    }
-  });
-}

package/src/components/AvatarView/utils/useSmile.ts

@@ -1,31 +0,0 @@
-import { Nodes } from './utils';
-import { SkinnedMesh } from 'three';
-import { useEffect } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-let headMesh: SkinnedMesh;
-let mouthSmileMorphIndex: number = 0;
-
-export default function useSmile(smiling: boolean | undefined, nodes: Nodes) {
-  useEffect(() => {
-    if (!smiling) return;
-
-    headMesh = (nodes.Wolf3D_Head ||
-      nodes.Wolf3D_Avatar ||
-      nodes.Wolf3D_Avatar001) as SkinnedMesh;
-
-    if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {
-      mouthSmileMorphIndex = headMesh.morphTargetDictionary.mouthSmile;
-    }
-  }, [nodes, smiling]);
-
-  useFrame(() => {
-    if (!smiling) {
-      if (headMesh?.morphTargetInfluences) {
-        headMesh.morphTargetInfluences[mouthSmileMorphIndex] = 0;
-      }
-    } else if (headMesh?.morphTargetInfluences) {
-      headMesh.morphTargetInfluences[mouthSmileMorphIndex] = 1 / 3;
-    }
-  });
-}