Add post embeds (images and external links)
This commit is contained in:
Paul Frazee
parent
345ec83f26
commit
4966b2152e
30 changed files with 936 additions and 242 deletions
|
|
@ -1,88 +1,170 @@
|
|||
import React, {useEffect, useState} from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
ImageStyle,
|
||||
StyleSheet,
|
||||
StyleProp,
|
||||
Text,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
|
||||
import {
|
||||
Record as PostRecord,
|
||||
Entity,
|
||||
} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
|
||||
import * as AppBskyEmbedImages from '../../../third-party/api/src/client/types/app/bsky/embed/images'
|
||||
import * as AppBskyEmbedExternal from '../../../third-party/api/src/client/types/app/bsky/embed/external'
|
||||
import {Link} from '../util/Link'
|
||||
import {LinkMeta, getLikelyType, LikelyType} from '../../../lib/link-meta'
|
||||
import {colors} from '../../lib/styles'
|
||||
import {useStores} from '../../../state'
|
||||
import {AutoSizedImage} from './images/AutoSizedImage'
|
||||
|
||||
type Embed =
|
||||
| AppBskyEmbedImages.Presented
|
||||
| AppBskyEmbedExternal.Presented
|
||||
| {$type: string; [k: string]: unknown}
|
||||
|
||||
export function PostEmbeds({
|
||||
entities,
|
||||
embed,
|
||||
style,
|
||||
}: {
|
||||
entities?: Entity[]
|
||||
embed?: Embed
|
||||
style?: StyleProp<ViewStyle>
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
|
||||
const link = entities?.find(
|
||||
ent =>
|
||||
ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
let aborted = false
|
||||
store.linkMetas.getLinkMeta(link?.value || '').then(linkMeta => {
|
||||
if (!aborted) {
|
||||
setLinkMeta(linkMeta)
|
||||
if (embed?.$type === 'app.bsky.embed.images#presented') {
|
||||
const imgEmbed = embed as AppBskyEmbedImages.Presented
|
||||
if (imgEmbed.images.length > 0) {
|
||||
const Thumb = ({i, style}: {i: number; style: StyleProp<ImageStyle>}) => (
|
||||
<AutoSizedImage
|
||||
style={style}
|
||||
uri={imgEmbed.images[i].thumb}
|
||||
fullSizeUri={imgEmbed.images[i].fullsize}
|
||||
/>
|
||||
)
|
||||
if (imgEmbed.images.length === 4) {
|
||||
return (
|
||||
<View style={styles.imagesContainer}>
|
||||
<View style={styles.imagePair}>
|
||||
<Thumb i={0} style={styles.imagePairItem} />
|
||||
<View style={styles.imagesWidthSpacer} />
|
||||
<Thumb i={1} style={styles.imagePairItem} />
|
||||
</View>
|
||||
<View style={styles.imagesHeightSpacer} />
|
||||
<View style={styles.imagePair}>
|
||||
<Thumb i={2} style={styles.imagePairItem} />
|
||||
<View style={styles.imagesWidthSpacer} />
|
||||
<Thumb i={3} style={styles.imagePairItem} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
} else if (imgEmbed.images.length === 3) {
|
||||
return (
|
||||
<View style={styles.imagesContainer}>
|
||||
<View style={styles.imageWide}>
|
||||
<Thumb i={0} style={styles.imageWideItem} />
|
||||
</View>
|
||||
<View style={styles.imagesHeightSpacer} />
|
||||
<View style={styles.imagePair}>
|
||||
<Thumb i={1} style={styles.imagePairItem} />
|
||||
<View style={styles.imagesWidthSpacer} />
|
||||
<Thumb i={2} style={styles.imagePairItem} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
} else if (imgEmbed.images.length === 2) {
|
||||
return (
|
||||
<View style={styles.imagesContainer}>
|
||||
<View style={styles.imagePair}>
|
||||
<Thumb i={0} style={styles.imagePairItem} />
|
||||
<View style={styles.imagesWidthSpacer} />
|
||||
<Thumb i={1} style={styles.imagePairItem} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<View style={styles.imagesContainer}>
|
||||
<View style={styles.imageBig}>
|
||||
<Thumb i={0} style={styles.imageBigItem} />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
aborted = true
|
||||
}
|
||||
}, [link])
|
||||
|
||||
if (!link) {
|
||||
return <View />
|
||||
}
|
||||
|
||||
return (
|
||||
<Link style={[styles.outer, style]} href={link.value}>
|
||||
{linkMeta ? (
|
||||
<>
|
||||
<Text numberOfLines={1} style={styles.title}>
|
||||
{linkMeta.title || linkMeta.url}
|
||||
if (embed?.$type === 'app.bsky.embed.external#presented') {
|
||||
const externalEmbed = embed as AppBskyEmbedExternal.Presented
|
||||
const link = externalEmbed.external
|
||||
return (
|
||||
<Link style={[styles.extOuter, style]} href={link.uri}>
|
||||
{link.thumb ? (
|
||||
<AutoSizedImage style={style} uri={link.thumb} />
|
||||
) : undefined}
|
||||
<Text numberOfLines={1} style={styles.extTitle}>
|
||||
{link.title || link.uri}
|
||||
</Text>
|
||||
<Text numberOfLines={1} style={styles.extUrl}>
|
||||
{link.uri}
|
||||
</Text>
|
||||
{link.description ? (
|
||||
<Text numberOfLines={2} style={styles.extDescription}>
|
||||
{link.description}
|
||||
</Text>
|
||||
<Text numberOfLines={1} style={styles.url}>
|
||||
{linkMeta.url}
|
||||
</Text>
|
||||
{linkMeta.description ? (
|
||||
<Text numberOfLines={2} style={styles.description}>
|
||||
{linkMeta.description}
|
||||
</Text>
|
||||
) : undefined}
|
||||
</>
|
||||
) : (
|
||||
<ActivityIndicator />
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
) : undefined}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
return <View />
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
imagesContainer: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
imagesWidthSpacer: {
|
||||
width: 5,
|
||||
},
|
||||
imagesHeightSpacer: {
|
||||
height: 5,
|
||||
},
|
||||
imagePair: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
imagePairItem: {
|
||||
resizeMode: 'contain',
|
||||
flex: 1,
|
||||
borderRadius: 4,
|
||||
},
|
||||
imageWide: {},
|
||||
imageWideItem: {
|
||||
resizeMode: 'contain',
|
||||
borderRadius: 4,
|
||||
},
|
||||
imageBig: {},
|
||||
imageBigItem: {
|
||||
borderRadius: 4,
|
||||
},
|
||||
|
||||
extOuter: {
|
||||
borderWidth: 1,
|
||||
borderColor: colors.gray2,
|
||||
borderRadius: 8,
|
||||
padding: 10,
|
||||
},
|
||||
title: {
|
||||
extImage: {
|
||||
// TODO
|
||||
},
|
||||
extTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
description: {
|
||||
extDescription: {
|
||||
marginTop: 4,
|
||||
fontSize: 15,
|
||||
},
|
||||
url: {
|
||||
extUrl: {
|
||||
color: colors.gray4,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
112
src/view/com/util/images/AutoSizedImage.tsx
Normal file
112
src/view/com/util/images/AutoSizedImage.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import React, {useState, useEffect, useMemo} from 'react'
|
||||
import {
|
||||
Image,
|
||||
ImageStyle,
|
||||
LayoutChangeEvent,
|
||||
StyleProp,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableWithoutFeedback,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {ImageLightbox} from '../../../../state/models/shell-ui'
|
||||
import {useStores} from '../../../../state'
|
||||
import {colors} from '../../../lib/styles'
|
||||
|
||||
const MAX_HEIGHT = 300
|
||||
|
||||
interface Dim {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export function AutoSizedImage({
|
||||
uri,
|
||||
fullSizeUri,
|
||||
style,
|
||||
}: {
|
||||
uri: string
|
||||
fullSizeUri?: string
|
||||
style: StyleProp<ImageStyle>
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [error, setError] = useState<string | undefined>()
|
||||
const [imgInfo, setImgInfo] = useState<Dim | undefined>()
|
||||
const [containerInfo, setContainerInfo] = useState<Dim | undefined>()
|
||||
const calculatedStyle = useMemo(() => {
|
||||
if (imgInfo && containerInfo) {
|
||||
// imgInfo.height / imgInfo.width = x / containerInfo.width
|
||||
// x = imgInfo.height / imgInfo.width * containerInfo.width
|
||||
return {
|
||||
height: Math.min(
|
||||
MAX_HEIGHT,
|
||||
(imgInfo.height / imgInfo.width) * containerInfo.width,
|
||||
),
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
}, [imgInfo, containerInfo])
|
||||
|
||||
useEffect(() => {
|
||||
Image.getSize(
|
||||
uri,
|
||||
(width: number, height: number) => {
|
||||
setImgInfo({width, height})
|
||||
},
|
||||
(error: any) => {
|
||||
setError(String(error))
|
||||
},
|
||||
)
|
||||
}, [uri])
|
||||
|
||||
const onLayout = (evt: LayoutChangeEvent) => {
|
||||
setContainerInfo({
|
||||
width: evt.nativeEvent.layout.width,
|
||||
height: evt.nativeEvent.layout.height,
|
||||
})
|
||||
}
|
||||
|
||||
const onPressImage = () => {
|
||||
if (fullSizeUri) {
|
||||
store.shell.openLightbox(new ImageLightbox(fullSizeUri))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={style}>
|
||||
<TouchableWithoutFeedback onPress={onPressImage}>
|
||||
{error ? (
|
||||
<View style={[styles.container, styles.errorContainer]}>
|
||||
<Text style={styles.error}>{error}</Text>
|
||||
</View>
|
||||
) : calculatedStyle ? (
|
||||
<View style={styles.container}>
|
||||
<Image style={calculatedStyle} source={{uri}} />
|
||||
</View>
|
||||
) : (
|
||||
<View style={[style, styles.placeholder]} onLayout={onLayout} />
|
||||
)}
|
||||
</TouchableWithoutFeedback>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
placeholder: {
|
||||
width: '100%',
|
||||
aspectRatio: 1,
|
||||
backgroundColor: colors.gray1,
|
||||
},
|
||||
errorContainer: {
|
||||
backgroundColor: colors.red1,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
},
|
||||
container: {
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
error: {
|
||||
color: colors.red5,
|
||||
},
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue