@nualang/nualang-ui-components 0.1.1414 → 0.1.1415

package/dist/Cards/Course/Course.js

@@ -2,8 +2,10 @@ import { useState, memo } from "react";
 import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 // Mui
-import { Button, Box, Typography, IconButton, Menu, MenuItem, Checkbox, Tooltip, CardActions, CardActionArea, Divider } from "@mui/material";
+import { Button, Box, Typography, IconButton, Menu, MenuItem, Checkbox, Tooltip, CardActions, CardActionArea, Divider, Chip } from "@mui/material";
 import Skeleton from "@mui/material/Skeleton";
+import { styled } from "@mui/material/styles";
+import { tooltipClasses } from "@mui/material/Tooltip";
 import Group from "@mui/icons-material/Group";
 import ExitToApp from "@mui/icons-material/ExitToApp";
 import Close from "@mui/icons-material/Close";
@@ -159,6 +161,141 @@ function OverflowMenu({
     })]
   });
 }
+const DIFFICULTY_ORDER = ["A1", "A2", "B1", "B2", "C1", "C2"];
+const MAX_VISIBLE_DIFFICULTIES = 2;
+const DifficultyOverflowTooltip = styled(({
+  className,
+  ...props
+}) => /*#__PURE__*/_jsx(Tooltip, {
+  ...props,
+  classes: {
+    popper: className
+  }
+}))(({
+  theme
+}) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[4],
+    padding: theme.spacing(1.5, 2),
+    minWidth: 160,
+    maxWidth: 260
+  }
+}));
+function normalizeDifficulties(difficulty) {
+  const values = Array.isArray(difficulty) ? difficulty : difficulty ? [difficulty] : [];
+  return DIFFICULTY_ORDER.filter(level => values.includes(level));
+}
+function difficultyChipSx(theme, compact) {
+  return {
+    height: compact ? 20 : 24,
+    backgroundColor: theme.palette.action.selected,
+    color: theme.palette.text.secondary,
+    "& .MuiChip-label": {
+      fontSize: compact ? "0.7rem" : "0.75rem",
+      px: 0.75
+    }
+  };
+}
+function CourseDifficulty({
+  t,
+  difficulty,
+  compact
+}) {
+  const levels = normalizeDifficulties(difficulty);
+  if (levels.length === 0) {
+    return null;
+  }
+  const levelLabels = levels.map(level => t(`card_${level}`));
+  const visibleLabels = levelLabels.slice(0, MAX_VISIBLE_DIFFICULTIES);
+  const overflowLabels = levelLabels.slice(MAX_VISIBLE_DIFFICULTIES);
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "span",
+    role: "group",
+    "aria-label": `${t("difficulty")}: ${levelLabels.join(", ")}`,
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 0.5
+    },
+    "data-cy": "course-difficulty",
+    children: [/*#__PURE__*/_jsx(DifficultyIcon, {
+      sx: {
+        ...classes.infoIcon,
+        fontSize: compact ? 18 : undefined
+      },
+      fontSize: "small"
+    }), visibleLabels.map((label, index) => /*#__PURE__*/_jsx(Chip, {
+      label: label,
+      size: "small",
+      "data-cy": `course-difficulty-chip-${index}`,
+      sx: theme => difficultyChipSx(theme, compact)
+    }, label)), overflowLabels.length > 0 && /*#__PURE__*/_jsx(DifficultyOverflowTooltip, {
+      placement: "bottom-start",
+      title: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          minWidth: 140
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          sx: {
+            display: "block",
+            color: "text.secondary",
+            fontWeight: 700,
+            letterSpacing: 0.5,
+            textTransform: "uppercase",
+            pb: 1,
+            borderBottom: "1px solid",
+            borderColor: "divider"
+          },
+          children: t("difficulties")
+        }), levelLabels.map((label, index) => /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            py: 0.75,
+            borderBottom: index < levelLabels.length - 1 ? "1px solid" : "none",
+            borderColor: "divider"
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            component: "span",
+            sx: {
+              color: "text.disabled",
+              fontSize: "1.3rem",
+              lineHeight: 1
+            },
+            children: "\u2022"
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.primary"
+            },
+            children: label
+          })]
+        }, label))]
+      }),
+      children: /*#__PURE__*/_jsx(Chip, {
+        label: `+${overflowLabels.length}`,
+        size: "small",
+        "aria-label": `${t("difficulty")}: ${levelLabels.join(", ")}`,
+        "data-cy": "course-difficulty-overflow",
+        sx: theme => ({
+          ...difficultyChipSx(theme, compact),
+          fontWeight: 600
+        })
+      })
+    })]
+  });
+}
+CourseDifficulty.propTypes = {
+  t: PropTypes.func.isRequired,
+  difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  compact: PropTypes.bool
+};
 function CourseLoading({
   compact = false
 }) {
@@ -278,7 +415,7 @@ function CourseCard({
       limit: 1000
     }
   }, {
-    enabled: !!course?.courseId && isOutlineOpen
+    enabled: !!course?.courseId && (isOutlineOpen || visible)
   });
   const {
     membersQuery,
@@ -356,6 +493,7 @@ function CourseCard({
     handleLeaveCourse(courseId);
   };
   const courseSections = sectionsQuery.isSuccess ? sectionsQuery.data.Items : [];
+  const topicDifficulties = sectionsQuery.isSuccess ? [...new Set(courseSections.flatMap(section => section.topics || []).map(topic => topic.difficulty).filter(Boolean))] : [];
   const deleteCourse = async () => {
     const confirmed = await confirm(t("delete_course"), t("delete_course_confirmation"), "", true, t("course_deletion_note", {
       sectionCount: courseSections ? courseSections.length : 0
@@ -497,16 +635,10 @@ function CourseCard({
           columnGap: 1.5,
           rowGap: 0.5
         },
-        children: [course?.difficulty && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-          variant: "caption",
-          component: "span",
-          children: [/*#__PURE__*/_jsx(DifficultyIcon, {
-            sx: {
-              ...classes.infoIcon,
-              fontSize: compact ? 18 : undefined
-            },
-            fontSize: "small"
-          }), t(`card_${course.difficulty}`)]
+        children: [/*#__PURE__*/_jsx(CourseDifficulty, {
+          t: t,
+          difficulty: topicDifficulties.length > 0 ? topicDifficulties : course?.difficulty,
+          compact: compact
         }), (course?.pdf || course.topicsWithPdf && Object.keys(course?.topicsWithPdf)?.length > 0) && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
           variant: "caption",
           component: "span",
@@ -673,7 +805,7 @@ MemoizedCourse.propTypes = {
   courseId: PropTypes.string.isRequired,
   courseName: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
-  difficulty: PropTypes.string,
+  difficulty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   picture: PropTypes.string.isRequired,
   learnLang: PropTypes.string.isRequired,
   forLang: PropTypes.string.isRequired,

package/dist/Chat/Messages/Message/Message.js

@@ -272,6 +272,7 @@ export default function Message({
   speak,
   stopSpeaking,
   voice,
+  voiceLanguageCode,
   voicePitch,
   voiceSpeed,
   handleEditMessage,
@@ -471,6 +472,7 @@ export default function Message({
             forLang: forLang,
             handleSpeak: handleSpeak,
             voice: voice,
+            voiceLanguageCode: voiceLanguageCode,
             voicePitch: voicePitch,
             voiceSpeed: voiceSpeed,
             disableTranslation: disableTranslation,
@@ -538,6 +540,7 @@ export default function Message({
               forLang: forLang,
               handleSpeak: handleSpeak,
               voice: voice,
+              voiceLanguageCode: voiceLanguageCode,
               voicePitch: voicePitch,
               voiceSpeed: voiceSpeed,
               disableTranslation: disableTranslation,
@@ -623,7 +626,7 @@ export default function Message({
                   children: /*#__PURE__*/_jsx(IconButton, {
                     color: "inherit",
                     disabled: isSpeaking || recognizing || muteSound || isMessagePlaying || showTranslation,
-                    onClick: () => speak(text, voice, false, messageContainerIdSelector, null, false, voicePitch),
+                    onClick: () => speak(text, voice, false, messageContainerIdSelector, voiceLanguageCode, false, voicePitch),
                     size: "small",
                     "aria-label": messageIndex !== -1 ? accessibilityText ? accessibilityText : `Speak message ${messageIndex + 1}` : accessibilityText ? accessibilityText : `Speak message`,
                     sx: {

package/dist/Chat/Messages/Message/Message.test.js

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Message from "./Message";
+
+// Messages spreads each message over these props, so a roleplay message carries
+// its own actor's voice and accent; a bot chat supplies one voice for the
+// whole chat. Replaying must use whichever applies, not the language default.
+import { jsx as _jsx } from "react/jsx-runtime";
+const renderMessage = (overrides = {}) => {
+  const theme = createTheme();
+  const speak = vi.fn();
+  render(/*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/_jsx(Message, {
+      t: k => k,
+      text: "Kia ora",
+      speak: speak,
+      messageIndex: 0,
+      index: 0,
+      messageCount: 1,
+      messages: [{
+        text: "Kia ora"
+      }],
+      ...overrides
+    })
+  }));
+  return speak;
+};
+describe("Message replay", () => {
+  afterEach(cleanup);
+  it("speaks with the accent the message carries", () => {
+    const speak = renderMessage({
+      voice: "Aria",
+      voiceLanguageCode: "en-NZ"
+    });
+    fireEvent.click(screen.getByRole("button", {
+      name: /Speak message/i
+    }));
+
+    // 5th positional argument of speak() is the accent.
+    expect(speak).toHaveBeenCalled();
+    expect(speak.mock.calls[0][1]).toBe("Aria");
+    expect(speak.mock.calls[0][4]).toBe("en-NZ");
+  });
+  it("sends no accent when nothing supplies one", () => {
+    const speak = renderMessage({
+      voice: "Joanna"
+    });
+    fireEvent.click(screen.getByRole("button", {
+      name: /Speak message/i
+    }));
+    expect(speak.mock.calls[0][4]).toBeUndefined();
+  });
+});

package/dist/Containers/App/App.js

@@ -386,16 +386,20 @@ function App({
           startIcon: /*#__PURE__*/_jsx(Add, {}),
           color: "secondary",
           id: "appbar-create-button",
+          disabled: !subscription?.isSubscriptionLoaded,
           children: t("create")
         }) : /*#__PURE__*/_jsx(Tooltip, {
           title: t("create"),
           enterDelay: 300,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            "aria-label": t("create"),
-            "aria-haspopup": "true",
-            onClick: handleClickCreate,
-            children: /*#__PURE__*/_jsx(Add, {})
+          children: /*#__PURE__*/_jsx("span", {
+            children: /*#__PURE__*/_jsx(IconButton, {
+              color: "inherit",
+              "aria-label": t("create"),
+              "aria-haspopup": "true",
+              onClick: handleClickCreate,
+              disabled: !subscription?.isSubscriptionLoaded,
+              children: /*#__PURE__*/_jsx(Add, {})
+            })
           })
         })), isLgScreen && /*#__PURE__*/_jsx(WhatsNew, {
           t: t,

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -110,13 +110,16 @@ function GenerateRoleplayDialog({
     if (generatedRoleplay && generatedRoleplay.script) {
       const tempMessages = generatedRoleplay.script.filter(l => !l?.question).map(line => {
         const isActor1 = line.actor === 1;
+        const actor = (isActor1 ? generatedRoleplay.actor1 : generatedRoleplay.actor2) || {};
         return {
           ...line,
           text: line.text,
           isMyMessage: !isActor1,
           name: getActorName(isActor1),
-          userImage: isActor1 ? generatedRoleplay.actor1 && generatedRoleplay.actor1.picture ? generatedRoleplay.actor1.picture : null : generatedRoleplay.actor2 && generatedRoleplay.actor2.picture ? generatedRoleplay.actor2.picture : null,
-          voice: isActor1 ? generatedRoleplay.actor1 && generatedRoleplay.actor1.voice ? generatedRoleplay.actor1.voice : null : generatedRoleplay.actor2 && generatedRoleplay.actor2.voice ? generatedRoleplay.actor2.voice : null
+          userImage: actor.picture || null,
+          voice: actor.voice || null,
+          voiceLanguageCode: actor.voiceLanguageCode || null,
+          voicePitch: actor.voicePitch || null
         };
       });
       setPreviewMessages(tempMessages);

package/dist/Dialogs/QuickCreateChatbotDialog/QuickCreateChatbotDialog.js

@@ -459,7 +459,7 @@ export default function QuickCreateChatbotDialog({
     setSelectedVoicePitch(null);
     setBotPicture(picked.voice.userImage || "");
   }, [open, selectedVoice, voices]);
-  const selectedVoiceOption = findVoice(voices, selectedVoice)?.voice;
+  const selectedVoiceOption = findVoice(voices, selectedVoice, selectedVoiceLanguageCode)?.voice;
   const hasAvailableVoice = Boolean(selectedVoice && selectedVoiceLanguageCode);
   const isValid = Boolean(botTitle.trim()) && Boolean(difficulty) && Boolean(templateId) && Boolean(template && template.botId === templateId) && Number(numberOfQuestions) > 0 && hasAvailableVoice;
   const handleSubmit = async () => {
@@ -600,6 +600,7 @@ export default function QuickCreateChatbotDialog({
           name: "voiceSelector",
           label: t("bot_voice"),
           value: selectedVoice || "",
+          valueLanguageCode: selectedVoiceLanguageCode,
           margin: "normal",
           variant: "outlined",
           fullWidth: true,

package/dist/Editors/Bot/Bot.js

@@ -486,18 +486,20 @@ function Bot({
       return;
     }
     const voice = initialValues.voice;
+    const voiceLanguageCode = initialValues.voiceLanguageCode;
     const message = {
       isMyMessage: isMyMessage,
       userImage: isErrorMsg ? BotNualaImage : isMyMessage ? userAttributes && userAttributes.picture ? userAttributes.picture : null : bot && bot.botAvatar ? bot.botAvatar : null,
       name: isErrorMsg ? "Bot" : isMyMessage ? userAttributes && userAttributes.preferred_username ? userAttributes.preferred_username : "Me" : bot && bot.name ? bot.name : "Bot",
       text: text,
-      datetime: new Date()
+      datetime: new Date(),
+      // Recorded so the replay button reproduces what was spoken.
+      voice: voice,
+      voiceLanguageCode: voiceLanguageCode
     };
     setMessages(prevState => [...prevState, message]);
     if (playAudio !== false && learnLang !== "irish") {
-      speak(message.text, voice, false, `#message${messages.length + 1}`
-      //voiceLanguageCode
-      );
+      speak(message.text, voice, false, `#message${messages.length + 1}`, voiceLanguageCode);
     }
   };
   const handleSubmitText = async () => {

package/dist/Editors/Roleplay/Roleplay.js

@@ -627,6 +627,7 @@ function Roleplay({
   };
   const currentMessages = (roleplay && roleplay.script ? roleplay.script : []).map(line => {
     const isActor1 = line.actor === 1;
+    const actor = (isActor1 ? roleplay.actor1 : roleplay.actor2) || {};
     return {
       ...line,
       text: line.text && formatMarkdownNewlines(line.text),
@@ -636,8 +637,10 @@ function Roleplay({
       }) : roleplay.actor2 && roleplay.actor2.name ? roleplay.actor2.name : t("actor", {
         number: "2"
       }),
-      userImage: isActor1 ? roleplay.actor1 && roleplay.actor1.picture ? roleplay.actor1.picture : null : roleplay.actor2 && roleplay.actor2.picture ? roleplay.actor2.picture : null,
-      voice: isActor1 ? roleplay.actor1 && roleplay.actor1.voice ? roleplay.actor1.voice : null : roleplay.actor2 && roleplay.actor2.voice ? roleplay.actor2.voice : null
+      userImage: actor.picture || null,
+      voice: actor.voice || null,
+      voiceLanguageCode: actor.voiceLanguageCode || null,
+      voicePitch: actor.voicePitch || null
     };
   });
   const afterElements = /*#__PURE__*/_jsx("div", {

package/dist/Exercises/ListenAndSpeak/ListenAndSpeak.js

@@ -444,7 +444,7 @@ function ListenAndSpeak({
     voiceLanguageCode,
     voicePitch
   } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
+  const voiceMap = getVoiceImages(voices || [], voiceLanguageCode);
   const getNualaCelebratingImage = () => {
     try {
       const exerciseVoice = voiceMap.get(voice) || {};

package/dist/Exercises/Listener/Listener.js

@@ -354,7 +354,7 @@ function Listener({
     voiceLanguageCode,
     voicePitch
   } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
+  const voiceMap = getVoiceImages(voices || [], voiceLanguageCode);
   const getNualaCelebratingImage = () => {
     try {
       const exerciseVoice = voiceMap.get(voice) || {};

package/dist/Exercises/Meaning/Meaning.js

@@ -358,7 +358,7 @@ function Meaning({
     voiceLanguageCode,
     voicePitch
   } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
+  const voiceMap = getVoiceImages(voices || [], voiceLanguageCode);
   const getNualaCelebratingImage = () => {
     try {
       const exerciseVoice = voiceMap.get(voice) || {};

package/dist/Exercises/MeaningReadWrite/MeaningReadWriteGame.js

@@ -338,9 +338,10 @@ export default function MeaningReadWrite({
   })();
   const {
     voice,
+    voiceLanguageCode,
     voicePitch
   } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
+  const voiceMap = getVoiceImages(voices || [], voiceLanguageCode);
   const getNualaCelebratingImage = () => {
     try {
       const exerciseVoice = voiceMap.get(voice) || {};
@@ -374,6 +375,7 @@ export default function MeaningReadWrite({
       text: currentPhrase.phrase,
       learnLanguage: learnLang,
       voiceName: voice || null,
+      languageCode: voiceLanguageCode || null,
       voiceSpeed,
       pitch: voicePitch || null
     });
@@ -559,6 +561,7 @@ export default function MeaningReadWrite({
                   stopAudio: stopAudio,
                   learnLang: learnLang,
                   voice: voice || null,
+                  voiceLanguageCode: voiceLanguageCode || null,
                   voicePitch: voicePitch || null,
                   voiceSpeed: voiceSpeed,
                   forLang: forLang,

package/dist/Exercises/Pronouncer/Pronouncer.js

@@ -456,7 +456,7 @@ function Pronouncer({
     voiceLanguageCode,
     voicePitch
   } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
+  const voiceMap = getVoiceImages(voices || [], voiceLanguageCode);
   const getNualaCelebratingImage = () => {
     try {
       const exerciseVoice = voiceMap.get(voice) || {};

package/dist/Exercises/Roleplay/Roleplay.js

@@ -177,13 +177,16 @@ function Roleplay({
     if (roleplay && roleplay.script) {
       const tempMessages = roleplay.script.filter(l => !l?.question).map(line => {
         const isActor1 = line.actor === 1;
+        const actor = (isActor1 ? roleplay.actor1 : roleplay.actor2) || {};
         return {
           ...line,
           text: formatMarkdownNewlines(line.text),
           isMyMessage: !isActor1,
           name: getActorName(isActor1),
-          userImage: isActor1 ? roleplay.actor1 && roleplay.actor1.picture ? roleplay.actor1.picture : null : roleplay.actor2 && roleplay.actor2.picture ? roleplay.actor2.picture : null,
-          voice: isActor1 ? roleplay.actor1 && roleplay.actor1.voice ? roleplay.actor1.voice : null : roleplay.actor2 && roleplay.actor2.voice ? roleplay.actor2.voice : null
+          userImage: actor.picture || null,
+          voice: actor.voice || null,
+          voiceLanguageCode: actor.voiceLanguageCode || null,
+          voicePitch: actor.voicePitch || null
         };
       });
       setPreviewMessges(tempMessages);

package/dist/Exercises/Translator/Translator.js

@@ -523,7 +523,7 @@ function Translator({
     voiceLanguageCode,
     voicePitch
   } = topicInfo;
-  const voiceMap = getVoiceImages(voices || []);
+  const voiceMap = getVoiceImages(voices || [], voiceLanguageCode);
   const getNualaCelebratingImage = () => {
     try {
       const exerciseVoice = voiceMap.get(voice) || {};

package/dist/Forms/CreateBot/Steps/BotInformation/BotInformation.js

@@ -451,6 +451,8 @@ function BotInformation({
       }), /*#__PURE__*/_jsxs(Grid, {
         size: 12,
         children: [learnLang !== "irish" && /*#__PURE__*/_jsx(VoiceSelector, {
+          handleSpeak: handleSpeak,
+          learnLang: learnLang,
           id: "voice",
           name: "voice",
           "data-cy": "voice",
@@ -462,12 +464,12 @@ function BotInformation({
           voices: voiceOptions,
           label: t("bot_voice"),
           value: voice,
+          valueLanguageCode: voiceLanguageCode,
           onChange: e => {
             if (e && e.target && e.target.value) {
               handleChange(e);
               const voiceSelected = e.target.value;
-              const voiceOptionElem = document.getElementById(`voice-${voiceSelected}`);
-              const languageCode = voiceOptionElem.getAttribute("data-language-code");
+              const languageCode = e.target.languageCode;
               handleChange({
                 target: {
                   name: "voice",
@@ -486,6 +488,15 @@ function BotInformation({
                   value: languageCode
                 }
               });
+              // The avatar belongs to the voice, and two accents can share a
+              // voice name with different avatars, so it follows the accent
+              // the selector resolved rather than the name alone.
+              handleChange({
+                target: {
+                  name: "botAvatar",
+                  value: e.target.picture
+                }
+              });
               handleChange({
                 target: {
                   name: "voicePitch",

package/dist/Forms/CreateRoleplay/Steps/RoleplayInformation/RoleplayInformation.js

@@ -165,6 +165,8 @@ export function ActorForm({
         children: t("choose_avatar")
       })]
     }), learnLang !== "irish" && /*#__PURE__*/_jsx(VoiceSelector, {
+      handleSpeak: handleSpeak,
+      learnLang: learnLang,
       id: `actor${number}.voice`,
       "data-cy": `actor${number}.voice`,
       name: `actor${number}.voice`,
@@ -176,11 +178,11 @@ export function ActorForm({
       t: t,
       voices: voiceOptions,
       value: voice,
+      valueLanguageCode: voiceLanguageCode,
       onChange: e => {
         if (e && e.target && e.target.value) {
           const voiceSelected = e.target.value;
-          const voiceOptionElem = document.getElementById(`voice-${voiceSelected}`);
-          const languageCode = voiceOptionElem.getAttribute("data-language-code");
+          const languageCode = e.target.languageCode;
           handleChange({
             target: {
               name: `actor${number}.voice`,

package/dist/Forms/UpdatePhraseList/UpdatePhraseList.js

@@ -83,7 +83,7 @@ export default function UpdatePhraseList({
     isKeyboardHiddenPhraseGroupGames: rawInitialValues.isKeyboardHiddenPhraseGroupGames ?? {},
     hiddenWordBankPhraseGroupGames: rawInitialValues.hiddenWordBankPhraseGroupGames ?? {},
     hiddenImagePhraseGroupGames: rawInitialValues.hiddenImagePhraseGroupGames ?? {
-      "meaning": true,
+      meaning: true,
       "meaning-listen-and-speak": true,
       "meaning-read-and-write": true
     }
@@ -288,6 +288,8 @@ export default function UpdatePhraseList({
                       gutterBottom: true,
                       children: t("excercise_voice_desc")
                     }), /*#__PURE__*/_jsx(VoiceSelector, {
+                      handleSpeak: handleSpeak,
+                      learnLang: learnLang,
                       id: "voice",
                       name: "voice",
                       "data-cy": "voice",
@@ -299,11 +301,11 @@ export default function UpdatePhraseList({
                       voices: voiceOptions,
                       label: t("excercise_voice"),
                       value: values.voice,
+                      valueLanguageCode: values.voiceLanguageCode,
                       onChange: e => {
                         if (e && e.target && e.target.value) {
                           const voiceSelected = e.target.value;
-                          const voiceOptionElem = document.getElementById(`voice-${voiceSelected}`);
-                          const languageCode = voiceOptionElem.getAttribute("data-language-code");
+                          const languageCode = e.target.languageCode;
                           handleChange({
                             target: {
                               name: "voice",