From a4f85e23e74763f4d63b0e455f99348fb55f1864 Mon Sep 17 00:00:00 2001 From: Asaia Palacios <14948113+asaiapalacios@users.noreply.github.com> Date: Fri, 2 Sep 2022 13:05:56 -0500 Subject: [PATCH 1/5] add sound for testing purposes to sign-in, send-message and sign-out button --- package-lock.json | 30 +++++++++++++++++++++++++ package.json | 1 + src/components/BottomInputComponent.js | 7 +++++- src/components/SignIn.js | 6 +++++ src/components/TopNavigationBar.js | 5 +++++ src/sounds/arcade-button.mp3 | Bin 0 -> 20315 bytes src/sounds/beep-error.mp3 | Bin 0 -> 2606 bytes src/sounds/login.mp3 | Bin 0 -> 40795 bytes src/sounds/logout.mp3 | Bin 0 -> 86637 bytes 9 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 src/sounds/arcade-button.mp3 create mode 100644 src/sounds/beep-error.mp3 create mode 100644 src/sounds/login.mp3 create mode 100644 src/sounds/logout.mp3 diff --git a/package-lock.json b/package-lock.json index c663c82..1032a15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-icons": "^4.4.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "use-sound": "^4.0.1", "web-vitals": "^2.1.4" } }, @@ -9737,6 +9738,11 @@ "node": ">=10" } }, + "node_modules/howler": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz", + "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==" + }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -18282,6 +18288,17 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sound": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.1.tgz", + "integrity": "sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==", + "dependencies": { + "howler": "^2.1.3" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -26360,6 +26377,11 @@ "lru-cache": "^6.0.0" } }, + "howler": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz", + "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==" + }, "hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -32477,6 +32499,14 @@ "punycode": "^2.1.0" } }, + "use-sound": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.1.tgz", + "integrity": "sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==", + "requires": { + "howler": "^2.1.3" + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 7034cd5..f29b632 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-icons": "^4.4.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "use-sound": "^4.0.1", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/components/BottomInputComponent.js b/src/components/BottomInputComponent.js index 662c3d2..f6441f0 100644 --- a/src/components/BottomInputComponent.js +++ b/src/components/BottomInputComponent.js @@ -6,6 +6,8 @@ import { BsFillArrowUpSquareFill } from "react-icons/bs" import Container from "react-bootstrap/Container" import Navbar from "react-bootstrap/Navbar" import { ThemeContext } from "../context.js" +import useSound from "use-sound" +import buttonSound from "../sounds/arcade-button.mp3" function BottomInputComponent({ currentUser, isFocused }) { const [message, setMessage] = useState("") @@ -34,7 +36,7 @@ function BottomInputComponent({ currentUser, isFocused }) { } } -// ======================================================== + // ======================================================== // add character limit & prevent page reload on space submission // ======================================================== const handleSubmitMessage = (e) => { @@ -44,9 +46,12 @@ function BottomInputComponent({ currentUser, isFocused }) { e.preventDefault() saveMessage(message) setMessage("") + buttonSfx() } } + const [buttonSfx] = useSound(buttonSound) + // Perform focus on input field's element via the DOM API when component renders/dependency changes // (imperative approach) const inputRef = React.useRef() diff --git a/src/components/SignIn.js b/src/components/SignIn.js index a9b94fc..dc81c48 100644 --- a/src/components/SignIn.js +++ b/src/components/SignIn.js @@ -6,6 +6,9 @@ import spinner from "../assets/loading_spinner_icon_yellow.png" import { Link } from "react-router-dom" import Button from "react-bootstrap/Button" import "./SignIn.css" +// import use-sound React hook for sound effects +import useSound from "use-sound" +import loginSound from "../sounds/login.mp3" function SignIn({ handleAuthStateChange, @@ -18,6 +21,8 @@ function SignIn({ }) }, []) + const [loginSfx] = useSound(loginSound) + return (
QJnLcUZv |Z(U#er~I{yj8K%syp>ZvY2|vqB+jw`74BvL9*V
zD|m^>8mhpimI==r7?+Yh{wlO5SWP^lA~-W06OpX>@#uAUccvOI@3XhY<1`1gSmCPR
zViKDbab>`)(ACdMCDvk6VWYFiMe=qM?=oX-wDmgV01x%G-yNl_Vq2a8E{aVOgpO|i
z?^hrBCL}2MnVu6j|AyvX4V7)OZJfQiVV#r{pAJ#=KjV}&fenQbE_-UTAgh|76~(Zu
z eJeijTxN
zB0&CFa9uY<8q8A
zy7>78Uirzp@63<-(G-exMYw5#A~pm$anSppec)V75s~5MKl^RF^(Y^Kn~#io
~s?QIQFSONw7_
Z-K`=TZfu2}v0(EVR
zO0uk~Zfy}}