From 4f0f2100763466ab786131c557bd80ee57383ff5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=A8=E5=AE=AE=E8=93=AE?= <123083837+reyamir@users.noreply.github.com> Date: Fri, 21 Jun 2024 07:51:11 +0700 Subject: [PATCH] Add lazy carousel (#214) * refactor: carousel * feat: improve image carousel --- apps/desktop2/public/404.jpg | Bin 26738 -> 17416 bytes .../src/components/note/preview/images.tsx | 168 +++++++++++++++--- 2 files changed, 141 insertions(+), 27 deletions(-) diff --git a/apps/desktop2/public/404.jpg b/apps/desktop2/public/404.jpg index 7485a5e8bc0eb0f3f21cd685fbf3f0392dfccfdf..c6859af2aa977f4f66e6073be66c628224b32da1 100644 GIT binary patch delta 8266 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 { if (settings.image_resize_service.length) { - const newUrls = urls.map( - (url) => - `${settings.image_resize_service}?url=${url}&ll&af&default=1&n=-1`, - ); + let newUrls: string[]; + + if (urls.length === 1) { + newUrls = urls.map( + (url) => + `${settings.image_resize_service}?url=${url}&ll&af&default=1&n=-1`, + ); + } else { + newUrls = urls.map( + (url) => + `${settings.image_resize_service}?url=${url}&w=480&h=640&ll&af&default=1&n=-1`, + ); + } + return newUrls; } else { return urls; } }, [settings.image_resize_service]); + const scrollPrev = useCallback(() => { + if (emblaApi) emblaApi.scrollPrev(); + }, [emblaApi]); + + const scrollNext = useCallback(() => { + if (emblaApi) emblaApi.scrollNext(); + }, [emblaApi]); + + const updateSlidesInView = useCallback((emblaApi) => { + setSlidesInView((slidesInView) => { + if (slidesInView.length === emblaApi.slideNodes().length) { + emblaApi.off("slidesInView", updateSlidesInView); + } + + const inView = emblaApi + .slidesInView() + .filter((index) => !slidesInView.includes(index)); + + return slidesInView.concat(inView); + }); + }, []); + + useEffect(() => { + if (emblaApi && urls.length > 1) { + updateSlidesInView(emblaApi); + + emblaApi.on("slidesInView", updateSlidesInView); + emblaApi.on("reInit", updateSlidesInView); + } + + return () => { + emblaApi?.off("slidesInView", updateSlidesInView); + emblaApi?.off("reInit", updateSlidesInView); + }; + }, [emblaApi, updateSlidesInView]); + if (urls.length === 1) { return (
@@ -40,26 +96,84 @@ export function Images({ urls }: { urls: string[] }) { } return ( - ( - - {item} open(item)} - onKeyDown={() => open(item)} - onError={({ currentTarget }) => { - currentTarget.onerror = null; - currentTarget.src = "/404.jpg"; - }} - /> - - )} - /> +
+
+
+ {imageUrls.map((url, index) => ( + -1} + /> + ))} +
+
+
+ + +
+
+ ); +} + +function LazyImage({ url, inView }: { url: string; inView: boolean }) { + const [hasLoaded, setHasLoaded] = useState(false); + + const setLoaded = useCallback(() => { + if (inView) setHasLoaded(true); + }, [inView, setHasLoaded]); + + return ( +
+ {!hasLoaded ? ( +
+ +
+ ) : null} + open(url)} + onKeyDown={() => open(url)} + onLoad={setLoaded} + onError={({ currentTarget }) => { + currentTarget.onerror = null; + currentTarget.src = "/404.jpg"; + }} + /> +
); }