qs

app/courses/[courseId]/media/[mediaId]/student.tsx

@@ -27,12 +27,14 @@ import "@vidstack/react/player/styles/default/theme.css";
 import { differenceInHours } from "date-fns";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
-import { clamp } from "lodash";
+import { clamp, orderBy } from "lodash";
 
 dayjs.extend(duration);
 
+import { studentContentFragment$key } from "@/__generated__/studentContentFragment.graphql";
 import { studentContentSideVideoFragment$key } from "@/__generated__/studentContentSideVideoFragment.graphql";
 import { studentMediaLogProgressVideoMutation } from "@/__generated__/studentMediaLogProgressVideoMutation.graphql";
+
 import { useParams } from "next/navigation";
 
 import { MutableRefObject, RefObject, useRef, useState } from "react";
@@ -67,6 +69,7 @@ export default function StudentMediaPage() {
           }
 
           ...MediaContentLinkFragment
+          ...studentContentFragment
         }
       }
     `,
@@ -169,6 +172,7 @@ export default function StudentMediaPage() {
             setError={setError}
             _records={videos}
             selected={selected.left}
+            _content={content}
             setSelected={(val: number) =>
               setSelected({ ...selected, left: val })
             }
@@ -209,9 +213,9 @@ export default function StudentMediaPage() {
             videoRef={videoRef}
             setError={setError}
             _records={documents}
-            selected={selected.left}
+            selected={selected.right}
             setSelected={(val: number) =>
-              setSelected({ ...selected, left: val })
+              setSelected({ ...selected, right: val })
             }
           />
         )}
@@ -360,12 +364,14 @@ function VideoSide({
   setSelected,
   setError,
   videoRef,
+  _content,
 }: {
   _records: studentContentSideVideoFragment$key;
   selected: number;
   setSelected: (val: number) => void;
   setError: (err: any) => void;
   videoRef: MutableRefObject<MediaPlayerInstance | null>;
+  _content: studentContentFragment$key;
 }) {
   const mediaRecords = useFragment(
     graphql`
@@ -392,6 +398,30 @@ function VideoSide({
     `,
     _records
   );
+
+  const content = useFragment(
+    graphql`
+      fragment studentContentFragment on MediaContent {
+        id
+        segmentLinks {
+          segment1 {
+            id
+          }
+          segment2 {
+            id
+          }
+        }
+        mediaRecords {
+          name
+          segments {
+            id
+            thumbnail
+          }
+        }
+      }
+    `,
+    _content
+  );
   const currentRecord = mediaRecords[selected];
 
   const [mediaRecordWorkedOn] =
@@ -412,6 +442,7 @@ function VideoSide({
     ) < 24;
 
   const [duration, setDuration] = useState(0);
+  const segments = orderBy(currentRecord.segments, (x) => x.startTime, "asc");
 
   return (
     <div>
@@ -448,10 +479,10 @@ function VideoSide({
 
         <Track
           content={{
-            cues: currentRecord.segments.map((x, idx) => ({
+            cues: segments.map((x, idx) => ({
               startTime: x.startTime ?? 0,
               text: x.title ?? "",
-              endTime: currentRecord.segments[idx + 1]?.startTime ?? duration,
+              endTime: segments[idx + 1]?.startTime ?? duration,
             })),
           }}
           label="Chapters"
@@ -463,38 +494,44 @@ function VideoSide({
         <MediaProvider />
         <DefaultVideoLayout
           icons={defaultLayoutIcons}
-          thumbnails={currentRecord.segments.map((x) => ({
+          thumbnails={segments.map((x) => ({
             startTime: x.startTime ?? 0,
-            url: "data:image/jpeg;base64," + x.thumbnail,
+            url: x.thumbnail ?? "",
           }))}
         />
       </MediaPlayer>
 
       <div className="mt-2 flex flex-col gap-1">
-        {currentRecord.segments.map((segment) => (
-          <div
-            onClick={() => {
-              if (videoRef.current && segment.startTime !== undefined)
-                videoRef.current.currentTime = segment.startTime;
-            }}
-            key={segment.id}
-            className="bg-slate-50 border borders-slate-200 shadow hover:bg-slate-100 text-xs rounded-md p-2 transition duration-100 cursor-pointer flex gap-2"
-          >
-            <img
-              className="h-16"
-              alt={segment.title!}
-              src={"data:image/jpeg;base64," + segment.thumbnail!}
-            />
-            <div>
-              <div className="text-slate-500">
-                {dayjs
-                  .duration(segment.startTime ?? 0, "seconds")
-                  .format("HH:mm:ss")}
+        {segments.map((segment) => {
+          const links = content.segmentLinks.filter(
+            (x) => x.segment1.id === segment.id || x.segment2.id === segment.id
+          );
+
+          return (
+            <div
+              onClick={() => {
+                if (videoRef.current && segment.startTime !== undefined)
+                  videoRef.current.currentTime = segment.startTime;
+              }}
+              key={segment.id}
+              className="bg-slate-50 border borders-slate-200 shadow hover:bg-slate-100 text-xs rounded-md p-2 transition duration-100 cursor-pointer flex gap-2"
+            >
+              <img
+                className="h-16"
+                alt={segment.title!}
+                src={segment.thumbnail!}
+              />
+              <div>
+                <div className="text-slate-500">
+                  {dayjs
+                    .duration(segment.startTime ?? 0, "seconds")
+                    .format("HH:mm:ss")}
+                </div>
+                {segment.title}
               </div>
-              {segment.title}
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
 
       <div className="w-full flex justify-center mt-10">