implement search bar and video chapters

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["next/core-web-vitals", "prettier"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

app/(dashboard)/student.tsx

@@ -13,7 +13,7 @@ import {
 import dayjs from "dayjs";
 import { chain } from "lodash";
 import Link from "next/link";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { useLazyLoadQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -103,7 +103,7 @@ export default function StudentPage() {
     )
     .map(([key, courses]) => {
       return (
-        <>
+        <Fragment key={key}>
           <Typography variant="h6" gutterBottom>
             {key}
           </Typography>
@@ -118,7 +118,7 @@ export default function StudentPage() {
               />
             ))}
           </div>
-        </>
+        </Fragment>
       );
     })
 

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

@@ -0,0 +1,90 @@
+"use client";
+import { ContentMediaDisplayFragment$key } from "@/__generated__/ContentMediaDisplayFragment.graphql";
+import { ContentMediaDisplayVideoFragment$key } from "@/__generated__/ContentMediaDisplayVideoFragment.graphql";
+import { PdfViewer } from "@/components/PdfViewer";
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import {
+  defaultLayoutIcons,
+  DefaultVideoLayout,
+} from "@vidstack/react/player/layouts/default";
+import "@vidstack/react/player/styles/default/layouts/video.css";
+import "@vidstack/react/player/styles/default/theme.css";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
+
+export function ContentMediaDisplay({
+  _record,
+  onProgressChange,
+}: {
+  _record: ContentMediaDisplayFragment$key;
+  onProgressChange: (fraction: number) => void;
+}) {
+  const mediaRecord = useFragment(
+    graphql`
+      fragment ContentMediaDisplayFragment on MediaRecord {
+        type
+        name
+        downloadUrl
+        ...ContentMediaDisplayVideoFragment
+      }
+    `,
+    _record
+  );
+
+  switch (mediaRecord.type) {
+    case "VIDEO":
+      return <VideoPlayer _video={mediaRecord} />;
+    case "PRESENTATION":
+    case "DOCUMENT":
+      return (
+        <PdfViewer
+          onProgressChange={onProgressChange}
+          url={mediaRecord.downloadUrl}
+        />
+      );
+    case "IMAGE":
+      // eslint-disable-next-line @next/next/no-img-element
+      return (
+        <img
+          alt={mediaRecord.name}
+          src={mediaRecord.downloadUrl}
+          className="max-h-md flex justify-center mx-auto"
+        ></img>
+      );
+    default:
+      return <>Unsupported media type</>;
+  }
+}
+
+export function VideoPlayer({
+  _video,
+}: {
+  _video: ContentMediaDisplayVideoFragment$key;
+}) {
+  const mediaRecord = useFragment(
+    graphql`
+      fragment ContentMediaDisplayVideoFragment on MediaRecord {
+        type
+        name
+        downloadUrl
+        segments {
+          id
+          ... on VideoRecordSegment {
+            startTime
+            transcript
+            thumbnail
+            title
+          }
+        }
+      }
+    `,
+    _video
+  );
+
+  return (
+    <MediaPlayer src={mediaRecord.downloadUrl}>
+      <MediaProvider />
+      <DefaultVideoLayout icons={defaultLayoutIcons} />
+    </MediaPlayer>
+  );
+}

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

@@ -12,7 +12,8 @@ import { Alert, Button, CircularProgress, Typography } from "@mui/material";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
-import { ContentMediaDisplay, DownloadButton } from "./student";
+import { ContentMediaDisplay } from "./ContentMediaDisplay";
+import { DownloadButton } from "./student";
 
 export default function LecturerMediaPage() {
   const { mediaId, courseId } = useParams();
@@ -33,7 +34,7 @@ export default function LecturerMediaPage() {
             mediaRecords {
               id
               name
-              ...studentContentMediaDisplayFragment
+              ...ContentMediaDisplayFragment
               ...studentContentDownloadButtonFragment
             }
           }