Fix : volumeSlider

streaming-react-app/src/RoomConfig.tsx

@@ -232,7 +232,7 @@ export default function RoomConfig({
                 disabled={
                   roomState?.room_id != null ||
                   joinInProgress ||
-                  streamingStatus !== "stopped"
+                  streamingStatus !== "stopped" || !isValidRoles
                 }
                 onClick={() => onJoinRoom(true)}
               >

streaming-react-app/src/StreamingInterface.tsx

@@ -1,9 +1,9 @@
-import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
-import Select, {SelectChangeEvent} from '@mui/material/Select';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import Stack from '@mui/material/Stack';
 import {
@@ -30,8 +30,8 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import './StreamingInterface.css';
 import RoomConfig from './RoomConfig';
-import {useSocket} from './useSocket';
-import {RoomState} from './types/RoomState';
+import { useSocket } from './useSocket';
+import { RoomState } from './types/RoomState';
 import useStable from './useStable';
 import float32To16BitPCM from './float32To16BitPCM';
 import createBufferedSpeechPlayer from './createBufferedSpeechPlayer';
@@ -51,13 +51,13 @@ import {
   getTotalSentencesLength,
 } from './sliceTranslationSentencesUtils';
 import Blink from './Blink';
-import {CURSOR_BLINK_INTERVAL_MS} from './cursorBlinkInterval';
-import {getURLParams} from './URLParams';
+import { CURSOR_BLINK_INTERVAL_MS } from './cursorBlinkInterval';
+import { getURLParams } from './URLParams';
 import debug from './debug';
 import DebugSection from './DebugSection';
 import Switch from '@mui/material/Switch';
 import Grid from '@mui/material/Grid';
-import {getLanguageFromThreeLetterCode} from './languageLookup';
+import { getLanguageFromThreeLetterCode } from './languageLookup';
 import HeadphonesIcon from '@mui/icons-material/Headphones';
 
 const AUDIO_STREAM_DEFAULTS = {
@@ -75,7 +75,7 @@ async function requestUserMediaAudioStream(
   config: BrowserAudioStreamConfig = AUDIO_STREAM_DEFAULTS['userMedia'],
 ) {
   const stream = await navigator.mediaDevices.getUserMedia({
-    audio: {...config, channelCount: 1},
+    audio: { ...config, channelCount: 1 },
   });
   console.debug(
     '[requestUserMediaAudioStream] stream created with settings:',
@@ -88,7 +88,7 @@ async function requestDisplayMediaAudioStream(
   config: BrowserAudioStreamConfig = AUDIO_STREAM_DEFAULTS['displayMedia'],
 ) {
   const stream = await navigator.mediaDevices.getDisplayMedia({
-    audio: {...config, channelCount: 1},
+    audio: { ...config, channelCount: 1 },
   });
   console.debug(
     '[requestDisplayMediaAudioStream] stream created with settings:',
@@ -97,7 +97,7 @@ async function requestDisplayMediaAudioStream(
   return stream;
 }
 
-const buttonLabelMap: {[key in StreamingStatus]: string} = {
+const buttonLabelMap: { [key in StreamingStatus]: string } = {
   stopped: 'Start broadcasting',
   running: 'Stop broadcasting',
   starting: 'Starting...',
@@ -126,7 +126,7 @@ export default function StreamingInterface() {
   );
 
   const socketObject = useSocket();
-  const {socket, clientID} = socketObject;
+  const { socket, clientID } = socketObject;
 
   const [serverState, setServerState] = useState<ServerState | null>(null);
   const [agent, setAgent] = useState<AgentCapabilities | null>(null);
@@ -228,9 +228,9 @@ export default function StreamingInterface() {
 
   const translationSentences: TranslationSentences = animateTextDisplay
     ? sliceTranslationSentencesUpToIndex(
-        translationSentencesBase,
-        translationSentencesAnimatedIndex,
-      )
+      translationSentencesBase,
+      translationSentencesAnimatedIndex,
+    )
     : translationSentencesBase;
 
   // We want the blinking cursor to show before any text has arrived, so let's add an empty string so that the cursor shows up
@@ -281,7 +281,7 @@ export default function StreamingInterface() {
     [socket],
   );
 
-  const configureStreamAsync = ({sampleRate}: {sampleRate: number}) => {
+  const configureStreamAsync = ({ sampleRate }: { sampleRate: number }) => {
     return new Promise<void>((resolve, reject) => {
       if (socket == null) {
         reject(new Error('[configureStreamAsync] socket is null '));
@@ -672,7 +672,7 @@ export default function StreamingInterface() {
     <Stack
       spacing={2}
       direction="row"
-      sx={{mb: 1, width: '100%'}}
+      sx={{ mb: 1, width: '100%' }}
       alignItems="center">
       <VolumeDown color="primary" />
       <Slider
@@ -683,10 +683,10 @@ export default function StreamingInterface() {
         max={3}
         step={0.1}
         marks={[
-          {value: 0, label: '0%'},
-          {value: 1, label: '100%'},
-          {value: 2, label: '400%'},
-          {value: 3, label: '700%'},
+          { value: 0, label: '0%' },
+          { value: 1, label: '100%' },
+          { value: 2, label: '400%' },
+          { value: 3, label: '700%' },
         ]}
         valueLabelFormat={(value) => `${(value * 100).toFixed(0)}%`}
         valueLabelDisplay="auto"
@@ -737,39 +737,45 @@ export default function StreamingInterface() {
       <div
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore Not sure why it's complaining about complexity here
-        style={{width:"100%"}}
-        >
+        style={{ width: "100%" }}
+      >
         <div className="main-container-sra">
           <Stack direction={{ xs: 'column', md: 'row' }} spacing={6} className="top-section-sra horizontal-padding-sra">
-          <Stack alignItems="center" sx={{ flex: 1, borderRight: { md: 1 } }}>
-            <div className="header-container-sra">
-              <img
-                src={"./logo.png"}
-                className="header-icon-sra"
-                alt="Hotdub Translation Logo"
-                
-              />
+            <Stack alignItems="center" sx={{ flex: 1, borderRight: { md: 1 } }}>
+              <div className="header-container-sra">
+                <img
+                  src={"./logo.png"}
+                  className="header-icon-sra"
+                  alt="Hotdub Translation Logo"
+
+                />
 
-              <div>
-                <Typography variant="h1" fontSize={20} >
-                  Hotdub Real Time Translation
-                </Typography>
+                <div>
+                  <Typography variant="h1" fontSize={20} >
+                    Hotdub Real Time Translation
+                  </Typography>
+                </div>
               </div>
-            </div>
-            
+
               {/* <Box> */}
-                <RoomConfig
-                  roomState={roomState}
-                  serverState={serverState}
-                  streamingStatus={streamingStatus}
-                  onJoinRoomOrUpdateRoles={() => {
-                    // If the user has switched from speaker to listener we need to tell the
-                    // player to play eagerly, since currently the listener doesn't have any stop/start controls
-                    bufferedSpeechPlayer.start();
-                  }}
-                />
+              <RoomConfig
+                roomState={roomState}
+                serverState={serverState}
+                streamingStatus={streamingStatus}
+                onJoinRoomOrUpdateRoles={() => {
+                  // If the user has switched from speaker to listener we need to tell the
+                  // player to play eagerly, since currently the listener doesn't have any stop/start controls
+                  bufferedSpeechPlayer.start();
+                }}
+              />
+            </Stack>
 
-                {isListener && !isSpeaker && (
+            <Stack spacing="22px" direction="column" sx={{ flex: 1 }}>
+              {isListener && !isSpeaker && (
+                <>
+                  <FormLabel id="output-modes-radio-group-label">
+                    Volume Level
+                  </FormLabel>
                   <Box
                     sx={{
                       paddingX: 6,
@@ -781,22 +787,19 @@ export default function StreamingInterface() {
                     }}>
                     {volumeSliderNode}
                   </Box>
-                )}
-              {/* </Box> */}
-              </Stack>
-
-              <Stack spacing="22px" direction="column" sx={{flex:1}}>
+                </>
+              )}
               {isSpeaker && (
                 <>
-                <Stack spacing={0.5}>
+                  <Stack spacing={0.5}>
                     <FormLabel id="output-modes-radio-group-label">
                       Output
                     </FormLabel>
 
-                    <Box sx={{paddingTop: 2, paddingBottom: 1}}>
-                      <FormControl fullWidth sx={{minWidth: '14em'}}>
+                    <Box sx={{ paddingTop: 2, paddingBottom: 1 }}>
+                      <FormControl fullWidth sx={{ minWidth: '14em' }}>
                         <InputLabel id="target-selector-input-label">
-                           Language
+                          Language
                         </InputLabel>
                         <Select
                           labelId="target-selector-input-label"
@@ -812,8 +815,8 @@ export default function StreamingInterface() {
                             <MenuItem value={langCode} key={langCode}>
                               {getLanguageFromThreeLetterCode(langCode) != null
                                 ? `${getLanguageFromThreeLetterCode(
-                                    langCode,
-                                  )} (${langCode})`
+                                  langCode,
+                                )} (${langCode})`
                                 : langCode}
                             </MenuItem>
                           ))}
@@ -837,7 +840,7 @@ export default function StreamingInterface() {
                             name="output-modes-radio-buttons-group">
                             {
                               // TODO: Use supported modalities from agentCapabilities
-                              SUPPORTED_OUTPUT_MODES.map(({value, label}) => (
+                              SUPPORTED_OUTPUT_MODES.map(({ value, label }) => (
                                 <FormControlLabel
                                   key={value}
                                   value={value}
@@ -855,28 +858,28 @@ export default function StreamingInterface() {
                           direction="column"
                           spacing={1}
                           alignItems="flex-start"
-                          sx={{flexGrow: 1}}>
+                          sx={{ flexGrow: 1 }}>
                           {currentAgent?.dynamicParams?.includes(
                             'expressive',
                           ) && (
-                            <FormControlLabel
-                              control={
-                                <Switch
-                                  checked={enableExpressive ?? false}
-                                  onChange={(
-                                    event: React.ChangeEvent<HTMLInputElement>,
-                                  ) => {
-                                    const newValue = event.target.checked;
-                                    setEnableExpressive(newValue);
-                                    onSetDynamicConfig({
-                                      expressive: newValue,
-                                    });
-                                  }}
-                                />
-                              }
-                              label="Expressive"
-                            />
-                          )}
+                              <FormControlLabel
+                                control={
+                                  <Switch
+                                    checked={enableExpressive ?? false}
+                                    onChange={(
+                                      event: React.ChangeEvent<HTMLInputElement>,
+                                    ) => {
+                                      const newValue = event.target.checked;
+                                      setEnableExpressive(newValue);
+                                      onSetDynamicConfig({
+                                        expressive: newValue,
+                                      });
+                                    }}
+                                  />
+                                }
+                                label="Expressive"
+                              />
+                            )}
 
                           {isListener && (
                             <Box
@@ -904,7 +907,7 @@ export default function StreamingInterface() {
                         agentsCapabilities.length === 0
                       }
                       fullWidth
-                      sx={{minWidth: '14em'}}>
+                      sx={{ minWidth: '14em' }}>
                       <InputLabel id="model-selector-input-label">
                         Model
                       </InputLabel>
@@ -943,7 +946,7 @@ export default function StreamingInterface() {
                     <Box >
                       <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel id="input-source-radio-group-label">
-                        Audio Input
+                          Audio Input
                         </FormLabel>
                         <RadioGroup
                           aria-labelledby="input-source-radio-group-label"
@@ -954,7 +957,7 @@ export default function StreamingInterface() {
                             )
                           }
                           name="input-source-radio-buttons-group">
-                          {SUPPORTED_INPUT_SOURCES.map(({label, value}) => (
+                          {SUPPORTED_INPUT_SOURCES.map(({ label, value }) => (
                             <FormControlLabel
                               key={value}
                               value={value}
@@ -967,7 +970,7 @@ export default function StreamingInterface() {
                     </Box>
 
                     <Box >
-                    <FormControl disabled={streamFixedConfigOptionsDisabled}>
+                      <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel>Options</FormLabel>
                         <FormControlLabel
                           control={
@@ -1043,7 +1046,7 @@ export default function StreamingInterface() {
                   <Stack direction="row" spacing={6} justifyContent="center">
                     {streamingStatus === 'stopped' ? (
                       <Button
-                      sx={{borderRadius: "20px"}}
+                        sx={{ borderRadius: "20px" }}
                         variant="contained"
                         onClick={startStreaming}
                         disabled={
@@ -1110,7 +1113,7 @@ export default function StreamingInterface() {
                   )}
                   {serverState != null &&
                     serverState.totalActiveTranscoders >=
-                      TOTAL_ACTIVE_TRANSCODER_WARNING_THRESHOLD && (
+                    TOTAL_ACTIVE_TRANSCODER_WARNING_THRESHOLD && (
                       <div>
                         <Alert severity="warning">
                           {`The server currently has ${serverState?.totalActiveTranscoders} active streaming sessions. Performance may be degraded.`}