34 add photo thumbnail to the UI (#37)

* move likes to the left corner

* add photo thumbnail to the top right corner

* add photo thumbnail to the top right corner

* making photo thumbnail smaller

* small fix for comments flow making sure it flows from the top on a longer screen

* fixing likes, making sure they are at the left side

* increasing margins

---------

Co-authored-by: Vicky Chen <chenpanj@amazon.com>
Co-authored-by: Natalie Chan <natapoke2@gmail.com>

client/components/comments/comment.tsx

@@ -10,10 +10,10 @@ interface CommentProps {
 const Comment: React.FC<CommentProps> = ({ comment }) => {
   return (
     <motion.div
-      className="bg-slate-950/70 text-white p-3 rounded-t-2xl rounded-r-2xl shadow-md mb-2 absolute bottom-0"
-      initial={{ opacity: 0, y: -550 }}
-      animate={{ opacity: 1, y: -500, transition: { duration: 3, delay:2 } }}
-      exit={{ opacity: 0, y: 100, transition: { duration: 20, delay:0 } }}
+      className="bg-slate-950/70 text-white p-3 rounded-t-2xl rounded-r-2xl shadow-md absolute top-0"
+      initial={{ opacity: 0, y: -100 }}
+      animate={{ opacity: 1, y: 0, transition: { duration: 3, delay:2 } }}
+      exit={{ opacity: 0, y: 600, transition: { duration: 20, delay:0 } }}
     >
       <>
         <h3>

client/components/comments/commentFeed.tsx

@@ -51,11 +51,10 @@ const CommentFeed: React.FC<CommentFeedProps> = ({ comments, onComplete }) => {
   }, [commentsIndex]);
 
   return (
-    <div className="fixed bottom-0 right-0 w-full p-4">
-      <div className="relative h-160">
+    <div className="fixed top-[200px] w-full h-full p-4">
+      <div className="relative h-full">
         <motion.div
-          className="flex flex-col space-y-400"
-          style={{ position: 'absolute', bottom: 0, width: '100%' }}
+          className="absolute top-0 w-full flex flex-col my-20"
         >
           <AnimatePresence>
             {displayedComments.map((comment) => (

client/components/likes/likes.tsx

@@ -84,11 +84,9 @@ export const Likes = ({ finalLikes, onComplete }: LikesProps) => {
   }, [finalLikes]); // reset when finalLikes is updated
 
   return (
-    <div className="w-full h-16 flex items-center justify-center">
-      <div className="flex items-center mt-8 relative -translate-x-32">
+      <div className="w-full flex items-center mt-4 justify-start translate translate-x-4">
         <h2 className={`font-bold ${isAnimating ? 'animate-pulse' : ''}`}>❤️</h2>
         <h2 className="font-bold ml-2 w-20 text-left">{animatedLikes}</h2>
       </div>
-    </div>
   );
 };

client/components/photo/photo.tsx

@@ -0,0 +1,9 @@
+export const Photo = ({ img }: { img: string }) => {
+  if (!img) return null;
+
+  return (
+    <div className="fixed top-4 right-4 border border-gray-300 shadow-md">
+      <img id="image" alt="Received image" src={img} width={100} />
+    </div>
+  );
+};

client/pages/backend.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { socket } from '../utils/socket';
 import { ResponseData } from '../../shared/types';
-import Image from 'next/image';
 
 const Backend = () => {
   const [img, setImg] = useState<string>('');
@@ -41,7 +40,7 @@ const Backend = () => {
   return (
     <>
       <div>Welcome to the backend ui!</div>
-      {img && <Image id="image" alt="Received image" src={img} width={500} height={500} />}
+      {img && <img id="image" alt="Received image" src={img} width={500} height={500}/>}
     </>
   );
 };

client/pages/index.tsx

@@ -5,6 +5,7 @@ import CommentFeed from '@/components/comments/commentFeed';
 import { ResponseData } from '../../shared/types';
 import { LoadingOverlay } from '@/components/loadingOverlay/loadingOverlay';
 import { EndingOverlay } from '@/components/endingOverlay/endingOverlay';
+import { Photo } from '@/components/photo/photo';
 
 const Home = () => {
   const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null); // test timer
@@ -17,6 +18,7 @@ const Home = () => {
   const [commentsComplete, setCommentsComplete] = useState<boolean>(false);
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [img, setImg] = useState<string>('');
 
   useEffect(() => {
     console.log('Connecting Socket');
@@ -43,6 +45,11 @@ const Home = () => {
       }
     };
 
+    const onSendPhoto = (data: string) => {
+      console.log('Received image data');
+      setImg(`data:image/jpeg;base64,${data}`);
+    };
+
     const onErrorMessage = (msg: string) => {
       // on error take a new photo
       console.error(msg);
@@ -51,6 +58,7 @@ const Home = () => {
 
     socket.on('connect', onConnect);
     socket.on('api_response', onApiResonse);
+    socket.on('send_photo', onSendPhoto);
     socket.on('err_msg', onErrorMessage);
 
     return () => {
@@ -59,6 +67,7 @@ const Home = () => {
       // clean up socket event listeners
       socket.off('connect', onConnect);
       socket.off('api_response', onApiResonse);
+      socket.off('send_photo', onSendPhoto);
 
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
@@ -76,7 +85,7 @@ const Home = () => {
       console.log('Likes and comments animation completed');
       setLikesComplete(false);
       setCommentsComplete(false);
-
+      setImg('');
       donePhoto();
     }
     // fire useEffect when either state vars change
@@ -112,10 +121,14 @@ const Home = () => {
 
   return (
     <>
-      <div className="w-screen h-screen flex flex-col justify-between items-center">
+      <div className="w-screen h-screen flex flex-col justify-start items-center">
         {display ? (
           <>
-            <Likes finalLikes={display.likes} onComplete={onLikesComplete}></Likes>
+          <div className='w-screen flex flex-row justify-between align-start'>
+          <Likes finalLikes={display.likes} onComplete={onLikesComplete}></Likes>
+          {img && !(likesComplete && commentsComplete) && <Photo img={img} />}
+          </div>
+
             <CommentFeed comments={display.comments} onComplete={onCommentsComplete}></CommentFeed>
           </>
         ) : (
@@ -129,6 +142,7 @@ const Home = () => {
             )}
           </>
         )}
+
       </div>
     </>
   );