@nualang/nualang-ui-components 0.1.1419 → 0.1.1421

package/dist/Live/WaitingRoom/WaitingRoom.js

@@ -1,28 +1,69 @@
 import { useState } from "react";
-import { IconButton, Typography, Grid, Box, Divider, Button, ListItem, ListItemIcon, ListItemText, Avatar, Tooltip } from "@mui/material";
-import PlaceholderImages from "../../utils/placeholder-images/index";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
+import { IconButton, Typography, Grid, Box, Divider, Button, Avatar, Tooltip, Popover, Chip } from "@mui/material";
+import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
+import ImageSearchIcon from "@mui/icons-material/ImageSearch";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import People from "@mui/icons-material/People";
+import OndemandVideo from "@mui/icons-material/OndemandVideo";
 import Hearing from "@mui/icons-material/Hearing";
 import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
-import PlayCircleOutlined from "@mui/icons-material/PlayCircleOutlined";
-import People from "@mui/icons-material/People";
-import StudentWaitingMessage from "../../Misc/StudentWaitingMessage/StudentWaitingMessage";
 import AutoStoriesIcon from "@mui/icons-material/AutoStories";
-import ExtensionIcon from '@mui/icons-material/Extension';
+import ExtensionIcon from "@mui/icons-material/Extension";
 import EditNoteIcon from "@mui/icons-material/EditNote";
+import StudentWaitingMessage from "../../Misc/StudentWaitingMessage/StudentWaitingMessage";
 import MedalSelector from "../../Misc/MedalSelector/MedalSelector";
-import OndemandVideo from "@mui/icons-material/OndemandVideo";
 import VideoViewer from "../../Dialogs/VideoViewer/VideoViewer";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const EXERCISE_ICONS = {
+  listening: Hearing,
+  translation: SwapHorizIcon,
+  meaning: ExtensionIcon,
+  "meaning-read-and-write": EditNoteIcon,
+  "roleplay-story": AutoStoriesIcon
+};
+const MAX_STACK_THUMBS = 3;
+const NAME_MAX_CHARS = 30;
+const truncate = (name = "") => name.length > NAME_MAX_CHARS ? `${name.slice(0, NAME_MAX_CHARS)}…` : name;
+const LEVEL_1_SHADOW = "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)";
+function Thumb({
+  picture,
+  size,
+  radius
+}) {
+  return picture ? /*#__PURE__*/_jsx(Box, {
+    sx: {
+      width: size,
+      height: size,
+      borderRadius: `${radius}px`,
+      flex: "none",
+      backgroundImage: `url('${picture}')`,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    }
+  }) : /*#__PURE__*/_jsx(Box, {
+    sx: {
+      width: size,
+      height: size,
+      borderRadius: `${radius}px`,
+      flex: "none",
+      backgroundColor: "#BDBDBD",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /*#__PURE__*/_jsx(ImageSearchIcon, {
+      sx: {
+        fontSize: size * 0.55,
+        color: "#fff"
+      }
+    })
+  });
+}
 export default function WaitingRoom({
-  topicImage,
-  phraseListImage,
   t,
   topicName,
-  topicDescription,
   exerciseName,
-  exerciseDescription,
   membersInRoom = [],
   handleUpdateGame,
   isCreator,
@@ -33,14 +74,21 @@ export default function WaitingRoom({
   exercise,
   selectedRoleplay,
   gameAward,
-  videoUrl
+  sources
 }) {
-  const theme = useTheme();
-  const isLgScreen = useMediaQuery(theme.breakpoints.up("md"));
-  const [isViewVideoOpen, setIsViewVideoOpen] = useState(false);
-  const handleOpenViewVideo = () => {
-    setIsViewVideoOpen(true);
-  };
+  const [selectedVideo, setSelectedVideo] = useState(null);
+  const [sourcesAnchor, setSourcesAnchor] = useState(null);
+  const exerciseKey = exercise?.toLowerCase();
+  const exerciseLabel = t(exerciseKey === "meaning-read-and-write" ? "meaning_read_write" : exerciseName || exercise);
+  // Title is always the exercise name (e.g. "Story"); the scenario/list name
+  // lives in the chip beside it.
+  const title = exerciseLabel;
+  const ExerciseIcon = selectedRoleplay ? AutoStoriesIcon : EXERCISE_ICONS[exerciseKey];
+  const hasSources = Array.isArray(sources) && sources.length > 0;
+  const stackThumbs = hasSources ? sources.slice(0, MAX_STACK_THUMBS) : [];
+  // Scenario games show a single chip built from the selected roleplay.
+  const isScenario = !hasSources && !!selectedRoleplay;
+  const scenarioName = selectedRoleplay?.roleplayName || "";
 
   // Fixed-footprint style for the lobby media image. Constraining both
   // dimensions with object-fit keeps every source (roleplay/phrase list/topic
@@ -56,202 +104,335 @@ export default function WaitingRoom({
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       sx: {
-        margin: 2,
-        width: isLgScreen ? "100%" : "auto",
-        maxWidth: "800px"
+        width: "100%",
+        maxWidth: 1000,
+        mx: "auto",
+        p: {
+          xs: "24px 16px",
+          md: "32px 24px"
+        },
+        display: "flex",
+        flexDirection: "column",
+        gap: 3
       },
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
+      children: [/*#__PURE__*/_jsxs(Box, {
         sx: {
-          width: "100%",
-          mb: 2,
-          display: "flex"
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 3,
+          flexWrap: "wrap"
         },
-        spacing: 4,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          size: {
-            lg: 4,
-            md: 4,
-            xs: 12
-          },
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              textAlign: "center"
-            },
-            children: selectedRoleplay ? /*#__PURE__*/_jsx("img", {
-              src: selectedRoleplay.picture,
-              alt: "",
-              style: mediaImageStyle
-            }) : phraseListImage ? /*#__PURE__*/_jsx("img", {
-              src: phraseListImage,
-              alt: topicName || t("topic_image"),
-              style: mediaImageStyle
-            }) : topicImage ? /*#__PURE__*/_jsx("img", {
-              src: topicImage,
-              alt: "",
-              style: mediaImageStyle
-            }) : /*#__PURE__*/_jsx("img", {
-              src: PlaceholderImages.topic,
-              alt: "",
-              style: mediaImageStyle
-            })
-          })
-        }), /*#__PURE__*/_jsxs(Grid, {
+        children: [/*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
-            flexDirection: "column"
-          },
-          size: {
-            lg: 6,
-            md: 6,
-            xs: 12
+            alignItems: "center",
+            gap: 2,
+            minWidth: 0
           },
-          children: [selectedRoleplay ? /*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            component: "h1",
-            align: "left",
-            gutterBottom: true,
-            sx: {
-              fontWeight: 700
-            },
-            children: selectedRoleplay.roleplayName
-          }) : topicName && /*#__PURE__*/_jsx(Typography, {
-            variant: "h6",
-            component: "h1",
-            align: "left",
-            gutterBottom: true,
+          children: [/*#__PURE__*/_jsxs(Box, {
             sx: {
-              fontWeight: 700
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              minWidth: 0,
+              flex: "none"
             },
-            children: topicName
-          }), selectedRoleplay ? /*#__PURE__*/_jsx(Typography, {
-            sx: {
-              textAlign: "left",
-              maxWidth: 500
+            children: [ExerciseIcon && /*#__PURE__*/_jsx(ExerciseIcon, {
+              sx: {
+                fontSize: 32,
+                color: "text.primary",
+                flex: "none"
+              }
+            }), /*#__PURE__*/_jsx(Typography, {
+              component: "h1",
+              sx: {
+                fontSize: 26,
+                fontWeight: 700,
+                color: "text.primary",
+                lineHeight: 1.2
+              },
+              children: title
+            })]
+          }), hasSources && /*#__PURE__*/_jsxs(Box, {
+            role: "button",
+            tabIndex: 0,
+            "aria-haspopup": "true",
+            "aria-expanded": Boolean(sourcesAnchor),
+            onClick: e => setSourcesAnchor(e.currentTarget),
+            onKeyDown: e => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setSourcesAnchor(e.currentTarget);
+              }
             },
-            color: "textSecondary",
-            children: selectedRoleplay.description
-          }) : topicDescription && /*#__PURE__*/_jsx(Typography, {
             sx: {
-              textAlign: "left",
-              maxWidth: 500
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              pl: 0.5,
+              pr: 1.5,
+              py: 0.5,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "25px",
+              backgroundColor: "background.paper",
+              boxShadow: LEVEL_1_SHADOW,
+              cursor: "pointer",
+              transition: "background-color 200ms cubic-bezier(0.4,0,0.2,1)",
+              "&:hover": {
+                backgroundColor: "action.hover"
+              }
             },
-            color: "textSecondary",
-            children: topicDescription
-          }), /*#__PURE__*/_jsxs(ListItem, {
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center"
+              },
+              children: stackThumbs.map((s, i) => /*#__PURE__*/_jsx(Box, {
+                sx: {
+                  ml: i === 0 ? 0 : "-10px",
+                  borderRadius: "50%",
+                  border: "2px solid",
+                  borderColor: "background.paper",
+                  flex: "none",
+                  zIndex: stackThumbs.length - i
+                },
+                children: /*#__PURE__*/_jsx(Thumb, {
+                  picture: s.picture,
+                  size: 28,
+                  radius: 14
+                })
+              }, s.phraseListId))
+            }), /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.75,
+                minWidth: 0
+              },
+              children: [/*#__PURE__*/_jsx(Typography, {
+                noWrap: true,
+                sx: {
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: "text.primary"
+                },
+                children: truncate(sources[0].phraseListName)
+              }), sources.length > 1 && /*#__PURE__*/_jsx(Chip, {
+                size: "small",
+                label: `+${sources.length - 1}`,
+                sx: {
+                  flexShrink: 0,
+                  height: 20,
+                  fontSize: "0.7rem",
+                  fontWeight: 600,
+                  backgroundColor: "action.selected",
+                  color: "text.secondary",
+                  "& .MuiChip-label": {
+                    px: "6px"
+                  }
+                }
+              })]
+            }), sourcesAnchor ? /*#__PURE__*/_jsx(ExpandLessIcon, {
+              sx: {
+                fontSize: 20,
+                color: "text.secondary"
+              }
+            }) : /*#__PURE__*/_jsx(ExpandMoreIcon, {
+              sx: {
+                fontSize: 20,
+                color: "text.secondary"
+              }
+            })]
+          }), isScenario && /*#__PURE__*/_jsxs(Box, {
             sx: {
-              paddingLeft: 0
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              pl: 0.5,
+              pr: 1.5,
+              py: 0.5,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: "25px",
+              backgroundColor: "background.paper",
+              boxShadow: LEVEL_1_SHADOW
             },
-            children: [exercise.toLowerCase() === "listening" && /*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(Hearing, {
-                fontSize: "large"
-              })
-            }), exercise.toLowerCase() === "translation" && /*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(SwapHorizIcon, {
-                fontSize: "large"
-              })
-            }), exercise.toLowerCase() === "roleplay-story" && /*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(AutoStoriesIcon, {
-                fontSize: "large"
-              })
-            }), exercise.toLowerCase() === "meaning" && /*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(ExtensionIcon, {
-                fontSize: "large",
-                "aria-hidden": "true"
-              })
-            }), exercise.toLowerCase() === "meaning-read-and-write" && /*#__PURE__*/_jsx(ListItemIcon, {
-              children: /*#__PURE__*/_jsx(EditNoteIcon, {
-                fontSize: "large",
-                "aria-hidden": "true"
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: {
+                borderRadius: "50%",
+                border: "2px solid",
+                borderColor: "background.paper",
+                flex: "none"
+              },
+              children: /*#__PURE__*/_jsx(Thumb, {
+                picture: selectedRoleplay.picture,
+                size: 28,
+                radius: 14
               })
-            }), /*#__PURE__*/_jsx(ListItemText, {
-              primary: t(exercise.toLowerCase() === "meaning-read-and-write" ? "meaning_read_write" : exerciseName),
-              secondary: isLgScreen ? t(exerciseDescription) : /*#__PURE__*/_jsx(_Fragment, {
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "body2",
-                  component: "p",
-                  color: "textSecondary",
-                  children: t(exerciseDescription)
-                })
-              }),
-              "data-cy": "waitingRoomExercise"
+            }), /*#__PURE__*/_jsx(Typography, {
+              noWrap: true,
+              sx: {
+                fontSize: 14,
+                fontWeight: 600,
+                color: "text.primary"
+              },
+              children: truncate(scenarioName)
             })]
-          }), isCreator && videoUrl && /*#__PURE__*/_jsx(Button, {
+          })]
+        }), isCreator && /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5,
+            flex: "none"
+          },
+          children: /*#__PURE__*/_jsx(Button, {
             variant: "contained",
-            color: "primary",
-            startIcon: /*#__PURE__*/_jsx(OndemandVideo, {}),
-            onClick: handleOpenViewVideo,
+            color: "success",
             sx: {
-              alignSelf: "flex-start"
+              color: "white"
             },
-            children: t("play_video")
-          })]
-        }), isCreator && /*#__PURE__*/_jsx(Grid, {
-          size: {
-            lg: 2,
-            md: 2,
-            xs: 12
+            disabled: membersInRoom.length === 0,
+            startIcon: /*#__PURE__*/_jsx(PlayCircleOutlineOutlinedIcon, {}),
+            onClick: () => {
+              handleUpdateGame();
+            },
+            id: "startGame",
+            "data-cy": "startGameButton",
+            children: t("start")
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Popover, {
+        open: Boolean(sourcesAnchor),
+        anchorEl: sourcesAnchor,
+        onClose: () => setSourcesAnchor(null),
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            sx: {
+              mt: 1,
+              borderRadius: "12px",
+              minWidth: 320,
+              maxWidth: 400,
+              overflow: "hidden"
+            }
+          }
+        },
+        children: (sources || []).map((s, i) => /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5,
+            p: 1.5,
+            ...(i > 0 ? {
+              borderTop: "1px solid",
+              borderColor: "divider"
+            } : {})
           },
-          children: /*#__PURE__*/_jsx(Grid, {
-            container: true,
+          children: [/*#__PURE__*/_jsx(Thumb, {
+            picture: s.picture,
+            size: 40,
+            radius: 8
+          }), /*#__PURE__*/_jsxs(Box, {
             sx: {
-              width: "100%",
-              paddingTop: 2
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.25,
+              minWidth: 0,
+              flex: 1
             },
-            size: 12,
-            children: /*#__PURE__*/_jsx(Grid, {
-              size: {
-                xs: 12,
-                md: 12,
-                lg: 12
+            children: [/*#__PURE__*/_jsx(Typography, {
+              noWrap: true,
+              sx: {
+                fontSize: 16,
+                fontWeight: 600,
+                color: "text.primary"
               },
-              children: /*#__PURE__*/_jsx("div", {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  marginBottom: "16px"
-                },
-                children: /*#__PURE__*/_jsx(Button, {
-                  variant: "contained",
-                  color: "success",
-                  sx: {
-                    color: "white",
-                    marginBottom: 2
-                  },
-                  disabled: membersInRoom.length === 0,
-                  startIcon: /*#__PURE__*/_jsx(PlayCircleOutlined, {}),
-                  onClick: () => {
-                    handleUpdateGame();
-                  },
-                  id: "startGame",
-                  "data-cy": "startGameButton",
-                  children: t("start")
-                })
-              })
+              children: s.phraseListName
+            }), /*#__PURE__*/_jsx(Typography, {
+              noWrap: true,
+              sx: {
+                fontSize: 14,
+                color: "text.secondary"
+              },
+              children: s.phraseCount != null ? t("source_card_meta", {
+                topic: s.topicName || "",
+                count: s.phraseCount
+              }) : s.topicName || ""
+            })]
+          }), s.topicVideoUrl && /*#__PURE__*/_jsx(Tooltip, {
+            title: t("play_video"),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              size: "small",
+              color: "primary",
+              "data-cy": "sourcePlayVideoButton",
+              sx: {
+                flex: "none"
+              },
+              onClick: () => {
+                setSelectedVideo({
+                  url: s.topicVideoUrl,
+                  title: s.topicName || s.phraseListName
+                });
+                setSourcesAnchor(null);
+              },
+              children: /*#__PURE__*/_jsx(OndemandVideo, {})
             })
-          })
-        })]
+          })]
+        }, s.phraseListId))
       }), /*#__PURE__*/_jsx(Divider, {
         sx: {
-          borderBottomWidth: 5,
-          marginBottom: 2
+          borderBottomWidth: 2
         }
-      }), isCreator && gameStatus !== "LIVE" ? /*#__PURE__*/_jsxs(Typography, {
-        align: "center",
+      }), isCreator && gameStatus !== "LIVE" ? /*#__PURE__*/_jsxs(Box, {
         sx: {
-          marginBottom: 4,
-          fontWeight: "bold"
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 1,
+          pt: 1
         },
-        variant: "h6",
-        children: [`${membersInRoom.length} ${membersInRoom.length === 1 ? t("player") : t("players")}`, /*#__PURE__*/_jsx(Tooltip, {
-          title: t("members"),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: handleOpenMembersDrawer,
-            id: "gameMembers",
-            children: /*#__PURE__*/_jsx(People, {
-              color: "primary"
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: 24,
+              fontWeight: 700,
+              color: "text.primary"
+            },
+            children: `${membersInRoom.length} ${membersInRoom.length === 1 ? t("player") : t("players")}`
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: t("members"),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: handleOpenMembersDrawer,
+              id: "gameMembers",
+              children: /*#__PURE__*/_jsx(People, {
+                sx: {
+                  fontSize: 28,
+                  color: "primary.main"
+                }
+              })
             })
-          })
+          })]
+        }), /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: 16,
+            color: "text.secondary"
+          },
+          children: t("waiting_for_students")
         })]
       }) : /*#__PURE__*/_jsx(StudentWaitingMessage, {
         t: t
@@ -262,80 +443,54 @@ export default function WaitingRoom({
           justifyContent: "center",
           alignItems: "flex-start"
         },
-        children: membersInRoom.map(member => {
-          return /*#__PURE__*/_jsx(Grid, {
-            size: {
-              lg: 2.4,
-              xs: 6,
-              md: 4
+        children: membersInRoom.map(member => /*#__PURE__*/_jsx(Grid, {
+          size: {
+            lg: 2.4,
+            xs: 6,
+            md: 4
+          },
+          children: /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              height: "100%"
             },
-            children: /*#__PURE__*/_jsxs(Box, {
+            children: [/*#__PURE__*/_jsx(Avatar, {
+              src: member.userImage,
+              alt: member.username,
               sx: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                height: "100%"
+                width: 75,
+                height: 75
+              }
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                position: "relative",
+                display: "inline-block"
               },
-              children: [/*#__PURE__*/_jsx(Avatar, {
-                src: member.userImage,
-                alt: member.username,
+              children: ["gold", "silver", "bronze"].includes(member.gameAward) && /*#__PURE__*/_jsx(MedalSelector, {
+                color: member.gameAward,
+                width: 24,
+                fade: false,
+                backgroundColor: true,
                 sx: {
-                  width: 75,
-                  height: 75
+                  position: "absolute",
+                  padding: "1px",
+                  bottom: "-3px",
+                  right: "-35px",
+                  borderRadius: "50%"
                 }
-              }), /*#__PURE__*/_jsxs("div", {
-                style: {
-                  position: "relative",
-                  display: "inline-block"
-                },
-                children: [member.gameAward === "gold" && /*#__PURE__*/_jsx(MedalSelector, {
-                  color: "gold",
-                  width: 24,
-                  fade: false,
-                  backgroundColor: true,
-                  sx: {
-                    position: "absolute",
-                    padding: "1px",
-                    bottom: "-3px",
-                    right: "-35px",
-                    borderRadius: "50%"
-                  }
-                }), member.gameAward === "silver" && /*#__PURE__*/_jsx(MedalSelector, {
-                  color: "silver",
-                  width: 24,
-                  fade: false,
-                  backgroundColor: true,
-                  sx: {
-                    position: "absolute",
-                    padding: "1px",
-                    bottom: "-3px",
-                    right: "-35px",
-                    borderRadius: "50%"
-                  }
-                }), member.gameAward === "bronze" && /*#__PURE__*/_jsx(MedalSelector, {
-                  color: "bronze",
-                  width: 24,
-                  fade: false,
-                  backgroundColor: true,
-                  sx: {
-                    position: "absolute",
-                    padding: "1px",
-                    bottom: "-3px",
-                    right: "-35px",
-                    borderRadius: "50%"
-                  }
-                })]
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "h5",
-                align: "center",
-                sx: {
-                  fontWeight: "bold"
-                },
-                children: member?.username?.length > 18 ? member.username.substring(0, 18) + "..." : member.username
-              })]
-            })
-          }, member.username);
-        })
+              })
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: "h6",
+              align: "center",
+              sx: {
+                fontWeight: "bold"
+              },
+              children: member?.username?.length > 18 ? member.username.substring(0, 18) + "..." : member.username
+            })]
+          })
+        }, member.username))
       }) : /*#__PURE__*/_jsx(Grid, {
         container: true,
         spacing: 2,
@@ -358,25 +513,13 @@ export default function WaitingRoom({
                 width: 75,
                 height: 75
               }
-            }), /*#__PURE__*/_jsxs("div", {
-              style: {
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
                 position: "relative",
                 display: "inline-block"
               },
-              children: [gameAward === "gold" && /*#__PURE__*/_jsx(MedalSelector, {
-                color: "gold",
-                width: 24,
-                fade: false,
-                backgroundColor: true,
-                sx: {
-                  position: "absolute",
-                  padding: "1px",
-                  bottom: "-3px",
-                  right: "-35px",
-                  borderRadius: "50%"
-                }
-              }), gameAward === "silver" && /*#__PURE__*/_jsx(MedalSelector, {
-                color: "silver",
+              children: ["gold", "silver", "bronze"].includes(gameAward) && /*#__PURE__*/_jsx(MedalSelector, {
+                color: gameAward,
                 width: 24,
                 fade: false,
                 backgroundColor: true,
@@ -387,19 +530,7 @@ export default function WaitingRoom({
                   right: "-35px",
                   borderRadius: "50%"
                 }
-              }), gameAward === "bronze" && /*#__PURE__*/_jsx(MedalSelector, {
-                color: "bronze",
-                width: 24,
-                fade: false,
-                backgroundColor: true,
-                sx: {
-                  position: "absolute",
-                  padding: "1px",
-                  bottom: "-3px",
-                  right: "-35px",
-                  borderRadius: "50%"
-                }
-              })]
+              })
             }), /*#__PURE__*/_jsx(Typography, {
               variant: "h5",
               align: "center",
@@ -413,10 +544,10 @@ export default function WaitingRoom({
       })]
     }), /*#__PURE__*/_jsx(VideoViewer, {
       t: t,
-      title: topicName,
-      s3Url: videoUrl,
-      open: isViewVideoOpen,
-      handleClose: () => setIsViewVideoOpen(false)
+      title: selectedVideo?.title || topicName,
+      s3Url: selectedVideo?.url || "",
+      open: Boolean(selectedVideo),
+      handleClose: () => setSelectedVideo(null)
     })]
   });
 }