WIP, avi not working on web

src/components/dialogs/nudges/TenMillion.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import {View} from 'react-native'
 import ViewShot from 'react-native-view-shot'
+import {Image} from 'expo-image'
 import {moderateProfile} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {getCanvas} from '#/lib/canvas'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {isNative} from '#/platform/detection'
@@ -32,6 +34,7 @@ import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Ima
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
+const DEBUG = false
 const RATIO = 8 / 10
 const WIDTH = 2000
 const HEIGHT = WIDTH * RATIO
@@ -47,6 +50,22 @@ function getFontSize(count: number) {
   }
 }
 
+function Frame({children}: {children: React.ReactNode}) {
+  return (
+    <View
+      style={[
+        a.relative,
+        a.w_full,
+        a.overflow_hidden,
+        {
+          paddingTop: '80%',
+        },
+      ]}>
+      {children}
+    </View>
+  )
+}
+
 export function TenMillion() {
   const t = useTheme()
   const lightTheme = useTheme('light')
@@ -54,7 +73,6 @@ export function TenMillion() {
   const {controls} = useContext()
   const {gtMobile} = useBreakpoints()
   const {openComposer} = useComposerControls()
-  const imageRef = React.useRef<ViewShot>(null)
   const {currentAccount} = useSession()
   const {isLoading: isProfileLoading, data: profile} = useProfileQuery({
     did: currentAccount!.did,
@@ -65,14 +83,18 @@ export function TenMillion() {
       ? moderateProfile(profile, moderationOpts)
       : undefined
   }, [profile, moderationOpts])
+  const [uri, setUri] = React.useState<string | null>(null)
 
-  const isLoading = isProfileLoading || !moderation || !profile
+  const isLoadingData = isProfileLoading || !moderation || !profile
+  const isLoadingImage = !uri
 
-  const userNumber = 56738
+  const userNumber = 56738 // TODO
+
+  const captureInProgress = React.useRef(false)
+  const imageRef = React.useRef<ViewShot>(null)
 
   const share = () => {
-    if (imageRef.current && imageRef.current.capture) {
+    if (uri) {
-      imageRef.current.capture().then(uri => {
       controls.tenMillion.close(() => {
         setTimeout(() => {
           openComposer({
@@ -87,41 +109,52 @@ export function TenMillion() {
           })
         }, 1e3)
       })
-      })
     }
   }
 
-  return (
+  const onCanvasReady = async () => {
-    <Dialog.Outer control={controls.tenMillion}>
+    if (
-      <Dialog.Handle />
+      imageRef.current &&
+      imageRef.current.capture &&
+      !captureInProgress.current
+    ) {
+      captureInProgress.current = true
+      const uri = await imageRef.current.capture()
+      setUri(uri)
+    }
+  }
 
-      <Dialog.ScrollableInner
+  const download = async () => {
-        label={_(msg`Ten Million`)}
+    if (uri) {
-        style={[
+      const canvas = await getCanvas(uri)
-          {
+      const imgHref = canvas
-            padding: 0,
+        .toDataURL('image/png')
-          },
+        .replace('image/png', 'image/octet-stream')
-          // gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+      const link = document.createElement('a')
-        ]}>
+      link.setAttribute('download', `Bluesky 10M Users.png`)
+      link.setAttribute('href', imgHref)
+      link.click()
+    }
+  }
+
+  const canvas = isLoadingData ? null : (
     <View
       style={[
-            a.rounded_md,
+        a.absolute,
         a.overflow_hidden,
-            isNative && {
+        DEBUG
-              borderTopLeftRadius: 40,
+          ? {
-              borderTopRightRadius: 40,
+              width: 600,
+              height: 600 * RATIO,
+            }
+          : {
+              width: 1,
+              height: 1,
             },
       ]}>
+      <View style={{width: 600}}>
         <ThemeProvider theme="light">
-            <View
+          <Frame>
-              style={[
-                a.relative,
-                a.w_full,
-                a.overflow_hidden,
-                {
-                  paddingTop: '80%',
-                },
-              ]}>
             <ViewShot
               ref={imageRef}
               options={{width: WIDTH, height: HEIGHT}}
@@ -143,9 +176,6 @@ export function TenMillion() {
                 ]}>
                 <GradientFill gradient={tokens.gradients.bonfire} />
 
-                  {isLoading ? (
-                    <Loader size="xl" fill="white" />
-                  ) : (
                 <View
                   style={[
                     a.flex_1,
@@ -238,6 +268,7 @@ export function TenMillion() {
                         size={36}
                         avatar={profile.avatar}
                         moderation={moderation.ui('avatar')}
+                        onLoad={onCanvasReady}
                       />
                       <View style={[a.gap_2xs, a.flex_1]}>
                         <Text style={[a.text_sm, a.font_bold]}>
@@ -274,11 +305,51 @@ export function TenMillion() {
                     </View>
                   </View>
                 </View>
-                  )}
               </View>
             </ViewShot>
-            </View>
+          </Frame>
         </ThemeProvider>
+      </View>
+    </View>
+  )
+
+  return (
+    <Dialog.Outer control={controls.tenMillion}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`Ten Million`)}
+        style={[
+          {
+            padding: 0,
+          },
+        ]}>
+        <View
+          style={[
+            a.rounded_md,
+            a.overflow_hidden,
+            isNative && {
+              borderTopLeftRadius: 40,
+              borderTopRightRadius: 40,
+            },
+          ]}>
+          <Frame>
+            <View
+              style={[a.absolute, a.inset_0, a.align_center, a.justify_center]}>
+              <GradientFill gradient={tokens.gradients.bonfire} />
+              {isLoadingData || isLoadingImage ? (
+                <Loader size="xl" fill="white" />
+              ) : (
+                <Image
+                  accessibilityIgnoresInvertColors
+                  source={{uri}}
+                  style={[a.w_full, a.h_full]}
+                />
+              )}
+            </View>
+          </Frame>
+
+          {canvas}
 
           <View style={[gtMobile ? a.p_2xl : a.p_xl]}>
             <Text
@@ -321,7 +392,7 @@ export function TenMillion() {
                 variant="solid"
                 color="secondary"
                 shape="square"
-                onPress={share}>
+                onPress={download}>
                 <ButtonIcon icon={Share} />
               </Button>
               <Button

src/lib/canvas.ts

@@ -0,0 +1,15 @@
+export const getCanvas = (base64: string): Promise<HTMLCanvasElement> => {
+  return new Promise(resolve => {
+    const image = new Image()
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.width
+      canvas.height = image.height
+
+      const ctx = canvas.getContext('2d')
+      ctx?.drawImage(image, 0, 0)
+      resolve(canvas)
+    }
+    image.src = base64
+  })
+}

src/view/com/util/UserAvatar.tsx

@@ -43,6 +43,7 @@ interface BaseUserAvatarProps {
 interface UserAvatarProps extends BaseUserAvatarProps {
   moderation?: ModerationUI
   usePlainRNImage?: boolean
+  onLoad?: () => void
 }
 
 interface EditableUserAvatarProps extends BaseUserAvatarProps {
@@ -174,6 +175,7 @@ let UserAvatar = ({
   avatar,
   moderation,
   usePlainRNImage = false,
+  onLoad,
 }: UserAvatarProps): React.ReactNode => {
   const pal = usePalette('default')
   const backgroundColor = pal.colors.backgroundLight
@@ -224,6 +226,7 @@ let UserAvatar = ({
             uri: hackModifyThumbnailPath(avatar, size < 90),
           }}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
+          onLoad={onLoad}
         />
       ) : (
         <HighPriorityImage
@@ -234,6 +237,7 @@ let UserAvatar = ({
             uri: hackModifyThumbnailPath(avatar, size < 90),
           }}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
+          onLoad={onLoad}
         />
       )}
       {alert}