From 3a77bd06fc797a25df60ef2cc263fe85a44cbafe Mon Sep 17 00:00:00 2001 From: Adam Chen Wei Date: Thu, 8 Feb 2024 07:16:08 -0500 Subject: [PATCH] feat(watermelon): as 2nd background option main --- public/bg-watermelon-v1.webp | Bin 0 -> 12430 bytes src/app/page.tsx | 277 ++++++++++++++++++++++++----------- 2 files changed, 193 insertions(+), 84 deletions(-) create mode 100644 public/bg-watermelon-v1.webp diff --git a/public/bg-watermelon-v1.webp b/public/bg-watermelon-v1.webp new file mode 100644 index 0000000000000000000000000000000000000000..f8c1db0efbea01b2620ff5b2ec14ea24299dcdf0 GIT binary patch literal 12430 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 + const ref = useRef(null); const [userImageUrl, setUserImageUrl] = useState(); + const [backgroundImageUrl, setBackgroundImageUrl] = + useState("/bg.webp"); const [unsuportedBrowser, setUnsupportedBrowser] = useState(false); - const [loader, setLoader] = useState(false) - const [gazaStatusSummary, setGazaStatusSummary] = useState() - const [filePostfix, setFilePostfix] = useState() + const [loader, setLoader] = useState(false); + const [gazaStatusSummary, setGazaStatusSummary] = useState(); + const [filePostfix, setFilePostfix] = useState< + SocialPlatform | "user-upload" + >(); useEffect(() => { const isInstagramBrowser = /Instagram/i.test(navigator.userAgent); const isFacebookBrowser = /FBAN|FBAV/i.test(navigator.userAgent); if (isInstagramBrowser || isFacebookBrowser) { - setUnsupportedBrowser(true) + setUnsupportedBrowser(true); } - }, [unsuportedBrowser]) + }, [unsuportedBrowser]); useEffect(() => { - fetch('/api/gaza-status').then(res => res.json()).then(data => setGazaStatusSummary(data.summary)); - }, [gazaStatusSummary]) + fetch("/api/gaza-status") + .then((res) => res.json()) + .then((data) => setGazaStatusSummary(data.summary)); + }, [gazaStatusSummary]); + const handleBgImageSwitch = () => { + if (backgroundImageUrl === "/bg.webp") { + setBackgroundImageUrl("/bg-watermelon-v1.webp"); + } else { + setBackgroundImageUrl("/bg.webp"); + } + }; const handleImageUpload = (e: any) => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = async (event: any) => { - setFilePostfix('user-upload') + setFilePostfix("user-upload"); setUserImageUrl(event.target.result); }; @@ -40,45 +60,49 @@ export default function Home() { }; const handleUploadButtonClick = () => { - document.getElementById('fileInput')?.click(); + document.getElementById("fileInput")?.click(); }; const handleRetrieveProfilePicture = async (platform: SocialPlatform) => { const userProvidedUsername = prompt(`Enter your ${platform} username:`); if (userProvidedUsername) { - setFilePostfix(platform) + setFilePostfix(platform); try { setLoader(true); - const response = await fetch(`/api/retrieve-profile-pic?username=${userProvidedUsername}&platform=${platform}`).then(res => res.ok ? res.json() : null); + const response = await fetch( + `/api/retrieve-profile-pic?username=${userProvidedUsername}&platform=${platform}` + ).then((res) => (res.ok ? res.json() : null)); setLoader(false); if (response === null) { - alert('Error fetching your profile picture. Please make sure that you entered a correct username.'); + alert( + "Error fetching your profile picture. Please make sure that you entered a correct username." + ); return; } setUserImageUrl(response.profilePicUrl); } catch (error) { - console.error('Error fetching profile picture:', error); + console.error("Error fetching profile picture:", error); } } }; const generateImage = async () => { try { - return await toPng(ref.current as HTMLElement) + return await toPng(ref.current as HTMLElement); } catch (error) { - console.log("Error generating image", error) + console.log("Error generating image", error); } - } + }; const handleDownload = async () => { - // TODO: Fix if possible. This is a hack to ensure that image generated is as expected. Without repeating generateImage(), at times, the image wont be generated correctly. - await generateImage() - await generateImage() - await generateImage() - const generatedImageUrl = await generateImage() + // TODO: Fix if possible. This is a hack to ensure that image generated is as expected. Without repeating generateImage(), at times, the image wont be generated correctly. + await generateImage(); + await generateImage(); + await generateImage(); + const generatedImageUrl = await generateImage(); if (generatedImageUrl) { - download(generatedImageUrl, `profile-pic-${filePostfix}.png`) + download(generatedImageUrl, `profile-pic-${filePostfix}.png`); } }; @@ -87,26 +111,43 @@ export default function Home() { }; return ( -
+
{unsuportedBrowser && ( -
-

⚠️ Unsupported Browser Detected

+
+

⚠️ Unsupported Browser Detected

Please open on regular browsers like Chrome or Safari.

)} {gazaStatusSummary && ( - + 😥 {gazaStatusSummary} → )} -

Show Solidarity 🇵🇸

-

Let's unite in our profile pictures to spotlight the cause. ✊

-

Watch the step-by-step guide 👀

+

Show Solidarity 🇵🇸

+ +

+ Let's unite in our profile pictures to spotlight the cause. ✊ +

+

+ Watch the{" "} + + step-by-step guide + {" "} + 👀 +

-
+
@@ -114,23 +155,25 @@ export default function Home() { border {loader ? ( spinner-animation @@ -138,15 +181,15 @@ export default function Home() { profile-image @@ -154,40 +197,106 @@ export default function Home() {
-
{userImageUrl ? ( - <> -

Download the image, then use it as your new profile picture.

- - - - ) : - <> - - - - - - - } +
+ {userImageUrl ? ( + <> +

+ Download the image, then use it as your new profile picture. +

+ + + + ) : ( + <> + + + + + + + + + + )}
-
-

Note: This app runs purely on your browser end. No images nor data will be saved by the app.

-

Have any feedback? Let me know!

-

For any bugs, please report them to our GitHub repository.

+
+

+ Note: This app runs purely on your browser end. No images nor data + will be saved by the app. +

+

+ Have any feedback?{" "} + + Let me know! + +

+

+ For any bugs, please report them to our{" "} + + {" "} + GitHub repository. + +

- ) + ); }