Merge branch 'main' of https://github.com/swasthikshetty10/hackoverflow

Author: swasthikshetty10

package-lock.json

@@ -21,6 +21,7 @@
     "@trpc/server": "^10.9.0",
     "@types/react-speech-recognition": "^3.9.1",
     "axios": "^1.3.4",
+    "framer-motion": "^10.5.0",
     "google-translate-api-browser": "^3.0.1",
     "livekit-client": "^1.6.9",
     "livekit-server-sdk": "^1.1.0",
@@ -31,7 +32,9 @@
     "pusher-js": "^8.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
     "react-speech-recognition": "^3.10.0",
+    "react-type-animation": "^2.1.2",
     "superjson": "1.9.1",
     "transliteration": "^2.3.5",
     "zod": "^3.20.6"

package.json

@@ -0,0 +1,60 @@
+import React, { FC, useRef } from 'react';
+import { motion, useInView } from 'framer-motion';
+
+const CharacterAnimation: FC<{
+  text: string;
+  className?: string;
+  textStyle?: string;
+}> = ({ text, className, textStyle }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true });
+  const letters = Array.from(text);
+
+  const container = {
+    hidden: { opacity: 0 },
+    visible: (i = 1) => ({
+      opacity: 1,
+      transition: { staggerChildren: 0.03, delayChildren: 0.04 * i },
+    }),
+  };
+
+  const child = {
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: 'spring',
+        damping: 12,
+        stiffness: 100,
+      },
+    },
+    hidden: {
+      opacity: 0,
+      y: 20,
+      transition: {
+        type: 'spring',
+        damping: 12,
+        stiffness: 100,
+      },
+    },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      className={className}
+      style={{ overflow: 'hidden', display: 'flex', fontSize: '2rem' }}
+      variants={container}
+      initial="hidden"
+      animate={isInView ? 'visible' : 'hidden'}
+    >
+      {letters.map((letter, index) => (
+        <motion.span className={textStyle} variants={child} key={index}>
+          {letter === ' ' ? '\u00A0' : letter}
+        </motion.span>
+      ))}
+    </motion.div>
+  );
+};
+
+export default CharacterAnimation;

src/components/animation/character.tsx

@@ -0,0 +1,65 @@
+import React, { FC, useRef } from "react";
+import { motion, useInView } from "framer-motion";
+
+const TextAnimation: FC<{
+  text: string;
+  className?: string;
+  textStyle?: string;
+}> = ({ text, className, textStyle }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true });
+  const words = text.split(" ");
+
+  const container = {
+    hidden: { opacity: 0 },
+    visible: (i = 1) => ({
+      opacity: 1,
+      transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
+    }),
+  };
+
+  const child = {
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: "spring",
+        damping: 12,
+        stiffness: 100,
+      },
+    },
+    hidden: {
+      opacity: 0,
+      y: 20,
+      transition: {
+        type: "spring",
+        damping: 12,
+        stiffness: 100,
+      },
+    },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      className={className}
+      style={{ overflow: "hidden", display: "flex", fontSize: "2rem" }}
+      variants={container}
+      initial="hidden"
+      animate={isInView ? "visible" : "hidden"}
+    >
+      {words.map((word, index) => (
+        <motion.span
+          variants={child}
+          style={{ marginRight: "5px" }}
+          key={index}
+          className={textStyle}
+        >
+          {word}
+        </motion.span>
+      ))}
+    </motion.div>
+  );
+};
+
+export default TextAnimation;

src/components/animation/text.tsx

@@ -0,0 +1,20 @@
+import { TypeAnimation } from "react-type-animation";
+
+export default function Typing() {
+  return (
+    <TypeAnimation
+      cursor={true}
+      sequence={[
+        "Jab We Meet",
+        3000,
+        "जब हम मिले",
+        3000,
+        "ジャブ・ウィー・メット",
+        3000,
+      ]}
+      wrapper="h2"
+      className="text-3xl font-semibold  sm:text-3xl lg:text-4xl xl:text-5xl  2xl:text-6xl"
+      repeat={Infinity}
+    />
+  );
+}

src/components/animation/typing.tsx

@@ -18,7 +18,6 @@ interface Props {
   languageCode: string;
 }
 
-
 const Captions: React.FC<Props> = ({
   transcriptionQueue,
   setTranscriptionQueue,
@@ -32,22 +31,34 @@ const Captions: React.FC<Props> = ({
       if (transcriptionQueue.length > 0) {
         const res = await translate(transcriptionQueue[0]?.message as string, {
           // @ts-ignore
-          to: languageCode,
+          to: languageCode.split("-")[0],
         });
         setCaption({
           message: res.text,
           sender: transcriptionQueue[0]?.sender as string,
         });
-        const isEmpty = transcriptionQueue.length === 0
-        speakOut(res.text as string,isEmpty )
+        const isEmpty = transcriptionQueue.length === 0;
+        speakOut(res.text as string, isEmpty);
         setTranscriptionQueue((prev) => prev.slice(1));
       }
     }
     translateText();
+
+    // Hide the caption after 5 seconds
+    const timer = setTimeout(() => {
+      setCaption({
+        message: "",
+        sender: "",
+      });
+    }, 5000);
+
+    return () => {
+      clearTimeout(timer);
+    };
   }, [transcriptionQueue]);
 
   return (
-    <div className="closed-captions-wrapper">
+    <div className="closed-captions-wrapper z-50">
       <div className="closed-captions-container">
         {caption?.message ? (
           <>