Zoom photos

frontend/.gitignore

@@ -0,0 +1,3 @@
+.yalc/
+.yalcignore
+yalc.lock

frontend/package.json

@@ -17,6 +17,7 @@
   "author": "Julian Boilen",
   "license": "UNLICENSED",
   "dependencies": {
+    "@jboolean/react-zoom-pan-pinch": "^3.7.2",
     "@sentry/react": "^7.119.2",
     "@sentry/tracing": "^7.114.0",
     "@stripe/stripe-js": "^1.42.0",

frontend/src/screens/App/screens/AnnouncementBanner/AnnouncementRegistry.tsx

@@ -2,6 +2,16 @@ import React from 'react';
 import Announcment from './Announcement';
 
 const ANNOUNCEMENTS_REGISTRY: Announcment[] = [
+  {
+    id: 'zoom',
+    expiresAt: new Date('2025-01-31'),
+    render: () => (
+      <React.Fragment>
+        🔍 What&rsquo;s that sign say? Is that mom? <b>New</b>: zoom in and find
+        out.
+      </React.Fragment>
+    ),
+  },
   {
     id: 'high-quality-imagery',
     expiresAt: new Date('2024-09-05'),

frontend/src/screens/App/screens/AnnouncementBanner/index.tsx

@@ -19,7 +19,7 @@ export default function AnnouncementBanner(): JSX.Element | null {
     <div className={stylesheet.container}>
       {announcementToDisplay.render()}{' '}
       <button className={stylesheet.hideButton} onClick={hide}>
-        Hide
+        Hide this
       </button>
     </div>
   );

frontend/src/screens/App/screens/ViewerPane/ViewerPane.less

@@ -15,29 +15,14 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   }
 
-  .colorLayer {
-    z-index: 1;
-    position: absolute;
-
-    user-select: none;
-    pointer-events: none;
-
-    // We get low res color images and "upscole" them here by only using the color information
-    // and blending in the lightness of the full image
-    mix-blend-mode: color;
-  }
-
-  .image,
-  .colorLayer {
-    object-fit: contain;
-    object-position: center center;
+  .imageStack {
     width: 100%;
     height: 100%;
-    transform: scale(1.05); // cuts off the borders
   }
 
   .overlay {
     z-index: 2;
+    touch-action: none;
   }
 
   @content-padding: 5.5px;
@@ -48,7 +33,7 @@
     grid-template-columns: 100%;
     grid-template-areas:
       'alternates'
-      '.'
+      'zoomHitArea'
       'stories'
       'buttons'
       'credit';
@@ -84,6 +69,9 @@
     border: none;
 
     cursor: pointer;
+
+    // drop shadow
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
   }
 
   .alternates {
@@ -111,6 +99,8 @@
     box-sizing: border-box;
 
     color: white;
+
+    user-select: all;
   }
 
   .buttons {
@@ -146,4 +136,35 @@
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1194050
     // Maybe revisit this later
   }
+
+  .zoomHitArea {
+    grid-area: zoomHitArea;
+  }
+
+  // Class name to exclude from pinch zoom
+  .panPinchExcluded {
+    user-select: text;
+  }
+
+  .panning {
+    cursor: grabbing !important;
+  }
+
+  .transformWrapper,
+  .transformContent {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  .zoomable {
+    cursor: zoom-in;
+
+    & > * {
+      cursor: auto;
+    }
+
+    &.zoomed {
+      cursor: zoom-out;
+    }
+  }
 }

frontend/src/screens/App/screens/ViewerPane/components/ColorLayer.less

@@ -12,6 +12,16 @@
   .colorLayer {
     // default state
     .faded();
+
+    z-index: 1;
+    position: absolute;
+
+    user-select: none;
+    pointer-events: none;
+
+    // We get low res color images and "upscale" them here by only using the color information
+    // and blending in the lightness of the full image
+    mix-blend-mode: color;
   }
 
   .enter,

frontend/src/screens/App/screens/ViewerPane/components/ColorLayer.tsx

@@ -12,7 +12,7 @@ export default function ColorLayer({
   className,
 }: {
   photoIdentifier: string;
-  className: string;
+  className?: string;
 }): JSX.Element | null {
   const {
     colorEnabledForIdentifier,
@@ -49,7 +49,6 @@ export default function ColorLayer({
           className={classNames(stylesheet.colorLayer, className)}
           src={colorizedImageSrc}
           onLoad={() => {
-            console.log('loaded', enabled);
             if (enabled) {
               handleImageLoaded();
             }

frontend/src/screens/App/screens/ViewerPane/components/ImageStack.less

@@ -0,0 +1,14 @@
+:local {
+  .image {
+    display: block;
+    object-fit: contain;
+    object-position: center center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .overlayLayer {
+    z-index: 1;
+    position: absolute;
+  }
+}

frontend/src/screens/App/screens/ViewerPane/components/ImageStack.tsx

@@ -0,0 +1,83 @@
+import React, { ImgHTMLAttributes } from 'react';
+
+import classNames from 'classnames';
+import { PHOTO_BASE } from 'shared/utils/apiConstants';
+import preloadImage from 'shared/utils/preloadImage';
+import ColorLayer from './ColorLayer';
+import stylesheet from './ImageStack.less';
+import { View } from './ImageSwitcher';
+
+type Props = {
+  photoIdentifier: string;
+  imgProps?: Omit<ImgHTMLAttributes<unknown>, 'src'>;
+  className: string;
+  isFullResVisible?: boolean;
+};
+
+type ImageFormat = '720-jpg' | '420-jpg' | 'jpg';
+
+const forgeImgSrc = (
+  photoIdentifier: string,
+  format: ImageFormat = '720-jpg'
+): string => `${PHOTO_BASE}/${format}/${photoIdentifier}.jpg`;
+
+function HighResLayer({
+  photoIdentifier,
+}: {
+  photoIdentifier: string;
+}): JSX.Element {
+  const [loaded, setLoaded] = React.useState(false);
+
+  return (
+    <img
+      data-image-type="high-res"
+      src={forgeImgSrc(photoIdentifier, 'jpg')}
+      className={classNames(stylesheet.image, stylesheet.overlayLayer)}
+      onLoad={() => setLoaded(true)}
+      style={{ opacity: loaded ? 1 : 0 }}
+    />
+  );
+}
+
+/**
+ * An ImageStack keeps all the layers for one photo aligned and combined so they can be treated as one.
+ * Layers: Base layer, high res layer, color layer.
+ */
+export default function ImageStack({
+  photoIdentifier,
+  imgProps,
+  className,
+  isFullResVisible,
+}: Props): JSX.Element | null {
+  const baseImageSrc = forgeImgSrc(photoIdentifier);
+
+  return (
+    <div className={className}>
+      {isFullResVisible && (
+        <HighResLayer
+          key={'high-res_' + photoIdentifier}
+          photoIdentifier={photoIdentifier}
+        />
+      )}
+      <ColorLayer
+        key={'color_' + photoIdentifier}
+        photoIdentifier={photoIdentifier}
+        className={stylesheet.image}
+      />
+      <img
+        data-image-type="base"
+        {...imgProps}
+        src={baseImageSrc}
+        className={classNames(stylesheet.image, imgProps.className)}
+      />
+    </div>
+  );
+}
+export function makeImageSwitcherView(props: Props): View {
+  const imgSrc = forgeImgSrc(props.photoIdentifier);
+  return {
+    key: props.photoIdentifier,
+    element: <ImageStack key={props.photoIdentifier} {...props} />,
+    preload: () => preloadImage(imgSrc),
+  };
+}