From 8838ade283d444147ef7143cb4c23581db8f90b1 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 10 Aug 2023 13:56:05 +0800 Subject: [PATCH 1/3] Add a lightbox to the web viewer --- .../components/templates/article/Article.tsx | 37 +++++++++++++++++++ packages/web/package.json | 3 +- yarn.lock | 5 +++ 3 files changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx index 2ad51d320..01faef4cb 100644 --- a/packages/web/components/templates/article/Article.tsx +++ b/packages/web/components/templates/article/Article.tsx @@ -10,6 +10,8 @@ import { import { MutableRefObject, useEffect, useRef, useState } from 'react' import { isDarkTheme } from '../../../lib/themeUpdater' import { ArticleMutations } from '../../../lib/articleActions' +import { Lightbox, SlideImage } from 'yet-another-react-lightbox' +import 'yet-another-react-lightbox/styles.css' import loadjs from 'loadjs' @@ -39,6 +41,10 @@ export function Article(props: ArticleProps): JSX.Element { return Math.floor(Math.max(0, Math.min(100, float))) } + const [lightboxOpen, setLightboxOpen] = useState(false) + const [imageSrcs, setImageSrcs] = useState([]) + const [lightboxIndex, setlightBoxIndex] = useState(0) + useEffect(() => { ;(async () => { if (!readingProgress) return @@ -216,6 +222,31 @@ export function Article(props: ArticleProps): JSX.Element { } } }) + + const allImages = Array.from( + document.querySelectorAll('img[data-omnivore-anchor-idx]') + ) + + const srcs = allImages.map((img) => { + return { + src: img.getAttribute('src') || '', + } + }) + setImageSrcs(srcs) + + allImages.forEach((element, idx) => { + const img = element as HTMLImageElement + img.style.cursor = 'zoom-in' + img.onclick = (event) => { + setlightBoxIndex(idx) + setLightboxOpen(true) + event.preventDefault() + } + console.log('updated image: ', img) + }) + + console.log('set srcs: ', srcs) + console.log('setting srcs: ', srcs) }, [props.content]) return ( @@ -235,6 +266,12 @@ export function Article(props: ArticleProps): JSX.Element { __html: props.content, }} /> + setLightboxOpen(false)} + slides={imageSrcs} + /> ) } diff --git a/packages/web/package.json b/packages/web/package.json index c649b802b..6b840e870 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -68,7 +68,8 @@ "react-topbar-progress-indicator": "^4.1.1", "remark-gfm": "^3.0.1", "swr": "^1.0.1", - "uuid": "^8.3.2" + "uuid": "^8.3.2", + "yet-another-react-lightbox": "^3.12.0" }, "devDependencies": { "@babel/core": "^7.17.5", diff --git a/yarn.lock b/yarn.lock index 3bc86af86..d4f3aeca8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -28756,6 +28756,11 @@ yauzl@^2.10.0: buffer-crc32 "~0.2.3" fd-slicer "~1.1.0" +yet-another-react-lightbox@^3.12.0: + version "3.12.0" + resolved "https://registry.yarnpkg.com/yet-another-react-lightbox/-/yet-another-react-lightbox-3.12.0.tgz#0b23c61724dce80b8696a65b782f5f3f1bd49605" + integrity sha512-Hd3CzPJJFFQ2TMP9QvhkuKouWJ/DIw/mrlPkUa6KiQu4AW+CwtKIiJsxWixNN9uS4sC10G0V1ULyJKpHs4yk8g== + yn@3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50" From bcd5fa9f648f3f512cd843470bc170745525ab26 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 10 Aug 2023 14:36:23 +0800 Subject: [PATCH 2/3] Add plugins to lightbox --- packages/web/components/templates/article/Article.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx index 01faef4cb..88dbc12dd 100644 --- a/packages/web/components/templates/article/Article.tsx +++ b/packages/web/components/templates/article/Article.tsx @@ -12,6 +12,9 @@ import { isDarkTheme } from '../../../lib/themeUpdater' import { ArticleMutations } from '../../../lib/articleActions' import { Lightbox, SlideImage } from 'yet-another-react-lightbox' import 'yet-another-react-lightbox/styles.css' +import Download from 'yet-another-react-lightbox/plugins/download' +import Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen' +import Zoom from 'yet-another-react-lightbox/plugins/zoom' import loadjs from 'loadjs' @@ -271,6 +274,7 @@ export function Article(props: ArticleProps): JSX.Element { index={lightboxIndex} close={() => setLightboxOpen(false)} slides={imageSrcs} + plugins={[Fullscreen, Download, Zoom]} /> ) From 17da8199be4fe8170aea56b2aeb729ebd01c2564 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 10 Aug 2023 14:57:10 +0800 Subject: [PATCH 3/3] Some zoom and carousel settings twaks, enable pulldown dismisal --- packages/web/components/templates/article/Article.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx index 88dbc12dd..f4059ac92 100644 --- a/packages/web/components/templates/article/Article.tsx +++ b/packages/web/components/templates/article/Article.tsx @@ -275,6 +275,13 @@ export function Article(props: ArticleProps): JSX.Element { close={() => setLightboxOpen(false)} slides={imageSrcs} plugins={[Fullscreen, Download, Zoom]} + controller={{ closeOnPullDown: true }} + carousel={{ + finite: true, + }} + zoom={{ + maxZoomPixelRatio: 3, + }} /> )