StagedLinkPreview: Add special handling for call links

stylesheets/components/StagedLinkPreview.scss

@@ -48,6 +48,10 @@
 .module-staged-link-preview__icon-container {
   margin-inline-end: 8px;
 }
+.module-staged-link-preview__icon-container-call-link {
+  margin-inline-end: 8px;
+  margin: 4px;
+}
 .module-staged-link-preview__content {
   display: flex;
   flex-direction: column;

ts/components/conversation/StagedLinkPreview.tsx

@@ -12,6 +12,10 @@ import type { LinkPreviewType } from '../../types/message/LinkPreviews';
 import type { LocalizerType } from '../../types/Util';
 import { getClassNamesFor } from '../../util/getClassNamesFor';
 import { isImageAttachment } from '../../types/Attachment';
+import { isCallLink } from '../../types/LinkPreview';
+import { Avatar } from '../Avatar';
+import { getColorForCallLink } from '../../util/getColorForCallLink';
+import { getKeyFromCallLink } from '../../util/callLinks';
 
 export type Props = LinkPreviewType & {
   i18n: LocalizerType;
@@ -20,18 +24,9 @@ export type Props = LinkPreviewType & {
   onClose?: () => void;
 };
 
-export function StagedLinkPreview({
+export function StagedLinkPreview(props: Props): JSX.Element {
-  date,
+  const { date, description, domain, i18n, moduleClassName, onClose, title } =
-  description,
+    props;
-  domain,
-  i18n,
-  image,
-  imageSize,
-  moduleClassName,
-  onClose,
-  title,
-}: Props): JSX.Element {
-  const isImage = isImageAttachment(image);
   const isLoaded = Boolean(domain);
 
   const getClassName = getClassNamesFor(
@@ -79,30 +74,7 @@ export function StagedLinkPreview({
         !isLoaded ? getClassName('--is-loading') : null
       )}
     >
-      {!isLoaded ? (
+      <Thumbnail {...props} />
-        <div className={getClassName('__loading')}>
-          {i18n('icu:loadingPreview')}
-        </div>
-      ) : null}
-      {isLoaded && image && isImage && domain ? (
-        <div className={getClassName('__icon-container')}>
-          <Image
-            alt={i18n('icu:stagedPreviewThumbnail', {
-              domain,
-            })}
-            attachment={image}
-            curveBottomLeft={CurveType.Tiny}
-            curveBottomRight={CurveType.Tiny}
-            curveTopLeft={CurveType.Tiny}
-            curveTopRight={CurveType.Tiny}
-            height={imageSize || 72}
-            i18n={i18n}
-            url={image.url}
-            width={imageSize || 72}
-          />
-        </div>
-      ) : null}
-      {isLoaded && !image && <div className={getClassName('__no-image')} />}
       {maybeContent}
       {onClose && (
         <button
@@ -115,3 +87,77 @@ export function StagedLinkPreview({
     </div>
   );
 }
+
+export function Thumbnail({
+  domain,
+  i18n,
+  image,
+  imageSize,
+  moduleClassName,
+  title,
+  url,
+}: Pick<
+  Props,
+  | 'domain'
+  | 'i18n'
+  | 'image'
+  | 'imageSize'
+  | 'moduleClassName'
+  | 'title'
+  | 'url'
+>): JSX.Element {
+  const isImage = isImageAttachment(image);
+  const getClassName = getClassNamesFor(
+    'module-staged-link-preview',
+    moduleClassName
+  );
+
+  if (!domain) {
+    return (
+      <div className={getClassName('__loading')}>
+        {i18n('icu:loadingPreview')}
+      </div>
+    );
+  }
+
+  if (isCallLink(url)) {
+    return (
+      <div className={getClassName('__icon-container-call-link')}>
+        <Avatar
+          acceptedMessageRequest
+          badge={undefined}
+          color={getColorForCallLink(getKeyFromCallLink(url))}
+          conversationType="callLink"
+          i18n={i18n}
+          isMe={false}
+          sharedGroupNames={[]}
+          size={64}
+          title={title ?? i18n('icu:calling__call-link-default-title')}
+        />
+      </div>
+    );
+  }
+
+  if (image && isImage) {
+    return (
+      <div className={getClassName('__icon-container')}>
+        <Image
+          alt={i18n('icu:stagedPreviewThumbnail', {
+            domain,
+          })}
+          attachment={image}
+          curveBottomLeft={CurveType.Tiny}
+          curveBottomRight={CurveType.Tiny}
+          curveTopLeft={CurveType.Tiny}
+          curveTopRight={CurveType.Tiny}
+          height={imageSize || 72}
+          i18n={i18n}
+          url={image.url}
+          width={imageSize || 72}
+        />
+      </div>
+    );
+  }
+
+  return <div className={getClassName('__no-image')} />;
+}