@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/Avatar/AvatarView/utils/useMouthAnimation.ts

@@ -1,93 +0,0 @@
-import React, { useRef } from 'react';
-import { SkinnedMesh } from 'three';
-
-const VISEME_SMOOTHING = 0.2;
-const VISEME_SPEED_FACTOR = 0.44;
-
-interface Viseme {
-  name: string;
-  duration: number;
-  weight: number;
-  startTime: number;
-}
-
-interface UseMouthAnimationProps {
-  currentVisemes: Viseme[];
-  avatarMeshRef: React.RefObject<SkinnedMesh>;
-}
-
-const lerp = (start: number, end: number, alpha: number): number => {
-  return start * (1 - alpha) + end * alpha;
-};
-
-export function useMouthAnimation({ currentVisemes, avatarMeshRef }: UseMouthAnimationProps) {
-  const visemeStartTimeRef = useRef(0);
-  const currentVisemeWeightRef = useRef<{ [key: string]: number }>({});
-
-  // Helper function to get current viseme information
-  const getCurrentVisemeInfo = (elapsedTime: number) => {
-    let currentVisemeIndex = 0;
-    let accumulatedDuration = 0;
-
-    while (
-      currentVisemeIndex < currentVisemes.length &&
-      accumulatedDuration <= elapsedTime
-    ) {
-      accumulatedDuration += currentVisemes[currentVisemeIndex].duration;
-      currentVisemeIndex++;
-    }
-
-    return { currentVisemeIndex, accumulatedDuration };
-  };
-
-  // Helper function to apply the current viseme
-  const applyCurrentViseme = (index: number, elapsedTime: number, accumulatedDuration: number) => {
-    const currentViseme = currentVisemes[index - 1];
-    const visemeProgress = (elapsedTime - (accumulatedDuration - currentViseme.duration)) / currentViseme.duration;
-    const targetWeight = Math.sin(visemeProgress * Math.PI) * currentViseme.weight;
-
-    // Smooth the transition between visemes
-    if (!currentVisemeWeightRef.current[currentViseme.name]) {
-      currentVisemeWeightRef.current[currentViseme.name] = 0;
-    }
-    currentVisemeWeightRef.current[currentViseme.name] = lerp(
-      currentVisemeWeightRef.current[currentViseme.name],
-      targetWeight,
-      VISEME_SMOOTHING
-    );
-
-    const visemeIndex = avatarMeshRef.current?.morphTargetDictionary?.[currentViseme.name];
-    if (typeof visemeIndex === 'number' && avatarMeshRef.current?.morphTargetInfluences) {
-      avatarMeshRef.current.morphTargetInfluences[visemeIndex] = currentVisemeWeightRef.current[currentViseme.name];
-    }
-  };
-
-  // Helper function to reset viseme animation
-  const resetVisemeAnimation = (currentTime: number) => {
-    visemeStartTimeRef.current = currentTime;
-    currentVisemeWeightRef.current = {};
-  };
-
-  // Main function to handle viseme-based mouth movement
-  const handleMouthMovement = (elapsedTime: number) => {
-    if (currentVisemes.length === 0) return;
-
-    const currentTime = elapsedTime * VISEME_SPEED_FACTOR;
-    const visemeElapsedTime = currentTime - visemeStartTimeRef.current;
-
-    const { currentVisemeIndex, accumulatedDuration } = getCurrentVisemeInfo(visemeElapsedTime);
-
-    if (currentVisemeIndex > 0) {
-      applyCurrentViseme(currentVisemeIndex, visemeElapsedTime, accumulatedDuration);
-    }
-
-    // Reset viseme animation if we've reached the end
-    if (visemeElapsedTime > accumulatedDuration) {
-      resetVisemeAnimation(currentTime);
-    }
-  };
-
-  return {
-    handleMouthMovement,
-  };
-}

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

@@ -1,39 +0,0 @@
-import { Nodes } from './utils';
-import { SkinnedMesh } from 'three';
-import { useEffect, useRef } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-interface SmileState {
-  headMesh: SkinnedMesh | null;
-  mouthSmileMorphIndex: number;
-}
-
-const SMILE_INTENSITY = 1 / 3;
-
-export default function useSmile(smiling: boolean | undefined, nodes: Nodes) {
-  const smileStateRef = useRef<SmileState>({
-    headMesh: null,
-    mouthSmileMorphIndex: 0,
-  });
-
-  useEffect(() => {
-    const headMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar020 || nodes.Wolf3D_Avatar001) as SkinnedMesh;
-    smileStateRef.current.headMesh = headMesh;
-
-    if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {
-      smileStateRef.current.mouthSmileMorphIndex = headMesh.morphTargetDictionary.mouthSmile;
-    }
-  }, [nodes]);
-
-  useFrame(() => {
-    const { headMesh, mouthSmileMorphIndex } = smileStateRef.current;
-
-    if (!headMesh?.morphTargetInfluences) return;
-
-    const targetSmileIntensity = smiling ? SMILE_INTENSITY : 0;
-    const currentSmileIntensity = headMesh.morphTargetInfluences[mouthSmileMorphIndex];
-
-    // Smoothly interpolate between current and target smile intensity
-    headMesh.morphTargetInfluences[mouthSmileMorphIndex] += (targetSmileIntensity - currentSmileIntensity) * 0.1;
-  });
-}

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

@@ -1,55 +0,0 @@
-import { Material, Object3D } from 'three';
-import { LinearFilter } from 'three';
-
-export interface Nodes {
-  [name: string]: Object3D;
-}
-
-export interface Materials {
-  [name: string]: Material;
-}
-
-export const clamp = (value: number, min: number, max: number) => {
-  return Math.min(Math.max(value, min), max);
-};
-
-export const lerp = (start: number, end: number, time: number = 0.05) => {
-  return start * (1 - time) + end * time;
-};
-
-export const mapRange = (
-  value: number,
-  inMin: number,
-  inMax: number,
-  outMin: number,
-  outMax: number
-) => {
-  value = clamp(value, inMin, inMax);
-  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-};
-
-export const hideHands = (nodes: Nodes) => {
-  if (nodes.Wolf3D_Hands) {
-    nodes.Wolf3D_Hands.visible = false;
-  }
-
-  if (nodes.RightHand && nodes.LeftHand) {
-    nodes.RightHand.position.set(0, -2, 0);
-    nodes.LeftHand.position.set(0, -2, 0);
-  }
-};
-
-export const correctMaterials = (materials: Materials) => {
-  Object.values(materials).forEach((material: any) => {
-    // applying LinearFilter to texture to avoid  pixellization
-    if (material.map) material.map.minFilter = LinearFilter;
-
-    // support transparency
-    if (material) material.depthWrite = true;
-  });
-};
-
-const SkinnedMeshType = 'SkinnedMesh';
-export const isSkinnedMesh = (node: Object3D) => {
-  return node.type === SkinnedMeshType;
-};

package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -1,246 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Avatar with avatar-configurator like readyplayerme-full 1`] = `
-<div>
-  <div
-    class="memori--avatar-wrapper memori--avatar-avatar-configurator"
-  >
-    <div
-      class="memori--blob-container"
-    >
-      <div
-        class="memori-blob"
-      >
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    class="memori--avatar-toggle"
-  >
-    <button
-      class="memori-button memori-button--ghost memori-button--rounded memori-button--padded memori-button--with-icon"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-          />
-          <path
-            d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-          />
-        </svg>
-      </span>
-      <span
-        class="memori--avatar-toggle-text"
-      >
-        hide
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`renders Avatar with avatar-configurator on totem layout unchanged 1`] = `
-<div>
-  <div
-    class="memori--avatar-wrapper memori--avatar-avatar-configurator"
-  >
-    <div
-      class="memori--blob-container"
-    >
-      <div
-        class="memori-blob"
-      >
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-        <div
-          class="mainDiv"
-        />
-      </div>
-    </div>
-  </div>
-  <div
-    class="memori--avatar-toggle"
-  >
-    <button
-      class="memori-button memori-button--ghost memori-button--rounded memori-button--padded memori-button--with-icon"
-    >
-      <span
-        class="memori-button--icon"
-      >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
-          />
-          <path
-            d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
-          />
-        </svg>
-      </span>
-      <span
-        class="memori--avatar-toggle-text"
-      >
-        hide
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`renders Avatar with blob and avatar in blob unchanged 1`] = `
-<div>
-  <div
-    class="memori--blob-container"
-  >
-    <div
-      class="memori-blob"
-    >
-      <figure>
-        <img
-          alt=""
-          role="presentation"
-          src="https://aisuru.com/images/aisuru/square_logo.png"
-        />
-      </figure>
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders Avatar with custom glb model unchanged 1`] = `
-<div>
-  <div
-    class="memori--blob-container"
-  >
-    <div
-      class="memori-blob"
-    >
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders Avatar with rpm 3d avatar unchanged 1`] = `
-<div>
-  <div
-    class="memori--blob-container"
-  >
-    <div
-      class="memori-blob"
-    >
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders defualt Avatar (blob) unchanged 1`] = `
-<div>
-  <div
-    class="memori--blob-container"
-  >
-    <div
-      class="memori-blob"
-    >
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-      <div
-        class="mainDiv"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/components/Blob/Blob.css

@@ -1,286 +0,0 @@
-:root {
-    --memori-blob-x: -50%;
-    --memori-blob-y: -50%;
-}
-
-.mainDiv {
-    position: absolute;
-    display: flex;
-    width: 25vw;
-    height: 25vw;
-    align-items: center;
-    justify-content: center;
-    border-radius: 90% 95% 85% 105%;
-    animation: wobble calc(150ms * var(--memori-blob-t)) linear infinite;
-    background: #f0f;
-    box-shadow: 0 0 0.5em 0.2em #000 inset, 0 0 0.15em 0 #fff;
-    filter: hue-rotate(0deg);
-    font-size: 20vmin;
-    mix-blend-mode: screen;
-    transform: translate(var(--memori-blob-x, -50%), var(--memori-blob-y, -50%)) rotate(0deg);
-    transform-origin: 50% 50%;
-}
-
-.memori-blob.memori-blob--speaking {
-    animation: blobspeaking 2s ease-in-out infinite;
-}
-
-@media screen and (max-height: 1280px) {
-    .mainDiv {
-        width: 25vw;
-        height: 25vw;
-    }
-}
-
-@media screen and (max-height: 850px) {
-    .mainDiv {
-        width: 25vw;
-        height: 25vw;
-    }
-}
-
-@media screen and (max-height: 750px) {
-    .mainDiv {
-        width: 20vw;
-        height: 20vw;
-    }
-}
-
-.mainDiv::after {
-    font-size: 1em;
-    white-space: nowrap;
-}
-
-.mainDiv:nth-of-type(1) {
-    --memori-blob-x: -53%;
-    --memori-blob-y: -53%;
-    --memori-blob-t: 37;
-}
-
-.mainDiv:nth-of-type(2) {
-    --memori-blob-x: -47%;
-    --memori-blob-y: -52%;
-    --memori-blob-t: 58;
-}
-
-.mainDiv:nth-of-type(3) {
-    --memori-blob-x: -45%;
-    --memori-blob-y: -50%;
-    --memori-blob-t: 46;
-}
-
-.mainDiv:nth-of-type(4) {
-    --memori-blob-x: -53%;
-    --memori-blob-y: -45%;
-    --memori-blob-t: 72;
-}
-
-.mainDiv:nth-of-type(5) {
-    --memori-blob-x: -55%;
-    --memori-blob-y: -45%;
-    --memori-blob-t: 62;
-}
-
-@keyframes wobble {
-    to {
-        filter: hue-rotate(360deg);
-        transform: translate(var(--memori-blob-x), var(--memori-blob-y)) rotate(360deg);
-    }
-}
-
-@keyframes blobspeaking {
-    0% {
-        filter: brightness(1);
-        transform: scale(1);
-    }
-
-    15% {
-        filter: brightness(1.1);
-    }
-
-    30% {
-        filter: brightness(1);
-        transform: scale(0.99);
-    }
-
-    50% {
-        filter: brightness(1.05);
-        transform: scale(1.01);
-    }
-
-    75% {
-        filter: brightness(1.15);
-    }
-
-    100% {
-        filter: brightness(1.1);
-        transform: scale(0.99);
-    }
-}
-
-.memori-blob {
-    position: relative;
-    z-index: 100;
-    top: 25%;
-}
-
-.memori-blob figure {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    overflow: hidden;
-    width: 25vw;
-    height: 25vw;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    margin: 0;
-    transform: translate(-50%, -50%);
-}
-
-.memori-blob figure img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-.memori-blob figure ~ .mainDiv {
-    opacity: 0.2;
-}
-
-@media (max-width: 768px) {
-    .memori-blob {
-        position: static;
-        display: flex;
-        width: 100%;
-        min-height: 120px;
-        align-items: center;
-        justify-content: center;
-        margin: 1.5rem 0 0.5rem;
-        text-align: center;
-    }
-
-    .memori-blob .mainDiv,
-    .memori-blob figure {
-        width: 120px;
-        height: 120px;
-    }
-
-    .memori-blob figure {
-        position: static;
-        transform: none;
-    }
-
-    .memori-blob .mainDiv:nth-of-type(1) {
-        --memori-blob-x: -5px;
-        --memori-blob-y: -5px;
-        --memori-blob-t: 37;
-    }
-
-    .memori-blob .mainDiv:nth-of-type(2) {
-        --memori-blob-x: -4px;
-        --memori-blob-y: -5px;
-        --memori-blob-t: 58;
-    }
-
-    .memori-blob .mainDiv:nth-of-type(3) {
-        --memori-blob-x: -3px;
-        --memori-blob-y: -2px;
-        --memori-blob-t: 46;
-    }
-
-    .memori-blob .mainDiv:nth-of-type(4) {
-        --memori-blob-x: -6px;
-        --memori-blob-y: -3px;
-        --memori-blob-t: 72;
-    }
-
-    .memori-blob .mainDiv:nth-of-type(5) {
-        --memori-blob-x: -6px;
-        --memori-blob-y: -3px;
-        --memori-blob-t: 62;
-    }
-}
-
-@media only screen and (max-height: 1080px) {
-    .memori-blob {
-        top: 30%;
-    }
-}
-
-@media only screen and (min-width: 1366px) and (min-height: 1024px) {
-    .memori-blob {
-        top: 30%;
-        left: 25%;
-    }
-}
-
-@media only screen and (min-width: 1740px) {
-    .memori-blob {
-        top: 30%;
-    }
-}
-
-@media only screen and (min-width: 2160px) {
-    .memori-blob {
-        top: 35%;
-    }
-}
-
-.memori-blob-container {
-    width: 100%;
-}
-
-@media (min-width: 870px) {
-    .memori-blob-container {
-        position: relative;
-        top: 50%;
-        width: 100%;
-        margin-bottom: auto;
-    }
-
-    .memori-blob {
-        top: 50%;
-        left: 50%;
-        width: 70%;
-        max-width: 300px;
-        height: 70%;
-        max-height: 300px;
-    }
-
-    .memori-blob figure {
-        width: 100%;
-        height: auto;
-    }
-
-    .memori-blob .mainDiv {
-        overflow: hidden;
-        width: 100%;
-        height: auto;
-        padding-top: 100%;
-    }
-}
-
-@media (max-width: 870px) {
-    .memori-blob-container {
-        position: static;
-        display: none;
-        width: 100%;
-    }
-
-    .memori-blob {
-        position: relative;
-    }
-}
-
-@media (max-width: 480px) {
-    .memori-blob-container {
-        display: none;
-    }
-
-    .memori-blob figure img {
-        max-width: 48px;
-        max-height: 48px;
-    }
-}