From 8b67253c0a5866358c537633ba335fc3c2183ce5 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 17 Apr 2023 10:47:14 +0700
Subject: [PATCH] merged messageImage preview to image preview

---
 src/components/note/comment.tsx              |  4 ++--
 src/components/note/extend.tsx               |  2 +-
 src/components/note/preview/image.tsx        |  6 ++++--
 src/components/note/preview/link.tsx         |  2 +-
 src/components/note/preview/messageImage.tsx | 18 ------------------
 src/components/note/preview/video.tsx        |  2 +-
 src/utils/parser.tsx                         |  5 ++---
 7 files changed, 11 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/note/preview/messageImage.tsx

diff --git a/src/components/note/comment.tsx b/src/components/note/comment.tsx
index ea21b47a..62af7b3f 100644
--- a/src/components/note/comment.tsx
+++ b/src/components/note/comment.tsx
@@ -1,4 +1,4 @@
-import NoteMetadata from '@components/note/metadata';
+import { NoteMetadata } from '@components/note/metadata';
 import { ImagePreview } from '@components/note/preview/image';
 import { VideoPreview } from '@components/note/preview/video';
 import { NoteQuote } from '@components/note/quote';
@@ -18,7 +18,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
       if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
-        return <ImagePreview key={match + i} url={match} />;
+        return <ImagePreview key={match + i} url={match} size="large" />;
       } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
         // youtube
         return <VideoPreview key={match + i} url={match} />;
diff --git a/src/components/note/extend.tsx b/src/components/note/extend.tsx
index 199f54de..92d28508 100644
--- a/src/components/note/extend.tsx
+++ b/src/components/note/extend.tsx
@@ -18,7 +18,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
     parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
       if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
         // image url
-        return <ImagePreview key={match + i} url={match} />;
+        return <ImagePreview key={match + i} url={match} size="large" />;
       } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
         // youtube
         return <VideoPreview key={match + i} url={match} />;
diff --git a/src/components/note/preview/image.tsx b/src/components/note/preview/image.tsx
index 7f06c4a9..d3cb2756 100644
--- a/src/components/note/preview/image.tsx
+++ b/src/components/note/preview/image.tsx
@@ -1,9 +1,11 @@
 import Image from 'next/image';
 import { memo } from 'react';
 
-export const ImagePreview = memo(function ImagePreview({ url }: { url: string }) {
+export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
   return (
-    <div className="relative mb-2 mt-3 h-full w-full rounded-lg border border-zinc-800 xl:w-2/3">
+    <div
+      className={`relative h-full ${size === 'large' ? 'w-full' : 'w-2/3'} rounded-lg border border-zinc-800 xl:w-2/3`}
+    >
       <Image
         src={url}
         alt={url}
diff --git a/src/components/note/preview/link.tsx b/src/components/note/preview/link.tsx
index e2a1c33d..d1064231 100644
--- a/src/components/note/preview/link.tsx
+++ b/src/components/note/preview/link.tsx
@@ -6,7 +6,7 @@ export default function LinkCard({ data }: { data: any }) {
     <Link
       href={data['url']}
       target={'_blank'}
-      className="relative mt-2 flex flex-col overflow-hidden rounded-lg border border-zinc-700"
+      className="relative flex flex-col overflow-hidden rounded-lg border border-zinc-700"
     >
       <div className="relative aspect-video h-auto w-full">
         <Image src={data['image']} alt="image preview" fill={true} className="object-cover" />
diff --git a/src/components/note/preview/messageImage.tsx b/src/components/note/preview/messageImage.tsx
deleted file mode 100644
index 1ed79684..00000000
--- a/src/components/note/preview/messageImage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Image from 'next/image';
-import { memo } from 'react';
-
-export const MessageImagePreview = memo(function MesssageImagePreview({ url }: { url: string }) {
-  return (
-    <div className="relative mb-2 mt-3 h-full w-2/3 rounded-lg border border-zinc-800 xl:w-2/3">
-      <Image
-        src={url}
-        alt={url}
-        width="0"
-        height="0"
-        sizes="100vw"
-        className="h-auto w-full rounded-lg object-cover"
-        priority
-      />
-    </div>
-  );
-});
diff --git a/src/components/note/preview/video.tsx b/src/components/note/preview/video.tsx
index 6f5b9878..34508fbd 100644
--- a/src/components/note/preview/video.tsx
+++ b/src/components/note/preview/video.tsx
@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';
 
 export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
   return (
-    <div onClick={(e) => e.stopPropagation()} className="relative mt-3 flex flex-col overflow-hidden rounded-lg">
+    <div onClick={(e) => e.stopPropagation()} className="relative flex flex-col overflow-hidden rounded-lg">
       <ReactPlayer
         url={url}
         controls={true}
diff --git a/src/utils/parser.tsx b/src/utils/parser.tsx
index 3cf80a9a..12221df0 100644
--- a/src/utils/parser.tsx
+++ b/src/utils/parser.tsx
@@ -1,5 +1,4 @@
 import { ImagePreview } from '@components/note/preview/image';
-import { MessageImagePreview } from '@components/note/preview/messageImage';
 import { VideoPreview } from '@components/note/preview/video';
 import { NoteQuote } from '@components/note/quote';
 import { UserMention } from '@components/user/mention';
@@ -16,7 +15,7 @@ export const contentParser = (noteContent, noteTags) => {
   parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
     if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
       // image url
-      return <ImagePreview key={match + i} url={match} />;
+      return <ImagePreview key={match + i} url={match} size="large" />;
     } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
       // youtube
       return <VideoPreview key={match + i} url={match} />;
@@ -62,7 +61,7 @@ export const messageParser = (noteContent) => {
   parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
     if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
       // image url
-      return <MessageImagePreview key={match + i} url={match} />;
+      return <ImagePreview key={match + i} url={match} size="small" />;
     } else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
       // youtube
       return <VideoPreview key={match + i} url={match} />;