From 4edf8d0888911a48ee21c6a445db498f2bab7439 Mon Sep 17 00:00:00 2001 From: r-southworth Date: Fri, 23 Aug 2024 12:59:41 -0400 Subject: [PATCH 1/4] clean up TODO notes --- src/components/members/UserCreatorView.tsx | 2 +- src/components/posts/FullPostView.tsx | 2 -- src/components/services/ViewCard.tsx | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/members/UserCreatorView.tsx b/src/components/members/UserCreatorView.tsx index 7d1bd5db..a0591fd1 100644 --- a/src/components/members/UserCreatorView.tsx +++ b/src/components/members/UserCreatorView.tsx @@ -52,7 +52,7 @@ export const UserCreatorView: Component = (props) => { // } // }) - //TODO: Refactor to use screenSize store + //REFACTOR: Refactor to use screenSize store window.onresize = function () { if (window.screen.width >= 768) { setLargeScreen(true); diff --git a/src/components/posts/FullPostView.tsx b/src/components/posts/FullPostView.tsx index d61fbd82..9850f0b4 100644 --- a/src/components/posts/FullPostView.tsx +++ b/src/components/posts/FullPostView.tsx @@ -198,7 +198,6 @@ export const ViewFullPost: Component = (props) => { setQuantity(1); }; - //TODO: Needs to download both URLs from the folders for the Picture element const downloadImages = async (image_Urls: string) => { try { const imageUrls = image_Urls.split(","); @@ -228,7 +227,6 @@ export const ViewFullPost: Component = (props) => { } }; - //TODO: Why doesn't seller image show up? const downloadCreatorImage = async (path: string) => { try { const { data: webpData, error: webpError } = await supabase.storage diff --git a/src/components/services/ViewCard.tsx b/src/components/services/ViewCard.tsx index 4e6c284a..d2443a2f 100644 --- a/src/components/services/ViewCard.tsx +++ b/src/components/services/ViewCard.tsx @@ -108,7 +108,6 @@ export const ViewCard: Component = (props) => { setQuantity(1); }; - //TODO Update to signed URLS const downloadImage = async (path: string) => { try { const { data: webpData, error: webpError } = await supabase.storage From 3ca1de4183f726fd459c7f558e36f35ca93151ef Mon Sep 17 00:00:00 2001 From: r-southworth Date: Fri, 23 Aug 2024 13:41:46 -0400 Subject: [PATCH 2/4] accessibility bugs --- src/components/common/HeaderSearchBar.tsx | 2 +- src/components/posts/AddFavorite.tsx | 4 ++++ src/components/services/ViewCard.tsx | 25 +++++++++++++++-------- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/common/HeaderSearchBar.tsx b/src/components/common/HeaderSearchBar.tsx index fed92882..83aa6746 100644 --- a/src/components/common/HeaderSearchBar.tsx +++ b/src/components/common/HeaderSearchBar.tsx @@ -67,7 +67,7 @@ export const SearchBar: Component = () => { return (
-
@@ -378,124 +300,10 @@ export const ViewCard: Component = (props) => { {t("messages.free")}

-
- {/* - - - - - -

- 4.9 (30.3K) -

*/} -
+
-
- {/*
- - - - - - - - -

- File Type 1 -

-
*/} - - {/*
- - - - - - - - -

- Short -

-
*/} - - {/*
- - - - - - - - -

- Longer File Type -

-
*/} -
+
= (props) => { const updatedPosts = await Promise.all( props.posts.map(async (post: PurchasedPost) => { post.image_urls - ? (post.image_url = await downloadImage( + ? (post.image_url = await downloadPostImage( post.image_urls.split(",")[0] )) : (post.image_url = undefined); @@ -54,34 +55,6 @@ export const ViewPurchaseCard: Component = (props) => { alert(t("messages.comingSoon")); }; - //REFACTOR: Helper Function - const downloadImage = async (path: string) => { - try { - const { data: webpData, error: webpError } = await supabase.storage - .from("post.image") - .createSignedUrl(`webp/${path}.webp`, 60 * 60); - if (webpError) { - throw webpError; - } - const webpUrl = webpData.signedUrl; - - const { data: jpegData, error: jpegError } = await supabase.storage - .from("post.image") - .createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60); - if (jpegError) { - throw jpegError; - } - const jpegUrl = jpegData.signedUrl; - - const url = { webpUrl, jpegUrl }; - return url; - } catch (error) { - if (error instanceof Error) { - console.log("Error downloading image: ", error.message); - } - } - }; - return (
{purchasedItems().map((post) => ( diff --git a/src/lib/imageHelper.tsx b/src/lib/imageHelper.tsx new file mode 100644 index 00000000..0fcb1ea3 --- /dev/null +++ b/src/lib/imageHelper.tsx @@ -0,0 +1,111 @@ +import supabase from "@lib/supabaseClient"; + +const urlCache = new Map(); + +export const downloadPostImage = async (path: string) => { + if (urlCache.has(path)) { + return urlCache.get(path); + } + + try { + const { data: webpData, error: webpError } = await supabase.storage + .from("post.image") + .createSignedUrl(`webp/${path}.webp`, 60 * 60 * 24 * 30); + if (webpError) { + throw webpError; + } + const webpUrl = webpData.signedUrl; + + const { data: jpegData, error: jpegError } = await supabase.storage + .from("post.image") + .createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60 * 24 * 30); + if (jpegError) { + throw jpegError; + } + const jpegUrl = jpegData.signedUrl; + + const url = { webpUrl, jpegUrl }; + urlCache.set(path, url); // Cache the URL + return url; + } catch (error) { + if (error instanceof Error) { + console.log("Error downloading image: ", error.message); + } + } +}; + +export const downloadUserImage = async (path: string) => { + if (urlCache.has(path)) { + return urlCache.get(path); + } + + try { + const { data: webpData, error: webpError } = await supabase.storage + .from("user.image") + .createSignedUrl(`webp/${path}.webp`, 60 * 60 * 24 * 30); + if (webpError) { + throw webpError; + } + const webpUrl = webpData.signedUrl; + + const { data: jpegData, error: jpegError } = await supabase.storage + .from("user.image") + .createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60 * 24 * 30); + if (jpegError) { + throw jpegError; + } + const jpegUrl = jpegData.signedUrl; + + const url = { webpUrl, jpegUrl }; + urlCache.set(path, url); // Cache the URL + return url; + } catch (error) { + if (error instanceof Error) { + console.log("Error downloading image: ", error.message); + } + } +}; + +export const lazyLoadImage = (img: HTMLImageElement) => { + const dataSrc = img.dataset.src; + // Check if the image src is already set to data-src + if (dataSrc && img.src !== dataSrc) { + console.log("Original src:", img.src); + console.log("Data src:", dataSrc); + // Update the img src with the value of data-src + img.src = dataSrc; + console.log("Updated src:", img.src); + } + + // Get all source elements within the parent element + const sources = img.parentElement?.querySelectorAll("source"); + if (sources) { + sources.forEach((source) => { + const sourceElement = source as HTMLSourceElement; + const dataSrcSet = sourceElement.dataset.srcset; + // Check if the source srcset is already set to data-srcset + if (dataSrcSet && sourceElement.srcset !== dataSrcSet) { + console.log("Original srcset:", sourceElement.srcset); + console.log("Data srcset:", dataSrcSet); + // Update the source srcset with the value of data-srcset + sourceElement.srcset = dataSrcSet; + console.log("Updated srcset:", sourceElement.srcset); + } + }); + } +}; + +export const lazyLoadAllImages = () => { + const images = document.querySelectorAll("img[data-src]"); + + images.forEach((img) => { + const imageElement = img as HTMLImageElement; + + // Check if the image has already loaded (in case of caching) + if (imageElement.complete) { + lazyLoadImage(imageElement); + } else { + imageElement.onload = () => lazyLoadImage(imageElement); + } + }); +}; From 25515e80ac4a722d8f6777f4f210f4686a836945 Mon Sep 17 00:00:00 2001 From: r-southworth Date: Wed, 28 Aug 2024 20:47:52 -0400 Subject: [PATCH 4/4] create self profile image loading --- src/components/members/CreatorProfileView.tsx | 9 ++++++++- src/lib/imageHelper.tsx | 6 ++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/members/CreatorProfileView.tsx b/src/components/members/CreatorProfileView.tsx index 2271c557..fdaa252f 100644 --- a/src/components/members/CreatorProfileView.tsx +++ b/src/components/members/CreatorProfileView.tsx @@ -71,11 +71,11 @@ export const CreatorProfileView: Component = () => { }); onMount(() => { + console.log("Mount running"); setSession(User.session); if (typeof session() === "undefined") { alert(t("messages.signIn")); } - lazyLoadAllImages(); }); createEffect(() => { @@ -85,6 +85,10 @@ export const CreatorProfileView: Component = () => { } }); + createEffect(() => { + console.log("creatorImage value:", creatorImage()); + }); + const resetPassword = () => { window.location.href = `/${lang}/password/reset`; }; @@ -266,6 +270,9 @@ export const CreatorProfileView: Component = () => { ); if (imageUrls) { setCreatorImage(imageUrls); + + console.log(creatorImage()); + lazyLoadAllImages(); } } } diff --git a/src/lib/imageHelper.tsx b/src/lib/imageHelper.tsx index 0fcb1ea3..ad9907f7 100644 --- a/src/lib/imageHelper.tsx +++ b/src/lib/imageHelper.tsx @@ -67,7 +67,9 @@ export const downloadUserImage = async (path: string) => { }; export const lazyLoadImage = (img: HTMLImageElement) => { + console.log("Lazy loading image:", img); const dataSrc = img.dataset.src; + console.log("Data set:", img.dataset); // Check if the image src is already set to data-src if (dataSrc && img.src !== dataSrc) { console.log("Original src:", img.src); @@ -96,10 +98,14 @@ export const lazyLoadImage = (img: HTMLImageElement) => { }; export const lazyLoadAllImages = () => { + console.log("Lazy loading all images..."); const images = document.querySelectorAll("img[data-src]"); + console.log("Images:", images); + console.log("Images length:", images.length); images.forEach((img) => { const imageElement = img as HTMLImageElement; + console.log("Image:", imageElement); // Check if the image has already loaded (in case of caching) if (imageElement.complete) {