From de1547d26119c19ae8f29ed0537b74aca89c1f34 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 29 Mar 2024 13:54:11 +0100
Subject: [PATCH] add media component

---
 src/components/media/index.ts          |  1 +
 src/components/media/media.module.css  | 31 ++++++++++
 src/components/media/media.tsx         | 83 +++++++++++++++++++++++++
 src/components/post/post.module.css    | 27 +++++++-
 src/components/post/post.tsx           | 46 ++++++++++----
 src/hooks/use-fetch-gif-first-frame.ts | 85 ++++++++++++++++++++++++++
 src/themes.css                         |  4 ++
 7 files changed, 263 insertions(+), 14 deletions(-)
 create mode 100644 src/components/media/index.ts
 create mode 100644 src/components/media/media.module.css
 create mode 100644 src/components/media/media.tsx
 create mode 100644 src/hooks/use-fetch-gif-first-frame.ts

diff --git a/src/components/media/index.ts b/src/components/media/index.ts
new file mode 100644
index 00000000..dd4f5658
--- /dev/null
+++ b/src/components/media/index.ts
@@ -0,0 +1 @@
+export { Thumbnail, Media } from './media';
diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css
new file mode 100644
index 00000000..0da43d01
--- /dev/null
+++ b/src/components/media/media.module.css
@@ -0,0 +1,31 @@
+.thumbnail {
+  float: left;
+  padding: 3px 20px 5px 0;
+  width: var(--width, 250px);
+  height: var(--height, 250px);
+}
+
+.thumbnailHidden {
+  display: none;
+}
+
+.thumbnailVisible {
+  display: block;
+}
+
+.thumbnailWrapper {
+  background-color: var(--background-thumbnail);
+  height: 250px;
+  width: 250px;
+  display: inline-block;
+}
+
+.transparentThumbnailWrapper {
+  background-color: transparent;
+  opacity: 1;
+}
+
+.thumbnail img, .thumbnail video {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx
new file mode 100644
index 00000000..7e4fff97
--- /dev/null
+++ b/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 <></>;
+};
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 804f0655..fb143b99 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -10,12 +10,35 @@
   padding: 0.5em 0; /* instead of using margin, wrap with padding */
 }
 
-.postDesktop .link a {
+.threadHideButtonWrapper {
+  padding-right: 5px;
+  float: left;
+}
+
+.postDesktop .threadHideButton {
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  image-rendering: pixelated;
+  cursor: pointer;
+}
+
+.postDesktop .hideThread {
+  background-image: var(--post-hide-button-background-image);
+}
+
+.postDesktop .unhideThread {
+  background-image: var(--post-unhide-button-background-image);
+}
+
+.postDesktop .fileText a {
   color: var(--post-link-text-color);
   text-decoration: var(--post-link-text-decoration);
 }
 
-.postDesktop .link a:hover {
+.postDesktop .fileText a:hover {
   color: var(--post-link-text-color-hover);
   text-decoration: var(--post-link-text-decoration-hover);
 }
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index fbe63e2a..5136fa06 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -1,34 +1,56 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
-import styles from './post.module.css';
-import useReplies from '../../hooks/use-replies';
-import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
+import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
+import useReplies from '../../hooks/use-replies';
+import styles from './post.module.css';
 import Markdown from '../markdown';
+import { Thumbnail } from '../media';
+
 import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
 
 const PostDesktop = ({ post }: Comment) => {
   const { t } = useTranslation();
-  const { author, cid, content, link, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { displayName, shortAddress } = author || {};
   const replies = useReplies(post);
-  const linkMediaInfo = getLinkMediaInfoMemoized(link);
   const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title;
   const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content;
 
+  const commentMediaInfo = getCommentMediaInfoMemoized(post);
+  const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+
   return (
     <div className={styles.postDesktop}>
       <div className={styles.hrWrapper}>
         <hr />
       </div>
-      {linkMediaInfo?.url && (
-        <div className={styles.link}>
-          {t('link')}:{' '}
-          <a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
-            {linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
-          </a>{' '}
-          ({linkMediaInfo?.type})
+      <span className={styles.threadHideButtonWrapper}>
+        <span className={`${styles.threadHideButton} ${styles.hideThread}`} />
+      </span>
+      {commentMediaInfo?.url && (
+        <div className={styles.file}>
+          <div className={styles.fileText}>
+            {t('link')}:{' '}
+            <a href={commentMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
+              {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
+            </a>{' '}
+            ({commentMediaInfo?.type})
+          </div>
+          {hasThumbnail && (
+            <span className={styles.fileThumb}>
+              <Thumbnail
+                cid={cid}
+                commentMediaInfo={commentMediaInfo}
+                isReply={false}
+                link={link}
+                linkHeight={linkHeight}
+                linkWidth={linkWidth}
+                subplebbitAddress={subplebbitAddress}
+              />
+            </span>
+          )}
         </div>
       )}
       <div className={styles.postInfo}>
diff --git a/src/hooks/use-fetch-gif-first-frame.ts b/src/hooks/use-fetch-gif-first-frame.ts
new file mode 100644
index 00000000..26301cee
--- /dev/null
+++ b/src/hooks/use-fetch-gif-first-frame.ts
@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+
+export const fetchImage = (url: string): Promise<ArrayBuffer> => {
+  return new Promise((resolve, reject) => {
+    const request = new XMLHttpRequest();
+    request.open('GET', url, true);
+    request.responseType = 'arraybuffer';
+    request.onloadend = () => {
+      if (request.response !== undefined && (request.status === 200 || request.status === 304)) {
+        resolve(request.response);
+      } else {
+        reject(new Error(`XMLHttpRequest, ${request.statusText}`));
+      }
+    };
+    request.send();
+  });
+};
+
+export const readImage = (file: File): Promise<ArrayBuffer> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result as ArrayBuffer);
+    };
+    reader.readAsArrayBuffer(file);
+  });
+};
+
+const parseGif = async (buf: ArrayBuffer): Promise<Blob> => {
+  const image = new Image();
+  await new Promise((resolve) => {
+    image.src = URL.createObjectURL(new Blob([buf]));
+    image.onload = resolve;
+  });
+  const canvas = document.createElement('canvas');
+  canvas.width = image.width;
+  canvas.height = image.height;
+  const ctx = canvas.getContext('2d');
+  if (ctx === null) throw new Error('Canvas Context null');
+  ctx.drawImage(image, 0, 0, image.width, image.height);
+  return await new Promise((resolve, reject) =>
+    canvas.toBlob((blob) => {
+      if (blob === null) {
+        reject('Canvas Blob null');
+      } else {
+        resolve(blob);
+      }
+    }),
+  );
+};
+
+const useFetchGifFirstFrame = (url: string | undefined) => {
+  const [frameUrl, setFrameUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!url) {
+      setFrameUrl(null);
+      return;
+    }
+
+    let isActive = true;
+
+    const fetchFrame = async () => {
+      try {
+        const blob = typeof url === 'string' ? await parseGif(await fetchImage(url)) : await parseGif(await readImage(url as File));
+        const objectUrl = URL.createObjectURL(blob);
+        if (isActive) setFrameUrl(objectUrl);
+      } catch (error) {
+        console.error('Failed to load GIF frame:', error);
+        if (isActive) setFrameUrl(null);
+      }
+    };
+
+    fetchFrame();
+
+    // Cleanup function to avoid setting state on unmounted component
+    return () => {
+      isActive = false;
+    };
+  }, [url]);
+
+  return frameUrl;
+};
+
+export default useFetchGifFirstFrame;
diff --git a/src/themes.css b/src/themes.css
index 6cdeeff2..5fe43a15 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -69,6 +69,8 @@
   --post-content-link-text-decoration-hover: none;
 
   /* post */
+  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png");
+  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
   --post-subject-text-color: #cc1105;
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;
@@ -168,6 +170,8 @@
   --post-content-link-text-decoration-hover: none;
 
   /* post */
+  --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png");
+  --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
   --post-subject-text-color: #0f0c5d;
   --post-subject-font-weight: 700;
   --post-name-text-color: #117743;