zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

WIP, avi not working on web

zio/dev^2
Eric Bailey 2024-09-10 16:20:19 -05:00
parent 3c8b3b4782
commit eaf0081623
3 changed files with 276 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

443
src/components/dialogs/nudges/TenMillion.tsx
View File

@ -1,10 +1,12 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import ViewShot from 'react-native-view-shot' import ViewShot from 'react-native-view-shot'
import {Image} from 'expo-image'
import {moderateProfile} from '@atproto/api' import {moderateProfile} from '@atproto/api'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {getCanvas} from '#/lib/canvas'
import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles' import {sanitizeHandle} from '#/lib/strings/handles'
import {isNative} from '#/platform/detection' 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 {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
const DEBUG = false
const RATIO = 8 / 10 const RATIO = 8 / 10
const WIDTH = 2000 const WIDTH = 2000
const HEIGHT = WIDTH * RATIO 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() { export function TenMillion() {
const t = useTheme() const t = useTheme()
const lightTheme = useTheme('light') const lightTheme = useTheme('light')
@ -54,7 +73,6 @@ export function TenMillion() {
const {controls} = useContext() const {controls} = useContext()
const {gtMobile} = useBreakpoints() const {gtMobile} = useBreakpoints()
const {openComposer} = useComposerControls() const {openComposer} = useComposerControls()
const imageRef = React.useRef<ViewShot>(null)
const {currentAccount} = useSession() const {currentAccount} = useSession()
const {isLoading: isProfileLoading, data: profile} = useProfileQuery({ const {isLoading: isProfileLoading, data: profile} = useProfileQuery({
did: currentAccount!.did, did: currentAccount!.did,
@ -65,32 +83,236 @@ export function TenMillion() {
? moderateProfile(profile, moderationOpts) ? moderateProfile(profile, moderationOpts)
: undefined : undefined
}, [profile, moderationOpts]) }, [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 = () => { const share = () => {
if (imageRef.current && imageRef.current.capture) { if (uri) {
imageRef.current.capture().then(uri => { controls.tenMillion.close(() => {
controls.tenMillion.close(() => { setTimeout(() => {
setTimeout(() => { openComposer({
openComposer({ text: '10 milly, babyyy',
text: '10 milly, babyyy', imageUris: [
imageUris: [ {
{ uri,
uri, width: WIDTH,
width: WIDTH, height: HEIGHT,
height: HEIGHT, },
}, ],
], })
}) }, 1e3)
}, 1e3)
})
}) })
} }
} }
const onCanvasReady = async () => {
if (
imageRef.current &&
imageRef.current.capture &&
!captureInProgress.current
) {
captureInProgress.current = true
const uri = await imageRef.current.capture()
setUri(uri)
}
}
const download = async () => {
if (uri) {
const canvas = await getCanvas(uri)
const imgHref = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream')
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.absolute,
a.overflow_hidden,
DEBUG
? {
width: 600,
height: 600 * RATIO,
}
: {
width: 1,
height: 1,
},
]}>
<View style={{width: 600}}>
<ThemeProvider theme="light">
<Frame>
<ViewShot
ref={imageRef}
options={{width: WIDTH, height: HEIGHT}}
style={[a.absolute, a.inset_0]}>
<View
style={[
a.absolute,
a.inset_0,
a.align_center,
a.justify_center,
{
top: -1,
bottom: -1,
left: -1,
right: -1,
paddingVertical: 32,
paddingHorizontal: 48,
},
]}>
<GradientFill gradient={tokens.gradients.bonfire} />
<View
style={[
a.flex_1,
a.w_full,
a.align_center,
a.justify_center,
a.rounded_md,
{
backgroundColor: 'white',
shadowRadius: 32,
shadowOpacity: 0.1,
elevation: 24,
shadowColor: tokens.gradients.bonfire.values[0][1],
},
]}>
<View
style={[
a.absolute,
a.px_xl,
a.py_xl,
{
top: 0,
left: 0,
},
]}>
<Logomark fill={t.palette.primary_500} width={36} />
</View>
{/* Centered content */}
<View
style={[
{
paddingBottom: 48,
},
]}>
<Text
style={[
a.text_md,
a.font_bold,
a.text_center,
a.pb_xs,
lightTheme.atoms.text_contrast_medium,
]}>
<Trans>
Celebrating {formatCount(i18n, 10000000)} users
</Trans>{' '}
🎉
</Text>
<Text
style={[
a.relative,
a.text_center,
{
fontStyle: 'italic',
fontSize: getFontSize(userNumber),
fontWeight: '900',
letterSpacing: -2,
},
]}>
<Text
style={[
a.absolute,
{
color: t.palette.primary_500,
fontSize: 32,
left: -18,
top: 8,
},
]}>
#
</Text>
{i18n.number(userNumber)}
</Text>
</View>
{/* End centered content */}
<View
style={[
a.absolute,
a.px_xl,
a.py_xl,
{
bottom: 0,
left: 0,
right: 0,
},
]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<UserAvatar
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]}>
{sanitizeDisplayName(
profile.displayName ||
sanitizeHandle(profile.handle),
moderation.ui('displayName'),
)}
</Text>
<View style={[a.flex_row, a.justify_between]}>
<Text
style={[
a.text_sm,
a.font_semibold,
lightTheme.atoms.text_contrast_medium,
]}>
{sanitizeHandle(profile.handle, '@')}
</Text>
{profile.createdAt && (
<Text
style={[
a.text_sm,
a.font_semibold,
lightTheme.atoms.text_contrast_low,
]}>
{i18n.date(profile.createdAt, {
dateStyle: 'long',
})}
</Text>
)}
</View>
</View>
</View>
</View>
</View>
</View>
</ViewShot>
</Frame>
</ThemeProvider>
</View>
</View>
)
return ( return (
<Dialog.Outer control={controls.tenMillion}> <Dialog.Outer control={controls.tenMillion}>
<Dialog.Handle /> <Dialog.Handle />
@ -101,7 +323,6 @@ export function TenMillion() {
{ {
padding: 0, padding: 0,
}, },
// gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
]}> ]}>
<View <View
style={[ style={[
@ -112,173 +333,23 @@ export function TenMillion() {
borderTopRightRadius: 40, borderTopRightRadius: 40,
}, },
]}> ]}>
<ThemeProvider theme="light"> <Frame>
<View <View
style={[ style={[a.absolute, a.inset_0, a.align_center, a.justify_center]}>
a.relative, <GradientFill gradient={tokens.gradients.bonfire} />
a.w_full, {isLoadingData || isLoadingImage ? (
a.overflow_hidden, <Loader size="xl" fill="white" />
{ ) : (
paddingTop: '80%', <Image
}, accessibilityIgnoresInvertColors
]}> source={{uri}}
<ViewShot style={[a.w_full, a.h_full]}
ref={imageRef} />
options={{width: WIDTH, height: HEIGHT}} )}
style={[a.absolute, a.inset_0]}>
<View
style={[
a.absolute,
a.inset_0,
a.align_center,
a.justify_center,
{
top: -1,
bottom: -1,
left: -1,
right: -1,
paddingVertical: 32,
paddingHorizontal: 48,
},
]}>
<GradientFill gradient={tokens.gradients.bonfire} />
{isLoading ? (
<Loader size="xl" fill="white" />
) : (
<View
style={[
a.flex_1,
a.w_full,
a.align_center,
a.justify_center,
a.rounded_md,
{
backgroundColor: 'white',
shadowRadius: 32,
shadowOpacity: 0.1,
elevation: 24,
shadowColor: tokens.gradients.bonfire.values[0][1],
},
]}>
<View
style={[
a.absolute,
a.px_xl,
a.py_xl,
{
top: 0,
left: 0,
},
]}>
<Logomark fill={t.palette.primary_500} width={36} />
</View>
{/* Centered content */}
<View
style={[
{
paddingBottom: 48,
},
]}>
<Text
style={[
a.text_md,
a.font_bold,
a.text_center,
a.pb_xs,
lightTheme.atoms.text_contrast_medium,
]}>
<Trans>
Celebrating {formatCount(i18n, 10000000)} users
</Trans>{' '}
🎉
</Text>
<Text
style={[
a.relative,
a.text_center,
{
fontStyle: 'italic',
fontSize: getFontSize(userNumber),
fontWeight: '900',
letterSpacing: -2,
},
]}>
<Text
style={[
a.absolute,
{
color: t.palette.primary_500,
fontSize: 32,
left: -18,
top: 8,
},
]}>
#
</Text>
{i18n.number(userNumber)}
</Text>
</View>
{/* End centered content */}
<View
style={[
a.absolute,
a.px_xl,
a.py_xl,
{
bottom: 0,
left: 0,
right: 0,
},
]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<UserAvatar
size={36}
avatar={profile.avatar}
moderation={moderation.ui('avatar')}
/>
<View style={[a.gap_2xs, a.flex_1]}>
<Text style={[a.text_sm, a.font_bold]}>
{sanitizeDisplayName(
profile.displayName ||
sanitizeHandle(profile.handle),
moderation.ui('displayName'),
)}
</Text>
<View style={[a.flex_row, a.justify_between]}>
<Text
style={[
a.text_sm,
a.font_semibold,
lightTheme.atoms.text_contrast_medium,
]}>
{sanitizeHandle(profile.handle, '@')}
</Text>
{profile.createdAt && (
<Text
style={[
a.text_sm,
a.font_semibold,
lightTheme.atoms.text_contrast_low,
]}>
{i18n.date(profile.createdAt, {
dateStyle: 'long',
})}
</Text>
)}
</View>
</View>
</View>
</View>
</View>
)}
</View>
</ViewShot>
</View> </View>
</ThemeProvider> </Frame>
{canvas}
<View style={[gtMobile ? a.p_2xl : a.p_xl]}> <View style={[gtMobile ? a.p_2xl : a.p_xl]}>
<Text <Text
@ -321,7 +392,7 @@ export function TenMillion() {
variant="solid" variant="solid"
color="secondary" color="secondary"
shape="square" shape="square"
onPress={share}> onPress={download}>
<ButtonIcon icon={Share} /> <ButtonIcon icon={Share} />
</Button> </Button>
<Button <Button

15
src/lib/canvas.ts 100644
View File

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

4
src/view/com/util/UserAvatar.tsx
View File

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