implement FullImageViewer

packages/app/src/App.jsx

@@ -56,6 +56,7 @@ import { Toast } from "antd-mobile"
 import { StatusBar, Style } from "@capacitor/status-bar"
 import { App as CapacitorApp } from "@capacitor/app"
 import { Translation } from "react-i18next"
+import { Lightbox } from "react-modal-image"
 
 import { Session, User } from "models"
 import config from "config"
@@ -350,6 +351,20 @@ class App extends React.Component {
 			})
 		},
 		openNavigationMenu: () => window.app.DrawerController.open("navigation", Navigation),
+		openFullImageViewer: (src) => {
+			const win = new DOMWindow({
+				id: "fullImageViewer",
+				className: "fullImageViewer",
+			})
+
+			win.render(<Lightbox
+				small={src}
+				large={src}
+				onClose={() => win.remove()}
+				hideDownload
+				showRotate
+			/>)
+		},
 		goAuth: () => {
 			return window.app.setLocation(config.app.authPath ?? "/auth")
 		},

packages/app/src/components/ImageViewer/index.jsx

@@ -1,54 +1,16 @@
 import React from "react"
-import { Swiper } from "antd-mobile"
 import { LazyLoadImage } from "react-lazy-load-image-component"
-import classnames from "classnames"
 
 import "react-lazy-load-image-component/src/effects/blur.css"
 import "./index.less"
 
-const ImageViewer = (props) => {
+export default (props) => {
-    React.useEffect(() => {
+    return <LazyLoadImage
-        if (!Array.isArray(props.src)) {
+        src={props.src}
-            props.src = [props.src]
+        effect="blur"
-        }
+        wrapperClassName="image-wrapper"
-    }, [])
+        onError={(e) => {
-
+            e.target.src = "/broken-image.svg"
-    const openViewer = () => {
+        }}
-        if (props.extended) {
+    />
-            return false
+}
-        }
-
-        window.app.DrawerController.open("ImageViewer", ImageViewer, {
-            componentProps: {
-                src: props.src,
-                extended: true
-            }
-        })
-    }
-
-    return <div className={classnames("ImageViewer", { ["extended"]: props.extended })}>
-        <Swiper>
-            {props.src.map((image) => {
-                return <Swiper.Item
-                    onClick={() => {
-                        openViewer(image)
-                    }}
-                >
-                    <LazyLoadImage
-                        src={image}
-                        effect="blur"
-                        wrapperClassName="image-wrapper"
-                        onClick={() => {
-                            openViewer()
-                        }}
-                        onError={(e) => {
-                            e.target.src = "/broken-image.svg"
-                        }}
-                    />
-                </Swiper.Item>
-            })}
-        </Swiper>
-    </div>
-}
-
-export default ImageViewer

packages/app/src/components/PostCard/components/attachments/index.jsx

@@ -1,8 +1,9 @@
 import React from "react"
 import { Skeleton } from "antd"
-import loadable from "@loadable/component"
 import { Carousel } from "react-responsive-carousel"
+import { ImageViewer } from "components"
 import Plyr from "plyr-react"
+import ModalImage from "react-modal-image"
 
 import ContentFailed from "../contentFailed"
 
@@ -37,6 +38,15 @@ const Attachment = React.memo((props) => {
     const [mediaType, setMediaType] = React.useState(null)
     const [mimeType, setMimeType] = React.useState(null)
 
+    const onDoubleClickAttachment = (e) => {
+        if (mediaType.split("/")[0] === "image") {
+            e.preventDefault()
+            e.stopPropagation()
+
+            app.openFullImageViewer(url)
+        }
+    }
+
     const getMediaType = async () => {
         let extension = null
 
@@ -68,7 +78,7 @@ const Attachment = React.memo((props) => {
     const renderMedia = () => {
         switch (mediaType.split("/")[0]) {
             case "image": {
-                return <img src={url} />
+                return <ImageViewer src={url} />
             }
             case "video": {
                 return <Plyr
@@ -113,6 +123,7 @@ const Attachment = React.memo((props) => {
             key={props.index}
             id={id}
             className="attachment"
+            onDoubleClick={onDoubleClickAttachment}
         >
             {renderMedia()}
         </div>

packages/app/src/theme/index.less

@@ -296,4 +296,15 @@ html {
 	.postCard {
 		min-width: 30px;
 	}
+}
+
+#fullImageViewer {
+	.__react_modal_image__modal_container {
+		background-color: rgba(0, 0, 0, 0.3) !important;
+		backdrop-filter: blur(10px);
+	}
+
+	.__react_modal_image__header {
+		background-color: transparent !important;
+	}
 }