Skip to content

Commit

Permalink
Merge pull request #2159 from jk-labs-inc/staging
Browse files Browse the repository at this point in the history
patch PR 2 of week ending 8/27/24
  • Loading branch information
nakedfool authored Aug 21, 2024
2 parents f473088 + 03cfdab commit a4f5515
Show file tree
Hide file tree
Showing 5 changed files with 316 additions and 305 deletions.
Original file line number Diff line number Diff line change
@@ -1,57 +1,80 @@
import NextImage from "next/image";
import { useEffect, useState } from "react";
import { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";

interface ImageWithFallbackProps {
src: string;
fallbackSrc: string;
mediumSrc: string;
fullSrc: string;
alt: string;
containerWidth: number;
}

const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({ src, fallbackSrc, alt, containerWidth }) => {
interface ImageData {
img: HTMLImageElement;
width: number;
height: number;
}

const preloadImage = async (src: string): Promise<ImageData> => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = src;
img.onload = () => resolve({ img, width: img.width, height: img.height });
img.onerror = reject;
});
};

const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({ mediumSrc, fullSrc, alt, containerWidth }) => {
const [isExpanded, setIsExpanded] = useState(false);
const [imgSrc, setImgSrc] = useState(src);
const [showResizeButton, setShowResizeButton] = useState(false);
const [useMediumImage, setUseMediumImage] = useState(true);

useEffect(() => {
const mediumImg = new Image();
mediumImg.src = src;
const { data: mediumImage, isLoading: isMediumLoading } = useQuery({
queryKey: ["image", mediumSrc, "medium"],
queryFn: () => preloadImage(mediumSrc),
staleTime: Infinity,
});

const { data: fullImage, isLoading: isFullLoading } = useQuery({
queryKey: ["image", fullSrc, "full"],
queryFn: () => preloadImage(fullSrc),
staleTime: Infinity,
});

const checkSize = () => {
if (containerWidth > 0) {
// compare medium image width to container width
const widthDifference = Math.abs(mediumImg.width - containerWidth);
useEffect(() => {
if (mediumImage && fullImage) {
const isMediumLarger = mediumImage.width > fullImage.width || mediumImage.height > fullImage.height;
setUseMediumImage(!isMediumLarger);

// Uue a percentage threshold for comparison
if (!isMediumLarger && containerWidth > 0) {
const widthDifference = Math.abs(mediumImage.width - containerWidth);
const threshold = 0.1; // 10% difference
const significantDifference = widthDifference / containerWidth > threshold;

setShowResizeButton(significantDifference);
setImgSrc(mediumImg.complete ? src : fallbackSrc);
}
};

if (mediumImg.complete) {
checkSize();
} else {
mediumImg.onload = checkSize;
mediumImg.onerror = () => {
setImgSrc(fallbackSrc);
} else {
setShowResizeButton(false);
};
}
}
}, [src, fallbackSrc, containerWidth]);
}, [mediumImage, fullImage, containerWidth]);

const toggleExpand = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
setIsExpanded(!isExpanded);
setImgSrc(isExpanded ? src : fallbackSrc);
};

const currentImage = isExpanded || !useMediumImage ? fullImage : mediumImage;
const isLoading = isExpanded || !useMediumImage ? isFullLoading : isMediumLoading;

return (
<div className="relative inline-block">
<img src={imgSrc} alt={alt} className="rounded-[16px] max-w-full" />
<img
src={isLoading ? fullSrc : currentImage?.img.src || fullSrc}
alt={alt}
className={`rounded-[16px] max-w-full ${isExpanded ? "w-full" : ""}`}
width={currentImage?.width}
height={currentImage?.height}
/>
{showResizeButton && (
<div className="absolute top-0 right-0 p-1">
<button
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@ const ProposalContent: FC<ProposalContentProps> = ({
if (element === "img") {
return (
<ImageWithFallback
src={`${src}-medium`}
fallbackSrc={src}
mediumSrc={`${src}-medium`}
fullSrc={src}
alt={node.getAttribute("alt") ?? ""}
containerWidth={containerWidth}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-app-revamp/helpers/timeout.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const MAX_TIME_TO_WAIT_FOR_RPC = 30000;
export const MAX_TIME_TO_WAIT_FOR_RPC = 60000;

// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
export const MAX_MS_TIMEOUT = 2147483647;
Expand Down
16 changes: 8 additions & 8 deletions packages/react-app-revamp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"build": "next build"
},
"dependencies": {
"@aws-sdk/client-s3": "3.633.0",
"@aws-sdk/s3-request-presigner": "3.633.0",
"@aws-sdk/client-s3": "3.635.0",
"@aws-sdk/s3-request-presigner": "3.635.0",
"@babel/core": "7.25.2",
"@babel/preset-env": "7.25.3",
"@clustersxyz/sdk": "0.4.3",
Expand All @@ -22,7 +22,7 @@
"@supabase/supabase-js": "2.45.1",
"@tailwindcss/line-clamp": "0.4.4",
"@tailwindcss/typography": "0.5.14",
"@tanstack/react-query": "5.51.24",
"@tanstack/react-query": "5.52.0",
"@tiptap/core": "2.4.0",
"@tiptap/extension-image": "2.4.0",
"@tiptap/extension-link": "2.4.0",
Expand All @@ -34,7 +34,7 @@
"@types/lodash": "4.17.7",
"@types/node": "20.16.1",
"@types/papaparse": "5.3.14",
"@types/react": "18.3.3",
"@types/react": "18.3.4",
"@types/react-csv": "1.1.10",
"@types/react-dom": "18.3.0",
"@types/react-virtualized": "9.21.30",
Expand All @@ -43,7 +43,7 @@
"@types/uuid": "10.0.0",
"@typescript-eslint/parser": "7.18.0",
"@vercel/node": "3.2.8",
"@wagmi/connectors": "5.1.6",
"@wagmi/connectors": "5.1.7",
"@wagmi/core": "2.13.4",
"autoprefixer": "10.4.20",
"cheerio": "1.0.0",
Expand All @@ -55,7 +55,7 @@
"ethers": "5.7.2",
"frog": "0.11.4",
"fuse.js": "7.0.0",
"hono": "4.5.6",
"hono": "4.5.7",
"i18next": "23.14.0",
"interweave": "13.1.0",
"interweave-autolink": "5.1.1",
Expand All @@ -75,7 +75,7 @@
"postcss-100vh-fix": "1.0.2",
"rc-slider": "11.1.5",
"react": "18.3.1",
"react-aria": "3.34.2",
"react-aria": "3.34.3",
"react-confetti": "6.1.0",
"react-countdown": "2.3.6",
"react-csv": "2.2.2",
Expand Down Expand Up @@ -106,7 +106,7 @@
"uuid": "10.0.0",
"valibot": "0.38.0",
"viem": "2.19.8",
"wagmi": "2.12.6",
"wagmi": "2.12.7",
"webpack": "5.93.0",
"zod": "3.23.8",
"zustand": "4.5.5"
Expand Down
Loading

0 comments on commit a4f5515

Please sign in to comment.