From 00b42e28b9914fb4b2c9859ec51f9fd506008c72 Mon Sep 17 00:00:00 2001
From: Iacami Gevaerd <enapupe@gmail.com>
Date: Thu, 9 Nov 2023 12:35:44 -0300
Subject: [PATCH] Updated public CDN to new media server [  #1013] (#1019)

* Updated public CDN to new media server [ fixes #1013]

* perf: defer loading volunteers avatar images

* fix: remove usage of MobileLoader and remove hard webp format
---
 .env                                          |  2 +-
 next.config.js                                | 17 ++---------------
 src/app/components/Volunteers.tsx             |  2 +-
 src/components/home/RecentMediaCard.tsx       |  6 +-----
 src/components/ui/FeatureCard/FeatureCard.tsx |  2 +-
 src/image-loader.js                           |  9 +++++++++
 src/js/sirv/util.ts                           |  7 ++++---
 7 files changed, 19 insertions(+), 26 deletions(-)
 create mode 100644 src/image-loader.js

diff --git a/.env b/.env
index 2f511258a..3020c7e95 100644
--- a/.env
+++ b/.env
@@ -16,7 +16,7 @@ AUTH0_MGMT_CLIENT_SECRET=send request to hello at openbeta.io
 # Must prefix with NEXT_PUBLIC_in order to expose vars to the browser
 # See https://nextjs.org/docs/basic-features/environment-variables
 
-NEXT_PUBLIC_CDN_URL=https://storage.googleapis.com/openbeta-staging
+NEXT_PUBLIC_CDN_URL=https://stg-media.openbeta.io
 
 NEXT_PUBLIC_API_SERVER=https://stg-api.openbeta.io
 
diff --git a/next.config.js b/next.config.js
index a53b926ac..5006d160f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,20 +1,7 @@
 module.exports = {
   images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'openbeta.sirv.com'
-      },
-      {
-        protocol: 'https',
-        hostname: 'openbeta-dev.sirv.com',
-        pathname: '*'
-      },
-      {
-        protocol: 'https',
-        hostname: 'storage.googleapis.com'
-      }
-    ]
+    loader: 'custom',
+    loaderFile: './src/image-loader.js'
   },
   typescript: {
     ignoreBuildErrors: false
diff --git a/src/app/components/Volunteers.tsx b/src/app/components/Volunteers.tsx
index 1e036239d..bf555e5d2 100644
--- a/src/app/components/Volunteers.tsx
+++ b/src/app/components/Volunteers.tsx
@@ -56,7 +56,7 @@ const Profile: React.FC<GithubProfile> = ({
   >
     <div className='avatar'>
       <div className='w-8 rounded-box'>
-        <img src={avatar_url} alt={name} />
+        <img loading='lazy' src={avatar_url} alt={name} />
       </div>
     </div>
     <div className='text-sm uppercase text-base-content pr-4'>{name}</div>
diff --git a/src/components/home/RecentMediaCard.tsx b/src/components/home/RecentMediaCard.tsx
index 688085dd6..dd0e4d21d 100644
--- a/src/components/home/RecentMediaCard.tsx
+++ b/src/components/home/RecentMediaCard.tsx
@@ -4,7 +4,6 @@ import Image from 'next/image'
 import clx from 'classnames'
 import Card from '../ui/Card/Card'
 import TagList from '../media/TagList'
-import { MobileLoader } from '../../js/sirv/util'
 import { MediaWithTags } from '../../js/types'
 import { getUploadDateSummary } from '../../js/utils'
 import { PostHeader } from './Post'
@@ -38,10 +37,7 @@ export const RecentImageCard = ({
         <div className='relative block w-full h-full'>
           <ATagWrapper href={firstUrl}>
             <Image
-              src={MobileLoader({
-                src: mediaUrl,
-                width: MOBILE_IMAGE_MAX_WIDITH
-              })}
+              src={mediaUrl}
               width={MOBILE_IMAGE_MAX_WIDITH}
               height={MOBILE_IMAGE_MAX_WIDITH / imageRatio}
               sizes={`${MOBILE_IMAGE_MAX_WIDITH}px`}
diff --git a/src/components/ui/FeatureCard/FeatureCard.tsx b/src/components/ui/FeatureCard/FeatureCard.tsx
index 3a2d79ac9..2e76b5ef8 100644
--- a/src/components/ui/FeatureCard/FeatureCard.tsx
+++ b/src/components/ui/FeatureCard/FeatureCard.tsx
@@ -12,7 +12,7 @@ function FeatureCard ({ area }: { area: AreaType }): JSX.Element | null {
 
   if (media == null || media.length === 0) return null
 
-  const imageUrl = `${CLIENT_CONFIG.CDN_BASE_URL}${shuffle(media)[0].mediaUrl}?format=webp&h=300&q=90`
+  const imageUrl = `${CLIENT_CONFIG.CDN_BASE_URL}${shuffle(media)[0].mediaUrl}?h=300&q=90`
 
   const image = {
     url: imageUrl,
diff --git a/src/image-loader.js b/src/image-loader.js
new file mode 100644
index 000000000..2694852b1
--- /dev/null
+++ b/src/image-loader.js
@@ -0,0 +1,9 @@
+const BASE_URL = process.env.NEXT_PUBLIC_CDN_URL
+const imageLoader = ({ src, width, quality }) => {
+  if (src.includes(BASE_URL)) {
+    return src
+  }
+  return `${process.env.NEXT_PUBLIC_CDN_URL}${src}?w=${width}&q=${quality || 75}`
+}
+
+export default imageLoader
diff --git a/src/js/sirv/util.ts b/src/js/sirv/util.ts
index 68a386f2c..98f652f68 100644
--- a/src/js/sirv/util.ts
+++ b/src/js/sirv/util.ts
@@ -1,23 +1,24 @@
 import { ImageLoaderProps } from 'next/image'
 import { CLIENT_CONFIG } from '../configs/clientConfig'
 
+const DEFAULT_IMAGE_QUALITY = 90
 /**
  * Custom NextJS image loader
  */
 export const DefaultLoader = ({ src, width, quality }: ImageLoaderProps): string => {
-  return `${CLIENT_CONFIG.CDN_BASE_URL}${src}?format=webp&w=${width}&q=${quality ?? '90'}`
+  return `${CLIENT_CONFIG.CDN_BASE_URL}${src}?w=${width}&q=${quality ?? DEFAULT_IMAGE_QUALITY}`
 }
 
 /**
  * Desktop preview loader
  */
 export const DesktopPreviewLoader = ({ src, width, quality }: ImageLoaderProps): string => {
-  return `${CLIENT_CONFIG.CDN_BASE_URL}${src}?format=webp&thumbnail=300&q=${quality ?? '90'}`
+  return `${CLIENT_CONFIG.CDN_BASE_URL}${src}?thumbnail=300&q=${quality ?? DEFAULT_IMAGE_QUALITY}`
 }
 
 /**
  * Custom NextJS image loader for mobile
  */
 export const MobileLoader = ({ src, width = 650, quality }: ImageLoaderProps): string => {
-  return `${CLIENT_CONFIG.CDN_BASE_URL}${src}?format=webp&w=${width}&q=${quality ?? '90'}`
+  return `${CLIENT_CONFIG.CDN_BASE_URL}${src}?w=${width}&q=${quality ?? DEFAULT_IMAGE_QUALITY}`
 }