frontend-next/package-lock.json

@@ -28,7 +28,8 @@
         "react-dom": "^18.2.0",
         "react-firebase-hooks": "^5.1.1",
         "react-hook-form": "^7.50.1",
-        "react-test-renderer": "^18.2.0"
+        "react-test-renderer": "^18.2.0",
+        "tts-react": "^3.0.6"
       },
       "devDependencies": {
         "@capacitor/assets": "^3.0.5",
@@ -14401,6 +14402,19 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
+    "node_modules/tts-react": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/tts-react/-/tts-react-3.0.6.tgz",
+      "integrity": "sha512-r8WYOihMEdS6apoQFJ6iVf+pDxc77Z6cWRcC1DQ8tHRcarEZ1VDEA29mnvjN1AhQNflIhtp5qYTz/0/iJWjsjA==",
+      "engines": {
+        "node": ">=18.16.0",
+        "npm": ">=9.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

frontend-next/package.json

@@ -30,7 +30,8 @@
     "react-dom": "^18.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.50.1",
-    "react-test-renderer": "^18.2.0"
+    "react-test-renderer": "^18.2.0",
+    "tts-react": "^3.0.6"
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",

frontend-next/src/components/app/datatypes.js

@@ -11,6 +11,8 @@ import PersonIcon from '@mui/icons-material/Person';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import CircleIcon from '@mui/icons-material/Circle';
 
+import { useTts, TextToSpeech } from 'tts-react'
+
 // Colors for Messages
 const userColors = [
   "#ff80ed",
@@ -142,6 +144,10 @@ export function Chat({ chatObj, user, path }) {
   } else {
     var message = chatObj.body
   }
+
+  const Speak = ({ children }) => (
+    <>{useTts({ children, autoPlay: true }).ttsChildren}</>
+  )
   return (
     <div className="width-[100%] bg-white rounded-lg mt-1 text-left p-1 grid grid-cols-2 mr-2">
       <div>
@@ -152,7 +158,8 @@ export function Chat({ chatObj, user, path }) {
             {chatObj.user}
           </Link>
         </span>
-        {message}
+        {message.substring(0,4) == "/tts" && (<TextToSpeech autoPlay={true}> {chatObj.user + " said " + message.substring(5,message.length)} </TextToSpeech>)}
+        {message.substring(0,4) != "/tts" && message}
       </div>
       <div className="text-right text-[#d1d1d1]">
         {new Date(chatObj.timestamp).toLocaleString(dateOptions)}

frontend-next/src/components/app/map/geo.js

@@ -78,7 +78,7 @@ export function Geo({ loc, zoom, moveable, user }) {
 
     // Load Nearby Markers
     var nearbyMarkers = null;
-    if (location) {
+    if (loc) {
       const path = String(loc.latitude.toFixed(2)).replace(".", "") +"/" +String(loc.longitude.toFixed(2)).replace(".", "") +"/";
       get(ref(database, `/rooms/${path}`)).then((snapshot) => {
         if (snapshot.exists()) {