From 0ddbf70f4f547e3e4e710395d06121ad71d7c7e2 Mon Sep 17 00:00:00 2001 From: vikiyarema Date: Sun, 19 Oct 2025 22:06:29 -0500 Subject: [PATCH 1/3] added tool tip for "menu" and added a keyboard shortcut: ctrl m --- package-lock.json | 67 +++++++++++++++++++++ package.json | 5 ++ src/components/navbars/appNavBar.tsx | 11 ++-- src/components/navbars/topbar/listening.tsx | 39 ++++++------ 4 files changed, 101 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3951476..1aa8301 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,8 @@ "react-color": "^2.19.3", "react-dom": "^17.0.2", "react-google-charts": "^3.0.15", + "react-hotkeys-hook": "^3.4.7", + "react-keyboard": "^1.0.10", "react-qr-code": "^2.0.15", "react-redux": "^8.0.5", "react-scripts": "^5.0.1", @@ -52,6 +54,9 @@ "wav-decoder": "^1.3.0", "web-vitals": "^2.1.2", "webvtt-parser": "^2.2.0" + }, + "devDependencies": { + "prettier": "^3.6.2" } }, "node_modules/@adobe/css-tools": { @@ -9577,6 +9582,12 @@ "node": ">= 6.0.0" } }, + "node_modules/hotkeys-js": { + "version": "3.9.4", + "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.4.tgz", + "integrity": "sha512-2zuLt85Ta+gIyvs4N88pCYskNrxf1TFv3LR9t5mdAZIX8BcgQQ48F2opUptvHa6m8zsy5v/a0i9mWzTrlNWU0Q==", + "license": "MIT" + }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -12934,6 +12945,13 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.", + "license": "MIT" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -13415,6 +13433,12 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/mousetrap": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz", + "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==", + "license": "Apache-2.0 WITH LLVM-exception" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -15306,6 +15330,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", + "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -15766,11 +15806,38 @@ "react-dom": ">=16.3.0" } }, + "node_modules/react-hotkeys-hook": { + "version": "3.4.7", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.7.tgz", + "integrity": "sha512-+bbPmhPAl6ns9VkXkNNyxlmCAIyDAcWbB76O4I0ntr3uWCRuIQf/aRLartUahe9chVMPj+OEzzfk3CQSjclUEQ==", + "license": "MIT", + "dependencies": { + "hotkeys-js": "3.9.4" + }, + "peerDependencies": { + "react": ">=16.8.1", + "react-dom": ">=16.8.1" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-keyboard": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/react-keyboard/-/react-keyboard-1.0.10.tgz", + "integrity": "sha512-uWd6Yd7AYxmu2rULxYdDhUAQqEktWJTNRRZ/rPUe1FekuoMHucwlvKjnQ3eo7BflL/S5ReR7wLKsHFFe4tHiKQ==", + "license": "MIT", + "dependencies": { + "lodash.isequal": "^4.5.0", + "mousetrap": "^1.6.2" + }, + "peerDependencies": { + "react": ">= 0.14.0", + "react-dom": ">= 0.14.0" + } + }, "node_modules/react-load-script": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/react-load-script/-/react-load-script-0.0.6.tgz", diff --git a/package.json b/package.json index c3973db..807432a 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,8 @@ "react-color": "^2.19.3", "react-dom": "^17.0.2", "react-google-charts": "^3.0.15", + "react-hotkeys-hook": "^3.4.7", + "react-keyboard": "^1.0.10", "react-qr-code": "^2.0.15", "react-redux": "^8.0.5", "react-scripts": "^5.0.1", @@ -75,5 +77,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "prettier": "^3.6.2" } } diff --git a/src/components/navbars/appNavBar.tsx b/src/components/navbars/appNavBar.tsx index a73f959..ecdd9f7 100644 --- a/src/components/navbars/appNavBar.tsx +++ b/src/components/navbars/appNavBar.tsx @@ -10,6 +10,7 @@ import { AppBar, Toolbar, Typography, + Tooltip, // useMediaQuery, // useTheme } from '@mui/material'; @@ -59,9 +60,11 @@ export default function AppNavBar(props) { {/* Left Section: Menu Icon and Title */} - - - + + + + + @@ -94,4 +97,4 @@ export default function AppNavBar(props) { ); -} \ No newline at end of file +} diff --git a/src/components/navbars/topbar/listening.tsx b/src/components/navbars/topbar/listening.tsx index f137420..c3c442e 100644 --- a/src/components/navbars/topbar/listening.tsx +++ b/src/components/navbars/topbar/listening.tsx @@ -4,37 +4,42 @@ import { RootState } from '../../../store'; import { ControlStatus } from '../../../react-redux&middleware/redux/typesImports'; import Theme from '../../theme' import * as React from 'react'; - +import { useHotkeys } from 'react-hotkeys-hook' export default function CustomizedMenus(props) { console.log(Theme()) const dispatch = useDispatch() + let controlStatus = useSelector((state: RootState) => { return state.ControlReducer as ControlStatus; }); - const handleClick = (event: React.KeyboardEvent | React.MouseEvent) => { + const handleClick = (event: React.KeyboardEvent | React.MouseEvent | KeyboardEvent) => { controlStatus.listening = !controlStatus.listening dispatch({type: 'FLIP_RECORDING', payload: controlStatus}) - } + } + const {myTheme} = Theme() + + useHotkeys('ctrl+m', (e) => { + handleClick(e) + }) // color "primary" comes from Theme() return ( -
- - - - {props.listening ? - : - - } - - - - -
+
+ + + + {props.listening ? + : + + } + + + +
); } From 40ccc696134d3e4496c09d993b75e23913e3f76e Mon Sep 17 00:00:00 2001 From: vikiyarema Date: Sun, 19 Oct 2025 22:18:04 -0500 Subject: [PATCH 2/3] bug fix --- src/components/navbars/topbar/listening.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/navbars/topbar/listening.tsx b/src/components/navbars/topbar/listening.tsx index c3c442e..b289f97 100644 --- a/src/components/navbars/topbar/listening.tsx +++ b/src/components/navbars/topbar/listening.tsx @@ -23,6 +23,7 @@ import { useHotkeys } from 'react-hotkeys-hook' const {myTheme} = Theme() useHotkeys('ctrl+m', (e) => { + e.preventDefault(); handleClick(e) }) From 98f5f1c43198c121362b5de7ad6769b2a4f88ecf Mon Sep 17 00:00:00 2001 From: vikiyarema Date: Thu, 23 Oct 2025 15:13:26 -0500 Subject: [PATCH 3/3] undid changes --- src/components/navbars/topbar/listening.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/navbars/topbar/listening.tsx b/src/components/navbars/topbar/listening.tsx index b289f97..4d7b88d 100644 --- a/src/components/navbars/topbar/listening.tsx +++ b/src/components/navbars/topbar/listening.tsx @@ -4,7 +4,6 @@ import { RootState } from '../../../store'; import { ControlStatus } from '../../../react-redux&middleware/redux/typesImports'; import Theme from '../../theme' import * as React from 'react'; -import { useHotkeys } from 'react-hotkeys-hook' export default function CustomizedMenus(props) { console.log(Theme()) @@ -21,11 +20,6 @@ import { useHotkeys } from 'react-hotkeys-hook' } const {myTheme} = Theme() - - useHotkeys('ctrl+m', (e) => { - e.preventDefault(); - handleClick(e) - }) // color "primary" comes from Theme() return (