@nualang/nualang-ui-components 0.1.1314 → 0.1.1315

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -6,6 +6,8 @@ import Refresh from "@mui/icons-material/Refresh";
 import TeacherCreate from "../../img/teacher-create-2.svg";
 import Add from "@mui/icons-material/Add";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VISIBILITY_LEAD_MINUTES = 5; // how many minutes before scheduleDate it becomes visible to students
+
 const AssignmentCardsList = ({
   t = text => text,
   assignments = [],
@@ -31,8 +33,7 @@ const AssignmentCardsList = ({
   isChallengeModeStudent
 }) => {
   const [lastClickedExerciseId, setLastClickedExerciseId] = useState(null);
-  const [filter, setFilter] = useState("all"); // Filter state
-
+  const [filter, setFilter] = useState("all");
   useEffect(() => {
     const stored = localStorage.getItem("lastClickedExercise");
     if (stored) {
@@ -47,20 +48,27 @@ const AssignmentCardsList = ({
     }
   }, []);
   const now = new Date();
-  const filteredAssignments = assignments.filter(assignment => {
+  const safeAssignments = Array.isArray(assignments) ? assignments : [];
+  const filteredAssignments = safeAssignments.filter(assignment => {
     if (!isCreator) {
       if (Array.isArray(assignment.assignedStudents) && !assignment.assignedStudents.includes(memberId)) {
         return false;
       }
-      if (assignment.scheduleDate && new Date(assignment.scheduleDate) > now) {
-        return false;
+      if (assignment.scheduleDate) {
+        const scheduleDateObj = new Date(assignment.scheduleDate);
+        const visibleFrom = new Date(scheduleDateObj.getTime() - VISIBILITY_LEAD_MINUTES * 60 * 1000);
+        if (visibleFrom > now) {
+          return false;
+        }
       }
     }
     return true;
   }).filter(assignment => {
     if (filter === "all") return true;
     if (filter === "scheduled") {
-      return assignment.scheduleDate && new Date(assignment.scheduleDate) > now;
+      if (!assignment.scheduleDate) return false;
+      const scheduleDateObj = new Date(assignment.scheduleDate);
+      return scheduleDateObj > now;
     }
     if (filter === "pastDue") {
       return assignment.dueDate && new Date(assignment.dueDate) < now;
@@ -71,12 +79,12 @@ const AssignmentCardsList = ({
     return true;
   }).sort((a, b) => {
     if (filter === "dueNext") {
-      return new Date(a.dueDate) - new Date(b.dueDate);
+      return new Date(a.dueDate || 0) - new Date(b.dueDate || 0);
     }
     if (filter === "scheduled") {
-      return new Date(a.scheduleDate) - new Date(b.scheduleDate);
+      return new Date(a.scheduleDate || 0) - new Date(b.scheduleDate || 0);
     }
-    return new Date(b.createdAt) - new Date(a.createdAt);
+    return new Date(b.createdAt || 0) - new Date(a.createdAt || 0);
   });
   if (isLoadingAssignments) {
     return /*#__PURE__*/_jsxs(Box, {
@@ -150,7 +158,7 @@ const AssignmentCardsList = ({
       }, idx))]
     });
   }
-  if (!assignments || assignments.length === 0) {
+  if (!safeAssignments.length || filteredAssignments.length === 0) {
     return /*#__PURE__*/_jsx(Box, {
       mb: 1,
       children: /*#__PURE__*/_jsxs(Box, {
@@ -290,9 +298,6 @@ const AssignmentCardsList = ({
           onClick: refreshAssignments,
           "aria-label": "refresh",
           size: "large",
-          sx: {
-            size: "large"
-          },
           children: /*#__PURE__*/_jsx(Refresh, {
             fontSize: "inherit"
           })
@@ -325,8 +330,24 @@ AssignmentCardsList.propTypes = {
   t: PropTypes.func,
   assignments: PropTypes.array,
   isCreator: PropTypes.bool,
-  onRefresh: PropTypes.func,
+  handleCreateAssignment: PropTypes.func,
+  getCourses: PropTypes.func,
+  getCourseSections: PropTypes.func,
+  getRoleplays: PropTypes.func,
+  deleteAssignment: PropTypes.func,
+  handleEditAssignment: PropTypes.func,
+  refreshAssignments: PropTypes.func,
+  username: PropTypes.string,
+  preferred_username: PropTypes.string,
+  progressHelpers: PropTypes.object,
+  fetchMemberCourseCompletions: PropTypes.func,
+  memberId: PropTypes.string,
+  handleViewProgress: PropTypes.func,
+  lastAssignmentFetch: PropTypes.any,
+  assignmentMembersById: PropTypes.object,
   isLoadingAssignments: PropTypes.bool,
-  assignmentMembersById: PropTypes.object
+  members: PropTypes.array,
+  courses: PropTypes.array,
+  isChallengeModeStudent: PropTypes.bool
 };
 export default AssignmentCardsList;

package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js

@@ -62,7 +62,7 @@ export default function CreateAssignmentDialog({
   const [submittedExercises, setSubmittedExercises] = useState(initialData.exercises ? initialData.exercises : []);
   const [members, setMembers] = useState([]);
   const [assignment, setAssignment] = useState({
-    classroomId: classroom?.length > 0 ? [classroom] : [],
+    classroomId: classroom && classroom.length > 0 ? [classroom] : [],
     assignedStudents,
     title: initialData.title ? initialData.title : undefined,
     instructions: initialData.instructions ? initialData.instructions : t("default_assignment_instructions"),
@@ -174,7 +174,12 @@ export default function CreateAssignmentDialog({
     let filteredCourses = selectedCourses.filter(course => submittedExercises.some(exercise => exercise.courseSectionTopicId?.split("|")[0] === course.courseId));
     setAssignment(prev => ({
       ...prev,
-      courses: filteredCourses
+      courses: filteredCourses.map(course => ({
+        courseId: course.courseId,
+        courseName: course.courseName,
+        description: course.description,
+        picture: course.picture
+      }))
     }));
     const selectedTopicIds = new Set(submittedExercises.map(ex => ex.courseSectionTopicId));
     const topicNames = Array.from(new Set(filteredCourses.flatMap(course => course.sections?.flatMap(section => section.topics?.flatMap(topic => {
@@ -212,10 +217,12 @@ export default function CreateAssignmentDialog({
     }));
   }, [members]);
   useEffect(() => {
-    setAssignment(prev => ({
-      ...prev,
-      classroomId: [classroom]
-    }));
+    if (classroom && classroom.length > 0 && !assignment.classroomId?.includes(classroom)) {
+      setAssignment(prev => ({
+        ...prev,
+        classroomId: [classroom]
+      }));
+    }
   }, [classroom]);
   const [isSelectExerciseOpen, setIsSelectExerciseOpen] = useState(false);
   const handleCloseSelectExercise = () => {

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -25,7 +25,12 @@ export default function FeedbackCard({
   setSelectedRecording = () => {},
   s3Url = "",
   conversation = {},
-  existingFeedback = {}
+  existingFeedback = {},
+  playerRef = {
+    current: null
+  },
+  goToTimestamp = () => {},
+  startTimes = {}
 }) {
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [hasBeenEdited, setHasBeenEdited] = useState(false);
@@ -381,11 +386,11 @@ export default function FeedbackCard({
       attendeesData: attendeesInThisDiscussion,
       conversation: conversation,
       s3Url: s3Url,
-      playerRef: {
-        current: null
-      },
+      playerRef: playerRef,
       aiGrade: aiGrade,
-      hasBadLanguage: discussionData?.hasBadLanguage || false
+      hasBadLanguage: discussionData?.hasBadLanguage || false,
+      goToTimestamp: goToTimestamp,
+      videoStartTime: startTimes[0]
     }), /*#__PURE__*/_jsx(PDFViewer, {
       open: openPDF,
       handleClose: handleClosePDF,

package/dist/Dialogs/GroupedFeedbackDialog/GroupedFeedbackDialog.js

@@ -26,7 +26,9 @@ export default function GroupFeedbackDialog({
   handleCreateFeedback = () => {},
   onFeedbackSubmitted = () => {},
   editBackgroundImages,
-  editMeetingImages
+  editMeetingImages,
+  goToTimestamp = () => {},
+  startTimes = {}
 }) {
   const discussionsInGroup = scheduleListData.filter(item => item.groupedId === groupedId);
   const submissionsForGroup = submissionsTableData.filter(item => item.groupedId === groupedId);
@@ -290,7 +292,9 @@ export default function GroupFeedbackDialog({
             selectedRecording: selectedRecording,
             s3Url: s3Url,
             playerRef: playerRef,
-            conversation: conversation
+            conversation: conversation,
+            goToTimestamp: goToTimestamp,
+            startTimes: startTimes
           }, discussion.meetingId || discussion.meetingID || index);
         })]
       })

package/dist/Dialogs/RecordingDialog/RecordingDialog.js

@@ -10,12 +10,32 @@ import { red } from "@mui/material/colors";
 import { useMediaQuery } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const dateDifferenceInSeconds = (date1, date2) => {
+  const d1 = new Date(date1);
+  const d2 = new Date(date2);
+  return Math.abs((d2 - d1) / 1000);
+};
+const formatTimestamp = (timestamp, videoStartTime) => {
+  if (!timestamp && timestamp !== 0) return "00:00";
+  if (!videoStartTime) return "00:00";
+  let numberString = timestamp.toString();
+  numberString = numberString.substring(0, 10);
+  const formattedTime = Number(numberString);
+  const dateObj = new Date(formattedTime * 1000);
+  const isoString = dateObj.toISOString();
+  const seconds = dateDifferenceInSeconds(videoStartTime, isoString);
+  if (isNaN(seconds) || seconds < 0) return "00:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
 function TranscriptViewer({
   conversation = {},
   goToTimestamp = () => {},
   attendeesData,
   t = text => text,
-  loading = false
+  loading = false,
+  videoStartTime = null
 }) {
   return /*#__PURE__*/_jsx(Box, {
     sx: {
@@ -69,40 +89,66 @@ function TranscriptViewer({
         sx: theme => ({
           display: "flex",
           flexDirection: "column",
-          mb: 1,
+          mb: 1.5,
           cursor: "pointer",
-          p: 1,
-          borderRadius: 1,
+          p: 1.5,
+          borderRadius: 2,
+          transition: "all 0.2s ease-in-out",
+          border: "1px solid transparent",
           "&:hover": {
-            backgroundColor: theme.palette.mode === "dark" ? theme.palette.primary.main : "#f9f9f9"
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.primary.dark : theme.palette.primary.light + "15",
+            border: `1px solid ${theme.palette.primary.main}`,
+            transform: "translateX(4px)"
           }
         }),
         children: [/*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
-            mb: 0.5
+            mb: 0.5,
+            gap: 1
           },
           children: [/*#__PURE__*/_jsx(Avatar, {
             alt: sentence?.username,
             src: userImage,
             sx: {
-              width: 24,
-              height: 24,
-              mr: 1
+              width: 28,
+              height: 28
             }
           }), sentence?.user && /*#__PURE__*/_jsx(Typography, {
             variant: "subtitle2",
             fontWeight: "bold",
             sx: {
-              whiteSpace: "nowrap"
+              whiteSpace: "nowrap",
+              flex: 1
             },
             children: sentence.user
+          }), (sentence.start_time !== undefined || sentence.end_time !== undefined) && videoStartTime && /*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5,
+              px: 1,
+              py: 0.25,
+              backgroundColor: theme => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.06)",
+              borderRadius: 1
+            },
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              sx: {
+                fontFamily: "monospace",
+                fontWeight: 500,
+                color: "text.secondary"
+              },
+              children: formatTimestamp(sentence.start_time, videoStartTime)
+            })
           })]
         }), /*#__PURE__*/_jsx(Typography, {
           variant: "body2",
           sx: {
-            ml: 4
+            ml: 4.5,
+            lineHeight: 1.6,
+            color: "text.primary"
           },
           children: sentence.text
         })]
@@ -117,7 +163,8 @@ TranscriptViewer.propTypes = {
   conversation: PropTypes.object,
   goToTimestamp: PropTypes.func,
   t: PropTypes.func,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  videoStartTime: PropTypes.string
 };
 export default function RecordingDialog({
   open,
@@ -129,7 +176,8 @@ export default function RecordingDialog({
   playerRef,
   conversation,
   attendeesData,
-  hasBadLanguage
+  hasBadLanguage,
+  videoStartTime
 }) {
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -227,7 +275,8 @@ export default function RecordingDialog({
             attendeesData: attendeesData,
             conversation: conversation,
             goToTimestamp: goToTimestamp,
-            loading: loading
+            loading: loading,
+            videoStartTime: videoStartTime
           })
         })]
       })
@@ -254,5 +303,6 @@ RecordingDialog.propTypes = {
   s3Url: PropTypes.string,
   playerRef: PropTypes.object,
   conversation: PropTypes.array,
-  handleCreateFeedback: PropTypes.func
+  handleCreateFeedback: PropTypes.func,
+  videoStartTime: PropTypes.string
 };

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

@@ -538,7 +538,8 @@ function Classroom({
     hasBadLanguage,
     handleArchiveSubmissions,
     isVideoChatEnabled,
-    isVideoChatEnabledInSettings
+    isVideoChatEnabledInSettings,
+    startTimes
   } = vchatProps;
   const isSmallScreen = useMediaQuery("(max-width:410px)");
   const {
@@ -1041,7 +1042,8 @@ function Classroom({
               setSelectedRecording: setSelectedRecording,
               meetingRecsData: meetingRecsData,
               hasBadLanguage: hasBadLanguage,
-              handleArchiveSubmissions: handleArchiveSubmissions
+              handleArchiveSubmissions: handleArchiveSubmissions,
+              startTimes: startTimes
             })
           })
         }), !isCreator && discussions?.length > 0 && /*#__PURE__*/_jsx(Box, {
@@ -1248,7 +1250,7 @@ function Classroom({
       }
     }
     return 0;
-  }, [isCreator.tabs?.length]); // only recompute if isCreator or tabs change
+  }, [isCreator, tabs?.length]); // only recompute if isCreator or tabs change
 
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {

package/dist/Tables/MeetingPrompstList/MeetingPromptsList.js

@@ -36,7 +36,8 @@ const MeetingPromptsList = withStyles(({
   setSelectedRecording,
   selectedRecording,
   getMeeting,
-  getRecordings
+  getRecordings,
+  startTimes = {}
 }) => {
   const [selectedGroup, setSelectedGroup] = useState({});
   const [isDialogOpen, setDialogOpen] = useState(false);
@@ -392,7 +393,9 @@ const MeetingPromptsList = withStyles(({
       handleCreateFeedback: handleCreateFeedback,
       onFeedbackSubmitted: getRecordings,
       editBackgroundImages: editBackgroundImages[0],
-      editMeetingImages: editMeetingImages[0]
+      editMeetingImages: editMeetingImages[0],
+      goToTimestamp: goToTimestamp,
+      startTimes: startTimes
     }), /*#__PURE__*/_jsx(Dialog, {
       role: "dialog",
       open: isRecordingDialogOpen,

package/package.json

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