@nualang/nualang-ui-components 0.1.1316 → 0.1.1318

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -123,7 +123,12 @@ function Bot({
             sm: "85%"
           },
           children: [/*#__PURE__*/_jsx(Avatar, {
-            src: bot.picture
+            src: bot.picture || bot.botAvatar,
+            sx: {
+              display: "flex",
+              width: 32,
+              height: 32
+            }
           }), /*#__PURE__*/_jsx(ListItemText, {
             sx: {
               marginLeft: 2

package/dist/Assignments/AssignmentRoleplaySelection/AssignmentRoleplaySelection.js

@@ -206,7 +206,7 @@ function Roleplay({
               sm: "85%"
             },
             children: [/*#__PURE__*/_jsx(Avatar, {
-              src: roleplay.picture,
+              src: roleplay.picture || roleplay.actor1 && roleplay.actor1.picture || roleplay.actor2 && roleplay.actor2.picture,
               sx: {
                 display: "flex",
                 width: 32,

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Dialog, DialogContent, IconButton, Box, Typography, AppBar, Toolbar, CircularProgress } from "@mui/material";
+import { Dialog, DialogContent, IconButton, Box, Typography, AppBar, Toolbar, CircularProgress, Skeleton } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { red, orange, green, grey } from "@mui/material/colors";
 import FeedbackCard from "../../Cards/FeedbackCard/FeedbackCard";
@@ -162,23 +162,50 @@ export default function GroupFeedbackDialog({
           },
           children: [/*#__PURE__*/_jsx(Box, {
             sx: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              maxWidth: "25%"
+              position: "relative",
+              width: "100%",
+              maxWidth: "300px"
             },
-            children: /*#__PURE__*/_jsx("img", {
-              src: editMeetingImages || editBackgroundImages || NualaHeadphonesBackground,
-              alt: "Meeting Image",
-              style: {
+            children: /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                position: "relative",
                 width: "100%",
-                maxWidth: "300px",
-                height: "auto",
-                aspectRatio: "16 / 9",
-                objectFit: "cover",
-                borderRadius: "8px"
-              }
+                paddingTop: "56.25%",
+                borderRadius: "8px",
+                overflow: "hidden"
+              },
+              children: [/*#__PURE__*/_jsx(Skeleton, {
+                variant: "rectangular",
+                sx: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "8px",
+                  zIndex: 0
+                }
+              }), /*#__PURE__*/_jsx("img", {
+                src: editMeetingImages || editBackgroundImages || NualaHeadphonesBackground,
+                alt: "Meeting Image",
+                onLoad: e => {
+                  setTimeout(() => {
+                    e.target.style.opacity = 1;
+                  }, 500);
+                },
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  borderRadius: "8px",
+                  opacity: 0,
+                  transition: "opacity 0.5s ease",
+                  zIndex: 1
+                }
+              })]
             })
           }), /*#__PURE__*/_jsxs(Box, {
             sx: {

package/dist/Misc/HoverText/HoverText.js

@@ -80,6 +80,7 @@ const WordText = /*#__PURE__*/memo(props => {
     leaveDelay: 200,
     title: translatedText,
     children: /*#__PURE__*/_jsx("span", {
+      translate: "no",
       "data-text": value.trim(),
       children: value
     })

package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js

@@ -111,7 +111,8 @@ const useStyles = makeStyles()(theme => ({
     position: "relative",
     "@media print": {
       display: "none"
-    }
+    },
+    paddingBottom: "60px"
   },
   moreOptions: {
     "@media print": {
@@ -1204,7 +1205,6 @@ function Classroom({
     onClick: () => {
       setIsCreateMeetingDialogOpen(true);
     },
-    title: t("schedule_discussion"),
     tabIndex: tabs.findIndex(tab => tab.id === "Discuss"),
     variant: "extended",
     disabled: !members || members.length === 0
@@ -1223,7 +1223,6 @@ function Classroom({
     onClick: () => {
       handleCreateAssignment();
     },
-    title: t("create_assignment"),
     tabIndex: tabs.findIndex(tab => tab.id === "Assignments"),
     variant: "extended",
     disabled: !members || members.length === 0 || !courses || courses.length === 0
@@ -1231,12 +1230,16 @@ function Classroom({
   const fabs = [[{
     color: "primary",
     className: null,
-    icon: /*#__PURE__*/_jsx(Add, {}),
+    icon: /*#__PURE__*/_jsx(Add, {
+      sx: {
+        mr: 1
+      }
+    }),
     id: "add-courses-fab",
+    buttonText: t("add_courses"),
     onClick: handleOpenCoursesModal,
-    title: t("add_courses"),
     tabIndex: tabs.findIndex(tab => tab.id === "Courses"),
-    variant: "circular"
+    variant: "extended"
   }, vchatFab, assignmentsFab]];
   const initialTabValue = useMemo(() => {
     if (window.location.hash) {

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, Fragment } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "tss-react/mui";
+import { useNavigate, useLocation } from "react-router-dom";
 import { Typography, Box, List, Dialog, DialogContent, Card, CardActionArea, Button, Select, FormControl, InputLabel, IconButton, Tooltip, CircularProgress, Divider, MenuItem } from "@mui/material";
 import { red, orange, green, grey } from "@mui/material/colors";
 import Styles from "../../utils/Styles";
@@ -11,6 +12,7 @@ import EditIcon from "@mui/icons-material/Edit";
 import ArchiveIcon from "@mui/icons-material/Archive";
 import dayjs from "dayjs";
 import GroupFeedbackDialog from "../../Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog";
+import { useUrlQueryParam } from "../../hooks/useUrlQueryParam";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MeetingPromptsList = withStyles(({
   scheduleListData,
@@ -39,6 +41,8 @@ const MeetingPromptsList = withStyles(({
   getRecordings,
   startTimes = {}
 }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const [selectedGroup, setSelectedGroup] = useState({});
   const [isDialogOpen, setDialogOpen] = useState(false);
   const [meetingCounts, setMeetingCounts] = useState({});
@@ -51,6 +55,20 @@ const MeetingPromptsList = withStyles(({
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [attendeesData, setAttendeesData] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [groupedIdFromUrl, setGroupedIdFromUrl, clearGroupedId] = useUrlQueryParam("groupedId", {
+    hash: "Discuss"
+  });
+  useEffect(() => {
+    if (groupedIdFromUrl && scheduleListData.length > 0) {
+      const discussion = scheduleListData.find(item => item.groupedId === groupedIdFromUrl);
+      if (discussion) {
+        setSelectedGroup(discussion);
+        setSelectedDiscussion(discussion);
+        setGroupedId(discussion.groupedId);
+        setDialogOpen(true);
+      }
+    }
+  }, [groupedIdFromUrl, scheduleListData, setSelectedDiscussion]);
   const calculateMeetingCounts = () => {
     const counts = {};
     scheduleListData?.forEach(item => {
@@ -113,6 +131,8 @@ const MeetingPromptsList = withStyles(({
   };
   const closeDialog = () => {
     setDialogOpen(false);
+    setSelectedGroup({});
+    clearGroupedId();
   };
   useEffect(() => {
     const selectedDiscussionGroup = scheduleListData.filter(item => item.groupedId === groupedId);
@@ -201,6 +221,7 @@ const MeetingPromptsList = withStyles(({
               setSelectedDiscussion(discussion);
               setGroupedId(discussion?.groupedId);
               openDialog();
+              setGroupedIdFromUrl(discussion.groupedId);
             },
             children: /*#__PURE__*/_jsxs(Box, {
               sx: {
@@ -361,8 +382,7 @@ const MeetingPromptsList = withStyles(({
       }), sortedScheduleListData?.length > cardsToShow && /*#__PURE__*/_jsx(Button, {
         variant: "outlined",
         "aria-label": t("view_more"),
-        onClick: () => setCardsToShow(cardsToShow + 2) // Load 2 more cards on button click
-        ,
+        onClick: () => setCardsToShow(cardsToShow + 2),
         children: t("view_more")
       })]
     }), /*#__PURE__*/_jsx(ConfirmDeleteDiscussion, {

package/dist/Tables/RecordingListCards/RecordingListCards.js

@@ -1,4 +1,4 @@
-import { useState, Fragment } from "react";
+import { useState, useEffect, Fragment } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "tss-react/mui";
 import { Typography, Box, Button } from "@mui/material";
@@ -7,6 +7,7 @@ import RecordingDialog from "../../Dialogs/RecordingDialog/RecordingDialog";
 import FeedbackDialog from "../../Dialogs/FeedbackInfoDialog/FeedbackInfoDialog";
 import RecordingCard from "../../Cards/RecordingCard/RecordingCard";
 import LoadingCard from "../../Cards/LoadingCard/LoadingCard";
+import { useUrlQueryParam } from "../../hooks/useUrlQueryParam";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const RecordingListCards = withStyles(({
   classes,
@@ -31,6 +32,18 @@ const RecordingListCards = withStyles(({
   const [open, setOpen] = useState(false);
   const [feedbackOpen, setFeedbackOpen] = useState(false);
   const [cardsToShow, setCardsToShow] = useState(3);
+  const [recordingIdFromUrl, setRecordingIdFromUrl, clearRecordingIdFromUrl] = useUrlQueryParam("meetingId", {
+    hash: 'Discuss'
+  });
+  useEffect(() => {
+    if (recordingIdFromUrl && recordingsTableData.length > 0) {
+      const recording = recordingsTableData.find(rec => (rec.meetingId || rec.meetingID)?.toString() === recordingIdFromUrl.toString());
+      if (recording) {
+        setSelectedRecording(recording);
+        setOpen(true);
+      }
+    }
+  }, [recordingIdFromUrl, recordingsTableData, setSelectedRecording]);
   const attendeeUsernames = [];
   userData.forEach(user => {
     [selectedRecording?.attendees].flat().forEach(attendee => {
@@ -50,6 +63,7 @@ const RecordingListCards = withStyles(({
   const handleJoin = recording => {
     setSelectedRecording(recording);
     setOpen(true);
+    setRecordingIdFromUrl(recording.meetingId);
   };
   const handleFeedbackJoin = recording => {
     setSelectedRecording(recording);
@@ -58,6 +72,7 @@ const RecordingListCards = withStyles(({
   const handleClose = () => {
     resetVideoState();
     setOpen(false);
+    clearRecordingIdFromUrl();
   };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
@@ -122,25 +137,21 @@ const RecordingListCards = withStyles(({
       })), recordingsTableData?.length > cardsToShow && /*#__PURE__*/_jsx(Button, {
         variant: "outlined",
         "aria-label": t("view_more"),
-        onClick: () => setCardsToShow(cardsToShow + 2) // Load 2 more cards on button click
-        ,
+        onClick: () => setCardsToShow(cardsToShow + 2),
         children: t("view_more")
       })]
-    }) : /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "15vh",
-          // You can adjust the height as needed
-          textAlign: "center" // Center-align text
-        },
-        children: /*#__PURE__*/_jsx(Typography, {
-          component: "h5",
-          variant: "h5",
-          children: t("no_recordings_found")
-        })
+    }) : /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "15vh",
+        textAlign: "center"
+      },
+      children: /*#__PURE__*/_jsx(Typography, {
+        component: "h5",
+        variant: "h5",
+        children: t("no_recordings_found")
       })
     })]
   });

package/dist/hooks/useUrlQueryParam.js

@@ -0,0 +1,27 @@
+import { useCallback } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+export function useUrlQueryParam(name, {
+  hash
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const params = new URLSearchParams(location.search);
+  const value = params.get(name);
+  const setValue = useCallback(newValue => {
+    const newParams = new URLSearchParams(location.search);
+    if (newValue === null || newValue === undefined) {
+      newParams.delete(name);
+    } else {
+      newParams.set(name, newValue);
+    }
+    const queryString = newParams.toString();
+    const hashSuffix = hash ? `#${hash}` : location.hash;
+    navigate(`${location.pathname}${queryString ? `?${queryString}` : ""}${hashSuffix || ""}`, {
+      replace: true
+    });
+  }, [hash, location.pathname, location.search, location.hash, name, navigate]);
+  const clear = useCallback(() => {
+    setValue(null);
+  }, [setValue]);
+  return [value, setValue, clear];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1316",
+  "version": "0.1.1318",
   "type": "module",
   "main": "dist/index.js",
   "files": [