Added an HD Button to Toggle Image Quality for Loading Times

Author: ashwinparthas

src/app/globals.css

@@ -612,6 +612,26 @@ img {
   cursor: pointer;
 }
 
+.lightbox-hd {
+  position: absolute;
+  top: 28px;
+  left: 28px;
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: rgba(10, 10, 10, 0.6);
+  color: var(--ink);
+  font-size: 0.62rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.lightbox-hd.is-active {
+  background: rgba(245, 242, 238, 0.12);
+  border-color: rgba(245, 242, 238, 0.4);
+}
+
 .lightbox-button {
   top: 50%;
   transform: translateY(-50%);
@@ -665,6 +685,14 @@ img {
   .lightbox-button.next {
     right: 16px;
   }
+
+  .lightbox-hd {
+    top: 16px;
+    left: 16px;
+    height: 32px;
+    padding: 0 12px;
+    font-size: 0.58rem;
+  }
 }
 
 @media (max-width: 900px) and (orientation: landscape) {
@@ -713,6 +741,14 @@ img {
     top: 12px;
     right: 12px;
   }
+
+  .lightbox-hd {
+    top: 12px;
+    left: 12px;
+    height: 30px;
+    padding: 0 10px;
+    font-size: 0.54rem;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

src/app/page.tsx

@@ -53,6 +53,7 @@ export default function Home() {
   const [categoriesOpen, setCategoriesOpen] = useState(false);
   const [panelFloating, setPanelFloating] = useState(false);
   const [lightbox, setLightbox] = useState<LightboxState | null>(null);
+  const [isHd, setIsHd] = useState(false);
   const galleryRef = useRef<HTMLDivElement | null>(null);
   const scrollState = useRef({ target: 0, frame: 0 });
 
@@ -84,6 +85,7 @@ export default function Home() {
         setLightbox(null);
       }
       if (event.key === "ArrowRight") {
+        setIsHd(false);
         setLightbox((current) =>
           current
             ? {
@@ -94,6 +96,7 @@ export default function Home() {
         );
       }
       if (event.key === "ArrowLeft") {
+        setIsHd(false);
         setLightbox((current) =>
           current
             ? {
@@ -190,10 +193,12 @@ export default function Home() {
   }, []);
 
   const openLightbox = (items: Photo[], index: number) => {
+    setIsHd(false);
     setLightbox({ items, index });
   };
 
   const goNext = () => {
+    setIsHd(false);
     setLightbox((current) =>
       current
         ? { ...current, index: (current.index + 1) % current.items.length }
@@ -202,6 +207,7 @@ export default function Home() {
   };
 
   const goPrev = () => {
+    setIsHd(false);
     setLightbox((current) =>
       current
         ? {
@@ -306,6 +312,14 @@ export default function Home() {
 
       {lightbox && (
         <div className="lightbox" role="dialog" aria-modal="true">
+          <button
+            className={`lightbox-hd${isHd ? " is-active" : ""}`}
+            type="button"
+            aria-pressed={isHd}
+            onClick={() => setIsHd((current) => !current)}
+          >
+            HD
+          </button>
           <button
             className="lightbox-close"
             type="button"
@@ -332,9 +346,17 @@ export default function Home() {
           </button>
           <figure>
             <img
-              src={responsiveSrc(lightbox.items[lightbox.index].src)}
-              srcSet={responsiveSrcSet(lightbox.items[lightbox.index].src)}
-              sizes="(max-width: 900px) 96vw, 80vw"
+              src={
+                isHd
+                  ? withBasePath(lightbox.items[lightbox.index].src)
+                  : responsiveSrc(lightbox.items[lightbox.index].src)
+              }
+              srcSet={
+                isHd
+                  ? undefined
+                  : responsiveSrcSet(lightbox.items[lightbox.index].src)
+              }
+              sizes={isHd ? undefined : "(max-width: 900px) 96vw, 80vw"}
               loading="eager"
               decoding="async"
             />

src/components/CategoryGallery.tsx

@@ -31,6 +31,7 @@ export default function CategoryGallery({
 }: CategoryGalleryProps) {
   const [lightbox, setLightbox] = useState<LightboxState | null>(null);
   const [switchOpen, setSwitchOpen] = useState(false);
+  const [isHd, setIsHd] = useState(false);
 
   const preloadImage = (src: string) => {
     if (typeof window === "undefined") return;
@@ -55,13 +56,15 @@ export default function CategoryGallery({
         setLightbox(null);
       }
       if (event.key === "ArrowRight") {
+        setIsHd(false);
         setLightbox((current) =>
           current
             ? { index: (current.index + 1) % images.length }
             : current
         );
       }
       if (event.key === "ArrowLeft") {
+        setIsHd(false);
         setLightbox((current) =>
           current
             ? { index: (current.index - 1 + images.length) % images.length }
@@ -86,12 +89,14 @@ export default function CategoryGallery({
   }, [images, lightbox]);
 
   const goNext = () => {
+    setIsHd(false);
     setLightbox((current) =>
       current ? { index: (current.index + 1) % images.length } : current
     );
   };
 
   const goPrev = () => {
+    setIsHd(false);
     setLightbox((current) =>
       current
         ? { index: (current.index - 1 + images.length) % images.length }
@@ -145,14 +150,25 @@ export default function CategoryGallery({
             <button
               type="button"
               aria-label={`Open ${image.alt}`}
-              onClick={() => setLightbox({ index })}
+              onClick={() => {
+                setIsHd(false);
+                setLightbox({ index });
+              }}
             />
           </article>
         ))}
       </div>
 
       {lightbox && (
         <div className="lightbox" role="dialog" aria-modal="true">
+          <button
+            className={`lightbox-hd${isHd ? " is-active" : ""}`}
+            type="button"
+            aria-pressed={isHd}
+            onClick={() => setIsHd((current) => !current)}
+          >
+            HD
+          </button>
           <button
             className="lightbox-close"
             type="button"
@@ -179,9 +195,15 @@ export default function CategoryGallery({
           </button>
           <figure>
             <img
-              src={responsiveSrc(images[lightbox.index].src)}
-              srcSet={responsiveSrcSet(images[lightbox.index].src)}
-              sizes="(max-width: 900px) 96vw, 80vw"
+              src={
+                isHd
+                  ? withBasePath(images[lightbox.index].src)
+                  : responsiveSrc(images[lightbox.index].src)
+              }
+              srcSet={
+                isHd ? undefined : responsiveSrcSet(images[lightbox.index].src)
+              }
+              sizes={isHd ? undefined : "(max-width: 900px) 96vw, 80vw"}
               alt={images[lightbox.index].alt}
               loading="eager"
               decoding="async"