Merge pull request #1333 from holium/lightbox

#1298 clicking on an image shows it in a lightbox
holium · Apr 6, 2023 · 3d7cd33 · 3d7cd33
2 parents 7d540fe + 4e0fac1
commit 3d7cd33
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 28 deletions.
diff --git a/app/src/renderer/apps/Courier/views/ChatLogList.tsx b/app/src/renderer/apps/Courier/views/ChatLogList.tsx
@@ -8,6 +8,7 @@ import {
 import { displayDate } from 'os/lib/time';
 import { ChatMessage } from '../components/ChatMessage';
 import { ChatMessageType, ChatModelType } from '../models';
+import { Gallery } from 'react-photoswipe-gallery';
 
 type Props = {
   width: number;
@@ -91,15 +92,17 @@ export const ChatLogList = ({
   };
 
   return (
-    <WindowedList
-      innerRef={listRef}
-      data={messages}
-      followOutput="auto"
-      width={width + scrollbarWidth}
-      height={height}
-      style={{ marginRight: -scrollbarWidth }}
-      initialTopMostItemIndex={messages.length - 1}
-      itemContent={renderChatRow}
-    />
+    <Gallery>
+      <WindowedList
+        innerRef={listRef}
+        data={messages}
+        followOutput="auto"
+        width={width + scrollbarWidth}
+        height={height}
+        style={{ marginRight: -scrollbarWidth }}
+        initialTopMostItemIndex={messages.length - 1}
+        itemContent={renderChatRow}
+      />
+    </Gallery>
   );
 };
diff --git a/lib/design-system/package.json b/lib/design-system/package.json
@@ -17,7 +17,9 @@
     "dom-helpers": "^5.2.1",
     "emoji-picker-react": "^4.4.7",
     "framer-motion": "^7.6.7",
+    "photoswipe": "^5.3.7",
     "react-lifecycles-compat": "^3.0.4",
+    "react-photoswipe-gallery": "^2.2.7",
     "react-player": "^2.11.0",
     "react-spotify-embed": "^1.0.4",
     "react-twitter-embed": "^4.0.4",

diff --git a/lib/design-system/src/blocks/ImageBlock/ImageBlock.tsx b/lib/design-system/src/blocks/ImageBlock/ImageBlock.tsx
@@ -2,6 +2,8 @@ import { useMemo, useState } from 'react';
 import { Flex, Text } from '../../general';
 import { BlockProps, Block } from '../Block/Block';
 import { FragmentImage } from '../Bubble/fragment-lib';
+import 'photoswipe/dist/photoswipe.css';
+import { Item } from 'react-photoswipe-gallery';
 
 type ImageBlockProps = {
   showLoader?: boolean;
@@ -23,6 +25,8 @@ export const ImageBlock = (props: ImageBlockProps) => {
     ...rest
   } = props;
   const [isLoaded, setIsLoaded] = useState(false);
+  const [naturalWidth, setNaturalWidth] = useState(320);
+  const [naturalHeight, setNaturalHeight] = useState(427);
   const parsedHeight = useMemo(
     () =>
       (height
@@ -45,24 +49,39 @@ export const ImageBlock = (props: ImageBlockProps) => {
 
   return (
     <Block variant={variant} width={width} {...rest}>
-      <FragmentImage
-        id={rest.id}
-        loading="eager"
-        {...(showLoader && { isSkeleton: !isLoaded })}
-        src={image}
-        height={parsedHeight}
-        width={parsedWidth}
-        draggable={false}
-        onLoad={() => {
-          if (showLoader) {
-            onImageLoaded && onImageLoaded();
-            setIsLoaded(true);
-          }
-        }}
-        onError={() => {
-          // setIsError(true);
-        }}
-      />
+      <Item
+        original={image}
+        thumbnail={image}
+        width={naturalWidth}
+        height={naturalHeight}
+      >
+        {({ ref, open }) => (
+          <FragmentImage
+            id={rest.id}
+            ref={ref as React.MutableRefObject<HTMLImageElement>}
+            loading="eager"
+            {...(showLoader && { isSkeleton: !isLoaded })}
+            src={image}
+            height={parsedHeight}
+            width={parsedWidth}
+            draggable={false}
+            onLoad={() => {
+              if (showLoader) {
+                onImageLoaded && onImageLoaded();
+                setIsLoaded(true);
+              }
+              const curr = ref && (ref.current as HTMLImageElement);
+              if (curr && curr.naturalWidth) setNaturalWidth(curr.naturalWidth);
+              if (curr && curr.naturalHeight)
+                setNaturalHeight(curr.naturalHeight);
+            }}
+            onClick={open}
+            onError={() => {
+              // setIsError(true);
+            }}
+          />
+        )}
+      </Item>
       {by && (
         <Flex className="block-footer">
           <Flex></Flex>

diff --git a/lib/design-system/src/os/TrayApp/TrayApp.tsx b/lib/design-system/src/os/TrayApp/TrayApp.tsx
@@ -63,6 +63,11 @@ export const TrayApp = ({
         if (`${id}-app` === event.target.id) {
           return;
         }
+        // If the lightbox node contains the click event target, don't close
+        const lightboxNode = document.getElementsByClassName('pswp')[0];
+        if (lightboxNode && lightboxNode.contains(event.target)) {
+          return;
+        }
         // If the app node does not contain the click event target, close it.
         const appNode = document.getElementById(`${id}-app`);
         if (appNode && !appNode.contains(event.target)) {

diff --git a/yarn.lock b/yarn.lock
@@ -13697,6 +13697,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+photoswipe@^5.3.7:
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.3.7.tgz#c67df67aaddb5705bcf8ff265bd2086f57805756"
+  integrity sha512-zsyLsTTLFrj0XR1m4/hO7qNooboFKUrDy+Zt5i2d6qjFPAtBjzaj/Xtydso4uxzcXpcqbTmyxDibb3BcSISseg==
+
 picocolors@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
@@ -14628,6 +14633,11 @@ react-merge-refs@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
   integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
 
+react-photoswipe-gallery@^2.2.7:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/react-photoswipe-gallery/-/react-photoswipe-gallery-2.2.7.tgz#27fd45e84a3b7f15846761830c600b2c719053e3"
+  integrity sha512-AEYNoL4/IIRosIUonn4haaFQNn1ui4vdVgAY9LHd/imVamNCkqUcyWeT6317UILp/yJI2gohsd3lWmcJEbjCag==
+
 react-player@^2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.11.0.tgz#9afc75314eb915238e8d6615b2891fbe7170aeaa"