Merge pull request #17 from MEITREX/docproc-ai

Docproc ai

.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]/flashcards/[flashcardSetId]/lecturer.tsx

@@ -51,15 +51,15 @@ export default function LecturerFlashcards() {
                 ...LecturerEditFlashcardFragment
               }
             }
-            items{
+            items {
               id
               associatedSkills {
                 id
                 skillName
               }
               associatedBloomLevels
             }
-            }
+          }
           ...EditFlashcardSetModalFragment
         }
       }
@@ -72,34 +72,36 @@ export default function LecturerFlashcards() {
 
   const [error, setError] = useState<any>(null);
 
-
   const [addFlashcard, isAddingFlashcard] =
     useMutation<lecturerAddFlashcardMutation>(graphql`
       mutation lecturerAddFlashcardMutation(
         $flashcard: CreateFlashcardInput!
         $assessmentId: UUID!
-        $item:ItemInput!
-
+        $item: ItemInput!
       ) {
         mutateFlashcardSet(assessmentId: $assessmentId) {
           assessmentId
-          createFlashcard(flashcardInput: $flashcard,assessmentId: $assessmentId,item:$item) {
-            flashcard{
+          createFlashcard(
+            flashcardInput: $flashcard
+            assessmentId: $assessmentId
+            item: $item
+          ) {
+            flashcard {
               __id
-                itemId
+              itemId
               ...LecturerEditFlashcardFragment
-              }
-            item{
+            }
+            item {
               id
               associatedSkills {
                 id
                 skillName
               }
               associatedBloomLevels
-            }  
             }
           }
         }
+      }
     `);
   const [updateFlashcardSet, isUpdatingFlashcardSet] =
     useMutation<lecturerEditFlashcardSetMutation>(graphql`
@@ -124,7 +126,7 @@ export default function LecturerFlashcards() {
             }
           }
         }
-        }
+      }
     `);
 
   const [deleteFlashcard, isDeleting] =
@@ -146,16 +148,17 @@ export default function LecturerFlashcards() {
 
   const content = contentsByIds[0];
   const flashcardSet = content.flashcardSet;
-  const transformedItems: ItemData[] = content.items?.map(item => ({
-    associatedBloomLevels: Array.from(item.associatedBloomLevels),
-    associatedSkills: Array.from(item.associatedSkills).map(skill => ({
+  const transformedItems: ItemData[] =
+    content.items?.map((item) => ({
+      associatedBloomLevels: Array.from(item.associatedBloomLevels),
+      associatedSkills: Array.from(item.associatedSkills).map((skill) => ({
         id: skill.id || undefined,
         skillName: skill.skillName,
-    })),
-    id: item.id,
-})) || [];
-const items=transformedItems;
-  
+      })),
+      id: item.id,
+    })) || [];
+  const items = transformedItems;
+
   if (flashcardSet == null) {
     return (
       <PageError
@@ -165,15 +168,23 @@ const items=transformedItems;
     );
   }
 
-  function handleAddFlashcard(sides: FlashcardSideData[], item:ItemData,newSkillAdded?:boolean) {
+  function handleAddFlashcard(
+    sides: FlashcardSideData[],
+    item: ItemData,
+    newSkillAdded?: boolean
+  ) {
     const newFlashcard = {
       sides,
-      itemId:null,
+      itemId: null,
     };
 
     setAddFlashcardOpen(false);
     addFlashcard({
-      variables: {  flashcard: newFlashcard,assessmentId: flashcardSetId,item:item },
+      variables: {
+        flashcard: newFlashcard,
+        assessmentId: flashcardSetId,
+        item: item,
+      },
       onError: setError,
       updater(store, response) {
         // Get record of flashcard set and of the new flashcard
@@ -186,29 +197,27 @@ const items=transformedItems;
         // Update the linked records of the flashcard set
         const flashcardRecords =
           flashcardSetRecord.getLinkedRecords("flashcards") ?? [];
-          console.log(flashcardRecords);
+        console.log(flashcardRecords);
         flashcardSetRecord.setLinkedRecords(
           [...flashcardRecords, newRecord],
           "flashcards"
         );
- const root= store.get(flashcardSetId);
+        const root = store.get(flashcardSetId);
 
-          if (!root) return;
+        if (!root) return;
 
-          const items = root?.getLinkedRecords("items") ?? [];
+        const items = root?.getLinkedRecords("items") ?? [];
 
-          const newItem=store.get(response.mutateFlashcardSet.createFlashcard.item!.id);
-
-          if (newItem) {
-
-            root.setLinkedRecords([...items, newItem], "items");
+        const newItem = store.get(
+          response.mutateFlashcardSet.createFlashcard.item!.id
+        );
 
+        if (newItem) {
+          root.setLinkedRecords([...items, newItem], "items");
         } else {
-
-           return;
-
+          return;
         }
-       /* const items = store
+        /* const items = store
         .getRoot()
         .getLinkedRecord("items")
         ?.getLinkedRecords("elements");
@@ -222,13 +231,13 @@ const items=transformedItems;
 
         console.log(flashcardSetRecord.getLinkedRecords("flashcards"));
       },
-      onCompleted(){
+      onCompleted() {
         //reload page, when a new skill is added
-        if(newSkillAdded){
+        if (newSkillAdded) {
           console.log("reload");
           window.location.reload();
         }
-      }
+      },
     });
   }
 
@@ -355,7 +364,7 @@ const items=transformedItems;
         ))}
         {isAddFlashcardOpen && (
           <LocalFlashcard
-          courseId={courseId}
+            courseId={courseId}
             onClose={() => setAddFlashcardOpen(false)}
             onSubmit={handleAddFlashcard}
           />
@@ -379,7 +388,6 @@ const items=transformedItems;
           onClose={() => setEditSetOpen(false)}
           onSubmit={handleUpdateFlashcardSet}
           _content={content}
-
         />
       )}
     </main>

app/courses/[courseId]/flashcards/[flashcardSetId]/student.tsx

@@ -65,7 +65,7 @@ export default function StudentFlashcards() {
           _flashcard: x,
         }))}
         emptyMessage="Empty flashcard set."
-        onComplete={() =>window.location.replace(`/courses/${courseId}`)}
+        onComplete={() => window.location.replace(`/courses/${courseId}`)}
         onError={setError}
       />
     </main>

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

@@ -0,0 +1,94 @@
+"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
+        standardizedDownloadUrl
+        downloadUrl
+        ...ContentMediaDisplayVideoFragment
+      }
+    `,
+    _record
+  );
+
+  switch (mediaRecord.type) {
+    case "VIDEO":
+      return <VideoPlayer _video={mediaRecord} />;
+    case "PRESENTATION":
+    case "DOCUMENT":
+      return (
+        <PdfViewer
+          onProgressChange={onProgressChange}
+          url={mediaRecord.standardizedDownloadUrl ?? mediaRecord.downloadUrl}
+        />
+      );
+    case "IMAGE":
+      // eslint-disable-next-line @next/next/no-img-element
+      return (
+        <img
+          alt={mediaRecord.name}
+          src={mediaRecord.standardizedDownloadUrl ?? 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
+        standardizedDownloadUrl
+        downloadUrl
+        segments {
+          id
+          ... on VideoRecordSegment {
+            startTime
+            transcript
+            thumbnail
+            title
+          }
+        }
+      }
+    `,
+    _video
+  );
+
+  return (
+    <MediaPlayer
+      src={mediaRecord.standardizedDownloadUrl ?? mediaRecord.downloadUrl}
+    >
+      <MediaProvider />
+      <DefaultVideoLayout icons={defaultLayoutIcons} />
+    </MediaPlayer>
+  );
+}