Eric Bailey
117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
import {Fragment, type ReactNode} from 'react'
|
|
import {View} from 'react-native'
|
|
import {AtUri} from '@atproto/api'
|
|
import {Trans, useLingui} from '@lingui/react/macro'
|
|
|
|
import {makeProfileLink} from '#/lib/routes/links'
|
|
import {toNiceDomain} from '#/lib/strings/url-helpers'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {StandardSite} from '#/components/icons/community/StandardSite'
|
|
import {InlineLinkText} from '#/components/Link'
|
|
import {
|
|
matchStandardSitePublisher,
|
|
matchStandardSitePublisherByUri,
|
|
} from '#/components/Post/Embed/StandardSiteEmbed/publishers'
|
|
import type * as ssTypes from '#/components/Post/Embed/StandardSiteEmbed/types'
|
|
import {
|
|
isStandardSiteDocumentUri,
|
|
isStandardSitePublicationUri,
|
|
} from '#/components/Post/Embed/StandardSiteEmbed/utils'
|
|
import {Text} from '#/components/Typography'
|
|
import {useAnalytics} from '#/analytics'
|
|
|
|
export function StandardSiteMetaRow({
|
|
type = 'document',
|
|
preview,
|
|
view,
|
|
}: ssTypes.CommonProps &
|
|
ssTypes.PreviewProps & {
|
|
type?: 'document' | 'publication'
|
|
}) {
|
|
const ax = useAnalytics()
|
|
const t = useTheme()
|
|
const {t: l} = useLingui()
|
|
const highlightedPublisher = !!matchStandardSitePublisher(view)
|
|
const didsFromRecords =
|
|
view.associatedRefs
|
|
?.filter(
|
|
type === 'document'
|
|
? isStandardSiteDocumentUri
|
|
: isStandardSitePublicationUri,
|
|
)
|
|
.map(ref => new AtUri(ref.uri).host) || []
|
|
// atm should only be one docment
|
|
const authorDid = didsFromRecords.at(0)
|
|
const authorProfile = authorDid
|
|
? view.associatedProfiles?.find(p => p.did === authorDid)
|
|
: undefined
|
|
const articleDomain = toNiceDomain(view.uri)
|
|
const articlePublisher = matchStandardSitePublisherByUri(view.uri)
|
|
const DomainIcon = articlePublisher?.Icon || StandardSite
|
|
const metaTextStyle = [
|
|
a.text_xs,
|
|
a.leading_tight,
|
|
t.atoms.text_contrast_medium,
|
|
]
|
|
|
|
const items: {key: string; node: ReactNode}[] = []
|
|
|
|
if (!highlightedPublisher) {
|
|
items.push({
|
|
key: 'domain',
|
|
node: (
|
|
<View style={[a.flex_shrink, a.flex_row, a.align_center, a.gap_2xs]}>
|
|
{DomainIcon && (
|
|
<DomainIcon size="xs" fill={t.atoms.text_contrast_medium.color} />
|
|
)}
|
|
<Text numberOfLines={1} style={[metaTextStyle, a.flex_shrink]}>
|
|
{articleDomain}
|
|
</Text>
|
|
</View>
|
|
),
|
|
})
|
|
}
|
|
|
|
if (authorProfile) {
|
|
items.push({
|
|
key: 'author',
|
|
node: (
|
|
<Text numberOfLines={1} style={[metaTextStyle]}>
|
|
<Trans>
|
|
by{' '}
|
|
<InlineLinkText
|
|
label={l`View @${authorProfile.handle}'s profile`}
|
|
to={makeProfileLink(authorProfile)}
|
|
style={[
|
|
metaTextStyle,
|
|
preview ? a.pointer_events_none : a.pointer_events_auto,
|
|
]}
|
|
onPress={e => {
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
ax.metric('embed:standardSite:authorHandle:press', {
|
|
handle: authorProfile.handle,
|
|
})
|
|
}}>
|
|
@{authorProfile.handle}
|
|
</InlineLinkText>
|
|
</Trans>
|
|
</Text>
|
|
),
|
|
})
|
|
}
|
|
|
|
if (items.length === 0) return null
|
|
|
|
return (
|
|
<View style={[a.flex_row, a.align_center, a.gap_xs, a.z_10]}>
|
|
{items.map((item, i) => (
|
|
<Fragment key={item.key}>
|
|
{i > 0 && <Text style={metaTextStyle}>•</Text>}
|
|
{item.node}
|
|
</Fragment>
|
|
))}
|
|
</View>
|
|
)
|
|
}
|