Add full screen post image

dappforce · Aug 8, 2024 · 51c10ad · 51c10ad
1 parent 03cb7bf
commit 51c10ad
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 30 deletions.
diff --git a/src/components/ClickableMedia.tsx b/src/components/ClickableMedia.tsx
@@ -6,6 +6,8 @@ import Modal from './modals/Modal'
 
 export type ClickableMediaProps = Omit<ImageProps, 'onClick'> & {
   trigger?: (onClick: () => void) => JSX.Element
+  enableMaxHeight?: boolean
+  withBluredImage?: boolean
 }
 
 export default function ClickableMedia({
@@ -29,8 +31,9 @@ export default function ClickableMedia({
       <Modal
         isOpen={isOpenModal}
         closeModal={() => setIsOpenModal(false)}
-        panelClassName='bg-transparent shadow-none'
-        contentClassName='!p-0'
+        panelClassName='bg-transparent shadow-none h-full w-fit'
+        contentClassName='!p-0 h-full'
+        containerClassName='h-full'
         size='screen-md'
       >
         <MediaLoader
@@ -39,10 +42,9 @@ export default function ClickableMedia({
           onClick={(e) => e.stopPropagation()}
           onContextMenu={(e) => e.stopPropagation()}
           src={props.src ?? ''}
-          className='w-full max-w-screen-md'
+          containerClassName='h-full'
+          className='h-full w-full max-w-screen-md'
           alt={props.alt ?? ''}
-          width={1024}
-          height={1024}
         />
       </Modal>
     </>

diff --git a/src/components/MediaLoader.tsx b/src/components/MediaLoader.tsx
@@ -12,6 +12,8 @@ export type MediaLoaderProps = Omit<ImageProps, 'src' | 'alt'> & {
   loadingClassName?: string
   placeholderClassName?: string
   withSpinner?: boolean
+  enableMaxHeight?: boolean
+  withBluredImage?: boolean
 }
 
 export default function MediaLoader({
@@ -21,6 +23,8 @@ export default function MediaLoader({
   loadingClassName,
   placeholderClassName,
   withSpinner,
+  enableMaxHeight = true,
+  withBluredImage = true,
   ...props
 }: MediaLoaderProps) {
   const [isLoaded, setIsLoaded] = useState(false)
@@ -86,25 +90,29 @@ export default function MediaLoader({
               isLoaded && 'hidden'
             )}
           />
-          <Image
-            {...commonProps}
-            style={{ backfaceVisibility: 'hidden', ...commonProps.style }}
-            loading='eager'
-            onError={undefined}
-            onLoad={undefined}
-            width={10}
-            height={10}
-            alt={props.alt || ''}
-            className={cx(
-              commonProps.className,
-              'absolute inset-0 m-0 h-full max-h-96 w-full scale-110 object-cover p-0 blur-lg'
-            )}
-          />
+          {withBluredImage && (
+            <Image
+              {...commonProps}
+              style={{ backfaceVisibility: 'hidden', ...commonProps.style }}
+              loading='eager'
+              onError={undefined}
+              onLoad={undefined}
+              width={10}
+              height={10}
+              alt={props.alt || ''}
+              className={cx(
+                commonProps.className,
+                'absolute inset-0 m-0 h-full w-full scale-110 object-cover p-0 blur-lg',
+                { ['max-h-96']: enableMaxHeight }
+              )}
+            />
+          )}
           <Image
             {...commonProps}
             loading='eager'
             className={cx(
-              'mx-auto max-h-96 object-contain',
+              'mx-auto object-contain',
+              { ['max-h-96']: enableMaxHeight },
               commonProps.className
             )}
             style={{ backfaceVisibility: 'hidden', ...commonProps.style }}
@@ -126,7 +134,8 @@ export default function MediaLoader({
       ) : (
         <div
           className={cx(
-            'aspect-square max-h-96 w-full animate-pulse bg-background-lighter',
+            'aspect-square w-full animate-pulse bg-background-lighter',
+            { ['max-h-96']: enableMaxHeight },
             placeholderClassName
           )}
         />

diff --git a/src/components/modals/Modal.tsx b/src/components/modals/Modal.tsx
@@ -92,7 +92,10 @@ export default function Modal({
         id={id}
         initialFocus={initialFocus}
         className={cx('relative z-40 text-text', className)}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation()
+          e.preventDefault()
+        }}
         onClose={closeModal}
       >
         {!withoutOverlay && (

diff --git a/src/modules/moderator/BlockAndApproveButtons.tsx b/src/modules/moderator/BlockAndApproveButtons.tsx
@@ -2,6 +2,7 @@ import Button from '@/components/Button'
 import { useModerationActions } from '@/services/datahub/moderation/mutation'
 import { getModerationReasonsQuery } from '@/services/datahub/moderation/query'
 import { useApproveMessage } from '@/services/datahub/posts/mutation'
+import { useMyMainAddress } from '@/stores/my-account'
 
 type BlockAndApproveButtonsProps = {
   chatId: string
@@ -35,6 +36,7 @@ const BlockMessageButton = ({
   onSuccess,
 }: BlockAndApproveButtonsProps) => {
   const { mutateAsync: moderateMessage, isLoading } = useModerationActions()
+  const myAddress = useMyMainAddress()
   const { data: reasons } = getModerationReasonsQuery.useQuery(null)
   const firstReasonId = reasons?.[0].id
 
@@ -57,7 +59,12 @@ const BlockMessageButton = ({
     setTimeout(() => onSuccess(), 1000)
   }
   return (
-    <Button variant='redOutline' onClick={blockMessage} isLoading={isLoading}>
+    <Button
+      variant='redOutline'
+      disabled={!myAddress}
+      onClick={blockMessage}
+      isLoading={isLoading}
+    >
       Block
     </Button>
   )
@@ -68,6 +75,7 @@ const ApproveMessagesButton = ({
   onSuccess,
 }: Omit<BlockAndApproveButtonsProps, 'chatId'>) => {
   const { mutateAsync, isLoading, isSuccess } = useApproveMessage()
+  const myAddress = useMyMainAddress()
 
   const approveMessages = async () => {
     const approvePromise = selectedMessageIds.map(async (messageId) => {
@@ -85,6 +93,7 @@ const ApproveMessagesButton = ({
     <Button
       variant='greenOutline'
       onClick={approveMessages}
+      disabled={!myAddress}
       isLoading={isLoading}
     >
       Approve

diff --git a/src/modules/moderator/ModerationMemeItem.tsx b/src/modules/moderator/ModerationMemeItem.tsx
@@ -1,4 +1,6 @@
 import AddressAvatar from '@/components/AddressAvatar'
+import Button from '@/components/Button'
+import ClickableMedia from '@/components/ClickableMedia'
 import MediaLoader from '@/components/MediaLoader'
 import { ProfilePreviewModalName } from '@/components/ProfilePreviewModalWrapper'
 import ChatRelativeTime from '@/components/chats/ChatItem/ChatRelativeTime'
@@ -7,6 +9,7 @@ import { getPostExtensionProperties } from '@/components/extensions/utils'
 import { cx } from '@/utils/class-names'
 import { PostData } from '@subsocial/api/types'
 import { ComponentProps } from 'react'
+import { FaSearchPlus } from 'react-icons/fa'
 import ModerationCheckbox from './Checkbox'
 import { useModerationContext } from './ModerationContext'
 
@@ -45,7 +48,7 @@ export default function ModerationMemeItem({
       {...props}
       className={cx(
         'relative flex h-full w-full flex-col gap-2',
-        'overflow-hidden rounded-2xl bg-slate-800 pt-2',
+        'max-h-[350px] overflow-hidden rounded-2xl bg-slate-800 pt-2',
         { ['ring-4 ring-text-primary']: isSelected },
         props.className
       )}
@@ -77,6 +80,26 @@ export default function ModerationMemeItem({
           </div>
         </div>
         <div className='flex min-w-fit items-center gap-2'>
+          <ClickableMedia
+            enableMaxHeight={false}
+            withBluredImage={false}
+            src={imageExt?.image || ''}
+            alt=''
+            trigger={(onClick) => (
+              <Button
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+
+                  onClick()
+                }}
+                size={'circle'}
+                variant={'transparent'}
+              >
+                <FaSearchPlus />
+              </Button>
+            )}
+          />
           <ModerationCheckbox
             checked={selectedPostIds.includes(message.struct.id)}
             onChange={() => {
@@ -89,10 +112,11 @@ export default function ModerationMemeItem({
           />
         </div>
       </div>
+
       <MediaLoader
         containerClassName='overflow-hidden w-full h-full justify-center flex items-center cursor-pointer'
         placeholderClassName={cx('w-full aspect-square')}
-        className='w-full object-contain'
+        className='h-full w-full object-contain'
         src={imageExt?.image}
       />
       {body && (

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -48,11 +48,11 @@ export type AppCommonProps = {
 }
 
 export default function App(props: AppProps<AppCommonProps>) {
-  useEffect(() => {
-    import('eruda').then(({ default: eruda }) => {
-      eruda.init()
-    })
-  }, [])
+  // useEffect(() => {
+  //   import('eruda').then(({ default: eruda }) => {
+  //     eruda.init()
+  //   })
+  // }, [])
 
   return (
     <SessionProvider