Merge branch 'develop' into fix/trim-moment-empty-content

thematters · Aug 23, 2024 · 4894fef · 4894fef
2 parents 38b8147 + 1c9f4a5
commit 4894fef
Show file tree

Hide file tree

Showing 19 changed files with 30 additions and 44 deletions.
diff --git a/src/common/utils/url.test.ts b/src/common/utils/url.test.ts
@@ -137,7 +137,7 @@ describe('utils/url/toSizedImageURL', () => {
         width: 72,
       })
     ).toBe(
-      'https://imagedelivery.net/abc/prod/image.jpeg/w=72,h=288,fit=scale-down'
+      'https://imagedelivery.net/abc/prod/image.jpeg/w=72,h=288,fit=scale-down,anim=false'
     )
 
     // width
@@ -147,7 +147,7 @@ describe('utils/url/toSizedImageURL', () => {
         width: 72,
       })
     ).toBe(
-      'https://imagedelivery.net/abc/prod/image.jpeg/w=72,h=288,fit=scale-down'
+      'https://imagedelivery.net/abc/prod/image.jpeg/w=72,h=288,fit=scale-down,anim=false'
     )
 
     // with width and height
@@ -157,7 +157,9 @@ describe('utils/url/toSizedImageURL', () => {
         width: 72,
         height: 72,
       })
-    ).toBe('https://imagedelivery.net/abc/prod/image.jpeg/w=72,h=72,fit=crop')
+    ).toBe(
+      'https://imagedelivery.net/abc/prod/image.jpeg/w=72,h=72,fit=crop,anim=false'
+    )
 
     // with width and height and ext
     expect(
@@ -167,15 +169,17 @@ describe('utils/url/toSizedImageURL', () => {
         height: 72,
         ext: 'webp',
       })
-    ).toBe('https://imagedelivery.net/abc/prod/image.webp/w=72,h=72,fit=crop')
+    ).toBe(
+      'https://imagedelivery.net/abc/prod/image.webp/w=72,h=72,fit=crop,anim=false'
+    )
 
-    // with width and height and disableAnimation
+    // with width and height and enableAnimation
     expect(
       toSizedImageURL({
         url: 'https://imagedelivery.net/abc/prod/image.gif',
         width: 72,
         height: 72,
-        disableAnimation: true,
+        enableAnimation: false,
       })
     ).toBe(
       'https://imagedelivery.net/abc/prod/image.gif/w=72,h=72,fit=crop,anim=false'

diff --git a/src/common/utils/url.ts b/src/common/utils/url.ts
@@ -32,7 +32,7 @@ interface ToSizedImageURLProps {
   width: ToSizedImageURLSize
   height?: ToSizedImageURLSize
   ext?: 'webp'
-  disableAnimation?: boolean
+  enableAnimation?: boolean
 }
 
 const changeExt = ({ key, ext }: { key: string; ext?: 'webp' }) => {
@@ -52,7 +52,7 @@ export const toSizedImageURL = ({
   width,
   height,
   ext,
-  disableAnimation,
+  enableAnimation,
 }: ToSizedImageURLProps) => {
   const assetDomain = process.env.NEXT_PUBLIC_CF_IMAGE_URL
     ? `${process.env.NEXT_PUBLIC_CF_IMAGE_URL}`
@@ -81,7 +81,7 @@ export const toSizedImageURL = ({
     ? `w=${width},h=${height},fit=crop`
     : `w=${width},h=${width * 4},fit=scale-down`
 
-  if (disableAnimation) {
+  if (!enableAnimation) {
     postfix += ',anim=false'
   }
 

diff --git a/src/components/ArticleDigest/AuthorSidebar/index.tsx b/src/components/ArticleDigest/AuthorSidebar/index.tsx
@@ -108,12 +108,7 @@ export const ArticleDigestAuthorSidebar = ({
       {showCover && cover && (
         <LinkWrapper {...path} disabled={isBanned}>
           <aside className={styles.cover}>
-            <ResponsiveImage
-              url={cover}
-              width={imgSize}
-              height={imgSize}
-              disableAnimation={true}
-            />
+            <ResponsiveImage url={cover} width={imgSize} height={imgSize} />
           </aside>
         </LinkWrapper>
       )}

diff --git a/src/components/ArticleDigest/Curated/index.tsx b/src/components/ArticleDigest/Curated/index.tsx
@@ -75,7 +75,6 @@ export const ArticleDigestCurated = ({
             url={cover || IMAGE_DEFAULT_CURATED}
             width={404}
             height={404}
-            disableAnimation={true}
           />
         </LinkWrapper>
       </section>

diff --git a/src/components/ArticleDigest/Feed/index.tsx b/src/components/ArticleDigest/Feed/index.tsx
@@ -153,7 +153,6 @@ const BaseArticleDigestFeed = ({
                 height={152}
                 smUpWidth={212}
                 smUpHeight={212}
-                disableAnimation={true}
                 loading={isFirstFold ? undefined : 'lazy'}
                 fetchPriority={isFirstFold ? 'high' : 'low'}
               />

diff --git a/src/components/ArticleDigest/Sidebar/index.tsx b/src/components/ArticleDigest/Sidebar/index.tsx
@@ -90,7 +90,6 @@ export const ArticleDigestSidebar = ({
               url={cover}
               width={hasBackground ? 336 : 144}
               height={hasBackground ? undefined : 144}
-              disableAnimation={true}
             />
           </aside>
         )}

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
@@ -104,6 +104,7 @@ export const Avatar = (props: AvatarProps) => {
         smUpWidth={240}
         smUpHeight={240}
         disabled={isFallback || inEditor}
+        enableAnimation
       />
 
       {isCivicLiker && !hasArchitectBadge && (

diff --git a/src/components/Book/Article/index.tsx b/src/components/Book/Article/index.tsx
@@ -73,7 +73,6 @@ const BookArticle: React.FC<BookArticleProps> = ({
             width={240}
             height={200}
             anonymous
-            disableAnimation={true}
           />
         </div>
       )}

diff --git a/src/components/Book/Collection/index.tsx b/src/components/Book/Collection/index.tsx
@@ -54,7 +54,6 @@ const BookCollection: React.FC<BookCollectionProps> = ({
           width={240}
           height={200}
           anonymous
-          disableAnimation={true}
         />
         {hasMask && (
           <div className={styles.mask}>

diff --git a/src/components/Book/Flat/index.tsx b/src/components/Book/Flat/index.tsx
@@ -39,7 +39,6 @@ const BookFlat: React.FC<BookFlatProps> = ({ title, cover, type }) => {
           width={100} // smaller size for color thief
           height={100}
           anonymous
-          disableAnimation={true}
         />
       </div>
 

diff --git a/src/components/CircleAvatar/index.tsx b/src/components/CircleAvatar/index.tsx
@@ -42,6 +42,7 @@ export const CircleAvatar = (props: CircleAvatarProps) => {
         width={144}
         height={144}
         disabled={isFallback || inEditor}
+        enableAnimation
       />
     </div>
   )

diff --git a/src/components/Editor/ListItem/index.tsx b/src/components/Editor/ListItem/index.tsx
@@ -24,7 +24,6 @@ const CoverIndicator = ({ cover }: { cover?: string | null }) => (
           url: cover,
           width: 72,
           height: 72,
-          disableAnimation: true,
         })}
         alt="cover"
       />

diff --git a/src/components/Editor/SetCover/Selector.tsx b/src/components/Editor/SetCover/Selector.tsx
@@ -57,7 +57,6 @@ const Selector: React.FC<SelectorProps> = ({
                   url: asset.path,
                   width: 72,
                   height: 72,
-                  disableAnimation: true,
                 })}
                 alt="cover"
               />

diff --git a/src/components/Editor/Sidebar/Cover/index.tsx b/src/components/Editor/Sidebar/Cover/index.tsx
@@ -30,7 +30,6 @@ const SidebarCover = ({ cover, disabled, ...restProps }: SidebarCoverProps) => {
                     url: cover,
                     width: 230,
                     height: 230,
-                    disableAnimation: true,
                   })}
                   alt="cover"
                 />

diff --git a/src/components/MomentDigest/Assets/index.tsx b/src/components/MomentDigest/Assets/index.tsx
@@ -1,7 +1,7 @@
 import 'photoswipe/dist/photoswipe.css'
 
 import gql from 'graphql-tag'
-import PhotoSwipe from 'photoswipe'
+import type PhotoSwipe from 'photoswipe'
 import { useEffect, useRef, useState } from 'react'
 import { Gallery, Item } from 'react-photoswipe-gallery'
 
@@ -115,10 +115,13 @@ const Assets = ({ moment }: { moment: MomentDigestAssetsMomentFragment }) => {
         {loadedAssets.map((asset) => (
           <Item
             key={asset.id}
-            original={asset.path}
+            original={toSizedImageURL({
+              url: asset.path,
+              width: 1366,
+            })}
             thumbnail={toSizedImageURL({
               url: asset.path,
-              width: width,
+              width,
             })}
             width={asset.width}
             height={asset.height}

diff --git a/src/components/ResponsiveImage/index.tsx b/src/components/ResponsiveImage/index.tsx
@@ -16,7 +16,7 @@ interface ResponsiveImageProps {
   disabled?: boolean
   loading?: 'eager' | 'lazy'
   anonymous?: boolean
-  disableAnimation?: boolean
+  enableAnimation?: boolean
   fetchPriority?: 'high' | 'low' | 'auto'
 }
 
@@ -29,15 +29,15 @@ const BaseResponsiveImage = ({
   disabled,
   loading,
   anonymous,
-  disableAnimation,
+  enableAnimation,
   fetchPriority,
 }: ResponsiveImageProps) => {
   const [error, setError] = useState(false)
   const [loaded, setLoaded] = useState(false)
 
   // eg: https://.../images/prod/avatar/b1bea2ab-112a-4cb9-8fa1-2703113751cc.gif/public
   const isGIF = /gif(\/|$)/i.test(url)
-  if (isGIF && !disableAnimation) {
+  if (isGIF && enableAnimation) {
     // override some fetch policy for animated GIF, work around some cloudflare images GIF re-sizing problems
     loading = 'lazy'
     fetchPriority = 'low'
@@ -62,7 +62,7 @@ const BaseResponsiveImage = ({
             url,
             width: smUpWidth,
             height: smUpHeight,
-            disableAnimation,
+            enableAnimation,
           })}
         />
       )}
@@ -72,7 +72,7 @@ const BaseResponsiveImage = ({
           url,
           width,
           height,
-          disableAnimation,
+          enableAnimation,
         })}
       />
 
@@ -82,15 +82,13 @@ const BaseResponsiveImage = ({
           url,
           width,
           height,
-          disableAnimation: !loaded || disableAnimation, // use true until loaded
+          enableAnimation: !loaded || !enableAnimation, // 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)
         }}
       />
@@ -115,7 +113,7 @@ export const ResponsiveImage = React.memo(
       prevProps.smUpWidth === props.smUpWidth &&
       prevProps.smUpHeight === props.smUpHeight &&
       prevProps.disabled === props.disabled &&
-      prevProps.disableAnimation === props.disableAnimation &&
+      prevProps.enableAnimation === props.enableAnimation &&
       prevProps.fetchPriority === props.fetchPriority
     )
   }

diff --git a/src/components/TagDigest/Feed/index.tsx b/src/components/TagDigest/Feed/index.tsx
@@ -121,7 +121,6 @@ const Feed = ({ tag, ...cardProps }: TagDigestFeedProps) => {
                   url={tag.cover || IMAGE_TAG_COVER.src}
                   width={144}
                   height={144}
-                  disableAnimation={true}
                 />
               </a>
             </Link>

diff --git a/src/components/TagDigest/Sidebar/index.tsx b/src/components/TagDigest/Sidebar/index.tsx
@@ -62,7 +62,6 @@ const Sidebar = ({ tag, ...cardProps }: TagDigestSidebarProps) => {
                 url={tag.cover || IMAGE_TAG_COVER.src}
                 width={144}
                 height={144}
-                disableAnimation={true}
               />
             </a>
           </Link>

diff --git a/src/views/Follow/Feed/FollowingRecommendArticle/index.tsx b/src/views/Follow/Feed/FollowingRecommendArticle/index.tsx
@@ -57,12 +57,7 @@ const RecommendArticle = ({ article, ...cardProps }: Props) => {
 
           {cover && (
             <section className={styles.cover}>
-              <ResponsiveImage
-                url={cover}
-                width={144}
-                height={144}
-                disableAnimation={true}
-              />
+              <ResponsiveImage url={cover} width={144} height={144} />
             </section>
           )}
         </section>