feat: file preview

frontend/src/pages/account/reverseShares.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Center,
   Group,
-  LoadingOverlay,
   Stack,
   Table,
   Text,
@@ -18,6 +17,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { TbInfoCircle, TbLink, TbPlus, TbTrash } from "react-icons/tb";
 import showShareLinkModal from "../../components/account/showShareLinkModal";
+import CenterLoader from "../../components/core/CenterLoader";
 import Meta from "../../components/Meta";
 import showCreateReverseShareModal from "../../components/share/modals/showCreateReverseShareModal";
 import useConfig from "../../hooks/config.hook";
@@ -50,7 +50,7 @@ const MyShares = () => {
   if (!user) {
     router.replace("/");
   } else {
-    if (!reverseShares) return <LoadingOverlay visible />;
+    if (!reverseShares) return <CenterLoader />;
     return (
       <>
         <Meta title="My shares" />

frontend/src/pages/share/[shareId]/index.tsx

@@ -2,13 +2,13 @@ import { Box, Group, Text, Title } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { GetServerSidePropsContext } from "next";
 import { useEffect, useState } from "react";
-import Meta from "../../components/Meta";
-import DownloadAllButton from "../../components/share/DownloadAllButton";
-import FileList from "../../components/share/FileList";
-import showEnterPasswordModal from "../../components/share/showEnterPasswordModal";
-import showErrorModal from "../../components/share/showErrorModal";
-import shareService from "../../services/share.service";
-import { Share as ShareType } from "../../types/share.type";
+import Meta from "../../../components/Meta";
+import DownloadAllButton from "../../../components/share/DownloadAllButton";
+import FileList from "../../../components/share/FileList";
+import showEnterPasswordModal from "../../../components/share/showEnterPasswordModal";
+import showErrorModal from "../../../components/share/showErrorModal";
+import shareService from "../../../services/share.service";
+import { Share as ShareType } from "../../../types/share.type";
 
 export function getServerSideProps(context: GetServerSidePropsContext) {
   return {

frontend/src/pages/share/[shareId]/preview/[fileId].tsx

@@ -0,0 +1,92 @@
+import { Center, Stack, Text, Title } from "@mantine/core";
+import { GetServerSidePropsContext } from "next";
+import { useState } from "react";
+
+export function getServerSideProps(context: GetServerSidePropsContext) {
+  const { shareId, fileId } = context.params!;
+
+  const mimeType = context.query.type as string;
+
+  return {
+    props: { shareId, fileId, mimeType },
+  };
+}
+
+const UnSupportedFile = () => {
+  return (
+    <Center style={{ height: "70vh" }}>
+      <Stack align="center" spacing={10}>
+        <Title order={3}>Preview not supported</Title>
+        <Text>
+          A preview for thise file type is unsupported. Please download the file
+          to view it.
+        </Text>
+      </Stack>
+    </Center>
+  );
+};
+
+const FilePreview = ({
+  shareId,
+  fileId,
+  mimeType,
+}: {
+  shareId: string;
+  fileId: string;
+  mimeType: string;
+}) => {
+  const [isNotSupported, setIsNotSupported] = useState(false);
+
+  if (isNotSupported) return <UnSupportedFile />;
+
+  if (mimeType == "application/pdf") {
+    window.location.href = `/api/shares/${shareId}/files/${fileId}?download=false`;
+    return null;
+  } else if (mimeType.startsWith("video/")) {
+    return (
+      <video
+        width="100%"
+        controls
+        onError={() => {
+          setIsNotSupported(true);
+        }}
+      >
+        <source src={`/api/shares/${shareId}/files/${fileId}?download=false`} />
+      </video>
+    );
+  } else if (mimeType.startsWith("image/")) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        onError={() => {
+          setIsNotSupported(true);
+        }}
+        src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+        alt={`${fileId}_preview`}
+        width="100%"
+      />
+    );
+  } else if (mimeType.startsWith("audio/")) {
+    return (
+      <Center style={{ height: "70vh" }}>
+        <Stack align="center" spacing={10} style={{ width: "100%" }}>
+          <audio
+            controls
+            style={{ width: "100%" }}
+            onError={() => {
+              setIsNotSupported(true);
+            }}
+          >
+            <source
+              src={`/api/shares/${shareId}/files/${fileId}?download=false`}
+            />
+          </audio>
+        </Stack>
+      </Center>
+    );
+  } else {
+    return <UnSupportedFile />;
+  }
+};
+
+export default FilePreview;