126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
// Metro module 13042 (f13043).
|
|
import { useMemo } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { ActivityIndicator } from "../../../design/components/ActivityIndicator/native/ActivityIndicator.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
height: 80,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
borderColor: Module712.colors.BORDER_STRONG,
|
|
borderWidth: 1,
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
},
|
|
containerRevamp: {
|
|
borderWidth: 0
|
|
},
|
|
thumbnail: {
|
|
width: 80
|
|
},
|
|
contentContainer: {
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
paddingLeft: 12,
|
|
paddingRight: 24
|
|
},
|
|
authorView: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 3
|
|
},
|
|
authorThumbnail: {
|
|
height: 16,
|
|
width: 16,
|
|
borderRadius: Module712.radii.sm,
|
|
marginRight: 4
|
|
},
|
|
loadingSpinner: {
|
|
flex: 1
|
|
}
|
|
});
|
|
export default function ShareEmbed(props) {
|
|
let r36;
|
|
let embed, isLoadingEmbed, styles, memo;
|
|
L9: {
|
|
embed = props.embed;
|
|
isLoadingEmbed = props.isLoadingEmbed;
|
|
const isRevamp = props.isRevamp;
|
|
styles = void 0;
|
|
memo = void 0;
|
|
styles = useStyles();
|
|
const memo5 = useMemo(() => {
|
|
if (embed != null) {
|
|
let uri = embed.thumbnail?.url;
|
|
if (uri == null) {
|
|
uri = embed.image?.url;
|
|
}
|
|
if (uri != null) {
|
|
return {
|
|
uri
|
|
};
|
|
}
|
|
}
|
|
}, [embed]);
|
|
let r24 = useMemo(() => isLoadingEmbed ? <ActivityIndicator style={styles.loadingSpinner} /> : null, [isLoadingEmbed, styles]);
|
|
const memo4 = useMemo(() => {
|
|
const author = embed?.author;
|
|
if (author == null) {
|
|
return null;
|
|
}
|
|
let proxy_icon_url = author.proxy_icon_url;
|
|
if (proxy_icon_url == null) {
|
|
proxy_icon_url = author.icon_url;
|
|
}
|
|
return <View style={styles.authorView}>
|
|
{proxy_icon_url != null && <Image2 style={styles.authorThumbnail} source={{
|
|
uri: proxy_icon_url
|
|
}} resizeMode="cover" />}
|
|
<Text variant="text-xs/semibold" color="mobile-text-heading-primary" ellipsizeMode="tail" lineClamp={1}>{author.name}</Text>
|
|
</View>;
|
|
}, [embed, styles]);
|
|
memo = useMemo(() => {
|
|
const title = embed?.title;
|
|
return title != null ? <Text style={{
|
|
marginVertical: 1
|
|
}} variant="text-xs/semibold" color="mobile-text-heading-primary" lineClamp={1} ellipsizeMode="tail">{title}</Text> : null;
|
|
}, [embed]);
|
|
const memo3 = useMemo(() => {
|
|
const description = embed?.description;
|
|
return memo == null ? description != null ? <Text style={{
|
|
marginVertical: 1
|
|
}} variant="text-xs/medium" color="text-default" lineClamp={1} ellipsizeMode="tail">{description}</Text> : null : null;
|
|
}, [embed, memo]);
|
|
const memo2 = useMemo(() => {
|
|
const url = embed?.url;
|
|
return url != null ? <Text style={{
|
|
marginVertical: 1
|
|
}} variant="text-xs/medium" color="text-link" lineClamp={1} ellipsizeMode="tail">{url}</Text> : null;
|
|
}, [embed]);
|
|
if (embed == null) {
|
|
r36 = null;
|
|
if (!isLoadingEmbed) {
|
|
break L9;
|
|
}
|
|
}
|
|
const style = [styles.container, isRevamp ? styles.containerRevamp : void 0];
|
|
if (!isLoadingEmbed) {
|
|
r24 = <>
|
|
{memo5 != null && <Image2 style={styles.thumbnail} source={memo5} resizeMode="cover" />}
|
|
<View style={styles.contentContainer}>
|
|
{memo4}
|
|
{memo}
|
|
{memo3}
|
|
{memo2}
|
|
</View>
|
|
</>;
|
|
}
|
|
r36 = <View style={style}>{r24}</View>;
|
|
}
|
|
return r36;
|
|
};
|