From fab698d676d43a46b0fd5df592915ca12111dbcb Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Fri, 1 Nov 2024 14:10:11 -0700 Subject: Blurry load --- client/public/EngagmentSession_06.23.2024-131.jpg | Bin 2188838 -> 0 bytes client/public/EngagmentSession_06.23.2024-161.jpg | Bin 3150499 -> 0 bytes client/public/EngagmentSession_06.23.2024-164.jpg | Bin 3437736 -> 0 bytes client/public/EngagmentSession_06.23.2024-259.jpg | Bin 1643595 -> 0 bytes client/public/EngagmentSession_06.23.2024-267.jpg | Bin 1699370 -> 0 bytes client/public/EngagmentSession_06.23.2024-284.jpg | Bin 3429096 -> 0 bytes client/public/divine-shepherd.jpg | Bin 202918 -> 0 bytes client/public/full/divine-shepherd.jpg | Bin 0 -> 202918 bytes client/public/full/engagement1.jpg | Bin 0 -> 2188838 bytes client/public/full/engagement2.jpg | Bin 0 -> 3150499 bytes client/public/full/engagement3.jpg | Bin 0 -> 3437736 bytes client/public/full/engagement4.jpg | Bin 0 -> 1643595 bytes client/public/full/engagement5.jpg | Bin 0 -> 1699370 bytes client/public/full/engagement6.jpg | Bin 0 -> 3429096 bytes client/public/small/divine-shepherd.webp | Bin 0 -> 87202 bytes client/public/small/engagement1.webp | Bin 0 -> 443490 bytes client/public/small/engagement2.webp | Bin 0 -> 988522 bytes client/public/small/engagement3.webp | Bin 0 -> 1035762 bytes client/public/small/engagement4.webp | Bin 0 -> 400510 bytes client/public/small/engagement5.webp | Bin 0 -> 423440 bytes client/public/small/engagement6.webp | Bin 0 -> 1047326 bytes client/src/blurry-load.css | 8 +++++ client/src/components/AdminLogin.tsx | 2 +- client/src/components/BlurryLoadDiv.tsx | 21 ++++++++++++ client/src/components/BlurryLoadImg.tsx | 15 +++++++++ client/src/components/Home.tsx | 28 +++++++++------- client/src/components/Schedule.tsx | 11 ++++--- client/src/useBlurryLoad.ts | 38 ++++++++++++++++++++++ 28 files changed, 107 insertions(+), 16 deletions(-) delete mode 100644 client/public/EngagmentSession_06.23.2024-131.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-161.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-164.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-259.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-267.jpg delete mode 100644 client/public/EngagmentSession_06.23.2024-284.jpg delete mode 100644 client/public/divine-shepherd.jpg create mode 100644 client/public/full/divine-shepherd.jpg create mode 100644 client/public/full/engagement1.jpg create mode 100644 client/public/full/engagement2.jpg create mode 100644 client/public/full/engagement3.jpg create mode 100644 client/public/full/engagement4.jpg create mode 100644 client/public/full/engagement5.jpg create mode 100644 client/public/full/engagement6.jpg create mode 100644 client/public/small/divine-shepherd.webp create mode 100644 client/public/small/engagement1.webp create mode 100644 client/public/small/engagement2.webp create mode 100644 client/public/small/engagement3.webp create mode 100644 client/public/small/engagement4.webp create mode 100644 client/public/small/engagement5.webp create mode 100644 client/public/small/engagement6.webp create mode 100644 client/src/blurry-load.css create mode 100644 client/src/components/BlurryLoadDiv.tsx create mode 100644 client/src/components/BlurryLoadImg.tsx create mode 100644 client/src/useBlurryLoad.ts diff --git a/client/public/EngagmentSession_06.23.2024-131.jpg b/client/public/EngagmentSession_06.23.2024-131.jpg deleted file mode 100644 index 0657a40..0000000 Binary files a/client/public/EngagmentSession_06.23.2024-131.jpg and /dev/null differ diff --git a/client/public/EngagmentSession_06.23.2024-161.jpg b/client/public/EngagmentSession_06.23.2024-161.jpg deleted file mode 100644 index 92b5be5..0000000 Binary files a/client/public/EngagmentSession_06.23.2024-161.jpg and /dev/null differ diff --git a/client/public/EngagmentSession_06.23.2024-164.jpg b/client/public/EngagmentSession_06.23.2024-164.jpg deleted file mode 100644 index 529a324..0000000 Binary files a/client/public/EngagmentSession_06.23.2024-164.jpg and /dev/null differ diff --git a/client/public/EngagmentSession_06.23.2024-259.jpg b/client/public/EngagmentSession_06.23.2024-259.jpg deleted file mode 100644 index 075480c..0000000 Binary files a/client/public/EngagmentSession_06.23.2024-259.jpg and /dev/null differ diff --git a/client/public/EngagmentSession_06.23.2024-267.jpg b/client/public/EngagmentSession_06.23.2024-267.jpg deleted file mode 100644 index 7222c16..0000000 Binary files a/client/public/EngagmentSession_06.23.2024-267.jpg and /dev/null differ diff --git a/client/public/EngagmentSession_06.23.2024-284.jpg b/client/public/EngagmentSession_06.23.2024-284.jpg deleted file mode 100644 index 2f06a42..0000000 Binary files a/client/public/EngagmentSession_06.23.2024-284.jpg and /dev/null differ diff --git a/client/public/divine-shepherd.jpg b/client/public/divine-shepherd.jpg deleted file mode 100644 index c89749e..0000000 Binary files a/client/public/divine-shepherd.jpg and /dev/null differ diff --git a/client/public/full/divine-shepherd.jpg b/client/public/full/divine-shepherd.jpg new file mode 100644 index 0000000..c89749e Binary files /dev/null and b/client/public/full/divine-shepherd.jpg differ diff --git a/client/public/full/engagement1.jpg b/client/public/full/engagement1.jpg new file mode 100644 index 0000000..0657a40 Binary files /dev/null and b/client/public/full/engagement1.jpg differ diff --git a/client/public/full/engagement2.jpg b/client/public/full/engagement2.jpg new file mode 100644 index 0000000..92b5be5 Binary files /dev/null and b/client/public/full/engagement2.jpg differ diff --git a/client/public/full/engagement3.jpg b/client/public/full/engagement3.jpg new file mode 100644 index 0000000..529a324 Binary files /dev/null and b/client/public/full/engagement3.jpg differ diff --git a/client/public/full/engagement4.jpg b/client/public/full/engagement4.jpg new file mode 100644 index 0000000..075480c Binary files /dev/null and b/client/public/full/engagement4.jpg differ diff --git a/client/public/full/engagement5.jpg b/client/public/full/engagement5.jpg new file mode 100644 index 0000000..7222c16 Binary files /dev/null and b/client/public/full/engagement5.jpg differ diff --git a/client/public/full/engagement6.jpg b/client/public/full/engagement6.jpg new file mode 100644 index 0000000..2f06a42 Binary files /dev/null and b/client/public/full/engagement6.jpg differ diff --git a/client/public/small/divine-shepherd.webp b/client/public/small/divine-shepherd.webp new file mode 100644 index 0000000..14a82df Binary files /dev/null and b/client/public/small/divine-shepherd.webp differ diff --git a/client/public/small/engagement1.webp b/client/public/small/engagement1.webp new file mode 100644 index 0000000..b8ce0f1 Binary files /dev/null and b/client/public/small/engagement1.webp differ diff --git a/client/public/small/engagement2.webp b/client/public/small/engagement2.webp new file mode 100644 index 0000000..2c8b01a Binary files /dev/null and b/client/public/small/engagement2.webp differ diff --git a/client/public/small/engagement3.webp b/client/public/small/engagement3.webp new file mode 100644 index 0000000..84e8adc Binary files /dev/null and b/client/public/small/engagement3.webp differ diff --git a/client/public/small/engagement4.webp b/client/public/small/engagement4.webp new file mode 100644 index 0000000..6098083 Binary files /dev/null and b/client/public/small/engagement4.webp differ diff --git a/client/public/small/engagement5.webp b/client/public/small/engagement5.webp new file mode 100644 index 0000000..b9faf7e Binary files /dev/null and b/client/public/small/engagement5.webp differ diff --git a/client/public/small/engagement6.webp b/client/public/small/engagement6.webp new file mode 100644 index 0000000..3e85e1f Binary files /dev/null and b/client/public/small/engagement6.webp differ diff --git a/client/src/blurry-load.css b/client/src/blurry-load.css new file mode 100644 index 0000000..df1dd09 --- /dev/null +++ b/client/src/blurry-load.css @@ -0,0 +1,8 @@ +.blurry-load { + filter: blur(6px); + transition: all .6s ease-in; +} + +.blur-out { + filter: none!important +} \ No newline at end of file diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx index f1f676f..4d722e8 100644 --- a/client/src/components/AdminLogin.tsx +++ b/client/src/components/AdminLogin.tsx @@ -107,7 +107,7 @@ function GuestLogin() { endAdornment: ( - {showPassword ? : } + {showPassword ? : } ), diff --git a/client/src/components/BlurryLoadDiv.tsx b/client/src/components/BlurryLoadDiv.tsx new file mode 100644 index 0000000..1dfe07e --- /dev/null +++ b/client/src/components/BlurryLoadDiv.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { ClassAttributes, ImgHTMLAttributes } from 'react'; +import { JSX } from 'react/jsx-runtime'; +import { useBlurryLoad } from '../useBlurryLoad.ts'; +import { useMediaQuery } from '@mui/material'; + +export const BlurryLoadDiv = ( + props: JSX.IntrinsicAttributes & + ClassAttributes & + ImgHTMLAttributes & { 'data-large': string } +) => { + const isMobile = useMediaQuery('(max-width: 768px)'); + let blurry = ''; + if (!isMobile) { + useBlurryLoad(); + blurry = 'blurry-load'; + } + return ( +
+ ); +}; diff --git a/client/src/components/BlurryLoadImg.tsx b/client/src/components/BlurryLoadImg.tsx new file mode 100644 index 0000000..c28aa45 --- /dev/null +++ b/client/src/components/BlurryLoadImg.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { ClassAttributes, ImgHTMLAttributes } from 'react'; +import { JSX } from 'react/jsx-runtime'; +import { useBlurryLoad } from '../useBlurryLoad.ts'; + +export const BlurryLoadImg = ( + props: JSX.IntrinsicAttributes & + ClassAttributes & + ImgHTMLAttributes & { 'data-large': string } +) => { + useBlurryLoad(); + return ( + + ); +}; diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index f735195..79743a5 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -1,30 +1,33 @@ import React from 'react'; import { useEffect, useState } from 'react'; import './Carousel.css'; -import p0 from '/EngagmentSession_06.23.2024-131.jpg'; -import p1 from '/EngagmentSession_06.23.2024-161.jpg'; -import p2 from '/EngagmentSession_06.23.2024-164.jpg'; -import p3 from '/EngagmentSession_06.23.2024-259.jpg'; -import p4 from '/EngagmentSession_06.23.2024-267.jpg'; -import p5 from '/EngagmentSession_06.23.2024-284.jpg'; +import { BlurryLoadImg } from './BlurryLoadImg'; + +const images = [ + { small: '/small/engagement1.webp', full: '/full/engagement1.jpg' }, + { small: '/small/engagement2.webp', full: '/full/engagement2.jpg' }, + { small: '/small/engagement3.webp', full: '/full/engagement3.jpg' }, + { small: '/small/engagement4.webp', full: '/full/engagement4.jpg' }, + { small: '/small/engagement5.webp', full: '/full/engagement5.jpg' }, + { small: '/small/engagement6.webp', full: '/full/engagement6.jpg' }, +]; function Home() { const [currentIndex, setIndex] = useState(0); - const photos = [p0, p1, p2, p3, p4, p5]; useEffect(() => { const interval = setInterval(() => { setIndex((prevIndex) => - prevIndex === photos.length - 1 ? 0 : prevIndex + 1 + prevIndex === images.length - 1 ? 0 : prevIndex + 1 ); }, 3000); return () => clearInterval(interval); - }, [photos.length]); + }, [images.length]); return (
- {photos.map((photo, index) => ( + {images.map((image, index) => (
- +
))}
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx index 64140e4..dfe4a30 100644 --- a/client/src/components/Schedule.tsx +++ b/client/src/components/Schedule.tsx @@ -6,10 +6,10 @@ import { useMediaQuery, useTheme, } from '@mui/material'; -import divineShepherd from '/divine-shepherd.jpg'; import InsertInvitationIcon from '@mui/icons-material/InsertInvitation'; import { useAppDispatch } from '../hooks'; import { showDialog } from '../slices/uiSlice'; +import { BlurryLoadDiv } from './BlurryLoadDiv'; function Schedule() { const dispatch = useAppDispatch(); @@ -21,15 +21,18 @@ function Schedule() { }; return ( -
-
+ ); } diff --git a/client/src/useBlurryLoad.ts b/client/src/useBlurryLoad.ts new file mode 100644 index 0000000..59069d2 --- /dev/null +++ b/client/src/useBlurryLoad.ts @@ -0,0 +1,38 @@ +import { useEffect } from 'react'; +import './blurry-load.css'; + +export interface UseBlurryLoadProps { + toBlurImages?: Element[]; +} + +export const useBlurryLoad = (props?: UseBlurryLoadProps) => { + const { toBlurImages = [] } = props ?? {}; + + useEffect(() => { + const images: Element[] = [...toBlurImages]; + if (toBlurImages.length === 0) { + images.push(...document.querySelectorAll('.blurry-load')); + } + + const lazyImageObserver = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (!entry.isIntersecting) return; + + const image = entry.target; + const currentImage = new Image(); + currentImage.setAttribute( + 'src', + image.getAttribute('data-large') ?? '' + ); + + currentImage.onload = () => { + image.setAttribute('src', currentImage.src); + image.classList.add('blur-out'); + }; + lazyImageObserver.unobserve(image); + }); + }); + + images.forEach((img) => lazyImageObserver.observe(img)); + }, [toBlurImages]); +}; -- cgit v1.2.3