From f092be39a58d893c5949a621a9e203195f5e1db6 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sun, 16 Oct 2022 20:21:57 -0700
Subject: [PATCH] improve layout of portrait images in landscape mode

---
 src/components/MasonryGallery.tsx |  2 --
 src/pages/index.tsx               | 13 +++++++---
 src/pages/photogallery.tsx        | 13 ----------
 src/useMediaQuery.ts              | 42 +++++++++++++++++++++++++++++++
 4 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 src/useMediaQuery.ts

diff --git a/src/components/MasonryGallery.tsx b/src/components/MasonryGallery.tsx
index 2338e09..2ae73a8 100644
--- a/src/components/MasonryGallery.tsx
+++ b/src/components/MasonryGallery.tsx
@@ -33,14 +33,12 @@ const MasonryGallery = ({
   debugRating,
   linkState,
 }: MasonryGalleryProps) => {
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 38 ~ themeBreakpoints", themeBreakpoints)
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
     [aspectTargetsByBreakpoint]
   );
 
   const { breakpoint } = useBreakpoint(breakpoints, "sm");
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 43 ~ breakpoint", breakpoint)
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images).filter(Boolean),
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a03916e..4beb852 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -11,13 +11,18 @@ import { getHelmetSafeBodyStyle, getVibrant, getAspectRatio } from "../utils";
 import Nav from "../components/Nav";
 import ActionButtons from "../components/index/ActionButtons";
 import { use100vh } from "react-div-100vh";
+import { useMediaQuery } from "../useMediaQuery";
 
 const env =
   process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
 
 export type HomepageImage = Queries.IndexPageQuery["allFile"]["nodes"][number];
 
-const getDifferentRand = (range: number, lastNs: number[], iterations = 0): number => {
+const getDifferentRand = (
+  range: number,
+  lastNs: number[],
+  iterations = 0
+): number => {
   const n = Math.floor(Math.random() * range);
   if (lastNs.findIndex((x) => x === n) > -1 && iterations < 5) {
     console.log("got dupe, trying again", n);
@@ -36,7 +41,6 @@ const IndexPage = ({
   const image = React.useMemo(() => {
     return images[imageIndex];
   }, [images, imageIndex]);
-  console.log(image);
 
   const shuffleImage = React.useCallback(
     (currentImage?: typeof images[number]) => {
@@ -101,6 +105,8 @@ const IndexPage = ({
     };
   }, [imageIndex, images.length, image, shuffleImage]);
 
+  const browserIsLandscape = useMediaQuery("(orientation: landscape)");
+
   const vibrant = getVibrant(image);
   const ar = getAspectRatio(image);
 
@@ -193,12 +199,13 @@ const IndexPage = ({
             className={classnames(
               imageIsLandscape
                 ? "landscape:h-actual-screen portrait:h-two-thirds-vw"
-                : "h-actual-screen portrait:w-full landscape:w-1/2"
+                : "h-actual-screen portrait:w-full"
             )}
             image={img}
             loading="eager"
             style={{
               gridArea: "1/1",
+              width: browserIsLandscape && !imageIsLandscape ? `${ar * 100}vh` : "100%",
             }}
           />
         ) : (
diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx
index 0100c56..f8ede1e 100644
--- a/src/pages/photogallery.tsx
+++ b/src/pages/photogallery.tsx
@@ -19,16 +19,6 @@ const SORT_KEYS = {
 export type GalleryImage =
   Queries.GalleryPageQueryQuery["allFile"]["nodes"][number];
 
-const debugWrap =
-  (name: string, fn: Function) =>
-  (...asdf: any) => {
-    try {
-      return fn(...asdf);
-    } catch (e) {
-      console.log("threw in " + name, e);
-    }
-  };
-
 const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
   const hash =
     typeof window !== "undefined" ? window.location.hash.replace("#", "") : "";
@@ -82,7 +72,6 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
   );
 
   const removeHash = React.useCallback(() => {
-    console.log("rh");
     const url = new URL(
       typeof window !== "undefined"
         ? window.location.href.toString()
@@ -103,7 +92,6 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
     if (!el) {
       return;
     }
-    console.log("scrolling into view", el);
     el.scrollIntoView({
       block: "center",
     });
@@ -168,7 +156,6 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
       return [];
     }
   }, [data, sortKey, filterKeyword]);
-  console.log("🚀 ~ file: photogallery.tsx ~ line 175 ~ GalleryPage ~ filterKeyword", filterKeyword)
 
   return (
     <>
diff --git a/src/useMediaQuery.ts b/src/useMediaQuery.ts
new file mode 100644
index 0000000..02e2543
--- /dev/null
+++ b/src/useMediaQuery.ts
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const getMatches = (query: string): boolean => {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches
+    }
+    return false
+  }
+
+  const [matches, setMatches] = useState<boolean>(getMatches(query))
+
+  function handleChange() {
+    setMatches(getMatches(query))
+  }
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query)
+
+    // Triggered at the first client-side load and if query changes
+    handleChange()
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange)
+    } else {
+      matchMedia.addEventListener('change', handleChange)
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange)
+      } else {
+        matchMedia.removeEventListener('change', handleChange)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  return matches
+}