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

@@ -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
 

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

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>

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`}

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,

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

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}`
 }