this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

cap embed size for nested embeds

+24 -10
+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 }}