@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Exercises/ListenAndSpeak/ListenAndSpeak.js

@@ -1,963 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { Joyride, STATUS } from "react-joyride";
-import { makeStyles } from "tss-react/mui";
-import { useTheme } from "@mui/material/styles";
-import { Grid, Slide, IconButton, Button, Toolbar, AppBar, Dialog, Typography, Box, Tooltip } from "@mui/material";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
-import Replay from "@mui/icons-material/Replay";
-import VolumeOff from "@mui/icons-material/VolumeOff";
-import VolumeUp from "@mui/icons-material/VolumeUp";
-import Mic from "@mui/icons-material/Mic";
-import MicOffIcon from "@mui/icons-material/MicOff";
-import Clear from "@mui/icons-material/Clear";
-import Close from "@mui/icons-material/Close";
-import CloseExerciseMenu from "../../Dialogs/ExerciseMenu/Menus/CloseExercise/CloseExercise";
-import InProgressExerciseMenu from "../../Dialogs/ExerciseMenu/Menus/InProgressExercise/InProgressExercise";
-import CompletedExcercise from "../../Dialogs/ExerciseMenu/Menus/CompletedExcercise/CompletedExcercise";
-import Waveform from "../../Misc/Waveform/Waveform";
-import AnswerResult from "../../Misc/AnswerResult/AnswerResult";
-import ExerciseProgressBar from "../../Misc/ExerciseProgressBar/ExerciseProgressBar";
-import ExerciseBottomBar from "../../Misc/ExerciseBottomBar/ExerciseBottomBar";
-import useExerciseState from "../../hooks/useExerciseState";
-import useExerciseDocumentTitle from "../../hooks/useExerciseDocumentTitle";
-import useRecognition from "../../hooks/useRecognition";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-import VoiceSpeedSelector from "../../Misc/VoiceSpeed/VoiceSpeed";
-import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
-import ChatBubble from "../../Misc/ChatBubble/ChatBubble";
-import WaveFormLite from "../../Misc/WaveFormLite/WaveFormLite";
-import { removeExtraWhiteSpaces, removeAllSymbols } from "../../utils";
-import getVoiceImages from "../../utils/voiceImages";
-import { useNavigate } from "react-router";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  appBar: {
-    position: "relative",
-    paddingTop: `env(safe-area-inset-top)`,
-    paddingRight: `env(safe-area-inset-right)`,
-    paddingLeft: `env(safe-area-inset-left)`
-  },
-  flex: {
-    [theme.breakpoints.down("md")]: {
-      display: "none"
-    },
-    flex: 1
-  },
-  root: {
-    [theme.breakpoints.down("md")]: {
-      padding: theme.spacing(2)
-    },
-    flexGrow: 1,
-    width: "100%",
-    padding: theme.spacing(4)
-  },
-  progress: {
-    width: "100%",
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2)
-  },
-  largeScreenProgressBar: {
-    [theme.breakpoints.down("sm")]: {
-      display: "none"
-    }
-  },
-  mobileAdditionalToolbar: {
-    display: "none",
-    [theme.breakpoints.down("sm")]: {
-      display: "flex"
-    }
-  },
-  iconSmall: {
-    fontSize: 20
-  },
-  iconLarge: {
-    [theme.breakpoints.down("md")]: {
-      fontSize: 60
-    },
-    fontSize: 70
-  },
-  image: {
-    [theme.breakpoints.down("md")]: {
-      maxWidth: "200px",
-      maxHeight: "150px"
-    },
-    maxWidth: "250px",
-    height: "auto",
-    maxHeight: "200px",
-    borderRadius: "20px"
-  },
-  nualaSpeaking: {
-    [theme.breakpoints.down("md")]: {
-      height: "80px"
-    },
-    height: "100px",
-    minHeight: "80px",
-    minWidth: "80px",
-    borderRadius: "20px"
-  },
-  listenButton: {
-    marginRight: theme.spacing(1)
-  },
-  finalTranscript: {
-    marginRight: theme.spacing(1),
-    fontWeight: 600,
-    display: "inline-block"
-  },
-  waveform: {
-    width: "100%",
-    maxWidth: 600
-  },
-  setWidth: {
-    [theme.breakpoints.down("md")]: {
-      width: "90%"
-    },
-    width: "50%",
-    textAlign: "center"
-  }
-}));
-function Transition(props) {
-  return /*#__PURE__*/_jsx(Slide, {
-    direction: "up",
-    ...props
-  });
-}
-function ListenAndSpeak({
-  t = text => text,
-  exerciseName = "meaning-listen-and-speak",
-  phrases = [],
-  remainingQuestions,
-  handleTranslate,
-  forLang,
-  open,
-  handleClose,
-  history,
-  topicInfo = {},
-  learnLang,
-  handleSpeak,
-  clearQueue,
-  stopAudio,
-  openSnackbar,
-  courseId,
-  sectionId,
-  topicId,
-  handleComplete,
-  existingAnswerAttempts,
-  exerciseStartTime,
-  handleSaveProgress,
-  handleDeleteProgress,
-  correctSound,
-  incorrectSound,
-  disableShuffle,
-  toggleMuteSound,
-  handleReportProblem,
-  voices,
-  languageInformation,
-  uploadAudioAttempt,
-  languageTag,
-  trackRecommendedEvent,
-  parentClassroom,
-  classroomId,
-  assignment,
-  phraseListId,
-  isImageHidden
-}) {
-  useExerciseDocumentTitle({
-    exerciseTitle: "Listen and Speak",
-    open
-  });
-  const theme = useTheme();
-  const {
-    classes,
-    cx
-  } = useStyles();
-  const scrollRef = useRef(null);
-  const [viewMoreTranslations, setViewMoreTranslations] = useState(false);
-  const [currentPhraseText, setCurrentPhraseText] = useState("");
-  const {
-    isSocketConnected,
-    recognitionState,
-    toggleListen,
-    stopListening,
-    resetTranscript,
-    clearAttemptAudio,
-    indicateEndStream
-  } = useRecognition({
-    currentPhraseText,
-    trackRecommendedEvent,
-    exerciseName,
-    learnLang,
-    openSnackbar
-  });
-  const {
-    interimTranscript,
-    finalTranscript,
-    transcriptConfidence,
-    transcriptWords,
-    recognizing,
-    isRecognizingDisabled,
-    attemptAudioURL,
-    audioBlob
-  } = recognitionState;
-  const handleMic = expectedTranscript => {
-    const speechContexts = expectedTranscript ? [{
-      phrases: [...(expectedTranscript.length < 100 ? [removeExtraWhiteSpaces(expectedTranscript)] : removeExtraWhiteSpaces(expectedTranscript).split(" "))],
-      boost: 10
-    }] : null;
-    const model = expectedTranscript && expectedTranscript.length < 50 ? "latest_short" : "default";
-
-    // Stop Recording required to get final confidence score and trigger event if needed
-    toggleListen(learnLang, speechContexts, model, true);
-  };
-  useEffect(() => {
-    // Check if recording has ended and has detected at least one word
-    if (open && !recognizing && finalTranscript) {
-      // Submit attempt
-      handleContinue(false, currentPhrase);
-    }
-  }, [open, recognizing, finalTranscript]);
-  useEffect(() => {
-    let timer;
-    if (scrollRef.current && (interimTranscript || finalTranscript)) {
-      scrollRef.current.scroll({
-        top: scrollRef.current.scrollHeight,
-        behavior: "smooth"
-      });
-    }
-    if (recognizing && interimTranscript === "" && finalTranscript === "") {
-      // Set a timer to stop listening if no audio is detected after 10 seconds
-      timer = setTimeout(() => {
-        stopListening();
-      }, 10000);
-    }
-    return () => clearTimeout(timer);
-  }, [recognizing, interimTranscript, finalTranscript]);
-  const initialVoiceSpeed = topicInfo && topicInfo.voiceSpeed ? topicInfo.voiceSpeed : "";
-  const exerciseState = useExerciseState({
-    open,
-    handleClose,
-    exerciseName,
-    phrases,
-    topicInfo,
-    initialVoiceSpeed,
-    remainingQuestions,
-    existingAnswerAttempts,
-    exerciseStartTime,
-    handleComplete,
-    handleSaveProgress,
-    handleDeleteProgress,
-    openSnackbar,
-    courseId,
-    sectionId,
-    topicId,
-    forLang,
-    finalTranscript,
-    interimTranscript,
-    resetTranscript,
-    stopListening,
-    history,
-    handleSpeak,
-    clearQueue,
-    stopAudio,
-    learnLang,
-    clearAttemptAudio,
-    transcriptConfidence,
-    transcriptWords,
-    uploadAudioAttempt,
-    correctSound,
-    incorrectSound,
-    indicateEndStream,
-    disableShuffle,
-    toggleMuteSound,
-    audioBlob,
-    classroomId,
-    phraseListId
-  });
-  const {
-    questions,
-    currentPhrase,
-    muteSound,
-    isSpeaking,
-    isConfidenceOpen,
-    answerAttempt,
-    pollyResult,
-    isCorrectResultOpen,
-    isIncorrectResultOpen,
-    isSkipResultOpen,
-    isPartiallyCorrectResultOpen,
-    answerAttempts,
-    isCloseModalOpen,
-    isInProgressModalOpen,
-    isCompletionModalOpen,
-    voiceSpeed,
-    isVoiceSpeedMenuOpen,
-    isReportProblemOpen,
-    transcript,
-    handleCloseReportProblem,
-    handleOpenReportProblem,
-    handleOpenVoiceSpeedMenu,
-    handleCloseVoiceSpeedMenu,
-    handleChangeVoiceSpeed,
-    closeCloseModal,
-    closeInProgressModal,
-    handleCloseConfidence,
-    handleOpenConfidence,
-    checkIsPronunciationCorrect,
-    handleContinue,
-    handleNextQuestion,
-    speak,
-    handleMute,
-    handleRestart,
-    handleReset,
-    handleRestartExercise,
-    viewReport,
-    handleSaveExerciseProgress,
-    handleCompleteExercise,
-    handleCloseExercise,
-    handleCloseClicked,
-    handlePronunciationTourFinished,
-    handleTryAgain,
-    checked,
-    setChecked,
-    setIsAssignmentExercise
-  } = exerciseState;
-  useEffect(() => {
-    if (currentPhrase?.phrase) {
-      setCurrentPhraseText(currentPhrase.phrase);
-    }
-  }, [currentPhrase]);
-  useEffect(() => {
-    assignment ? setIsAssignmentExercise(true) : setIsAssignmentExercise(false);
-  }, [assignment]);
-  const unattemptedQuestionTotal = questions.filter(q => !q.questionAttempted).length;
-  const joyrideSteps = [{
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("listen_and_speak_exercise_welcome")
-    }),
-    placement: "center",
-    target: "body"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("pronunciation_exercise_speak")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("listen_and_speak_exercise_speak_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#speakButton"
-  }, {
-    content: /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsx("h2", {
-        children: t("listen_and_speak_exercise_listen")
-      })
-    }),
-    spotlightPadding: 8,
-    target: "#play-waveform-audio"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("listen_and_speak_exercise_voice_input")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("pronunciation_exercise_voice_input_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#voiceInput"
-  }, {
-    content: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx("h2", {
-        children: t("exercise_skip")
-      }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("p", {
-        children: t("exercise_skip_desc")
-      })]
-    }),
-    spotlightPadding: 8,
-    target: "#skipButton"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("change_voice_speed")
-    }),
-    spotlightPadding: 8,
-    target: "#change-voice-speed"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_mute")
-    }),
-    spotlightPadding: 8,
-    target: "#mute"
-  }, {
-    content: /*#__PURE__*/_jsx("h2", {
-      children: t("exercise_restart")
-    }),
-    spotlightPadding: 8,
-    target: "#restart"
-  }];
-  const [joyrideState, setJoyrideState] = useState({
-    run: false,
-    steps: joyrideSteps
-  });
-  const [joyrideRewatched, setJoyrideRewatched] = useState(false);
-  const {
-    run,
-    steps
-  } = joyrideState;
-  const handleJoyrideCallback = data => {
-    const {
-      status,
-      action
-    } = data;
-    const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
-    if (finishedStatuses.includes(status) || action === "close") {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: false
-      }));
-      localStorage.setItem(`meaning-listen-and-speak-exercise-tour-completed`, "true");
-      handlePronunciationTourFinished();
-    }
-  };
-  const btnRef = useRef();
-  useEffect(() => {
-    if (btnRef.current && !isSpeaking && isSocketConnected) {
-      btnRef.current.focus();
-    }
-  }, [isSpeaking, isSocketConnected]);
-  useEffect(() => {
-    if (open && !localStorage.getItem(`meaning-listen-and-speak-exercise-tour-completed`)) {
-      setJoyrideState(prevState => ({
-        ...prevState,
-        run: true
-      }));
-    } else if (open && !run && !joyrideRewatched && localStorage.getItem(`meaning-listen-and-speak-exercise-tour-completed`)) {
-      handlePronunciationTourFinished();
-    }
-  }, [open]);
-  let question, image, numOfQuestions, numOfCorrectAnswers, completed;
-  if (questions && questions.length > 0) {
-    numOfQuestions = phrases.length;
-    numOfCorrectAnswers = numOfQuestions - questions.length;
-    completed = numOfCorrectAnswers / numOfQuestions * 100;
-    question = questions[0];
-    image = question.image || null;
-  }
-  const definitionText = (() => {
-    if (!question) return "";
-    if (question.definitions?.length > 0) {
-      const raw = question.definitions[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    if (question.translations?.length > 0) {
-      const raw = question.translations[0];
-      return typeof raw === "string" ? raw : "";
-    }
-    return "";
-  })();
-  const handleMoreTranslations = () => {
-    setViewMoreTranslations(true);
-  };
-  const phraseWordList = currentPhrase && currentPhrase.phrase ? removeExtraWhiteSpaces(removeAllSymbols(currentPhrase.phrase)).split(" ") : [];
-  const {
-    voice,
-    voiceLanguageCode,
-    voicePitch
-  } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
-  const getVoiceImage = () => {
-    try {
-      const exerciseVoice = voiceMap.get(voice) || {};
-      return exerciseVoice.speakingImage || null;
-    } catch (error) {
-      console.error("Error retrieving voice image:", error);
-      return null;
-    }
-  };
-  const getNualaCelebratingImage = () => {
-    try {
-      const exerciseVoice = voiceMap.get(voice) || {};
-      return exerciseVoice.celebratingImage || null;
-    } catch (error) {
-      console.error("Error retrieving celebrating image:", error);
-      return null;
-    }
-  };
-  const isListeningIndicatorTextVisible = recognizing && interimTranscript === "" && finalTranscript === "" ? true : false;
-  const navigate = useNavigate();
-  const goBackToAssignment = () => {
-    navigate(`/classrooms/${classroomId}#Assignments`);
-  };
-  useEffect(() => {
-    if (open && definitionText && definitionText !== "" && !isCompletionModalOpen && !isCloseModalOpen && !isInProgressModalOpen && learnLang && learnLang !== "irish" && !muteSound) {
-      speak(definitionText, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-    }
-  }, [currentPhrase, open]);
-  return /*#__PURE__*/_jsxs(Dialog, {
-    fullScreen: true,
-    open: open,
-    onClose: handleClose,
-    TransitionComponent: Transition,
-    "aria-labelledby": "meaning-listen-and-speak-exercise-dialog",
-    PaperProps: {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      }
-    },
-    children: [/*#__PURE__*/_jsxs(AppBar, {
-      className: classes.appBar,
-      children: [/*#__PURE__*/_jsxs(Toolbar, {
-        children: [/*#__PURE__*/_jsx(IconButton, {
-          "data-cy": "close-dialog",
-          edge: "start",
-          color: "inherit",
-          onClick: handleCloseClicked,
-          "aria-label": "Close",
-          size: "large",
-          children: /*#__PURE__*/_jsx(Close, {})
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("meaning_listen_and_speak"),
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            component: "h1",
-            color: "inherit",
-            className: classes.flex,
-            id: "meaning-listen-and-speak-exercise-dialog",
-            children: t("meaning")
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("Rewatch tutorial"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: () => {
-              setJoyrideRewatched(true);
-              setJoyrideState({
-                ...joyrideState,
-                run: true
-              });
-            },
-            size: "large",
-            children: /*#__PURE__*/_jsx(LightbulbIcon, {})
-          })
-        }), /*#__PURE__*/_jsx(ExerciseProgressBar, {
-          classes: {
-            root: classes.progress,
-            progressBar: classes.largeScreenProgressBar
-          },
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          numOfQuestions: numOfQuestions,
-          completed: completed,
-          exercise: "ListenAndSpeak"
-        }), /*#__PURE__*/_jsx(VoiceSpeedSelector, {
-          t: t,
-          voiceSpeed: voiceSpeed,
-          isVoiceSpeedMenuOpen: isVoiceSpeedMenuOpen,
-          handleOpenVoiceSpeedMenu: handleOpenVoiceSpeedMenu,
-          handleCloseVoiceSpeedMenu: handleCloseVoiceSpeedMenu,
-          handleChangeVoiceSpeed: handleChangeVoiceSpeed
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: muteSound ? t("unmute") : t("mute"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: handleMute,
-            "aria-label": t("mute"),
-            "aria-pressed": muteSound ? "true" : "false",
-            id: "mute",
-            size: "large",
-            children: muteSound ? /*#__PURE__*/_jsx(VolumeOff, {}) : /*#__PURE__*/_jsx(VolumeUp, {})
-          })
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          title: t("replay"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            onClick: handleRestart,
-            "aria-label": "Restart",
-            id: "restart",
-            size: "large",
-            children: /*#__PURE__*/_jsx(Replay, {})
-          })
-        }), /*#__PURE__*/_jsx(ReportProblem, {
-          t: t,
-          edge: "end",
-          isReportProblemOpen: isReportProblemOpen,
-          handleOpenReportProblem: handleOpenReportProblem,
-          handleCloseReportProblem: handleCloseReportProblem,
-          handleReportProblem: handleReportProblem,
-          currentPhrase: currentPhrase,
-          parentClassroom: parentClassroom,
-          exercise: exerciseName,
-          audioBlob: audioBlob,
-          openSnackbar: openSnackbar
-        })]
-      }), /*#__PURE__*/_jsx(Toolbar, {
-        variant: "dense",
-        className: classes.mobileAdditionalToolbar,
-        children: /*#__PURE__*/_jsx(ExerciseProgressBar, {
-          classes: {
-            root: classes.progress
-          },
-          numOfCorrectAnswers: numOfCorrectAnswers,
-          numOfQuestions: numOfQuestions,
-          completed: completed,
-          exercise: "ListenAndSpeak"
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Box, {
-      ref: scrollRef,
-      sx: {
-        overflowY: "auto",
-        flexGrow: 1,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        className: classes.root,
-        direction: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        spacing: 2,
-        sx: {
-          maxWidth: "lg",
-          mx: "auto"
-        },
-        component: "main",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Tooltip, {
-            title: t("identify_this_phrase"),
-            placement: "top",
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              component: "h2",
-              color: "inherit",
-              children: t("identify_this_phrase", {
-                lng: languageTag
-              })
-            })
-          })
-        }), image && !isImageHidden ? /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              textAlign: "center",
-              mx: "auto"
-            },
-            children: /*#__PURE__*/_jsx("img", {
-              src: image,
-              className: classes.image,
-              alt: ""
-            })
-          })
-        }) : null, /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Grid, {
-            container: true,
-            direction: "row",
-            justifyContent: "center",
-            alignItems: "center",
-            spacing: "1",
-            children: question && question.pronunciations && /*#__PURE__*/_jsx(Grid, {
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                color: "textSecondary",
-                gutterBottom: true,
-                children: question && question.pronunciations[0]
-              })
-            })
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Grid, {
-            children: /*#__PURE__*/_jsxs(Box, {
-              sx: {
-                display: "flex",
-                justifyContent: "center",
-                flexDirection: "row"
-              },
-              children: [/*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "flex"
-                },
-                children: /*#__PURE__*/_jsx("img", {
-                  src: getVoiceImage(),
-                  className: classes.nualaSpeaking,
-                  alt: ""
-                })
-              }), /*#__PURE__*/_jsx(Box, {
-                sx: {
-                  display: "grid",
-                  alignItems: "center",
-                  marginLeft: 1
-                },
-                children: learnLang !== "irish" && /*#__PURE__*/_jsx(Box, {
-                  sx: theme => ({
-                    [theme.breakpoints.down("md")]: {
-                      minWidth: 185
-                    },
-                    mt: theme.spacing(2),
-                    marginLeft: `-${theme.spacing(2)}`,
-                    minWidth: 300
-                  }),
-                  children: /*#__PURE__*/_jsx(WaveFormLite, {
-                    src: pollyResult ? pollyResult : "",
-                    controls: false,
-                    isSpeaking: isSpeaking,
-                    muteAudio: true,
-                    handleSpeak: () => {
-                      speak(definitionText, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-                    },
-                    theme: theme
-                  })
-                })
-              })]
-            })
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          sx: {
-            marginTop: 1
-          },
-          children: /*#__PURE__*/_jsx(Button, {
-            sx: theme => ({
-              [theme.breakpoints.down("md")]: {
-                height: "50px",
-                width: "200px",
-                color: "white",
-                padding: 2,
-                fontSize: "16px",
-                borderRadius: 3
-              },
-              height: "70px",
-              width: "250px",
-              color: "white",
-              backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
-              padding: 1,
-              fontSize: "20px",
-              borderRadius: 5,
-              border: "1.5px solid transparent",
-              "&:hover": {
-                backgroundColor: recognizing ? "#d32f2f" : "#2d7b30",
-                border: "1.5px solid black"
-              }
-            }),
-            onClick: () => handleMic(currentPhrase ? currentPhrase.phrase : ""),
-            startIcon: recognizing ? /*#__PURE__*/_jsx(MicOffIcon, {}) : /*#__PURE__*/_jsx(Mic, {}),
-            color: recognizing ? "error" : "success",
-            disabled: isSpeaking || !isSocketConnected || isRecognizingDisabled,
-            id: "voiceInput",
-            variant: "contained",
-            ref: btnRef,
-            children: recognizing ? t("click_to_stop") : t("click_to_speak")
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          children: /*#__PURE__*/_jsx(Typography, {
-            role: "status",
-            sx: {
-              mt: isListeningIndicatorTextVisible ? 3 : 0
-            },
-            textAlign: "center",
-            fontWeight: "bolder",
-            fontSize: "20px",
-            "aria-label": "Mic is",
-            "aria-live": "polite",
-            children: isListeningIndicatorTextVisible ? t("listening_indicator") : ""
-          })
-        }), finalTranscript || interimTranscript ? /*#__PURE__*/_jsxs(Grid, {
-          alignItems: "center",
-          className: classes.setWidth,
-          children: [/*#__PURE__*/_jsx(Tooltip, {
-            title: /*#__PURE__*/_jsx(Typography, {
-              children: `Confidence: ${((transcriptConfidence || 0) * 100).toFixed(0)}%`
-            }),
-            open: isConfidenceOpen,
-            onClose: handleCloseConfidence,
-            onOpen: handleOpenConfidence,
-            role: "status",
-            "aria-live": "assertive",
-            "aria-label": `Confidence: ${(transcriptConfidence * 100).toFixed(0)}%`,
-            children: /*#__PURE__*/_jsx("span", {
-              children: (finalTranscript || interimTranscript).split(" ").map((word, i) => {
-                return /*#__PURE__*/_jsx(Typography, {
-                  className: classes.finalTranscript,
-                  variant: "h5",
-                  color: phraseWordList[i] && checkIsPronunciationCorrect(word.trim(), {
-                    phrase: phraseWordList[i].trim(),
-                    alternativeVersions: currentPhrase.alternativeVersions ? currentPhrase.alternativeVersions.map(altAns => {
-                      return altAns ? removeExtraWhiteSpaces(altAns).split(" ")[i] : "";
-                    }) : []
-                  }) ? "secondary" : "",
-                  component: "span",
-                  children: word
-                });
-              })
-            })
-          }), /*#__PURE__*/_jsx(IconButton, {
-            onClick: handleReset,
-            size: "small",
-            className: classes.listenButton,
-            "aria-label": "Clear",
-            children: /*#__PURE__*/_jsx(Clear, {
-              className: cx(classes.iconSmall)
-            })
-          })]
-        }) : null, /*#__PURE__*/_jsx("div", {
-          className: classes.waveform,
-          "aria-labelledby": finalTranscript,
-          children: attemptAudioURL && /*#__PURE__*/_jsx(Waveform, {
-            src: attemptAudioURL,
-            theme: theme,
-            controls: true
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsx(ExerciseBottomBar, {
-      t: t,
-      handleSubmit: () => handleContinue(false, currentPhrase),
-      handleSkip: () => handleContinue(true, currentPhrase),
-      isSubmitAnswerAllowed: false
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      handleTryAgain: handleTryAgain,
-      ...answerAttempt,
-      result: "correct",
-      attemptAudioURL: attemptAudioURL,
-      pollyResult: pollyResult,
-      exercise: "meaning-listen-and-speak",
-      transcript: transcript,
-      currentPhrase: currentPhrase,
-      phraseWordList: phraseWordList,
-      checkIsPronunciationCorrect: checkIsPronunciationCorrect,
-      languageInformation: languageInformation,
-      voices: voices,
-      voiceLanguageCode: voiceLanguageCode,
-      voice: voice,
-      nualaCelebratingImage: getNualaCelebratingImage(),
-      checked: checked,
-      setChecked: setChecked,
-      learnLang: learnLang,
-      handleSpeak: () => {
-        speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-      },
-      definitionsText: definitionText
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isPartiallyCorrectResultOpen,
-      handleNext: handleNextQuestion,
-      handleTryAgain: handleTryAgain,
-      ...answerAttempt,
-      result: "partially_correct",
-      attemptAudioURL: attemptAudioURL,
-      pollyResult: pollyResult,
-      exercise: exerciseName,
-      transcript: transcript,
-      currentPhrase: currentPhrase,
-      phraseWordList: phraseWordList,
-      checkIsPronunciationCorrect: checkIsPronunciationCorrect,
-      languageInformation: languageInformation,
-      checked: checked,
-      setChecked: setChecked,
-      learnLang: learnLang,
-      handleSpeak: () => {
-        speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-      },
-      definitionsText: definitionText
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isIncorrectResultOpen,
-      handleNext: handleNextQuestion,
-      handleTryAgain: handleTryAgain,
-      ...answerAttempt,
-      result: "incorrect",
-      attemptAudioURL: attemptAudioURL,
-      pollyResult: pollyResult,
-      exercise: exerciseName,
-      transcript: transcript,
-      currentPhrase: currentPhrase,
-      phraseWordList: phraseWordList,
-      checkIsPronunciationCorrect: checkIsPronunciationCorrect,
-      languageInformation: languageInformation,
-      checked: checked,
-      setChecked: setChecked,
-      learnLang: learnLang,
-      handleSpeak: () => {
-        speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-      },
-      definitionsText: definitionText
-    }), /*#__PURE__*/_jsx(AnswerResult, {
-      t: t,
-      open: isSkipResultOpen,
-      handleNext: handleNextQuestion,
-      handleTryAgain: handleTryAgain,
-      ...answerAttempt,
-      result: "skipped",
-      attemptAudioURL: attemptAudioURL,
-      pollyResult: pollyResult,
-      exercise: exerciseName,
-      transcript: transcript,
-      currentPhrase: currentPhrase,
-      phraseWordList: phraseWordList,
-      checkIsPronunciationCorrect: checkIsPronunciationCorrect,
-      languageInformation: languageInformation,
-      checked: checked,
-      setChecked: setChecked,
-      learnLang: learnLang,
-      handleSpeak: () => {
-        speak(currentPhrase.phrase, voice, false, "#currentPhrase", voiceLanguageCode, false, voicePitch);
-      },
-      definitionsText: definitionText
-    }), /*#__PURE__*/_jsx(CompletedExcercise, {
-      open: isCompletionModalOpen,
-      restartExcercise: handleRestartExercise,
-      onClose: () => isCompletionModalOpen(false),
-      goBack: handleCloseExercise,
-      viewReport: viewReport,
-      fullScreen: true,
-      t: t,
-      inTopic: courseId && sectionId && topicId,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(CloseExerciseMenu, {
-      t: t,
-      open: isCloseModalOpen,
-      close: closeCloseModal,
-      saveProgress: () => handleSaveExerciseProgress(questions, answerAttempts, true),
-      finishExercise: handleCompleteExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId,
-      isFinishExerciseDisabled: unattemptedQuestionTotal > 0,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(InProgressExerciseMenu, {
-      t: t,
-      open: isInProgressModalOpen,
-      close: closeInProgressModal,
-      onClose: closeInProgressModal,
-      continueExercise: closeInProgressModal,
-      restartExercise: handleRestartExercise,
-      goBack: handleCloseExercise,
-      inTopic: courseId && sectionId && topicId,
-      goBackToAssignment: goBackToAssignment
-    }), /*#__PURE__*/_jsx(Joyride, {
-      onEvent: handleJoyrideCallback,
-      continuous: true,
-      run: run,
-      scrollToFirstStep: true,
-      steps: steps,
-      locale: {
-        back: t("back"),
-        close: t("close"),
-        last: t("last"),
-        next: t("next"),
-        skip: t("skip")
-      },
-      options: {
-        showProgress: true,
-        scrollOffset: 100,
-        zIndex: 10000,
-        arrowColor: theme.palette.background.paper,
-        backgroundColor: theme.palette.background.paper,
-        primaryColor: theme.palette.primary.main,
-        textColor: theme.palette.text.primary,
-        buttons: ['back', 'close', 'primary', 'skip']
-      }
-    })]
-  });
-}
-ListenAndSpeak.propTypes = {};
-export default ListenAndSpeak;