Multiple improvements to link cards and quote posts (#2398)

* fix canvas

* fix external link embed styles

* Use the same link-card style on web and mobile and give a little more height on desktop to the card images

* Use dark border on link embeds to match quote post style

* Fix the highlighting behavior on linkcards and quoteposts

---------

Co-authored-by: Hailey <me@haileyok.com>

src/lib/media/manip.web.ts

@@ -117,9 +117,6 @@ function createResizedImage(
         return reject(new Error('Failed to resize image'))
       }
 
-      canvas.width = width
-      canvas.height = height
-
       let scale = 1
       if (mode === 'cover') {
         scale = img.width < img.height ? width / img.width : height / img.height
@@ -128,10 +125,11 @@ function createResizedImage(
       }
       let w = img.width * scale
       let h = img.height * scale
-      let x = (width - w) / 2
-      let y = (height - h) / 2
 
-      ctx.drawImage(img, x, y, w, h)
+      canvas.width = w
+      canvas.height = h
+
+      ctx.drawImage(img, 0, 0, w, h)
       resolve(canvas.toDataURL('image/jpeg', quality))
     })
     img.src = dataUri

src/lib/themes.ts

@@ -25,6 +25,7 @@ export const defaultTheme: Theme = {
       postCtrl: '#71768A',
       brandText: '#0066FF',
       emptyStateIcon: '#B6B6C9',
+      borderLinkHover: '#cac1c1',
     },
     primary: {
       background: colors.blue3,
@@ -310,6 +311,7 @@ export const darkTheme: Theme = {
       postCtrl: '#707489',
       brandText: '#0085ff',
       emptyStateIcon: colors.gray4,
+      borderLinkHover: colors.gray5,
     },
     primary: {
       ...defaultTheme.palette.primary,

src/view/com/util/post-embeds/ExternalLinkEmbed.tsx

@@ -23,29 +23,16 @@ export const ExternalLinkEmbed = ({
   )
 
   return (
-    <View
+    <View style={{flexDirection: 'column'}}>
-      style={{
-        flexDirection: !isMobile && !embedPlayerParams ? 'row' : 'column',
-      }}>
       {link.thumb && !embedPlayerParams ? (
         <View
-          style={
+          style={{
-            !isMobile
+            borderTopLeftRadius: 6,
-              ? {
+            borderTopRightRadius: 6,
-                  borderTopLeftRadius: 6,
+            width: '100%',
-                  borderBottomLeftRadius: 6,
+            height: isMobile ? 200 : 300,
-                  width: 120,
+            overflow: 'hidden',
-                  aspectRatio: 1,
+          }}>
-                  overflow: 'hidden',
-                }
-              : {
-                  borderTopLeftRadius: 6,
-                  borderTopRightRadius: 6,
-                  width: '100%',
-                  height: 200,
-                  overflow: 'hidden',
-                }
-          }>
           <Image
             style={styles.extImage}
             source={{uri: link.thumb}}
@@ -61,7 +48,6 @@ export const ExternalLinkEmbed = ({
           paddingHorizontal: isMobile ? 10 : 14,
           paddingTop: 8,
           paddingBottom: 10,
-          flex: !isMobile ? 1 : undefined,
         }}>
         <Text
           type="sm"
@@ -69,16 +55,13 @@ export const ExternalLinkEmbed = ({
           style={[pal.textLight, styles.extUri]}>
           {toNiceDomain(link.uri)}
         </Text>
-        <Text
+        <Text type="lg-bold" numberOfLines={4} style={[pal.text]}>
-          type="lg-bold"
-          numberOfLines={isMobile ? 4 : 2}
-          style={[pal.text]}>
           {link.title || link.uri}
         </Text>
         {link.description ? (
           <Text
             type="md"
-            numberOfLines={isMobile ? 4 : 2}
+            numberOfLines={4}
             style={[pal.text, styles.extDescription]}>
             {link.description}
           </Text>
@@ -90,8 +73,7 @@ export const ExternalLinkEmbed = ({
 
 const styles = StyleSheet.create({
   extImage: {
-    width: '100%',
+    flex: 1,
-    height: 200,
   },
   extUri: {
     marginTop: 2,

src/view/com/util/post-embeds/QuoteEmbed.tsx

@@ -98,6 +98,7 @@ export function QuoteEmbed({
   return (
     <Link
       style={[styles.container, pal.borderDark, style]}
+      hoverStyle={{borderColor: pal.colors.borderLinkHover}}
       href={itemHref}
       title={itemTitle}>
       <PostMeta

src/view/com/util/post-embeds/index.tsx

@@ -63,7 +63,7 @@ export function PostEmbeds({
     const mediaModeration = isModOnQuote ? {} : moderation
     const quoteModeration = isModOnQuote ? moderation : {}
     return (
-      <View style={[styles.stackContainer, style]}>
+      <View style={style}>
         <PostEmbeds embed={embed.media} moderation={mediaModeration} />
         <ContentHider moderation={quoteModeration}>
           <MaybeQuoteEmbed embed={embed.record} moderation={quoteModeration} />
@@ -168,11 +168,14 @@ export function PostEmbeds({
     const link = embed.external
 
     return (
-      <View style={[styles.extOuter, pal.view, pal.border, style]}>
+      <Link
-        <Link asAnchor href={link.uri}>
+        asAnchor
-          <ExternalLinkEmbed link={link} />
+        anchorNoUnderline
-        </Link>
+        href={link.uri}
-      </View>
+        style={[styles.extOuter, pal.view, pal.borderDark, style]}
+        hoverStyle={{borderColor: pal.colors.borderLinkHover}}>
+        <ExternalLinkEmbed link={link} />
+      </Link>
     )
   }
 
@@ -180,9 +183,6 @@ export function PostEmbeds({
 }
 
 const styles = StyleSheet.create({
-  stackContainer: {
-    gap: 6,
-  },
   imagesContainer: {
     marginTop: 8,
   },