this repo has no description
cap embed size for nested embeds
+24
-10
+24
-10
apps/expo/src/components/embed.tsx
+24
-10
apps/expo/src/components/embed.tsx
···
46
46
interface Props {
47
47
content: AppBskyFeedDefs.FeedViewPost["post"]["embed"];
48
48
truncate?: boolean;
49
+
depth?: number;
49
50
}
50
51
51
-
export const Embed = ({ content, truncate = true }: Props) => {
52
+
export const Embed = ({ content, truncate = true, depth = 0 }: Props) => {
52
53
if (!content) return null;
53
54
try {
54
55
// Case 1: Image
55
56
if (AppBskyEmbedImages.isView(content)) {
56
57
assert(AppBskyEmbedImages.validateView(content));
57
-
return <ImageEmbed content={content} />;
58
+
return <ImageEmbed content={content} depth={depth} />;
58
59
}
59
60
60
61
// Case 2: External link
···
103
104
104
105
return (
105
106
<>
106
-
{media && <Embed content={media} />}
107
+
{media && <Embed content={media} depth={depth + 1} />}
107
108
<PostEmbed author={record.author} uri={record.uri}>
108
109
<Text
109
110
className="mt-1 text-base leading-5"
···
112
113
{record.value.text}
113
114
</Text>
114
115
{/* in what case will there be more than one? in what order do we show them? */}
115
-
{record.embeds && <Embed content={record.embeds[0]} />}
116
+
{record.embeds && (
117
+
<Embed content={record.embeds[0]} depth={depth + 1} />
118
+
)}
116
119
</PostEmbed>
117
120
</>
118
121
);
···
129
132
}
130
133
};
131
134
132
-
const ImageEmbed = ({ content }: { content: AppBskyEmbedImages.View }) => {
135
+
const ImageEmbed = ({
136
+
content,
137
+
depth,
138
+
}: {
139
+
content: AppBskyEmbedImages.View;
140
+
depth: number;
141
+
}) => {
133
142
const aspectRatio = useImageAspectRatio(content.images[0]!.thumb);
134
143
switch (content.images.length) {
135
144
case 0:
···
140
149
<Image
141
150
source={{ uri: image.thumb }}
142
151
alt={image.alt}
143
-
className="my-1.5 w-full rounded"
144
-
style={{ aspectRatio }}
152
+
className="mt-1.5 w-full rounded"
153
+
style={{
154
+
aspectRatio:
155
+
depth > 0
156
+
? Math.max(aspectRatio, 1.5)
157
+
: Math.max(aspectRatio, 0.5),
158
+
}}
145
159
/>
146
160
);
147
161
case 2:
148
162
return (
149
-
<View className="my-1.5 flex flex-row justify-between overflow-hidden rounded">
163
+
<View className="mt-1.5 flex flex-row justify-between overflow-hidden rounded">
150
164
{content.images.map((image) => (
151
165
<Image
152
166
key={image.fullsize}
···
159
173
);
160
174
case 3:
161
175
return (
162
-
<View className="my-1.5 flex flex-row justify-between overflow-hidden rounded">
176
+
<View className="mt-1.5 flex flex-row justify-between overflow-hidden rounded">
163
177
{content.images.map((image) => (
164
178
<Image
165
179
key={image.fullsize}
···
213
227
214
228
return (
215
229
<Link href={postHref} asChild>
216
-
<TouchableOpacity className="my-1.5 flex-1 rounded border border-neutral-300 p-2">
230
+
<TouchableOpacity className="mt-1.5 flex-1 rounded border border-neutral-300 px-2 pb-2 pt-1">
217
231
<View className="flex flex-row items-center overflow-hidden">
218
232
<Image
219
233
source={{ uri: author.avatar }}