From acacea2e7532712de80a3f3d9982a9f15185b8de Mon Sep 17 00:00:00 2001 From: Tenari Date: Wed, 5 Apr 2023 13:28:11 -0500 Subject: [PATCH 1/2] #1298 clicking on an image shows it in a lightbox --- lib/design-system/package.json | 2 + .../src/blocks/ImageBlock/ImageBlock.tsx | 55 +++++++++----- .../src/general/WindowedList/WindowedList.tsx | 73 ++++++++++--------- lib/design-system/src/os/TrayApp/TrayApp.tsx | 5 ++ yarn.lock | 10 +++ 5 files changed, 92 insertions(+), 53 deletions(-) diff --git a/lib/design-system/package.json b/lib/design-system/package.json index d17aad83b4..07546a1b9c 100644 --- 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 index 5ea5f2252a..522f1acfca 100644 --- 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 ( - { - if (showLoader) { - onImageLoaded && onImageLoaded(); - setIsLoaded(true); - } - }} - onError={() => { - // setIsError(true); - }} - /> + + {({ ref, open }) => ( + } + 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); + }} + /> + )} + {by && ( diff --git a/lib/design-system/src/general/WindowedList/WindowedList.tsx b/lib/design-system/src/general/WindowedList/WindowedList.tsx index 5284c1dce7..69f327ada1 100644 --- a/lib/design-system/src/general/WindowedList/WindowedList.tsx +++ b/lib/design-system/src/general/WindowedList/WindowedList.tsx @@ -5,6 +5,7 @@ import { CellMeasurer } from './source/CellMeasurer/CellMeasurer'; import { CellMeasurerCache } from './source/CellMeasurer/CellMeasurerCache'; import { Scroll } from './source/List/types'; import { StyledList } from './WindowedList.styles'; +import { Gallery } from 'react-photoswipe-gallery'; type WindowedListProps = { data: T[]; @@ -64,41 +65,43 @@ export const WindowedList = ({ return ( - - {({ width: maybeAutoWidth, height: maybeAutoHeight }) => ( - ( - - {({ measure, registerChild }) => ( -
- {rowRenderer(data[index], index, measure, data)} -
- )} - - )} - onScroll={onScroll} - hideScrollbar={hideScrollbar} - startAtBottom={startAtBottom} - scrollToIndex={startAtBottom ? data.length - 1 : 0} - scrollToAlignment={startAtBottom ? 'end' : 'auto'} - /> - )} - + + + {({ width: maybeAutoWidth, height: maybeAutoHeight }) => ( + ( + + {({ measure, registerChild }) => ( +
+ {rowRenderer(data[index], index, measure, data)} +
+ )} + + )} + onScroll={onScroll} + hideScrollbar={hideScrollbar} + startAtBottom={startAtBottom} + scrollToIndex={startAtBottom ? data.length - 1 : 0} + scrollToAlignment={startAtBottom ? 'end' : 'auto'} + /> + )} + + ); }; diff --git a/lib/design-system/src/os/TrayApp/TrayApp.tsx b/lib/design-system/src/os/TrayApp/TrayApp.tsx index 0e18ab9ff6..d6dc5f7391 100644 --- 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 index be4faf7e84..c1fb543f98 100644 --- 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" From 4e0fac1ba1395ab805e66baf9d7b3a11a6afcd02 Mon Sep 17 00:00:00 2001 From: Tenari Date: Thu, 6 Apr 2023 11:31:54 -0500 Subject: [PATCH 2/2] #1298 move lightbox to where it belongs --- .../apps/Courier/views/ChatLogList.tsx | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/app/src/renderer/apps/Courier/views/ChatLogList.tsx b/app/src/renderer/apps/Courier/views/ChatLogList.tsx index 124c9dba11..5b5dddb972 100644 --- 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 ( - + + + ); };