Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image optimization #145

Merged
merged 5 commits into from
Aug 30, 2024
Merged

Image optimization #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4edf8d0
clean up TODO notes
r-southworth Aug 23, 2024
3ca1de4
accessibility bugs
r-southworth Aug 23, 2024
0934db4
add image helpers, lazy loading, data-src, etc
r-southworth Aug 27, 2024
7f7e06a
Merge branch 'next-release' into imageOptimization
r-southworth Aug 28, 2024
25515e8
create self profile image loading
r-southworth Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 5 additions & 23 deletions src/assets/LearnGroveLogoBWNoText.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/person-svgrepo-com.svg → src/assets/person.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/postPlaceHolder.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/common/HeaderSearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const SearchBar: Component = () => {
return (
<div class="search-form mx-4 mt-2 flex h-full w-full items-center justify-center">
<div class="form flex h-full w-full items-center justify-between rounded-full border border-border1 px-1 text-ptext1 focus:border-2 focus:border-highlight1 focus:outline-none dark:border-border1-DM dark:focus:border-highlight1-DM">
<label class="sr-only" for="search">
<label class="sr-only" for="headerSearch">
{t("formLabels.search")}
</label>
<input
Expand Down
92 changes: 31 additions & 61 deletions src/components/common/cart/CartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import supabase from "@lib/supabaseClient";
import { getLangFromUrl, useTranslations } from "@i18n/utils";
import { Quantity } from "@components/common/cart/Quantity";
import { items, setItems } from "@components/common/cart/AddToCartButton";
import {
downloadPostImage,
downloadUserImage,
lazyLoadImage,
} from "@lib/imageHelper";
import userPlaceHolder from "@src/assets/person.svg";

const lang = getLangFromUrl(new URL(window.location.href));
const t = useTranslations(lang);
Expand All @@ -25,7 +31,7 @@ export const CartCard: Component<Props> = (props) => {
props.items.map(async (item: Post) => {
const newItem = { ...item };
newItem.image_urls
? (newItem.image_url = await downloadImage(
? (newItem.image_url = await downloadPostImage(
newItem.image_urls.split(",")[0]
))
: (newItem.image_url = undefined);
Expand All @@ -42,7 +48,7 @@ export const CartCard: Component<Props> = (props) => {

if (sellerImg) {
if (sellerImg[0].image_url) {
newItem.seller_img = await downloadCreatorImage(
newItem.seller_img = await downloadUserImage(
sellerImg[0].image_url
);
}
Expand Down Expand Up @@ -99,62 +105,6 @@ export const CartCard: Component<Props> = (props) => {
props.deleteItem();
};

// REFACTOR: Make this a 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);
}
}
};

//REFACTOR: Make this a helper function
const downloadCreatorImage = async (path: string) => {
try {
const { data: webpData, error: webpError } = await supabase.storage
.from("user.image")
.createSignedUrl(`webp/${path}.webp`, 60 * 60);
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);
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 (
<div class="flex w-full justify-center">
<ul class="md:flex md:w-full md:flex-wrap">
Expand All @@ -166,11 +116,16 @@ export const CartCard: Component<Props> = (props) => {
{item.image_url ? (
<picture>
<source
srcset={item.image_url.webpUrl}
data-srcset={
item.image_url.webpUrl
}
type="image/webp"
/>
<img
src={item.image_url.jpegUrl}
src={userPlaceHolder.src}
data-src={
item.image_url.jpegUrl
}
alt={
item.image_urls?.split(
","
Expand All @@ -179,6 +134,12 @@ export const CartCard: Component<Props> = (props) => {
: "No image"
}
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
loading="lazy"
onload={(e) => {
lazyLoadImage(
e.currentTarget as HTMLImageElement
);
}}
/>
</picture>
) : (
Expand Down Expand Up @@ -228,14 +189,17 @@ export const CartCard: Component<Props> = (props) => {
{item.seller_img ? (
<picture>
<source
srcset={
data-srcset={
item.seller_img
.webpUrl
}
type="image/webp"
/>
<img
src={
userPlaceHolder.src
}
data-src={
item.seller_img
.jpegUrl
}
Expand All @@ -246,6 +210,12 @@ export const CartCard: Component<Props> = (props) => {
: "No image"
}
class="mr-2 h-8 w-8 rounded-full bg-background1 object-cover dark:bg-icon1-DM"
loading="lazy"
onload={(e) => {
lazyLoadImage(
e.currentTarget as HTMLImageElement
);
}}
/>
</picture>
) : (
Expand Down
Loading
Loading