chore: reinstate readaloud controls

concord-consortium · Nov 22, 2024 · 32fc688 · 32fc688
1 parent a64b79e
commit 32fc688
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,6 +5,7 @@ import { ChatInputComponent } from "./chat-input";
 import { ChatTranscriptComponent } from "./chat-transcript";
 import { ChatTranscript, ChatMessage } from "../types";
 import { timeStamp } from "../utils";
+import { ReadAloudMenu } from "./readaloud-menu";
 
 import "./App.css";
 
@@ -27,8 +28,8 @@ const mockAiResponse = (): ChatMessage => {
 export const App = () => {
   const greeting = "Hello! I'm DAVAI, your Data Analysis through Voice and Artificial Intelligence partner.";
   const [chatTranscript, setChatTranscript] = useState<ChatTranscript>({messages: [{speaker: "DAVAI", content: greeting, timestamp: timeStamp()}]});
-  // const [readAloudEnabled, setReadAloudEnabled] = useState(false);
-  // const [playbackSpeed, setPlaybackSpeed] = useState(1);
+  const [readAloudEnabled, setReadAloudEnabled] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1);
 
   useEffect(() => {
     initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions});
@@ -38,13 +39,13 @@ export const App = () => {
     selectSelf();
   };
 
-  // const handleSetReadAloudEnabled = () => {
-  //   setReadAloudEnabled(!readAloudEnabled);
-  // };
+  const handleSetReadAloudEnabled = () => {
+    setReadAloudEnabled(!readAloudEnabled);
+  };
 
-  // const handleSetPlaybackSpeed = (speed: number) => {
-  //   setPlaybackSpeed(speed);
-  // };
+  const handleSetPlaybackSpeed = (speed: number) => {
+    setPlaybackSpeed(speed);
+  };
 
   const handleChatInputSubmit = (messageText: string) => {
     setChatTranscript(prevTranscript => ({
@@ -68,12 +69,12 @@ export const App = () => {
       </header>
       <ChatTranscriptComponent chatTranscript={chatTranscript} />
       <ChatInputComponent onSubmit={handleChatInputSubmit} onKeyboardShortcut={handleFocusShortcut} />
-      {/* <ReadAloudMenu
+      <ReadAloudMenu
         enabled={readAloudEnabled}
         onToggle={handleSetReadAloudEnabled}
         playbackSpeed={playbackSpeed}
         onPlaybackSpeedSelect={handleSetPlaybackSpeed}
-      /> */}
+      />
     </div>
   );
 };
diff --git a/src/components/readaloud-menu.scss b/src/components/readaloud-menu.scss
@@ -29,7 +29,7 @@
     label {
       cursor: pointer;
       line-height: 1.4;
-      font-size: pxToRem(16);
+      font-size: .75rem;
       user-select: none;
       font-weight: bold;
       white-space: nowrap;

diff --git a/src/components/readaloud-menu.tsx b/src/components/readaloud-menu.tsx
@@ -17,8 +17,8 @@ export const ReadAloudMenu = (props: IReadAloudMenuProps) => {
   };
 
   return (
-    <div className="readaloud-controls" role="menu">
-      <div role="menuitem" className="toggle">
+    <div className="readaloud-controls">
+      <div className="toggle">
         <label htmlFor="readaloud-toggle" data-testid="toggle-label">
           Tap text to listen
         </label>
@@ -32,7 +32,7 @@ export const ReadAloudMenu = (props: IReadAloudMenuProps) => {
           onChange={onToggle}
         />
       </div>
-      <div role="menuitem">
+      <div className="select-playback-speed">
         <label
           data-testid="speed-label"
           className="visually-hidden"