add media component

src/components/media/media.tsx

@@ -0,0 +1,83 @@
+import styles from './media.module.css';
+import { Link } from 'react-router-dom';
+import { CommentMediaInfo } from '../../lib/utils/media-utils';
+import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
+
+interface ThumbnailProps {
+  cid?: string;
+  commentMediaInfo?: CommentMediaInfo;
+  expanded?: boolean;
+  isReply: boolean;
+  link: string;
+  linkHeight?: number;
+  linkWidth?: number;
+  subplebbitAddress?: string;
+  toggleExpanded?: () => void;
+}
+
+export const Thumbnail = ({
+  cid,
+  commentMediaInfo,
+  expanded = false,
+  isReply = false,
+  link,
+  linkHeight,
+  linkWidth,
+  subplebbitAddress,
+  toggleExpanded,
+}: ThumbnailProps) => {
+  const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
+  let displayWidth, displayHeight, hasLinkDimensions;
+  const routeOrLink = isReply ? link : `/p/${subplebbitAddress}/c/${cid}`;
+  const thumbnailClass = expanded ? styles.thumbnailHidden : styles.thumbnailVisible;
+
+  if (linkWidth && linkHeight) {
+    let scale = Math.min(1, 250 / Math.max(linkWidth, linkHeight));
+    displayWidth = `${linkWidth * scale}px`;
+    displayHeight = `${linkHeight * scale}px`;
+    hasLinkDimensions = true;
+  } else {
+    displayWidth = '250px';
+    displayHeight = '250px';
+    hasLinkDimensions = false;
+  }
+
+  const style = hasLinkDimensions ? ({ '--width': displayWidth, '--height': displayHeight } as React.CSSProperties) : {};
+
+  let mediaComponent = null;
+  const gifFrameUrl = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? commentMediaInfo.url : undefined);
+
+  if (commentMediaInfo?.type === 'image') {
+    mediaComponent = <img src={commentMediaInfo.url} alt='' />;
+  } else if (commentMediaInfo?.type === 'video') {
+    mediaComponent = commentMediaInfo.thumbnail ? <img src={commentMediaInfo.thumbnail} alt='' /> : <video src={`${commentMediaInfo.url}#t=0.001`} />;
+  } else if (commentMediaInfo?.type === 'webpage') {
+    mediaComponent = <img src={commentMediaInfo.thumbnail} alt='' />;
+  } else if (commentMediaInfo?.type === 'iframe') {
+    mediaComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' /> : null;
+  } else if (commentMediaInfo?.type === 'gif' && gifFrameUrl) {
+    mediaComponent = <img src={gifFrameUrl} alt='' />;
+  }
+
+  return (
+    <span className={`${styles.thumbnail} ${thumbnailClass}`} style={style}>
+      <span className={hasLinkDimensions ? styles.transparentThumbnailWrapper : styles.thumbnailWrapper}>
+        <Link
+          to={routeOrLink}
+          onClick={(e) => {
+            if (e.button === 0 && isReply) {
+              e.preventDefault();
+              toggleExpanded && toggleExpanded();
+            }
+          }}
+        >
+          {mediaComponent}
+        </Link>
+      </span>
+    </span>
+  );
+};
+
+export const Media = () => {
+  return <></>;
+};