conditionally add Trulience avatars to TEN UI

TEN-framework · Jan 14, 2025 · ee332db · ee332db
1 parent 5f6657d
commit ee332db
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/playground/package.json b/playground/package.json
@@ -44,7 +44,8 @@
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "trulience-sdk": "https://trulience.com/home/assets/trulience-sdk-1.0.11.tar.gz"
   },
   "devDependencies": {
     "@minko-fe/postcss-pxtoviewport": "^1.3.2",

diff --git a/playground/src/components/Agent/Camera.tsx b/playground/src/components/Agent/Camera.tsx
@@ -105,7 +105,7 @@ export default function VideoBlock(props: {
       onVideoSourceChange={onVideoSourceChange}
       select={videoSourceType === VideoSourceType.CAMERA ? <CamSelect videoTrack={cameraTrack} /> : <div className="w-[180px]" />}
     >
-      <div className="my-3 h-52 w-full overflow-hidden rounded-lg">
+      <div className="my-3 h-60 w-full overflow-hidden rounded-lg">
         <LocalStreamPlayer videoTrack={videoSourceType === VideoSourceType.CAMERA ? cameraTrack : screenTrack} />
       </div>
     </VideoDeviceWrapper>

diff --git a/playground/src/components/Agent/Microphone.tsx b/playground/src/components/Agent/Microphone.tsx
@@ -56,12 +56,12 @@ export default function MicrophoneBlock(props: {
       isActive={!audioMute}
       select={<MicrophoneSelect audioTrack={audioTrack} />}
     >
-      <div className="mt-3 flex h-28 flex-col items-center justify-center gap-2.5 self-stretch rounded-md border border-[#272A2F] bg-[#1E2024] p-6 shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]">
+      <div className="mt-3 flex h-24 flex-col items-center justify-center gap-2.5 self-stretch rounded-md border border-[#272A2F] bg-[#1E2024] p-2 shadow-[0px_2px_2px_0px_rgba(0,0,0,0.25)]">
         <AudioVisualizer
           type="user"
           barWidth={4}
           minBarHeight={2}
-          maxBarHeight={50}
+          maxBarHeight={40}
           frequencies={subscribedVolumes}
           borderRadius={2}
           gap={4}

diff --git a/playground/src/components/Dynamic/RTCCard.tsx b/playground/src/components/Dynamic/RTCCard.tsx
@@ -14,6 +14,7 @@ import {
 } from "@/store/reducers/global"
 import AgentVoicePresetSelect from "@/components/Agent/VoicePresetSelect"
 import AgentView from "@/components/Agent/View"
+import Avatar from "@/components/Agent/AvatarTrulience"
 import MicrophoneBlock from "@/components/Agent/Microphone"
 import VideoBlock from "@/components/Agent/Camera"
 
@@ -32,6 +33,7 @@ export default function RTCCard(props: { className?: string }) {
   const [screenTrack, setScreenTrack] = React.useState<ILocalVideoTrack>()
   const [remoteuser, setRemoteUser] = React.useState<IRtcUser>()
   const [videoSourceType, setVideoSourceType] = React.useState<VideoSourceType>(VideoSourceType.CAMERA)
+  const useTrulienceAvatar = Boolean(process.env.NEXT_PUBLIC_trulienceAvatarId)
 
   React.useEffect(() => {
     if (!options.channel) {
@@ -85,6 +87,10 @@ export default function RTCCard(props: { className?: string }) {
 
   const onRemoteUserChanged = (user: IRtcUser) => {
     console.log("[rtc] onRemoteUserChanged", user)
+    if (useTrulienceAvatar) {
+      // trulience SDK will play audio in synch with mouth
+      user.audioTrack?.stop();
+    }
     setRemoteUser(user)
   }
 
@@ -114,16 +120,22 @@ export default function RTCCard(props: { className?: string }) {
     setVideoSourceType(value)
   }
 
+
   return (
     <>
       <div className={cn("flex-shrink-0", "overflow-y-auto", className)}>
         <div className="flex h-full w-full flex-col">
           {/* -- Agent */}
           <div className="w-full">
             <div className="flex w-full items-center justify-between p-2">
-              <h2 className="mb-2 text-xl font-semibold">Audio & Video</h2>
+              <h2 className="mb-0 text-l font-semibold">Audio & Video</h2>
             </div>
-            <AgentView audioTrack={remoteuser?.audioTrack} />
+            {/* Conditionally render either Avatar or AgentView */}
+            {useTrulienceAvatar ? (
+              <Avatar audioTrack={remoteuser?.audioTrack} />
+            ) : (
+              <AgentView audioTrack={remoteuser?.audioTrack} />
+            )}
           </div>
 
           {/* -- You */}