Merge pull request #4009 from thematters/br/v4.27.1

HotRelease/v4.27.1
thematters · Nov 16, 2023 · fe4102c · fe4102c
2 parents 512d2d7 + 4d9a4ef
commit fe4102c
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "4.27.0",
+  "version": "4.27.1",
   "description": "codebase of Matters' website",
   "sideEffects": false,
   "author": "Matters <[email protected]>",

diff --git a/src/components/ArticleDigest/Feed/index.tsx b/src/components/ArticleDigest/Feed/index.tsx
@@ -28,6 +28,7 @@ export type ArticleDigestFeedControls = {
   hasHeader?: boolean
   hasCircle?: boolean
   hasAuthor?: boolean
+  isFirstFold?: boolean
 }
 
 export type ArticleDigestFeedProps = {
@@ -48,6 +49,8 @@ const BaseArticleDigestFeed = ({
   onClick,
   onClickAuthor,
 
+  isFirstFold = false,
+
   utm_source,
   utm_medium,
 
@@ -158,6 +161,8 @@ const BaseArticleDigestFeed = ({
                 smUpWidth={212}
                 smUpHeight={212}
                 disableAnimation={true}
+                loading={isFirstFold ? undefined : 'lazy'}
+                fetchPriority={isFirstFold ? 'high' : 'low'}
               />
             </div>
           </LinkWrapper>

diff --git a/src/components/Dialogs/ShareDialog/Copy.tsx b/src/components/Dialogs/ShareDialog/Copy.tsx
@@ -1,17 +1,28 @@
+import { useContext } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
+import { REFERRAL_QUERY_REFERRAL_KEY } from '~/common/enums'
 import { analytics } from '~/common/utils'
-import { CopyToClipboard, IconLink16, TextIcon } from '~/components'
+import {
+  CopyToClipboard,
+  IconLink16,
+  TextIcon,
+  ViewerContext,
+} from '~/components'
 
 import styles from './styles.module.css'
 
 const Copy = ({ link }: { link: string }) => {
   const intl = useIntl()
+  const viewer = useContext(ViewerContext)
 
   // append utm_source to link
   const utm_source = 'share_copy'
   const url = new URL(link)
   url.searchParams.append('utm_source', utm_source)
+  if (viewer.userName) {
+    url.searchParams.append(REFERRAL_QUERY_REFERRAL_KEY, viewer.userName)
+  }
   link = url.toString()
 
   return (

diff --git a/src/components/ResponsiveImage/index.tsx b/src/components/ResponsiveImage/index.tsx
@@ -17,6 +17,7 @@ interface ResponsiveImageProps {
   loading?: 'eager' | 'lazy'
   anonymous?: boolean
   disableAnimation?: boolean
+  fetchPriority?: 'high' | 'low' | 'auto'
 }
 
 const BaseResponsiveImage = ({
@@ -29,14 +30,24 @@ const BaseResponsiveImage = ({
   loading,
   anonymous,
   disableAnimation,
+  fetchPriority,
 }: ResponsiveImageProps) => {
   const [error, setError] = useState(false)
+  const [loaded, setLoaded] = useState(false)
 
-  // const isGIF = /gif/i.test(url)
+  // eg: https://.../images/prod/avatar/b1bea2ab-112a-4cb9-8fa1-2703113751cc.gif/public
+  const isGIF = /gif(\/|$)/i.test(url)
+  if (isGIF && !disableAnimation) {
+    // override some fetch policy for animated GIF, work around some cloudflare images GIF re-sizing problems
+    loading = 'lazy'
+    fetchPriority = 'low'
+  }
 
   // Fallback to the raw `url` if manually disable or responsive image is failed to load
   if (disabled || error) {
-    return <img src={url} loading={loading} alt="" />
+    return (
+      <img src={url} loading={loading} fetchPriority={fetchPriority} alt="" />
+    )
   }
 
   return (
@@ -45,17 +56,15 @@ const BaseResponsiveImage = ({
       data-test-id={TEST_ID.RESPONSIVE_IMG}
     >
       {smUpWidth && (
-        <>
-          <source
-            media="(min-width: 475px)"
-            srcSet={toSizedImageURL({
-              url,
-              width: smUpWidth,
-              height: smUpHeight,
-              disableAnimation,
-            })}
-          />
-        </>
+        <source
+          media="(min-width: 475px)"
+          srcSet={toSizedImageURL({
+            url,
+            width: smUpWidth,
+            height: smUpHeight,
+            disableAnimation,
+          })}
+        />
       )}
 
       <source
@@ -69,10 +78,21 @@ const BaseResponsiveImage = ({
 
       <img
         src={url}
-        srcSet={toSizedImageURL({ url, width, height, disableAnimation })}
+        srcSet={toSizedImageURL({
+          url,
+          width,
+          height,
+          disableAnimation: !loaded || disableAnimation, // use true until loaded
+        })}
         loading={loading}
         alt=""
         crossOrigin={anonymous ? 'anonymous' : undefined}
+        fetchPriority={fetchPriority}
+        onLoad={() => {
+          // console.log(`img onload:`)
+          // this.srcSet = toSizedImageURL({ url, width, height, disableAnimation })
+          setLoaded(true)
+        }}
       />
     </picture>
   )
@@ -95,7 +115,8 @@ export const ResponsiveImage = React.memo(
       prevProps.smUpWidth === props.smUpWidth &&
       prevProps.smUpHeight === props.smUpHeight &&
       prevProps.disabled === props.disabled &&
-      prevProps.disableAnimation === props.disableAnimation
+      prevProps.disableAnimation === props.disableAnimation &&
+      prevProps.fetchPriority === props.fetchPriority
     )
   }
 ) as MemoizedResponsiveImage
diff --git a/src/definitions/images.d.ts b/src/definitions/images.d.ts
@@ -6,3 +6,9 @@ declare module '*.svg' {
   export const ReactComponent: FunctionComponent<SVGProps<HTMLOrSVGElement>>
   export default url
 }
+
+declare namespace React {
+  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    fetchPriority?: 'high' | 'low' | 'auto'
+  }
+}
diff --git a/src/views/Home/Announcements/Carousel/index.tsx b/src/views/Home/Announcements/Carousel/index.tsx
@@ -130,11 +130,18 @@ const Carousel = ({ items }: CarouselProps) => {
             const title = (translatedItem?.title ?? item.title) || ''
             const itemLink = (translatedItem?.link ?? item.link) || ''
             const itemContent = translatedItem?.content ?? item.content
+            const isFirstFold = i === 0
+
             return (
               <div key={item.id} className={styles.slide}>
                 <Card htmlHref={itemLink} spacing={[0, 0]} bgActiveColor="none">
                   <div className={styles.content}>
-                    <ResponsiveImage url={item.cover} width={1376} />
+                    <ResponsiveImage
+                      url={item.cover}
+                      width={1376}
+                      loading={isFirstFold ? undefined : 'lazy'}
+                      fetchPriority={isFirstFold ? 'high' : 'low'}
+                    />
                     <h3>{title}</h3>
                     <p>{itemContent}</p>
                   </div>

diff --git a/src/views/Home/Feed/MainFeed/index.tsx b/src/views/Home/Feed/MainFeed/index.tsx
@@ -200,6 +200,7 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
             const { Feed } = edge
             return <Feed key={edge.__typename + i} />
           }
+          const isFirstFold = i <= 3 // TODO: better guess'ing of first fold on different screens
 
           return (
             <List.Item key={`${sortBy}:${edge.node.id}`}>
@@ -224,6 +225,7 @@ const MainFeed = ({ feedSortType: sortBy }: MainFeedProps) => {
                     id: edge.node.author.id,
                   })
                 }}
+                isFirstFold={isFirstFold}
               />
               <CardExposureTracker
                 contentType="article"