fix video

fullstacksjs · Feb 9, 2024 · 605b9fe · 605b9fe
1 parent d6babb4
commit 605b9fe
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 97 deletions.
diff --git a/app/Dashboard/Households/HouseholdDetail/_components/HouseholderVisits/HouseholderVisits.tsx b/app/Dashboard/Households/HouseholdDetail/_components/HouseholderVisits/HouseholderVisits.tsx
@@ -31,7 +31,7 @@ interface Props {
 const columns = [
   visitColumnHelper.accessor('documents', {
     header: t.table.columns.documents,
-    cell: doc => <ImagePreview size={80} src={doc.getValue()[0]!.url} />,
+    cell: doc => <ImagePreview size={80} src={doc.getValue()[0]?.url} />,
   }),
   visitColumnHelper.accessor('date', {
     id: 'date',

diff --git a/...oard/Households/HouseholdDetail/_components/HouseholderVisits/VisitDetail/VisitDetail.tsx b/...oard/Households/HouseholdDetail/_components/HouseholderVisits/VisitDetail/VisitDetail.tsx
@@ -5,17 +5,17 @@ import {
 import { FullPageLoader, showNotification } from '@camp/design';
 import type { Document } from '@camp/domain';
 import { fileStorageClient } from '@camp/file-storage-client';
-import { DownloadIcon, PdfFileIcon, TrashIcon } from '@camp/icons';
+import { DownloadIcon, PdfFileIcon, TrashIcon, VideoIcon } from '@camp/icons';
 import { errorMessages, messages } from '@camp/messages';
 import { getFileName, getFileType } from '@camp/router';
+import { isEmpty } from '@fullstacksjs/toolbox';
 import {
   Box,
   Button,
   Center,
   Group,
   Image,
   SimpleGrid,
-  Skeleton,
   Stack,
 } from '@mantine/core';
 import download from 'downloadjs';
@@ -59,17 +59,8 @@ export const VisitDetail = ({ id }: VisitDetailProps) => {
       </Box>
     );
   const visit = data!.visit;
-  // const fileType = getFileType(selectedDocument!.url);
 
   const deleteDocument = async (d: Document): Promise<void> => {
-    if (visit?.documents.length === 1) {
-      return showNotification({
-        type: 'failure',
-        title: t.title,
-        message: messages.notification.visits.delete.cantDeleteLst,
-      });
-    }
-
     const deleted = await deleteOneDocument({
       variables: { id: d.id },
     });
@@ -87,82 +78,92 @@ export const VisitDetail = ({ id }: VisitDetailProps) => {
     download(file, getFileName(url));
   };
 
-  const fileType = getFileType(selectedDocument!.url);
+  const fileType = selectedDocument?.url
+    ? getFileType(selectedDocument.url)
+    : null;
 
   return (
     <Group w="100%" noWrap sx={{ alignItems: 'flex-start', gap: 0 }}>
-      <SimpleGrid sx={{ padding: '40px', flexShrink: 0 }} cols={2}>
-        {visit?.documents.map(doc => {
-          const isSelected = selectedDocument?.url === doc.url;
+      {isEmpty(visit?.documents ?? []) ? null : (
+        <>
+          <SimpleGrid sx={{ padding: '40px', flexShrink: 0 }} cols={2}>
+            {visit?.documents.map(doc => {
+              const isSelected = selectedDocument?.url === doc.url;
 
-          return (
-            <VisitDetailDocumentItem
-              key={doc.id}
-              document={doc}
-              isSelected={isSelected}
-              onSelect={d => setSelectedDocument(d)}
-              onDelete={deleteDocument}
-            />
-          );
-        })}
-      </SimpleGrid>
-      <Stack
-        spacing="30px"
-        align="center"
-        h="100%"
-        p="40px"
-        bg="bg"
-        sx={theme => ({
-          flexGrow: 1,
-          borderLeft: `1px solid ${theme.colors.bg[5]}`,
-        })}
-      >
-        {fileType === 'pdf' ? (
-          <Center w="100%" h="100%" bg="fg.2" sx={{ borderRadius: '10px' }}>
-            <PdfFileIcon size={100} />
-          </Center>
-        ) : (
-          <Image
-            radius="10px"
-            styles={{
-              figure: { height: '100%' },
-              imageWrapper: {
-                height: '100%',
-                display: 'flex',
-                justifyContent: 'center',
-              },
-              image: {
-                objectFit: 'contain',
-                height: 'calc(100vh - 400px) !important',
-                width: 'auto !important',
-              },
-            }}
-            src={selectedDocument?.url}
-          />
-        )}
-        <Group>
-          <Button
-            loading={isDeleting}
-            disabled={isDeleting}
-            onClick={downloadSelectedFile}
-            color="fg.5"
-            variant="subtle"
-            leftIcon={<DownloadIcon />}
-          >
-            {messages.actions.download}
-          </Button>
-          <Button
-            loading={isDeleting}
-            disabled={isDeleting}
-            color="error"
-            variant="subtle"
-            leftIcon={<TrashIcon />}
-            onClick={() => deleteDocument(selectedDocument!)}
+              return (
+                <VisitDetailDocumentItem
+                  key={doc.id}
+                  document={doc}
+                  isSelected={isSelected}
+                  onSelect={d => setSelectedDocument(d)}
+                  onDelete={deleteDocument}
+                />
+              );
+            })}
+          </SimpleGrid>
+          <Stack
+            spacing="30px"
+            align="center"
+            h="100%"
+            p="40px"
+            bg="bg"
+            sx={theme => ({
+              flexGrow: 1,
+              borderLeft: `1px solid ${theme.colors.bg[5]}`,
+            })}
           >
-            {messages.actions.delete}
-          </Button>
-        </Group>
-      </Stack>
+            {fileType === 'pdf' ? (
+              <Center w="100%" h="100%" bg="fg.2" sx={{ borderRadius: '10px' }}>
+                <PdfFileIcon size={100} />
+              </Center>
+            ) : fileType === 'video' ? (
+              <Center h="100%">
+                <VideoIcon size={100} />
+              </Center>
+            ) : selectedDocument != null ? (
+              <Image
+                radius="10px"
+                styles={{
+                  figure: { height: '100%' },
+                  imageWrapper: {
+                    height: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                  },
+                  image: {
+                    objectFit: 'contain',
+                    height: 'calc(100vh - 400px) !important',
+                    width: 'auto !important',
+                  },
+                }}
+                src={selectedDocument.url}
+              />
+            ) : null}
+            <Group>
+              <Button
+                loading={isDeleting}
+                disabled={isDeleting}
+                onClick={downloadSelectedFile}
+                color="fg.5"
+                variant="subtle"
+                leftIcon={<DownloadIcon />}
+              >
+                {messages.actions.download}
+              </Button>
+              <Button
+                loading={isDeleting}
+                disabled={isDeleting}
+                color="error"
+                variant="subtle"
+                leftIcon={<TrashIcon />}
+                onClick={() => deleteDocument(selectedDocument!)}
+              >
+                {messages.actions.delete}
+              </Button>
+            </Group>
+          </Stack>
+        </>
+      )}
     </Group>
   );
 };
diff --git a/...lds/HouseholdDetail/_components/HouseholderVisits/VisitDetail/VisitDetailDocumentItem.tsx b/...lds/HouseholdDetail/_components/HouseholderVisits/VisitDetail/VisitDetailDocumentItem.tsx
@@ -1,8 +1,7 @@
 import { debug, DebugScopes } from '@camp/debug';
 import type { Document } from '@camp/domain';
-import { PdfFileIcon, VerticalMenuIcon } from '@camp/icons';
+import { PdfFileIcon, VerticalMenuIcon, VideoIcon } from '@camp/icons';
 import { messages } from '@camp/messages';
-import type { FileType } from '@camp/router';
 import { getFileName, getFileType } from '@camp/router';
 import {
   ActionIcon,
@@ -124,10 +123,14 @@ export const VisitDetailDocumentItem = ({
             sx={{ objectPosition: 'top' }}
             alt={document.id}
           />
-        ) : (
+        ) : fileType === 'pdf' ? (
           <Center h={108}>
             <PdfFileIcon width={30} height={33} />
           </Center>
+        ) : (
+          <Center h={108}>
+            <VideoIcon width={30} height={33} />
+          </Center>
         )}
       </Card.Section>
     </Card>

diff --git a/configs/cspell/charity.en.txt b/configs/cspell/charity.en.txt
@@ -53,4 +53,5 @@ pkey
 alian
 Prray
 clsx
-downloadjs
+downloadjs
+matroska
diff --git a/libs/design/ImagePreview/ImagePreview.tsx b/libs/design/ImagePreview/ImagePreview.tsx
@@ -1,12 +1,14 @@
 import type { ImageProps } from '@mantine/core';
-import { Box, Image } from '@mantine/core';
+import { Box, Center, Image } from '@mantine/core';
+
+import { CameraOffIcon } from '../../icons';
 
 interface Props extends ImageProps {
   size: number;
   pad?: number;
 }
 
-export const ImagePreview = ({ size, pad = 10, ...rest }: Props) => {
+export const ImagePreview = ({ size, pad = 10, src, ...rest }: Props) => {
   return (
     <Box
       sx={theme => ({
@@ -16,7 +18,13 @@ export const ImagePreview = ({ size, pad = 10, ...rest }: Props) => {
         padding: pad,
       })}
     >
-      <Image width={size} radius={5} height={size} {...rest} />
+      <Center sx={{ height: size }}>
+        {src == null ? (
+          <CameraOffIcon />
+        ) : (
+          <Image radius={5} height={size} src={src} {...rest} />
+        )}
+      </Center>
     </Box>
   );
 };
diff --git a/libs/domain/Document.ts b/libs/domain/Document.ts
@@ -13,11 +13,21 @@ export const documentSchema = {
 export const documentFileValidator = z
   .object({
     name: z.string(),
-    type: z.enum(['image/png', 'application/pdf', 'image/jpg', 'image/jpeg'], {
-      errorMap: () => ({
-        message: messages.notification.addDocument.unsupportedType,
-      }),
-    }),
+    type: z.enum(
+      [
+        'image/png',
+        'application/pdf',
+        'image/jpg',
+        'image/jpeg',
+        'video/mp4',
+        'video/x-matroska',
+      ],
+      {
+        errorMap: () => ({
+          message: messages.notification.addDocument.unsupportedType,
+        }),
+      },
+    ),
     size: z
       .number()
       .lt(20000000, messages.notification.addDocument.maxSizeExceeded),

diff --git a/libs/icons/index.ts b/libs/icons/index.ts
@@ -4,6 +4,7 @@ export {
   ArrowDown as ArrowDownIcon,
   ArrowUp as ArrowUpIcon,
   Calendar as CalendarIcon,
+  CameraOff as CameraOffIcon,
   Check as CheckIcon,
   ChevronDown as ChevronDownIcon,
   ChevronLeft as ChevronLeftIcon,
@@ -23,4 +24,5 @@ export {
   Upload as UploadIcon,
   User as UserIcon,
   MoreVertical as VerticalMenuIcon,
+  Video as VideoIcon,
 } from 'react-feather';
diff --git a/libs/router/getFileType.ts b/libs/router/getFileType.ts
@@ -1,8 +1,9 @@
 import { getFileName } from './getFileName';
 
-export type FileType = 'image' | 'pdf';
+export type FileType = 'image' | 'pdf' | 'video';
 
 export const getFileType = (url: string): FileType => {
   const type = getFileName(url).replace(/.+\./g, '');
-  return type === 'pdf' ? 'pdf' : 'image';
+
+  return type === 'pdf' ? 'pdf' : /mp4|mkv/.exec(type) ? 'video' : 'image';
 };