change height on short screens

HumeAI · Mar 27, 2024 · 3bb1c15 · 3bb1c15
1 parent 9f43d12
commit 3bb1c15
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 30 deletions.
diff --git a/src/components/LastVoiceMessage/index.tsx b/src/components/LastVoiceMessage/index.tsx
@@ -4,6 +4,8 @@ import { expressionColors } from 'expression-colors';
 import { Circle } from 'lucide-react';
 import { FC, useRef } from 'react';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import { cn } from '@/utils';
+import { useDerivedLayoutState } from '@/store/useDerivedLayoutState';
 
 type ProsodyScore = { name: string; score: string };
 
@@ -60,6 +62,8 @@ const EmotionLabel = (prosody: ProsodyScore) => {
 export const LastVoiceMessage: FC<LastVoiceMessageProps> = ({
   lastVoiceMessage,
 }) => {
+  const { isShortFrame } = useDerivedLayoutState();
+
   const prosody = lastVoiceMessage?.models.prosody?.scores ?? {};
   const sortedEmotions: ProsodyScore[] = Object.entries(prosody)
     .sort((a, b) => b[1] - a[1])
@@ -70,7 +74,12 @@ export const LastVoiceMessage: FC<LastVoiceMessageProps> = ({
     });
 
   return (
-    <div className="pointer-events-none absolute top-48 px-6 text-center">
+    <div
+      className={cn(
+        'pointer-events-none absolute px-6 text-center',
+        isShortFrame ? 'top-36' : 'top-48',
+      )}
+    >
       <LayoutGroup>
         {sortedEmotions.map((emotion) => {
           return (

diff --git a/src/components/WaitingPrompt/index.tsx b/src/components/WaitingPrompt/index.tsx
@@ -1,16 +1,19 @@
+import { useDerivedLayoutState } from '@/store/useDerivedLayoutState';
+import { cn } from '@/utils';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useState, useEffect } from 'react';
 
 const prompts = [
-    "What is Hume's mission?",
-    'Where can I learn more about EVI?',
-    'Show me more about the Hume team',
-    'How do you define well-being?',
-    "Help me learn about Hume's APIs",
+  "What is Hume's mission?",
+  'Where can I learn more about EVI?',
+  'Show me more about the Hume team',
+  'How do you define well-being?',
+  "Help me learn about Hume's APIs",
 ];
 
 export const WaitingPrompt = () => {
   const [currentPromptIndex, setCurrentPromptIndex] = useState(0);
+  const { isShortFrame } = useDerivedLayoutState();
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -30,7 +33,14 @@ export const WaitingPrompt = () => {
       transition={{ duration: 1, delay: 0.5 }}
       className="flex select-none flex-col justify-center gap-12 text-center"
     >
-      <div className="font-mono uppercase text-black/50">Try saying...</div>
+      <div
+        className={cn(
+          'font-mono uppercase text-black/50',
+          isShortFrame && 'pt-4',
+        )}
+      >
+        Try saying...
+      </div>
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -43,7 +53,10 @@ export const WaitingPrompt = () => {
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 1, ease: 'easeInOut' }}
-            className="mt-20 rounded-full bg-tan-200/50 px-3 py-1"
+            className={cn(
+              'mt-12 rounded-full bg-tan-200/50 px-3 py-1',
+              isShortFrame ? 'mt-12' : 'mt-20',
+            )}
           >
             "{prompts[currentPromptIndex]}"
           </motion.div>

diff --git a/src/store/layout.ts b/src/store/layout.ts
@@ -25,16 +25,22 @@ interface LayoutStore {
 let timeout: number | undefined = undefined;
 
 const DEFAULT_FRAME_WIDTH = 400;
-const DEFAULT_FRAME_HEIGHT = 300;
 const FRAME_MARGIN_X = 48;
 
+const DEFAULT_FRAME_HEIGHT = 300;
+export const SHORT_FRAME_HEIGHT = 250;
+const HEIGHT_BREAKPOINT = 750;
+
 function getFrameSize(dimensions: WindowDimensions) {
   return {
     width:
       dimensions.width - FRAME_MARGIN_X < DEFAULT_FRAME_WIDTH
         ? dimensions.width - FRAME_MARGIN_X
         : DEFAULT_FRAME_WIDTH,
-    height: DEFAULT_FRAME_HEIGHT,
+    height:
+      dimensions.height < HEIGHT_BREAKPOINT
+        ? SHORT_FRAME_HEIGHT
+        : DEFAULT_FRAME_HEIGHT,
   };
 }
 

diff --git a/src/store/useDerivedLayoutState.ts b/src/store/useDerivedLayoutState.ts
@@ -0,0 +1,6 @@
+import { SHORT_FRAME_HEIGHT, useLayoutStore } from '@/store/layout';
+
+export function useDerivedLayoutState() {
+  const frameSize = useLayoutStore((store) => store.frameSize);
+  return { isShortFrame: frameSize.height === SHORT_FRAME_HEIGHT };
+}
diff --git a/src/views/ConversationScreen.tsx b/src/views/ConversationScreen.tsx
@@ -3,10 +3,13 @@ import { VoiceAnimationState } from '@/components/VoiceAnimation';
 import { WaitingPrompt } from '@/components/WaitingPrompt';
 import { WebGLAvatar } from '@/components/WebGLAvatar';
 import { Backdrop } from '@/components/WebGLBackdrop';
+import { useLayoutStore } from '@/store/layout';
 import { useVoice } from '@humeai/voice-react';
 
 export const ConversationScreen = () => {
   const { lastVoiceMessage, isPlaying, micFft, lastUserMessage } = useVoice();
+  const frameSize = useLayoutStore((store) => store.frameSize);
+
   return (
     <>
       <LastVoiceMessage lastVoiceMessage={lastVoiceMessage} />
@@ -16,7 +19,7 @@ export const ConversationScreen = () => {
         isPlaying={isPlaying}
         prosody={lastVoiceMessage?.models.prosody?.scores ?? {}}
         width={400}
-        height={200}
+        height={frameSize.height - 100}
       />
       <Backdrop
         prosody={lastVoiceMessage?.models.prosody?.scores ?? {}}

diff --git a/src/views/IntroScreen.tsx b/src/views/IntroScreen.tsx
@@ -3,6 +3,8 @@ import { CircledText } from '@/components/CircledText';
 import { motion } from 'framer-motion';
 import { Bell } from 'lucide-react';
 import * as Tooltip from '@radix-ui/react-tooltip';
+import { cn } from '@/utils';
+import { useDerivedLayoutState } from '@/store/useDerivedLayoutState';
 
 export const IntroScreen = ({
   onConnect,
@@ -11,9 +13,14 @@ export const IntroScreen = ({
   onConnect: () => void;
   isConnecting: boolean;
 }) => {
+  const { isShortFrame } = useDerivedLayoutState();
+
   return (
     <motion.div
-      className="absolute inset-0 flex flex-col items-center justify-center gap-8 px-12"
+      className={cn(
+        'absolute inset-0 flex flex-col items-center justify-center px-12',
+        isShortFrame ? 'gap-4' : 'gap-8',
+      )}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1, translateY: -4 }}
       transition={{ duration: 2 }}
@@ -56,25 +63,30 @@ export const IntroScreen = ({
           >
             Start Conversation
           </Button>
-          <div className='absolute right-4 top-4'>
+          <div className="absolute right-4 top-4">
             <Tooltip.Provider delayDuration={400}>
-            <Tooltip.Root>
-              <Tooltip.Trigger>
-                <div className='grid size-[36px] cursor-pointer place-content-center rounded-full bg-tan-600/20 text-black transition-colors hover:bg-tan-600/50'>
-                  <a href="https://share.hsforms.com/15hCR14R4S-e-dlMwN42tkwcjsur" target='_blank'><Bell className='size-4'/></a>
-                </div>
-              </Tooltip.Trigger>
-              <Tooltip.Content
-                className={
-                  'rounded-md bg-black px-2 py-1 text-xs text-white shadow-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=left]:animate-slideLeftAndFade'
-                }
-                side={'left'}
-                sideOffset={5}
-              >
-                Notify me of public access
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </Tooltip.Provider>
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  <div className="grid size-[36px] cursor-pointer place-content-center rounded-full bg-tan-600/20 text-black transition-colors hover:bg-tan-600/50">
+                    <a
+                      href="https://share.hsforms.com/15hCR14R4S-e-dlMwN42tkwcjsur"
+                      target="_blank"
+                    >
+                      <Bell className="size-4" />
+                    </a>
+                  </div>
+                </Tooltip.Trigger>
+                <Tooltip.Content
+                  className={
+                    'rounded-md bg-black px-2 py-1 text-xs text-white shadow-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=left]:animate-slideLeftAndFade'
+                  }
+                  side={'left'}
+                  sideOffset={5}
+                >
+                  Notify me of public access
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </Tooltip.Provider>
           </div>
         </motion.div>
       </div>