made chat part work properly

2024-05-14 21:23:24 +05:30 · 2024-05-14 21:23:24 +05:30 · f90540daaa
parent 38f6c30565
commit f90540daaa
7 changed files with 167 additions and 87 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,10 +15,12 @@
        "framer-motion": "^11.0.8",
        "gsap": "^3.12.5",
        "howler": "^2.2.4",
+        "moment": "^2.30.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-icons": "^5.0.1",
        "react-intersection-observer": "^9.8.1",
+        "react-moment": "^1.1.3",
        "react-router-dom": "^6.22.3",
        "react-scripts": "5.0.1",
        "splitting": "^1.0.6",
@ -13514,6 +13516,14 @@
        "mkdirp": "bin/cmd.js"
      }
    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -15878,6 +15888,16 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/react-moment": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.3.tgz",
+      "integrity": "sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==",
+      "peerDependencies": {
+        "moment": "^2.29.0",
+        "prop-types": "^15.7.0",
+        "react": "^16.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
--- a/package.json
+++ b/package.json
@ -10,10 +10,12 @@
    "framer-motion": "^11.0.8",
    "gsap": "^3.12.5",
    "howler": "^2.2.4",
+    "moment": "^2.30.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-intersection-observer": "^9.8.1",
+    "react-moment": "^1.1.3",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "splitting": "^1.0.6",
--- a/public/index.html
+++ b/public/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>Inconnect</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Inconnect",
+  "name": "Speech to Sign Converter",
  "icons": [
    {
      "src": "favicon.ico",
--- a/src/Components/Chat/Message.js
+++ b/src/Components/Chat/Message.js
@ -1,68 +1,104 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { AuthContext } from "../context/AuthContext";
 import { ChatContext } from "../context/ChatContext";
-import { FaPlay, FaPause } from 'react-icons/fa';
+import { FaPlay, FaPause } from "react-icons/fa";
+import Moment from "react-moment";

 const Message = ({ message }) => {
-    const { currentUser } = useContext(AuthContext);
-    const { data } = useContext(ChatContext);
-    const [audioUrl, setAudioUrl] = useState(null);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const audioRef = useRef();
+  const { currentUser } = useContext(AuthContext);
+  const { data } = useContext(ChatContext);
+  const [audioUrl, setAudioUrl] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef();

-    useEffect(() => {
-        if (message.audio) {
-            setAudioUrl(message.audio);
-        }
-    }, [message]);
-    const handlePlayPause = () => {
-        if (audioRef.current) {
-            if (isPlaying) {
-                audioRef.current.pause();
-            } else {
-                audioRef.current.play();
-            }
-            setIsPlaying(!isPlaying);
-        }
-    };
-    const handleAudioEnd = () => {
-        setIsPlaying(false);
-    };
+  useEffect(() => {
+    if (message.audio) {
+      setAudioUrl(message.audio);
+    }
+  }, [message]);
+  const handlePlayPause = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+  const handleVideoPlay = () => {
+    console.log(message.video);
+    window.open(message.video);
+  };
+  const handleAudioEnd = () => {
+    setIsPlaying(false);
+  };

-    return (
-        <div
-            className={`message ${message.senderId === currentUser.uid && "owner"}`}
-        >
-            <div className="messageInfo">
-                <img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png" alt="" />
-                <span>just now</span>
-            </div>
-            <div className="messageContent">
-                {audioUrl ? (
-                    <div className="audiowrapper">
-                        {isPlaying ? (
-                            <FaPause
-                                style={{ marginRight: '5px', marginTop: '2px', cursor: 'pointer' }}
-                                onClick={handlePlayPause}
-                            />
-                        ) : (
-                            <FaPlay
-                                style={{ marginRight: '5px', marginTop: '2px', cursor: 'pointer' }}
-                                onClick={handlePlayPause}
-                            />
-                        )}
-                        Audio
-                        <audio ref={audioRef} style={{ display: 'none' }} onEnded={handleAudioEnd}>
-                            <source src={audioUrl} type="audio/mpeg" />
-                            Your browser does not support the audio element.
-                        </audio>
-                    </div>
-                ) : (
-                    <p>{message.text}</p>
-                )}
-            </div>
-        </div>
-    );
+  return (
+    <div
+      className={`message ${message.senderId === currentUser.uid && "owner"}`}
+    >
+      <div className="messageInfo">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png"
+          alt=""
+        />
+        <span>
+          <Moment fromNow>{message.date.toDate()}</Moment>
+        </span>
+      </div>
+      <div className="messageContent">
+        {audioUrl ? (
+          <div className="audiowrapper">
+            <a
+              href={message.videoURL}
+              onClick={handleVideoPlay}
+              target="_blank"
+            >
+              <img
+                style={{
+                  marginRight: "5px",
+                  marginTop: "2px",
+                  cursor: "pointer",
+                }}
+                src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Video-solid-white.svg"
+              />
+            </a>
+            {isPlaying ? (
+              <FaPause
+                style={{
+                  marginRight: "5px",
+                  marginTop: "2px",
+                  cursor: "pointer",
+                }}
+                onClick={handlePlayPause}
+              />
+            ) : (
+              <FaPlay
+                style={{
+                  marginRight: "5px",
+                  marginTop: "2px",
+                  cursor: "pointer",
+                }}
+                onClick={handlePlayPause}
+              />
+            )}
+            Audio
+            <audio
+              ref={audioRef}
+              style={{ display: "none" }}
+              onEnded={handleAudioEnd}
+            >
+              <source src={audioUrl} type="audio/mpeg" />
+              Your browser does not support the audio element.
+            </audio>
+          </div>
+        ) : (
+          <p>{message.text}</p>
+        )}
+      </div>
+    </div>
+  );
 };

 export default Message;
--- a/src/Components/Chat/chat.css
+++ b/src/Components/Chat/chat.css
@ -47,7 +47,6 @@
            object-fit: cover;
        }
    }
-
 }

 .navbar {
@ -83,7 +82,6 @@
            cursor: pointer;
        }
    }
-
 }

 .chat {
@ -105,8 +103,6 @@
    margin-bottom: 30px;
 }

-
-
 .messages {
    background-color: #ddddf7;
    padding: 10px;
@ -150,6 +146,9 @@
            img {
                width: 50%;
            }
+            .videoicon {
+                height: 7px;
+            }

            .audiowrapper {
                margin-top: 15px;
@ -252,6 +251,4 @@
            color: white;
        }
    }
-
-
-}
+}
--- a/src/Components/Chat/input.js
+++ b/src/Components/Chat/input.js
@ -20,6 +20,16 @@ import { db, storage } from "../firebase";
 import { v4 as uuid } from "uuid";
 import { getDownloadURL, ref, uploadBytes } from "firebase/storage";

+function swapHalves(input) {
+  // Split the input string into two equal halves
+  const midpoint = input.length / 2;
+  const firstHalf = input.slice(0, midpoint);
+  const secondHalf = input.slice(midpoint);
+
+  // Swap the two halves and return the result
+  return secondHalf + firstHalf;
+}
+
 const Input = () => {
  const wavesurferRef = useRef(null);
  const [audioSrc, setAudioSrc] = useState(null);
@ -136,15 +146,47 @@ const Input = () => {
        await uploadBytes(storageRef, audio);

        const downloadURL = await getDownloadURL(storageRef);
+
+        await fetch("http://localhost:5000/speechurl", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          redirect: "follow", // manual, *follow, error
+          referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+          body: JSON.stringify([downloadURL]), // body data type must match "Content-Type" header
+        });
+        const res = await fetch("http://localhost:5000/video");
+        console.log("uploading video");
+        const videoStorageRef = ref(storage, uuid());
+        console.log(res);
+        const blob = await res.blob();
+        await uploadBytes(videoStorageRef, blob);
+        console.log(blob);
+        console.log("done");
+        console.log("video");
+        const videoURL = await getDownloadURL(videoStorageRef);
+
        await updateDoc(doc(db, "chats", data.chatId), {
          messages: arrayUnion({
            id: uuid(),
            senderId: currentUser.uid,
            date: Timestamp.now(),
            audio: downloadURL,
+            video: videoURL,
+          }),
+        });
+        console.log(swapHalves(data.chatId));
+        await updateDoc(doc(db, "chats", swapHalves(data.chatId)), {
+          messages: arrayUnion({
+            id: uuid(),
+            senderId: currentUser.uid,
+            date: Timestamp.now(),
+            audio: downloadURL,
+            video: videoURL,
          }),
        });
-        console.log(downloadURL);

        setAudio(null);
        setAudioSrc(null);
@ -159,23 +201,6 @@ const Input = () => {
          updateDoc(doc(db, "userChats", currentUser.uid), userChatsUpdates),
          updateDoc(doc(db, "userChats", data.user.uid), userChatsUpdates),
        ]);
-        fetch("http://localhost:5000/speechurl", {
-          method: "POST",
-          mode: "cors", // no-cors, *cors, same-origin
-          cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
-          credentials: "same-origin", // include, *same-origin, omit
-          headers: {
-            "Content-Type": "application/json",
-            // 'Content-Type': 'application/x-www-form-urlencoded',
-          },
-          redirect: "follow", // manual, *follow, error
-          referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
-          body: JSON.stringify([downloadURL]), // body data type must match "Content-Type" header
-        })
-          .then((res) => res.json())
-          .then((data) => console.log(data))
-          .catch((err) => console.error(err))
-          .then(() => window.open("http://localhost:5000/video"));
      } catch (error) {
        console.error("Error uploading audio:", error);
      }