fix: bugfix for facebook avatar (DimensionDev#5755)

* fix: bugfix for facebook avatar * chore: reply review
dmrazzy · Mar 2, 2022 · 84b8391 · 84b8391
1 parent 4b07039
commit 84b8391
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarInFacebook.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarInFacebook.tsx
@@ -1,7 +1,7 @@
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { searchFacebookAvatarOnMobileSelector, searchFacebookAvatarSelector } from '../../utils/selector'
 import { createReactRootShadowed, MaskMessages, startWatch } from '../../../../utils'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import type { NFTAvatarEvent } from '@masknet/shared-base'
 import { max, pickBy } from 'lodash-unified'
 import { useCurrentVisitingIdentity } from '../../../../components/DataSource/useActivatedUI'
@@ -161,15 +161,15 @@ function NFTAvatarInFacebook() {
     useEffect(() => setAvatar(_avatar), [_avatar, location])
 
     // #region clear white border
-    useEffect(() => {
+    useLayoutEffect(() => {
         const node = searchFacebookAvatarSelector().closest<HTMLDivElement>(3).evaluate()
         if (!node) return
         if (showAvatar) {
             node.setAttribute('style', 'padding: 0px')
         } else {
             node.removeAttribute('style')
         }
-    }, [showAvatar])
+    })
     // #endregion
 
     if (!avatar || !size || !showAvatar) return null

diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarInTimeline.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/NFTAvatarInTimeline.tsx
@@ -6,14 +6,53 @@ import { Flags } from '../../../../../shared'
 import { NFTBadgeTimeline } from '../../../../plugins/Avatar/SNSAdaptor/NFTBadgeTimeline'
 import { isMobileFacebook } from '../../utils/isMobile'
 import { RSS3_KEY_SNS } from '../../../../plugins/Avatar/constants'
+import { memo } from 'react'
+import { makeStyles } from '@masknet/theme'
+
+const useStyles = makeStyles()(() => ({
+    root: {
+        transform: 'scale(1)!important',
+    },
+}))
+
+const TimelineRainbow = memo(
+    ({ userId, avatarId, width, height }: { userId: string; avatarId: string; width: number; height: number }) => {
+        const { classes } = useStyles()
+        return (
+            <div
+                style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    zIndex: 2,
+                }}>
+                <NFTBadgeTimeline
+                    userId={userId}
+                    avatarId={avatarId}
+                    width={width}
+                    height={height}
+                    classes={classes}
+                    snsKey={RSS3_KEY_SNS.FACEBOOK}
+                />
+            </div>
+        )
+    },
+)
 
 function getFacebookId(element: HTMLElement | SVGElement) {
     const node = (isMobileFacebook ? element.firstChild : element.parentNode?.parentNode) as HTMLLinkElement
     if (!node) return ''
     const url = new URL(node.href)
 
-    if (url.pathname === '/profile.php' && url.searchParams.get('id'))
+    if (url.pathname === '/profile.php' && url.searchParams.get('id')) {
         return url.searchParams.get(isMobileFacebook ? 'lst' : 'id')
+    }
+
+    if (url.pathname.includes('/groups')) {
+        const match = url.pathname.match(/\/user\/(\w+)\//)
+        if (!match) return ''
+        return match[1]
+    }
 
     return url.pathname.replace('/', '')
 }
@@ -45,12 +84,11 @@ function _(selector: () => LiveSelector<HTMLElement | SVGElement, false>, signal
                             top: 0,
                             zIndex: 2,
                         }}>
-                        <NFTBadgeTimeline
+                        <TimelineRainbow
                             userId={facebookId}
                             avatarId={info.avatarId}
                             width={info.width - 4}
                             height={info.height - 4}
-                            snsKey={RSS3_KEY_SNS.FACEBOOK}
                         />
                     </div>,
                 )

diff --git a/packages/mask/src/social-network-adaptor/facebook.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/facebook.com/utils/selector.ts
@@ -15,7 +15,9 @@ export const searchUserIdOnMobileSelector: () => LiveSelector<HTMLAnchorElement,
     querySelector<HTMLAnchorElement>('div[data-sigil$="profile"] a')
 
 export const searchAvatarSelector: () => LiveSelector<HTMLImageElement, true> = () =>
-    querySelector<HTMLImageElement>('[role="link"] [role="img"] image, [role="button"] [role="img"] image')
+    querySelector<HTMLImageElement>(
+        '[role="main"] [role="link"] [role="img"] image, [role="main"] [role="button"] [role="img"] image',
+    )
 
 export const searchNickNameSelector: () => LiveSelector<HTMLHeadingElement, true> = () =>
     querySelector<HTMLHeadingElement>('span[dir="auto"] div h1')
@@ -43,13 +45,15 @@ export const searchFacebookAvatarListSelector = () =>
 export const searchFacebookAvatarMobileListSelector = () => querySelector('#nuxChoosePhotoButton').closest<E>(6)
 
 export const searchFacebookAvatarSelector = () =>
-    querySelector('[role="button"] svg[role="img"], [role="link"] svg[role="img"]')
+    querySelector('[role="main"] [role="button"] svg[role="img"],[role="main"] [role="link"] svg[role="img"]')
 
 export const searchFacebookAvatarOnMobileSelector = () =>
     querySelector('[data-sigil="timeline-cover"] i[aria-label$="picture"]')
 
 export const searchFaceBookPostAvatarSelector = () =>
-    new LiveSelector<SVGElement, false>().querySelectorAll<SVGElement>('[type="nested/pressable"] svg')
+    new LiveSelector<SVGElement, false>().querySelectorAll<SVGElement>(
+        '[type="nested/pressable"] > a > div > svg, ul div[role="article"] a > div > svg[role="none"]',
+    )
 
 export const searchFaceBookPostAvatarOnMobileSelector = () => querySelectorAll('[data-gt=\'{"tn":"~"}\']')