Merge pull request #2635 from omnivore-app/feat/web-spring-lightbox

Add a lightbox to the web viewer

packages/web/components/templates/article/Article.tsx

@@ -10,6 +10,11 @@ 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 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'
 
@@ -39,6 +44,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<SlideImage[]>([])
+  const [lightboxIndex, setlightBoxIndex] = useState(0)
+
   useEffect(() => {
     ;(async () => {
       if (!readingProgress) return
@@ -216,6 +225,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 +269,20 @@ export function Article(props: ArticleProps): JSX.Element {
           __html: props.content,
         }}
       />
+      <Lightbox
+        open={lightboxOpen}
+        index={lightboxIndex}
+        close={() => setLightboxOpen(false)}
+        slides={imageSrcs}
+        plugins={[Fullscreen, Download, Zoom]}
+        controller={{ closeOnPullDown: true }}
+        carousel={{
+          finite: true,
+        }}
+        zoom={{
+          maxZoomPixelRatio: 3,
+        }}
+      />
     </>
   )
 }

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",

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"