diff --git a/frontend-next/package-lock.json b/frontend-next/package-lock.json index 0f64ad3..1dae226 100644 --- a/frontend-next/package-lock.json +++ b/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", diff --git a/frontend-next/package.json b/frontend-next/package.json index 99186fa..b49010e 100644 --- a/frontend-next/package.json +++ b/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", diff --git a/frontend-next/src/components/app/datatypes.js b/frontend-next/src/components/app/datatypes.js index d0ba43b..b8670c5 100644 --- a/frontend-next/src/components/app/datatypes.js +++ b/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 (
@@ -152,7 +158,8 @@ export function Chat({ chatObj, user, path }) { {chatObj.user} - {message} + {message.substring(0,4) == "/tts" && ( {chatObj.user + " said " + message.substring(5,message.length)} )} + {message.substring(0,4) != "/tts" && message}
{new Date(chatObj.timestamp).toLocaleString(dateOptions)} diff --git a/frontend-next/src/components/app/map/geo.js b/frontend-next/src/components/app/map/geo.js index f230319..ab76bba 100644 --- a/frontend-next/src/components/app/map/geo.js +++ b/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()) {