+6 -6

src/components/Admonition.tsx

··· 1 1 - import React from 'react' 2 2 - import {StyleProp, View, ViewStyle} from 'react-native' 1 1 + import {createContext, useContext} from 'react' 2 2 + import {type StyleProp, View, type ViewStyle} from 'react-native' 3 3 4 4 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 5 5 - import {Button as BaseButton, ButtonProps} from '#/components/Button' 5 5 + import {Button as BaseButton, type ButtonProps} from '#/components/Button' 6 6 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' 7 7 import {Eye_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/Eye' 8 8 import {Leaf_Stroke2_Corner0_Rounded as TipIcon} from '#/components/icons/Leaf' 9 9 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' 10 10 - import {Text as BaseText, TextProps} from '#/components/Typography' 10 10 + import {Text as BaseText, type TextProps} from '#/components/Typography' 11 11 12 12 export const colors = { 13 13 warning: { ··· 20 20 type: 'info' | 'tip' | 'warning' | 'error' 21 21 } 22 22 23 23 - const Context = React.createContext<Context>({ 23 23 + const Context = createContext<Context>({ 24 24 type: 'info', 25 25 }) 26 26 27 27 export function Icon() { 28 28 const t = useTheme() 29 29 - const {type} = React.useContext(Context) 29 29 + const {type} = useContext(Context) 30 30 const Icon = { 31 31 info: InfoIcon, 32 32 tip: TipIcon,

+5 -97

src/components/live/EditLiveDialog.tsx

··· 1 1 import {useMemo, useState} from 'react' 2 2 import {View} from 'react-native' 3 3 - import {Image} from 'expo-image' 4 3 import { 5 4 type AppBskyActorDefs, 6 5 AppBskyActorStatus, ··· 8 7 } from '@atproto/api' 9 8 import {msg, Trans} from '@lingui/macro' 10 9 import {useLingui} from '@lingui/react' 11 11 - import {useQuery} from '@tanstack/react-query' 12 10 import {differenceInMinutes} from 'date-fns' 13 11 14 14 - import {getLinkMeta} from '#/lib/link-meta/link-meta' 15 12 import {cleanError} from '#/lib/strings/errors' 16 16 - import {toNiceDomain} from '#/lib/strings/url-helpers' 17 13 import {definitelyUrl} from '#/lib/strings/url-helpers' 18 18 - import {useAgent} from '#/state/session' 19 14 import {useTickEveryMinute} from '#/state/shell' 20 20 - import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 21 15 import {atoms as a, platform, useTheme, web} from '#/alf' 22 16 import {Admonition} from '#/components/Admonition' 23 17 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 24 18 import * as Dialog from '#/components/Dialog' 25 19 import * as TextField from '#/components/forms/TextField' 26 26 - import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX' 27 20 import {Clock_Stroke2_Corner0_Rounded as ClockIcon} from '#/components/icons/Clock' 28 28 - import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' 29 21 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' 30 22 import {Loader} from '#/components/Loader' 31 23 import {Text} from '#/components/Typography' 24 24 + import {LinkPreview} from './LinkPreview' 32 25 import { 26 26 + useLiveLinkMetaQuery, 33 27 useRemoveLiveStatusMutation, 34 28 useUpsertLiveStatusMutation, 35 29 } from './queries' ··· 62 56 const control = Dialog.useDialogContext() 63 57 const {_, i18n} = useLingui() 64 58 const t = useTheme() 65 65 - const agent = useAgent() 59 59 + 66 60 const [liveLink, setLiveLink] = useState(embed.external.uri) 67 61 const [liveLinkError, setLiveLinkError] = useState('') 68 68 - const [imageLoadError, setImageLoadError] = useState(false) 69 62 const tick = useTickEveryMinute() 70 63 71 64 const liveLinkUrl = definitelyUrl(liveLink) ··· 78 71 isSuccess: hasValidLinkMeta, 79 72 isLoading: linkMetaLoading, 80 73 error: linkMetaError, 81 81 - } = useQuery({ 82 82 - enabled: !!debouncedUrl, 83 83 - queryKey: ['link-meta', debouncedUrl], 84 84 - queryFn: async () => { 85 85 - if (!debouncedUrl) return null 86 86 - return getLinkMeta(agent, debouncedUrl) 87 87 - }, 88 88 - }) 74 74 + } = useLiveLinkMetaQuery(debouncedUrl) 89 75 90 76 const record = useMemo(() => { 91 77 if (!AppBskyActorStatus.isRecord(status.record)) return null ··· 208 194 </View> 209 195 )} 210 196 211 211 - {(linkMeta || linkMetaLoading) && ( 212 212 - <View 213 213 - style={[ 214 214 - a.w_full, 215 215 - a.border, 216 216 - t.atoms.border_contrast_low, 217 217 - t.atoms.bg, 218 218 - a.flex_row, 219 219 - a.rounded_sm, 220 220 - a.overflow_hidden, 221 221 - a.align_stretch, 222 222 - ]}> 223 223 - {(!linkMeta || linkMeta.image) && ( 224 224 - <View 225 225 - style={[ 226 226 - t.atoms.bg_contrast_25, 227 227 - {minHeight: 64, width: 114}, 228 228 - a.justify_center, 229 229 - a.align_center, 230 230 - ]}> 231 231 - {linkMeta?.image && ( 232 232 - <Image 233 233 - source={linkMeta.image} 234 234 - accessibilityIgnoresInvertColors 235 235 - transition={200} 236 236 - style={[a.absolute, a.inset_0]} 237 237 - contentFit="cover" 238 238 - onLoad={() => setImageLoadError(false)} 239 239 - onError={() => setImageLoadError(true)} 240 240 - /> 241 241 - )} 242 242 - {linkMeta && imageLoadError && ( 243 243 - <CircleXIcon 244 244 - style={[t.atoms.text_contrast_low]} 245 245 - size="xl" 246 246 - /> 247 247 - )} 248 248 - </View> 249 249 - )} 250 250 - <View 251 251 - style={[ 252 252 - a.flex_1, 253 253 - a.justify_center, 254 254 - a.py_sm, 255 255 - a.gap_xs, 256 256 - a.px_md, 257 257 - ]}> 258 258 - {linkMeta ? ( 259 259 - <> 260 260 - <Text 261 261 - numberOfLines={2} 262 262 - style={[a.leading_snug, a.font_bold, a.text_md]}> 263 263 - {linkMeta.title || linkMeta.url} 264 264 - </Text> 265 265 - <View style={[a.flex_row, a.align_center, a.gap_2xs]}> 266 266 - <GlobeIcon 267 267 - size="xs" 268 268 - style={[t.atoms.text_contrast_low]} 269 269 - /> 270 270 - <Text 271 271 - numberOfLines={1} 272 272 - style={[ 273 273 - a.text_xs, 274 274 - a.leading_snug, 275 275 - t.atoms.text_contrast_medium, 276 276 - ]}> 277 277 - {toNiceDomain(linkMeta.url)} 278 278 - </Text> 279 279 - </View> 280 280 - </> 281 281 - ) : ( 282 282 - <> 283 283 - <LoadingPlaceholder height={16} width={128} /> 284 284 - <LoadingPlaceholder height={12} width={72} /> 285 285 - </> 286 286 - )} 287 287 - </View> 288 288 - </View> 289 289 - )} 197 197 + <LinkPreview linkMeta={linkMeta} loading={linkMetaLoading} /> 290 198 </View> 291 199 292 200 {goLiveError && (

+4 -110

src/components/live/GoLiveDialog.tsx

··· 1 1 import {useCallback, useState} from 'react' 2 2 import {View} from 'react-native' 3 3 - import {Image} from 'expo-image' 4 3 import {msg, Trans} from '@lingui/macro' 5 4 import {useLingui} from '@lingui/react' 6 6 - import {useQuery} from '@tanstack/react-query' 7 5 8 8 - import {getLinkMeta} from '#/lib/link-meta/link-meta' 9 6 import {cleanError} from '#/lib/strings/errors' 10 10 - import {toNiceDomain} from '#/lib/strings/url-helpers' 11 7 import {definitelyUrl} from '#/lib/strings/url-helpers' 12 8 import {useModerationOpts} from '#/state/preferences/moderation-opts' 13 13 - import {useLiveNowConfig} from '#/state/service-config' 14 14 - import {useAgent, useSession} from '#/state/session' 15 9 import {useTickEveryMinute} from '#/state/shell' 16 16 - import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 17 10 import {atoms as a, ios, native, platform, useTheme, web} from '#/alf' 18 11 import {Admonition} from '#/components/Admonition' 19 12 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 20 13 import * as Dialog from '#/components/Dialog' 21 14 import * as TextField from '#/components/forms/TextField' 22 22 - import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX' 23 23 - import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' 24 15 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' 25 16 import {Loader} from '#/components/Loader' 26 17 import * as ProfileCard from '#/components/ProfileCard' 27 18 import * as Select from '#/components/Select' 28 19 import {Text} from '#/components/Typography' 29 20 import type * as bsky from '#/types/bsky' 30 30 - import {useUpsertLiveStatusMutation} from './queries' 21 21 + import {LinkPreview} from './LinkPreview' 22 22 + import {useLiveLinkMetaQuery, useUpsertLiveStatusMutation} from './queries' 31 23 import {displayDuration, useDebouncedValue} from './utils' 32 24 33 25 export function GoLiveDialog({ ··· 52 44 const control = Dialog.useDialogContext() 53 45 const {_, i18n} = useLingui() 54 46 const t = useTheme() 55 55 - const agent = useAgent() 56 47 const [liveLink, setLiveLink] = useState('') 57 48 const [liveLinkError, setLiveLinkError] = useState('') 58 58 - const [imageLoadError, setImageLoadError] = useState(false) 59 49 const [duration, setDuration] = useState(60) 60 50 const moderationOpts = useModerationOpts() 61 51 const tick = useTickEveryMinute() 62 62 - const liveNowConfig = useLiveNowConfig() 63 63 - const {currentAccount} = useSession() 64 64 - 65 65 - const config = liveNowConfig.find(cfg => cfg.did === currentAccount?.did) 66 52 67 53 const time = useCallback( 68 54 (offset: number) => { ··· 90 76 isSuccess: hasValidLinkMeta, 91 77 isLoading: linkMetaLoading, 92 78 error: linkMetaError, 93 93 - } = useQuery({ 94 94 - enabled: !!debouncedUrl, 95 95 - queryKey: ['link-meta', debouncedUrl], 96 96 - queryFn: async () => { 97 97 - if (!debouncedUrl) return null 98 98 - if (!config) throw new Error(_(msg`You are not allowed to go live`)) 99 99 - 100 100 - const urlp = new URL(debouncedUrl) 101 101 - if (!config.domains.includes(urlp.hostname)) { 102 102 - throw new Error(_(msg`${urlp.hostname} is not a valid URL`)) 103 103 - } 104 104 - 105 105 - return getLinkMeta(agent, debouncedUrl) 106 106 - }, 107 107 - }) 79 79 + } = useLiveLinkMetaQuery(debouncedUrl) 108 80 109 81 const { 110 82 mutate: goLive, ··· 193 165 </View> 194 166 )} 195 167 196 196 - {(linkMeta || linkMetaLoading) && ( 197 197 - <View 198 198 - style={[ 199 199 - a.w_full, 200 200 - a.border, 201 201 - t.atoms.border_contrast_low, 202 202 - t.atoms.bg, 203 203 - a.flex_row, 204 204 - a.rounded_sm, 205 205 - a.overflow_hidden, 206 206 - a.align_stretch, 207 207 - ]}> 208 208 - {(!linkMeta || linkMeta.image) && ( 209 209 - <View 210 210 - style={[ 211 211 - t.atoms.bg_contrast_25, 212 212 - {minHeight: 64, width: 114}, 213 213 - a.justify_center, 214 214 - a.align_center, 215 215 - ]}> 216 216 - {linkMeta?.image && ( 217 217 - <Image 218 218 - source={linkMeta.image} 219 219 - accessibilityIgnoresInvertColors 220 220 - transition={200} 221 221 - style={[a.absolute, a.inset_0]} 222 222 - contentFit="cover" 223 223 - onLoad={() => setImageLoadError(false)} 224 224 - onError={() => setImageLoadError(true)} 225 225 - /> 226 226 - )} 227 227 - {linkMeta && imageLoadError && ( 228 228 - <CircleXIcon 229 229 - style={[t.atoms.text_contrast_low]} 230 230 - size="xl" 231 231 - /> 232 232 - )} 233 233 - </View> 234 234 - )} 235 235 - <View 236 236 - style={[ 237 237 - a.flex_1, 238 238 - a.justify_center, 239 239 - a.py_sm, 240 240 - a.gap_xs, 241 241 - a.px_md, 242 242 - ]}> 243 243 - {linkMeta ? ( 244 244 - <> 245 245 - <Text 246 246 - numberOfLines={2} 247 247 - style={[a.leading_snug, a.font_bold, a.text_md]}> 248 248 - {linkMeta.title || linkMeta.url} 249 249 - </Text> 250 250 - <View style={[a.flex_row, a.align_center, a.gap_2xs]}> 251 251 - <GlobeIcon 252 252 - size="xs" 253 253 - style={[t.atoms.text_contrast_low]} 254 254 - /> 255 255 - <Text 256 256 - numberOfLines={1} 257 257 - style={[ 258 258 - a.text_xs, 259 259 - a.leading_snug, 260 260 - t.atoms.text_contrast_medium, 261 261 - ]}> 262 262 - {toNiceDomain(linkMeta.url)} 263 263 - </Text> 264 264 - </View> 265 265 - </> 266 266 - ) : ( 267 267 - <> 268 268 - <LoadingPlaceholder height={16} width={128} /> 269 269 - <LoadingPlaceholder height={12} width={72} /> 270 270 - </> 271 271 - )} 272 272 - </View> 273 273 - </View> 274 274 - )} 168 168 + <LinkPreview linkMeta={linkMeta} loading={linkMetaLoading} /> 275 169 </View> 276 170 277 171 {hasLink && (

+98

src/components/live/LinkPreview.tsx

··· 1 1 + import {useState} from 'react' 2 2 + import {View} from 'react-native' 3 3 + import {Image} from 'expo-image' 4 4 + import {Trans} from '@lingui/macro' 5 5 + 6 6 + import {type LinkMeta} from '#/lib/link-meta/link-meta' 7 7 + import {toNiceDomain} from '#/lib/strings/url-helpers' 8 8 + import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 9 9 + import {atoms as a, useTheme} from '#/alf' 10 10 + import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' 11 11 + import {Image_Stroke2_Corner0_Rounded as ImageIcon} from '#/components/icons/Image' 12 12 + import {Text} from '#/components/Typography' 13 13 + 14 14 + export function LinkPreview({ 15 15 + linkMeta, 16 16 + loading, 17 17 + }: { 18 18 + linkMeta?: LinkMeta 19 19 + loading: boolean 20 20 + }) { 21 21 + const t = useTheme() 22 22 + const [imageLoadError, setImageLoadError] = useState(false) 23 23 + 24 24 + if (!linkMeta && !loading) { 25 25 + return null 26 26 + } 27 27 + 28 28 + return ( 29 29 + <View 30 30 + style={[ 31 31 + a.w_full, 32 32 + a.border, 33 33 + t.atoms.border_contrast_low, 34 34 + t.atoms.bg, 35 35 + a.flex_row, 36 36 + a.rounded_sm, 37 37 + a.overflow_hidden, 38 38 + a.align_stretch, 39 39 + ]}> 40 40 + <View 41 41 + style={[ 42 42 + t.atoms.bg_contrast_25, 43 43 + {minHeight: 64, width: 114}, 44 44 + a.justify_center, 45 45 + a.align_center, 46 46 + a.gap_xs, 47 47 + ]}> 48 48 + {linkMeta?.image && ( 49 49 + <Image 50 50 + source={linkMeta.image} 51 51 + accessibilityIgnoresInvertColors 52 52 + transition={200} 53 53 + style={[a.absolute, a.inset_0]} 54 54 + contentFit="cover" 55 55 + onLoad={() => setImageLoadError(false)} 56 56 + onError={() => setImageLoadError(true)} 57 57 + /> 58 58 + )} 59 59 + {linkMeta && (!linkMeta.image || imageLoadError) && ( 60 60 + <> 61 61 + <ImageIcon style={[t.atoms.text_contrast_low]} /> 62 62 + <Text style={[t.atoms.text_contrast_low, a.text_xs, a.text_center]}> 63 63 + <Trans>No image</Trans> 64 64 + </Text> 65 65 + </> 66 66 + )} 67 67 + </View> 68 68 + <View style={[a.flex_1, a.justify_center, a.py_sm, a.gap_xs, a.px_md]}> 69 69 + {linkMeta ? ( 70 70 + <> 71 71 + <Text 72 72 + numberOfLines={2} 73 73 + style={[a.leading_snug, a.font_bold, a.text_md]}> 74 74 + {linkMeta.title || linkMeta.url} 75 75 + </Text> 76 76 + <View style={[a.flex_row, a.align_center, a.gap_2xs]}> 77 77 + <GlobeIcon size="xs" style={[t.atoms.text_contrast_low]} /> 78 78 + <Text 79 79 + numberOfLines={1} 80 80 + style={[ 81 81 + a.text_xs, 82 82 + a.leading_snug, 83 83 + t.atoms.text_contrast_medium, 84 84 + ]}> 85 85 + {toNiceDomain(linkMeta.url)} 86 86 + </Text> 87 87 + </View> 88 88 + </> 89 89 + ) : ( 90 90 + <> 91 91 + <LoadingPlaceholder height={16} width={128} /> 92 92 + <LoadingPlaceholder height={12} width={72} /> 93 93 + </> 94 94 + )} 95 95 + </View> 96 96 + </View> 97 97 + ) 98 98 + }

+28 -2

src/components/live/queries.ts

··· 7 7 import {retry} from '@atproto/common-web' 8 8 import {msg} from '@lingui/macro' 9 9 import {useLingui} from '@lingui/react' 10 10 - import {useMutation, useQueryClient} from '@tanstack/react-query' 10 10 + import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' 11 11 12 12 import {uploadBlob} from '#/lib/api' 13 13 import {imageToThumb} from '#/lib/api/resolve' 14 14 - import {type LinkMeta} from '#/lib/link-meta/link-meta' 14 14 + import {getLinkMeta, type LinkMeta} from '#/lib/link-meta/link-meta' 15 15 import {logger} from '#/logger' 16 16 import {updateProfileShadow} from '#/state/cache/profile-shadow' 17 17 + import {useLiveNowConfig} from '#/state/service-config' 17 18 import {useAgent, useSession} from '#/state/session' 18 19 import * as Toast from '#/view/com/util/Toast' 19 20 import {useDialogContext} from '#/components/Dialog' 21 21 + 22 22 + export function useLiveLinkMetaQuery(url: string | null) { 23 23 + const liveNowConfig = useLiveNowConfig() 24 24 + const {currentAccount} = useSession() 25 25 + const {_} = useLingui() 26 26 + 27 27 + const agent = useAgent() 28 28 + return useQuery({ 29 29 + enabled: !!url, 30 30 + queryKey: ['link-meta', url], 31 31 + queryFn: async () => { 32 32 + if (!url) return undefined 33 33 + const config = liveNowConfig.find(cfg => cfg.did === currentAccount?.did) 34 34 + 35 35 + if (!config) throw new Error(_(msg`You are not allowed to go live`)) 36 36 + 37 37 + const urlp = new URL(url) 38 38 + if (!config.domains.includes(urlp.hostname)) { 39 39 + throw new Error(_(msg`${urlp.hostname} is not a valid URL`)) 40 40 + } 41 41 + 42 42 + return await getLinkMeta(agent, url) 43 43 + }, 44 44 + }) 45 45 + } 20 46 21 47 export function useUpsertLiveStatusMutation( 22 48 duration: number,