From 87122d69b39e362ef255248d2a626399553a5065 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 25 Sep 2023 18:37:48 -0500
Subject: [PATCH] Size down images when not in Pro Mode

---
 next.config.js                                |  2 +-
 src/app/(static)/home-image/route.tsx         |  4 ++--
 src/app/(static)/p/[photoId]/image/route.tsx  |  4 ++--
 src/app/(static)/t/[tag]/image/route.tsx      |  3 +--
 .../(static)/template-image-tight/route.tsx   |  3 +--
 src/app/(static)/template-image/route.tsx     |  3 +--
 src/photo/actions.ts                          |  6 ++++++
 .../image-response/HomeImageResponse.tsx      |  3 ---
 .../image-response/PhotoImageResponse.tsx     |  3 ---
 src/photo/image-response/TagImageResponse.tsx |  3 ---
 .../image-response/TemplateImageResponse.tsx  |  3 ---
 .../components/ImagePhotoGrid.tsx             |  6 ++----
 src/services/blob.ts                          |  6 ++++--
 src/utility/image.ts                          | 20 +++++++++----------
 14 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/next.config.js b/next.config.js
index 8d492c98..17f9a5df 100644
--- a/next.config.js
+++ b/next.config.js
@@ -6,7 +6,7 @@ const STORE_ID = process.env.BLOB_READ_WRITE_TOKEN?.match(
 
 const nextConfig = {
   images: {
-    imageSizes: [200, 400, 1050, 1200],
+    imageSizes: [200, 400, 1050],
     remotePatterns: [{
       protocol: 'https',
       hostname: `${STORE_ID}.public.blob.vercel-storage.com`,
diff --git a/src/app/(static)/home-image/route.tsx b/src/app/(static)/home-image/route.tsx
index 3e1288af..0014e91d 100644
--- a/src/app/(static)/home-image/route.tsx
+++ b/src/app/(static)/home-image/route.tsx
@@ -9,7 +9,7 @@ import { ImageResponse } from 'next/server';
 
 export const runtime = 'edge';
 
-export async function GET(request: Request) {
+export async function GET() {
   const [
     photos,
     headers,
@@ -21,7 +21,7 @@ export async function GET(request: Request) {
   const { width, height } = IMAGE_OG_SMALL_SIZE;
 
   return new ImageResponse(
-    <HomeImageResponse {...{ photos, request, width, height }}/>,
+    <HomeImageResponse {...{ photos, width, height }}/>,
     { width, height, headers },
   );
 }
diff --git a/src/app/(static)/p/[photoId]/image/route.tsx b/src/app/(static)/p/[photoId]/image/route.tsx
index a0bf138b..1ff41876 100644
--- a/src/app/(static)/p/[photoId]/image/route.tsx
+++ b/src/app/(static)/p/[photoId]/image/route.tsx
@@ -7,7 +7,7 @@ import { ImageResponse } from 'next/server';
 
 export const runtime = 'edge';
 
-export async function GET(request: Request, context: any){
+export async function GET(_request: Request, context: any){
   const [
     photo,
     { fontFamily, fonts },
@@ -23,7 +23,7 @@ export async function GET(request: Request, context: any){
   const { width, height } = IMAGE_OG_SIZE;
   
   return new ImageResponse(
-    <PhotoImageResponse {...{ photo, request, width, height, fontFamily }} />,
+    <PhotoImageResponse {...{ photo, width, height, fontFamily }} />,
     { width, height, fonts, headers },
   );
 }
diff --git a/src/app/(static)/t/[tag]/image/route.tsx b/src/app/(static)/t/[tag]/image/route.tsx
index 226dfafa..e9175e47 100644
--- a/src/app/(static)/t/[tag]/image/route.tsx
+++ b/src/app/(static)/t/[tag]/image/route.tsx
@@ -10,7 +10,7 @@ import { ImageResponse } from 'next/server';
 
 export const runtime = 'edge';
 
-export async function GET(request: Request, context: any) {
+export async function GET(_request: Request, context: any) {
   const tag = context.params.tag as string;
 
   const [
@@ -29,7 +29,6 @@ export async function GET(request: Request, context: any) {
     <TagImageResponse {...{
       tag,
       photos,
-      request,
       width,
       height,
       fontFamily,
diff --git a/src/app/(static)/template-image-tight/route.tsx b/src/app/(static)/template-image-tight/route.tsx
index 45007afe..3d325b9c 100644
--- a/src/app/(static)/template-image-tight/route.tsx
+++ b/src/app/(static)/template-image-tight/route.tsx
@@ -11,7 +11,7 @@ import { ImageResponse } from 'next/server';
 
 export const runtime = 'edge';
 
-export async function GET(request: Request) {
+export async function GET() {
   const [
     photos,
     { fontFamily, fonts },
@@ -31,7 +31,6 @@ export async function GET(request: Request) {
     (
       <TemplateImageResponse {...{
         photos,
-        request,
         includeHeader: false,
         outerMargin: 0,
         width,
diff --git a/src/app/(static)/template-image/route.tsx b/src/app/(static)/template-image/route.tsx
index 101b39b4..e670ffde 100644
--- a/src/app/(static)/template-image/route.tsx
+++ b/src/app/(static)/template-image/route.tsx
@@ -11,7 +11,7 @@ import { ImageResponse } from 'next/server';
 
 export const runtime = 'edge';
 
-export async function GET(request: Request) {
+export async function GET() {
   const [
     photos,
     { fontFamily, fonts },
@@ -28,7 +28,6 @@ export async function GET(request: Request) {
     (
       <TemplateImageResponse {...{
         photos,
-        request,
         width,
         height,
         fontFamily,
diff --git a/src/photo/actions.ts b/src/photo/actions.ts
index 3ea24b75..cc611a95 100644
--- a/src/photo/actions.ts
+++ b/src/photo/actions.ts
@@ -16,6 +16,8 @@ import {
   revalidatePhotosAndBlobTag,
   revalidatePhotosTag,
 } from '@/cache';
+import { IS_PRO_MODE } from '@/site/config';
+import { getNextImageUrlForRequest } from '@/utility/image';
 
 export async function createPhotoAction(formData: FormData) {
   const photo = convertFormDataToPhoto(formData, true);
@@ -23,6 +25,10 @@ export async function createPhotoAction(formData: FormData) {
   const updatedUrl = await convertUploadToPhoto(
     photo.url,
     photo.id,
+    !IS_PRO_MODE
+      ? getNextImageUrlForRequest(photo.url, 3840, 90)
+      : undefined,
+    !IS_PRO_MODE ? 'webp' : undefined,
   );
 
   if (updatedUrl) { photo.url = updatedUrl; }
diff --git a/src/photo/image-response/HomeImageResponse.tsx b/src/photo/image-response/HomeImageResponse.tsx
index 8ade1cd8..5479dca4 100644
--- a/src/photo/image-response/HomeImageResponse.tsx
+++ b/src/photo/image-response/HomeImageResponse.tsx
@@ -4,12 +4,10 @@ import ImagePhotoGrid from './components/ImagePhotoGrid';
 
 export default function HomeImageResponse({
   photos,
-  request,
   width,
   height,
 }: {
   photos: Photo[]
-  request: Request
   width: number
   height: number
 }) {
@@ -18,7 +16,6 @@ export default function HomeImageResponse({
       <ImagePhotoGrid
         {...{
           photos,
-          request,
           width,
           height,
         }}
diff --git a/src/photo/image-response/PhotoImageResponse.tsx b/src/photo/image-response/PhotoImageResponse.tsx
index ae5d54c0..01ac40db 100644
--- a/src/photo/image-response/PhotoImageResponse.tsx
+++ b/src/photo/image-response/PhotoImageResponse.tsx
@@ -8,13 +8,11 @@ import ImageContainer from './components/ImageContainer';
 
 export default function PhotoImageResponse({
   photo,
-  request,
   width,
   height,
   fontFamily,
 }: {
   photo: Photo
-  request: Request
   width: NextImageWidth
   height: number
   fontFamily: string
@@ -23,7 +21,6 @@ export default function PhotoImageResponse({
     <ImageContainer {...{ width, height }}>
       <ImagePhotoGrid {...{
         photos: [photo],
-        request,
         width,
         height,
         imagePosition: 'top',
diff --git a/src/photo/image-response/TagImageResponse.tsx b/src/photo/image-response/TagImageResponse.tsx
index 61c7a453..cc5d890c 100644
--- a/src/photo/image-response/TagImageResponse.tsx
+++ b/src/photo/image-response/TagImageResponse.tsx
@@ -7,14 +7,12 @@ import ImageContainer from './components/ImageContainer';
 export default function TagImageResponse({
   tag,
   photos,
-  request,
   width,
   height,
   fontFamily,
 }: {
   tag: string,
   photos: Photo[]
-  request: Request
   width: number
   height: number
   fontFamily: string
@@ -28,7 +26,6 @@ export default function TagImageResponse({
       <ImagePhotoGrid
         {...{
           photos,
-          request,
           width,
           height,
         }}
diff --git a/src/photo/image-response/TemplateImageResponse.tsx b/src/photo/image-response/TemplateImageResponse.tsx
index 396f2465..a82ea469 100644
--- a/src/photo/image-response/TemplateImageResponse.tsx
+++ b/src/photo/image-response/TemplateImageResponse.tsx
@@ -5,7 +5,6 @@ import ImagePhotoGrid from './components/ImagePhotoGrid';
 
 export default function TemplateImageResponse({
   photos,
-  request,
   width,
   height,
   fontFamily,
@@ -15,7 +14,6 @@ export default function TemplateImageResponse({
   verticalOffset,
 }: {
   photos: Photo[]
-  request: Request
   width: number
   height: number
   fontFamily: string
@@ -91,7 +89,6 @@ export default function TemplateImageResponse({
       }}>
         <ImagePhotoGrid {...{
           photos,
-          request,
           width: innerWidth,
           height: includeHeader
             ? height - 130 - outerMargin * 2
diff --git a/src/photo/image-response/components/ImagePhotoGrid.tsx b/src/photo/image-response/components/ImagePhotoGrid.tsx
index 8d112c42..061bf88d 100644
--- a/src/photo/image-response/components/ImagePhotoGrid.tsx
+++ b/src/photo/image-response/components/ImagePhotoGrid.tsx
@@ -5,14 +5,12 @@ import { getNextImageUrlForRequest } from '@/utility/image';
 
 export default function ImagePhotoGrid({
   photos,
-  request,
   width,
   height,
   imagePosition = 'center',
   gap = 4,
 }: {
   photos: Photo[]
-  request: Request
   width: number
   height: number
   imagePosition?: 'center' | 'top'
@@ -24,7 +22,7 @@ export default function ImagePhotoGrid({
   else if (photos.length >= 4) { count = 4; }
   else if (photos.length >= 2) { count = 2; }
 
-  const imageQuality = count <= 2 ? 1050 : 400;
+  const nextImageWidth = count <= 2 ? 1050 : 640;
 
   let rows = 1;
   if (count > 12) { rows = 4; }
@@ -57,7 +55,7 @@ export default function ImagePhotoGrid({
           }}
         >
           <img {...{
-            src: getNextImageUrlForRequest(url, request, imageQuality),
+            src: getNextImageUrlForRequest(url, nextImageWidth),
             style: {
               width: '100%',
               ...imagePosition === 'center' && {
diff --git a/src/services/blob.ts b/src/services/blob.ts
index 51b4b8d0..05a2e488 100644
--- a/src/services/blob.ts
+++ b/src/services/blob.ts
@@ -48,12 +48,14 @@ export const uploadPhotoFromClient = async (
 export const convertUploadToPhoto = async (
   uploadUrl: string,
   photoId?: string,
+  resizeUrl?: string,
+  resizeExtension?: string
 ) => {
-  const file = await fetch(uploadUrl)
+  const file = await fetch(resizeUrl ?? uploadUrl)
     .then((response) => response.blob());
 
   const fileName = photoId ? `${PREFIX_PHOTO}-${photoId}` : `${PREFIX_PHOTO}`;
-  const fileExtension = getExtensionFromBlobUrl(uploadUrl);
+  const fileExtension = resizeExtension ?? getExtensionFromBlobUrl(uploadUrl);
 
   if (file) {
     const { url } = await put(
diff --git a/src/utility/image.ts b/src/utility/image.ts
index 25d74128..ebc0e5f6 100644
--- a/src/utility/image.ts
+++ b/src/utility/image.ts
@@ -1,21 +1,19 @@
+import { BASE_URL } from '@/site/config';
+
 // Must be explicity defined next.config.js `imageSizes`
-export type NextImageWidth = 200 | 400 | 1050 | 1200;
+// or `deviceSizes` ([640, 750, 828, 1080, 1200, 1920, 2048, 3840])
+export type NextImageWidth =
+  200 | 400 | 1050;
+export type NextImageDeviceSize =
+  640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840;
 
 export const getNextImageUrlForRequest = (
   imageUrl: string,
-  request: Request,
-  width: NextImageWidth,
+  width: NextImageWidth | NextImageDeviceSize,
   quality = 75,
 ) => {
-  const protocol = (request.headers.get('x-forwarded-proto') || 'https')
-    .split(',')[0];
-  
-  const host = (
-    request.headers.get('x-forwarded-host') ||
-    request.headers.get('host')
-  );
+  const url = new URL(`${BASE_URL}/_next/image`);
 
-  const url = new URL(`${protocol}://${host}/_next/image`);
   url.searchParams.append('url', imageUrl);
   url.searchParams.append('w', width.toString());
   url.searchParams.append('q', quality.toString());