Merge pull request #5699 from urbit/james/image-thumbnails

links: image thumbnail fills entire grid item

pkg/interface/src/views/apps/links/components/LinkBlockItem.tsx

@@ -34,11 +34,12 @@ export interface LinkBlockItemProps {
   node: GraphNode;
   size?: CenterProps['height'];
   border?: CenterProps['border'];
+  objectFit?: string;
   summary?: boolean;
 }
 
 export function LinkBlockItem(props: LinkBlockItemProps & CenterProps) {
-  const { node, summary, size, m, border = 1, ...rest } = props;
+  const { node, summary, size, m, border = 1, objectFit, ...rest } = props;
   const { post, children } = node;
   const { contents, index, author } = post;
 
@@ -90,7 +91,12 @@ export function LinkBlockItem(props: LinkBlockItemProps & CenterProps) {
           />
         )
       ) : isImage ? (
-        <RemoteContentImageEmbed url={url} />
+          <RemoteContentImageEmbed
+            url={url}
+            tall
+            stretch
+            objectFit={objectFit ? objectFit : "cover"}
+          />
       ) : isAudio ? (
         <AudioPlayer title={title} url={url} />
       ) : isOembed ? (

pkg/interface/src/views/apps/links/components/LinkDetail.tsx

@@ -27,7 +27,16 @@ export function LinkDetail(props: LinkDetailProps) {
   return (
     /*  @ts-ignore indio props?? */
     <Row height="100%" width="100%" flexDirection={['column', 'column', 'row']} {...rest}>
-      <LinkBlockItem minWidth="0" minHeight="0" height={['50%', '50%', '100%']} width={['100%', '100%', 'calc(100% - 350px)']} flexGrow={0} border={0} node={node} />
+      <LinkBlockItem
+        minWidth="0"
+        minHeight="0"
+        height={["50%", "50%", "100%"]}
+        width={["100%", "100%", "calc(100% - 350px)"]}
+        flexGrow={0}
+        border={0}
+        node={node}
+        objectFit="contain"
+      />
       <Col
         minHeight="0"
         flexShrink={1}

pkg/interface/src/views/components/RemoteContent/embed.tsx

@@ -44,13 +44,14 @@ function onStopProp<T extends HTMLElement>(e: MouseEvent<T>) {
 
 type ImageProps = PropFunc<typeof BaseImage> & {
   objectFit?: string;
+  stretch?: boolean;
 };
 
 const Image = styled.img(system({ objectFit: true }), ...allSystemStyle);
 export function RemoteContentImageEmbed(
   props: ImageProps & RemoteContentEmbedProps
 ) {
-  const { url, ...rest } = props;
+  const { url, stretch, ...rest } = props;
   const [noCors, setNoCors] = useState(false);
   const { hovering, bind } = useHovering();
   // maybe images aren't set up for CORS embeds
@@ -59,7 +60,13 @@ export function RemoteContentImageEmbed(
   }, []);
 
   return (
-    <Box height="100%" width="100%" position="relative" {...bind} {...rest}>
+    <Box
+      height={stretch ? "100%" : "192px"}
+      width={stretch ? "100%" : "192px"}
+      position="relative"
+      {...bind}
+      {...rest}
+    >
       <BaseAnchor
         position="absolute"
         top={2}
@@ -84,8 +91,8 @@ export function RemoteContentImageEmbed(
         referrerPolicy="no-referrer"
         flexShrink={0}
         src={url}
-        height="192px"
-        maxWidth="192px"
+        height={stretch ? "100%" : "192px"}
+        maxWidth={stretch ? "100%" : "192px"}
         width="100%"
         objectFit="cover"
         borderRadius={2}