refactoring photogallerymodal to look more like recentmediacard

OpenBeta · Nov 20, 2023 · dea4173 · dea4173
1 parent da18a37
commit dea4173
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 33 deletions.
diff --git a/src/components/media/GalleryImageCard.tsx b/src/components/media/GalleryImageCard.tsx
@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import Image from 'next/image'
+import clx from 'classnames'
+import Card from '../ui/Card/Card'
+import TagList from '../media/TagList'
+import { MobileLoader } from '../../js/sirv/util'
+import { MediaWithTags } from '../../js/types'
+import { getUploadDateSummary } from '../../js/utils'
+import { PostHeader } from '../home/Post'
+
+const MOBILE_IMAGE_MAX_WIDITH = 600
+
+interface GalleryImageCardProps {
+  header?: JSX.Element
+  mediaWithTags: MediaWithTags
+  onImageClick?: (event: React.MouseEvent<HTMLImageElement>, mediaWithTags: MediaWithTags) => void
+}
+
+/**
+ * Image card for the gallery page
+ */
+export const GalleryImageCard = ({
+  mediaWithTags,
+  onImageClick
+}: GalleryImageCardProps): JSX.Element => {
+  const [loaded, setLoaded] = useState(false)
+  const { mediaUrl, width, height, username } = mediaWithTags
+  const imageRatio = width / height
+  return (
+    <Card
+      header={<PostHeader username={username} />}
+      image={
+        <div className='relative block w-full h-full'>
+          <Image
+            src={MobileLoader({
+              src: mediaUrl,
+              width: MOBILE_IMAGE_MAX_WIDITH
+            })}
+            width={MOBILE_IMAGE_MAX_WIDITH}
+            height={MOBILE_IMAGE_MAX_WIDITH / imageRatio}
+            sizes='100vw'
+            objectFit='cover'
+            onLoad={() => setLoaded(true)}
+            className='rounded-md'
+            onClick={(event) => {
+              if (onImageClick != null) {
+                console.log('onImageClick')
+                event.stopPropagation()
+                event.preventDefault()
+                onImageClick(event, mediaWithTags)
+              }
+            }}
+          />
+          <div
+            className={clx(
+              'absolute top-0 left-0 w-full h-full',
+              loaded
+                ? 'bg-transparent'
+                : 'bg-gray-50 bg-opacity-60 border animate-pulse'
+            )}
+          >
+            {loaded}
+          </div>
+        </div>
+      }
+      body={
+        <>
+          <section className='flex flex-col gap-y-4 justify-between px-2'>
+            <TagList
+              mediaWithTags={mediaWithTags}
+              showActions={false}
+              isAuthorized={false}
+              isAuthenticated={false}
+            />
+            <span className='uppercase text-xs text-base-200'>
+              {getUploadDateSummary(mediaWithTags.uploadTime)}
+            </span>
+          </section>
+        </>
+      }
+    />
+  )
+}
diff --git a/src/components/media/PhotoGalleryModal.tsx b/src/components/media/PhotoGalleryModal.tsx
@@ -1,11 +1,10 @@
 import React, { Dispatch, SetStateAction, useState } from 'react'
 import { userMediaStore } from '../../js/stores/media'
-import ResponsiveImage, { ResponsiveImage2 } from './slideshow/ResponsiveImage'
+import ResponsiveImage from './slideshow/ResponsiveImage'
 import { MobileDialog, DialogContent } from '../ui/MobileDialog'
 import { XMarkIcon } from '@heroicons/react/24/outline'
-import TagList from './TagList'
-import clx from 'classnames'
 import { MediaWithTags } from '../../js/types'
+import { GalleryImageCard } from './GalleryImageCard'
 
 export interface PhotoGalleryModalProps {
   setShowPhotoGalleryModal: Dispatch<SetStateAction<boolean>>
@@ -23,7 +22,6 @@ const PhotoGalleryModal = ({
 
   // Fetch the list of photos.
   const photoList = userMediaStore.use.photoList()
-  console.log('photoList', photoList)
 
   return (
     <MobileDialog
@@ -34,38 +32,14 @@ const PhotoGalleryModal = ({
       <DialogContent fullScreen title='Gallery'>
         <div className='px-0 lg:px-4 mt-20 relative columns-2 md:columns-3 lg:columns-4 xl:columns-5 gap-2 lg:gap-4'>
           {photoList.map((mediaWithTags) => {
-            const { mediaUrl, width, height, entityTags } = mediaWithTags
-
             return (
               <div
                 data-testid='thumbnail'
                 onClick={() => setImageProperties(mediaWithTags)}
-                key={mediaUrl}
-                className='overflow-hidden mt-0 mb-2 lg:mb-4 hover:brightness-75 break-inside-avoid-column cursor-pointer break-inside-avoid relative block rounded-md'
+                key={mediaWithTags.mediaUrl}
+                className='overflow-hidden hover:brightness-75 break-inside-avoid-column cursor-pointer relative block rounded-md mb-4'
               >
-                <ResponsiveImage2
-                  naturalWidth={width}
-                  naturalHeight={height}
-                  mediaUrl={mediaUrl}
-                  isHero={false}
-                />
-                <div
-                  className={
-                      clx(
-                        entityTags.length === 0
-                          ? 'hidden'
-                          : 'absolute inset-x-0 bottom-0 p-2 flex items-center bg-base-100 bg-opacity-60'
-                      )
-                      }
-                >
-                  <TagList
-                    key={mediaUrl}
-                    mediaWithTags={mediaWithTags}
-                    showDelete
-                    showActions={false}
-                    showUsernameTag
-                  />
-                </div>
+                <GalleryImageCard key={mediaWithTags.mediaUrl} mediaWithTags={mediaWithTags} onImageClick={() => setImageProperties(mediaWithTags)} />
               </div>
             )
           })}

diff --git a/src/components/media/__tests__/PhotoGalleryModal.tsx b/src/components/media/__tests__/PhotoGalleryModal.tsx
@@ -12,7 +12,8 @@ describe('<PhotoGalleryModal />', () => {
             mediaUrl: 'test.jpg',
             width: 200,
             height: 200,
-            entityTags: []
+            entityTags: [],
+            uploadTime: 1667766325921
           }
         ])
       }

diff --git a/src/components/ui/MobileDialog.tsx b/src/components/ui/MobileDialog.tsx
@@ -28,7 +28,7 @@ export const DialogContent = React.forwardRef<any, Props>(
           {children}
           {/* Use absolute positioning to place the close button on the upper left corner */}
           <DialogPrimitive.Close aria-label='Close' asChild className='dialog-close-button'>
-            <button className='btn btn-circle btn-ghost'>
+            <button className='btn btn-circle btn-ghost m-2'>
               <XMarkIcon className='w-8 h-8' />
             </button>
           </DialogPrimitive.Close>