Improve image rendering (#8)

src/app/api/file/[fileId]/route.ts

@@ -16,7 +16,7 @@ export async function GET(
     const response = await googleDrive.files.get({
       fileId,
       fields:
-        "id, name, mimeType, webViewLink, webContentLink, thumbnailLink, size, createdTime, modifiedTime, description, owners",
+        "id, name, mimeType, webViewLink, webContentLink, thumbnailLink, size, createdTime, modifiedTime, description, owners, imageMediaMetadata",
     });
 
     if (response.status !== 200) {

src/app/api/files/route.ts

@@ -40,7 +40,7 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
     const response = await googleDrive.files.list({
       q: query,
       fields:
-        "files(id, name, mimeType, webViewLink, webContentLink, thumbnailLink, size, createdTime, modifiedTime, description, owners)",
+        "files(id, name, mimeType, webViewLink, webContentLink, thumbnailLink, size, createdTime, modifiedTime, description, owners, imageMediaMetadata)",
       orderBy,
     });
 

src/app/file/[id]/page.tsx

@@ -1,9 +1,8 @@
 "use server";
 
 import type { Metadata } from "next";
-import Image from "next/image";
 
-import CAIPopover from "@/components/CAIPopover";
+import CAIContent from "@/components/CAIContent";
 import CAISummary from "@/components/CAISummary";
 import CopyLinkButton from "@/components/CopyLinkButton";
 import { getManifestStoreByUrl } from "@/services/manifest";
@@ -29,15 +28,7 @@ export default async function FilePage({ params }: Params) {
 
   return (
     <main className="flex flex-col items-center p-24 gap-4">
-      <CAIPopover className="h-96 w-96" manifestStore={manifestStore}>
-        <Image
-          priority
-          className="object-fit rounded-xl"
-          alt={file.alt}
-          src={file.webContentLink}
-          fill
-        />
-      </CAIPopover>
+      <CAIContent file={file} manifestStore={manifestStore} />
       <div className="flex flex-row items-center gap-2">
         <CopyLinkButton
           text={"Copy Link"}

src/app/lib/definitions.ts

@@ -17,6 +17,11 @@ export type GoogleDriveFile = {
     permissionId: string;
     emailAddress: string;
   }>;
+  imageMediaMetadata: {
+    width: number;
+    height: number;
+    // Other fields not included
+  };
 };
 
 export type ErrorResponse = {

src/components/CAIContent.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Image from "next/image";
+import { ManifestStore } from "@contentauth/toolkit";
+
+import CAIPopover from "@/components/CAIPopover";
+import { isImage } from "@/utils/mimeTypes";
+import { GoogleDriveFile } from "@/app/lib/definitions";
+
+export interface CAIContentProps {
+  file: GoogleDriveFile;
+  manifestStore: ManifestStore;
+}
+
+export default function CAIContent({ file, manifestStore }: CAIContentProps) {
+  if (isImage(file.mimeType)) {
+    return (
+      <CAIPopover disablePopover manifestStore={manifestStore}>
+        <Image
+          priority
+          className="object-fit rounded-xl"
+          alt={file.description}
+          src={file.webContentLink}
+          height={file.imageMediaMetadata.height}
+          width={file.imageMediaMetadata.width}
+        />
+      </CAIPopover>
+    );
+  }
+  return <div>Unsupported Media</div>;
+}

src/utils/mimeTypes.ts

@@ -1,6 +1,6 @@
 import { MimeTypeFilter } from "@/app/lib/definitions";
 
-const MIME_TYPES = process.env.CONTENT_INTEGRITY_MIME_TYPES.split(",") || [];
+const MIME_TYPES = process.env.CONTENT_INTEGRITY_MIME_TYPES?.split(",") || [];
 
 /**
  * Get all supported mime types based on the filter
@@ -21,3 +21,7 @@ export function getSupportedMimeTypes(typeFilter?: MimeTypeFilter): string[] {
 export function isSupportedMimeType(mimeType?: string): boolean {
   return !!mimeType && MIME_TYPES.includes(mimeType);
 }
+
+export const isImage = (mimeType: string) => mimeType.startsWith("image");
+export const isVideo = (mimeType: string) => mimeType.startsWith("video");
+export const isAudio = (mimeType: string) => mimeType.startsWith("audio");