From 7a8917b3396d8f17cc4ba84851ccdf053dfa2aa3 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Fri, 7 Oct 2022 23:18:38 +0800
Subject: [PATCH 01/14] [ArticleCard] support audio and video

---
 components/ListPageDisplays/ArticleCard.js    |  41 +-
 .../ListPageDisplays/ListPageCards.stories.js |  47 +++
 .../ListPageCards.stories.storyshot           | 359 +++++++++++++++++-
 3 files changed, 437 insertions(+), 10 deletions(-)

diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
index 5648e0a9..4f9c6bfd 100644
--- a/components/ListPageDisplays/ArticleCard.js
+++ b/components/ListPageDisplays/ArticleCard.js
@@ -84,7 +84,7 @@ const useStyles = makeStyles(theme => ({
   highlight: {
     color: theme.palette.primary[500],
   },
-  attachmentImage: {
+  attachment: {
     minWidth: 0, // Don't use intrinsic image width as flex item min-size
     maxHeight: '10em', // Don't let image rows take too much vertical space
   },
@@ -100,6 +100,7 @@ function ArticleCard({ article, highlight = '' }) {
   const {
     id,
     text,
+    articleType,
     attachmentUrl,
     replyCount,
     replyRequestCount,
@@ -135,13 +136,36 @@ function ArticleCard({ article, highlight = '' }) {
                   : text}
               </ExpandableText>
             )}
-            {attachmentUrl && (
-              <img
-                className={classes.attachmentImage}
-                src={attachmentUrl}
-                alt="image"
-              />
-            )}
+            {(() => {
+              switch (articleType) {
+                case 'TEXT':
+                  return null;
+                case 'IMAGE':
+                  return (
+                    <img
+                      className={classes.attachment}
+                      src={attachmentUrl}
+                      alt="image"
+                    />
+                  );
+                case 'VIDEO':
+                  return attachmentUrl ? (
+                    <video
+                      className={classes.attachment}
+                      src={attachmentUrl}
+                      controls
+                    />
+                  ) : (
+                    t`A video` + ` (${t`Preview not supported yet`})`
+                  );
+                case 'AUDIO':
+                  return attachmentUrl ? (
+                    <audio src={attachmentUrl} controls />
+                  ) : (
+                    t`An audio` + ` (${t`Preview not supported yet`})`
+                  );
+              }
+            })()}
           </div>
         </ListPageCard>
       </a>
@@ -154,6 +178,7 @@ ArticleCard.fragments = {
     fragment ArticleCard on Article {
       id
       text
+      articleType
       attachmentUrl(variant: THUMBNAIL)
       replyCount
       replyRequestCount
diff --git a/components/ListPageDisplays/ListPageCards.stories.js b/components/ListPageDisplays/ListPageCards.stories.js
index 6c42c8b2..c10e5eb9 100644
--- a/components/ListPageDisplays/ListPageCards.stories.js
+++ b/components/ListPageDisplays/ListPageCards.stories.js
@@ -33,6 +33,7 @@ export const ArticleCards = () => (
         replyCount: 3,
         replyRequestCount: 4,
         createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'TEXT',
       }}
     />
     <ArticleCard
@@ -43,6 +44,7 @@ export const ArticleCards = () => (
         replyCount: 0,
         replyRequestCount: 999,
         createdAt: '2019-01-01T00:00:00Z',
+        articleType: 'TEXT',
       }}
       highlight={{
         text:
@@ -63,6 +65,7 @@ export const ArticleCards = () => (
         replyCount: 6,
         replyRequestCount: 4,
         createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'IMAGE',
       }}
     />
     <ArticleCard
@@ -72,6 +75,50 @@ export const ArticleCards = () => (
         replyCount: 4,
         replyRequestCount: 6,
         createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'IMAGE',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id4',
+        attachmentUrl: null,
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'VIDEO',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id5',
+        attachmentUrl:
+          'https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t',
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'VIDEO',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id6',
+        attachmentUrl:
+          'https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t',
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'VIDEO',
+      }}
+    />
+    <ArticleCard
+      article={{
+        id: 'id6',
+        attachmentUrl:
+          'https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t',
+        replyCount: 0,
+        replyRequestCount: 0,
+        createdAt: '2020-01-01T00:00:00Z',
+        articleType: 'AUDIO',
       }}
     />
   </ListPageCards>
diff --git a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
index a5f20045..a62e9375 100644
--- a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
+++ b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
@@ -8,6 +8,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
     <ArticleCard
       article={
         Object {
+          "articleType": "TEXT",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id1",
           "replyCount": 3,
@@ -110,6 +111,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
     <ArticleCard
       article={
         Object {
+          "articleType": "TEXT",
           "createdAt": "2019-01-01T00:00:00Z",
           "id": "id2",
           "replyCount": 0,
@@ -255,6 +257,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
     <ArticleCard
       article={
         Object {
+          "articleType": "IMAGE",
           "attachmentUrl": "https://placekitten.com/512/1000",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id3",
@@ -331,7 +334,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                 </div>
                 <img
                   alt="image"
-                  className="makeStyles-attachmentImage"
+                  className="makeStyles-attachment"
                   src="https://placekitten.com/512/1000"
                 />
               </div>
@@ -343,6 +346,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
     <ArticleCard
       article={
         Object {
+          "articleType": "IMAGE",
           "attachmentUrl": "https://placekitten.com/2000/150",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id3",
@@ -419,7 +423,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                 </div>
                 <img
                   alt="image"
-                  className="makeStyles-attachmentImage"
+                  className="makeStyles-attachment"
                   src="https://placekitten.com/2000/150"
                 />
               </div>
@@ -428,6 +432,357 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
         </a>
       </Link>
     </ArticleCard>
+    <ArticleCard
+      article={
+        Object {
+          "articleType": "VIDEO",
+          "attachmentUrl": null,
+          "createdAt": "2020-01-01T00:00:00Z",
+          "id": "id4",
+          "replyCount": 0,
+          "replyRequestCount": 0,
+        }
+      }
+    >
+      <Link
+        as="/article/id4"
+        href="/article/[id]"
+      >
+        <a
+          className="makeStyles-root"
+          href="/article/id4"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+          <ListPageCard>
+            <article
+              className="makeStyles-root"
+            >
+              <Infos>
+                <div
+                  className="makeStyles-root"
+                >
+                  <TimeInfo
+                    key=".0"
+                    time="2020-01-01T00:00:00Z"
+                  >
+                    <Tooltip
+                      title="Jan 1, 2020, 12:00 AM"
+                    >
+                      <time
+                        aria-describedby={null}
+                        className=""
+                        dateTime="2020-01-01T00:00:00.000Z"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="Jan 1, 2020, 12:00 AM"
+                      >
+                        First reported now
+                      </time>
+                    </Tooltip>
+                  </TimeInfo>
+                </div>
+              </Infos>
+              <div
+                className="makeStyles-flex"
+              >
+                <div
+                  className="makeStyles-infoBox"
+                >
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      replies
+                    </span>
+                  </div>
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      reports
+                    </span>
+                  </div>
+                </div>
+                A video (Preview not supported yet)
+              </div>
+            </article>
+          </ListPageCard>
+        </a>
+      </Link>
+    </ArticleCard>
+    <ArticleCard
+      article={
+        Object {
+          "articleType": "VIDEO",
+          "attachmentUrl": "https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t",
+          "createdAt": "2020-01-01T00:00:00Z",
+          "id": "id5",
+          "replyCount": 0,
+          "replyRequestCount": 0,
+        }
+      }
+    >
+      <Link
+        as="/article/id5"
+        href="/article/[id]"
+      >
+        <a
+          className="makeStyles-root"
+          href="/article/id5"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+          <ListPageCard>
+            <article
+              className="makeStyles-root"
+            >
+              <Infos>
+                <div
+                  className="makeStyles-root"
+                >
+                  <TimeInfo
+                    key=".0"
+                    time="2020-01-01T00:00:00Z"
+                  >
+                    <Tooltip
+                      title="Jan 1, 2020, 12:00 AM"
+                    >
+                      <time
+                        aria-describedby={null}
+                        className=""
+                        dateTime="2020-01-01T00:00:00.000Z"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="Jan 1, 2020, 12:00 AM"
+                      >
+                        First reported now
+                      </time>
+                    </Tooltip>
+                  </TimeInfo>
+                </div>
+              </Infos>
+              <div
+                className="makeStyles-flex"
+              >
+                <div
+                  className="makeStyles-infoBox"
+                >
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      replies
+                    </span>
+                  </div>
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      reports
+                    </span>
+                  </div>
+                </div>
+                <video
+                  className="makeStyles-attachment"
+                  controls={true}
+                  src="https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t"
+                />
+              </div>
+            </article>
+          </ListPageCard>
+        </a>
+      </Link>
+    </ArticleCard>
+    <ArticleCard
+      article={
+        Object {
+          "articleType": "VIDEO",
+          "attachmentUrl": "https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t",
+          "createdAt": "2020-01-01T00:00:00Z",
+          "id": "id6",
+          "replyCount": 0,
+          "replyRequestCount": 0,
+        }
+      }
+    >
+      <Link
+        as="/article/id6"
+        href="/article/[id]"
+      >
+        <a
+          className="makeStyles-root"
+          href="/article/id6"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+          <ListPageCard>
+            <article
+              className="makeStyles-root"
+            >
+              <Infos>
+                <div
+                  className="makeStyles-root"
+                >
+                  <TimeInfo
+                    key=".0"
+                    time="2020-01-01T00:00:00Z"
+                  >
+                    <Tooltip
+                      title="Jan 1, 2020, 12:00 AM"
+                    >
+                      <time
+                        aria-describedby={null}
+                        className=""
+                        dateTime="2020-01-01T00:00:00.000Z"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="Jan 1, 2020, 12:00 AM"
+                      >
+                        First reported now
+                      </time>
+                    </Tooltip>
+                  </TimeInfo>
+                </div>
+              </Infos>
+              <div
+                className="makeStyles-flex"
+              >
+                <div
+                  className="makeStyles-infoBox"
+                >
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      replies
+                    </span>
+                  </div>
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      reports
+                    </span>
+                  </div>
+                </div>
+                <video
+                  className="makeStyles-attachment"
+                  controls={true}
+                  src="https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t"
+                />
+              </div>
+            </article>
+          </ListPageCard>
+        </a>
+      </Link>
+    </ArticleCard>
+    <ArticleCard
+      article={
+        Object {
+          "articleType": "AUDIO",
+          "attachmentUrl": "https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t",
+          "createdAt": "2020-01-01T00:00:00Z",
+          "id": "id6",
+          "replyCount": 0,
+          "replyRequestCount": 0,
+        }
+      }
+    >
+      <Link
+        as="/article/id6"
+        href="/article/[id]"
+      >
+        <a
+          className="makeStyles-root"
+          href="/article/id6"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+          <ListPageCard>
+            <article
+              className="makeStyles-root"
+            >
+              <Infos>
+                <div
+                  className="makeStyles-root"
+                >
+                  <TimeInfo
+                    key=".0"
+                    time="2020-01-01T00:00:00Z"
+                  >
+                    <Tooltip
+                      title="Jan 1, 2020, 12:00 AM"
+                    >
+                      <time
+                        aria-describedby={null}
+                        className=""
+                        dateTime="2020-01-01T00:00:00.000Z"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseLeave={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        title="Jan 1, 2020, 12:00 AM"
+                      >
+                        First reported now
+                      </time>
+                    </Tooltip>
+                  </TimeInfo>
+                </div>
+              </Infos>
+              <div
+                className="makeStyles-flex"
+              >
+                <div
+                  className="makeStyles-infoBox"
+                >
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      replies
+                    </span>
+                  </div>
+                  <div>
+                    <h2>
+                      0
+                    </h2>
+                    <span>
+                      reports
+                    </span>
+                  </div>
+                </div>
+                <audio
+                  controls={true}
+                  src="https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t"
+                />
+              </div>
+            </article>
+          </ListPageCard>
+        </a>
+      </Link>
+    </ArticleCard>
   </div>
 </ListPageCards>
 `;

From fd761759f440f17fdcff59e8fbb14546e613bfd7 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sat, 8 Oct 2022 08:38:44 +0800
Subject: [PATCH 02/14] [article] let article page support video and audio

---
 pages/article/[id].js | 64 +++++++++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 21 deletions(-)

diff --git a/pages/article/[id].js b/pages/article/[id].js
index 3baf16a4..2ec9133d 100644
--- a/pages/article/[id].js
+++ b/pages/article/[id].js
@@ -105,7 +105,7 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     borderRadius: theme.shape.borderRadius,
   },
-  attachmentImage: {
+  attachment: {
     width: '100%',
     maxWidth: 600,
   },
@@ -121,6 +121,7 @@ const LOAD_ARTICLE = gql`
     GetArticle(id: $id) {
       id
       text
+      articleType
       attachmentUrl(variant: PREVIEW)
       originalAttachmentUrl: attachmentUrl(variant: ORIGINAL)
       requestedForReply
@@ -319,6 +320,7 @@ function ArticlePage() {
   const {
     replyRequestCount,
     text,
+    articleType,
     attachmentUrl,
     originalAttachmentUrl,
     hyperlinks,
@@ -364,26 +366,46 @@ function ArticlePage() {
               </Infos>
             </header>
             <CardContent>
-              {attachmentUrl &&
-                (!originalAttachmentUrl ? (
-                  <img
-                    className={classes.attachmentImage}
-                    src={attachmentUrl}
-                    alt="image"
-                  />
-                ) : (
-                  <a
-                    href={originalAttachmentUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img
-                      className={classes.attachmentImage}
-                      src={attachmentUrl}
-                      alt="image"
-                    />
-                  </a>
-                ))}
+              {(() => {
+                switch (articleType) {
+                  case 'IMAGE':
+                    return !originalAttachmentUrl ? (
+                      <img
+                        className={classes.attachment}
+                        src={attachmentUrl}
+                        alt="image"
+                      />
+                    ) : (
+                      <a
+                        href={originalAttachmentUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <img
+                          className={classes.attachment}
+                          src={attachmentUrl}
+                          alt="image"
+                        />
+                      </a>
+                    );
+                  case 'VIDEO':
+                    return !originalAttachmentUrl ? (
+                      t`Log in to view video content`
+                    ) : (
+                      <video
+                        className={classes.attachment}
+                        src={originalAttachmentUrl}
+                        controls
+                      />
+                    );
+                  case 'AUDIO':
+                    return !originalAttachmentUrl ? (
+                      t`Log in to view audio content`
+                    ) : (
+                      <audio src={originalAttachmentUrl} controls />
+                    );
+                }
+              })()}
               {text &&
                 nl2br(
                   linkify(text, {

From 7e1f4b29e335a550c373de13e2a7dc32797db7f5 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 9 Oct 2022 01:26:47 +0800
Subject: [PATCH 03/14] [Thumbnail] implement and apply thumbnail and larger
 previews

---
 components/ListPageDisplays/ArticleCard.js    | 46 ++------------
 .../ListPageDisplays/ReplySearchItem.js       | 24 ++-----
 components/NewReplySection/Mobile.js          | 32 ++++++++--
 components/ProfilePage/RepliedArticleTab.js   | 13 +---
 components/RelatedReplies.js                  | 14 ++---
 components/SideSection.js                     | 10 ---
 components/SideSection.stories.js             |  7 ---
 components/Thumbnail.js                       | 62 +++++++++++++++++++
 pages/article/[id].js                         | 17 +++--
 pages/replies.js                              | 16 ++---
 pages/reply/[id].js                           | 24 ++-----
 11 files changed, 127 insertions(+), 138 deletions(-)
 create mode 100644 components/Thumbnail.js

diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
index 4f9c6bfd..1687b7a6 100644
--- a/components/ListPageDisplays/ArticleCard.js
+++ b/components/ListPageDisplays/ArticleCard.js
@@ -4,6 +4,7 @@ import { c, t } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';
 import Infos, { TimeInfo } from 'components/Infos';
 import ExpandableText from 'components/ExpandableText';
+import Thumbnail from 'components/Thumbnail';
 import ListPageCard from './ListPageCard';
 import { highlightSections } from 'lib/text';
 import { useHighlightStyles } from './utils';
@@ -97,15 +98,7 @@ const useStyles = makeStyles(theme => ({
  * @param {Highlights?} props.highlight - If given, display search snippet instead of reply text
  */
 function ArticleCard({ article, highlight = '' }) {
-  const {
-    id,
-    text,
-    articleType,
-    attachmentUrl,
-    replyCount,
-    replyRequestCount,
-    createdAt,
-  } = article;
+  const { id, text, replyCount, replyRequestCount, createdAt } = article;
   const classes = useStyles();
   const highlightClasses = useHighlightStyles();
 
@@ -136,36 +129,7 @@ function ArticleCard({ article, highlight = '' }) {
                   : text}
               </ExpandableText>
             )}
-            {(() => {
-              switch (articleType) {
-                case 'TEXT':
-                  return null;
-                case 'IMAGE':
-                  return (
-                    <img
-                      className={classes.attachment}
-                      src={attachmentUrl}
-                      alt="image"
-                    />
-                  );
-                case 'VIDEO':
-                  return attachmentUrl ? (
-                    <video
-                      className={classes.attachment}
-                      src={attachmentUrl}
-                      controls
-                    />
-                  ) : (
-                    t`A video` + ` (${t`Preview not supported yet`})`
-                  );
-                case 'AUDIO':
-                  return attachmentUrl ? (
-                    <audio src={attachmentUrl} controls />
-                  ) : (
-                    t`An audio` + ` (${t`Preview not supported yet`})`
-                  );
-              }
-            })()}
+            <Thumbnail article={article} />
           </div>
         </ListPageCard>
       </a>
@@ -178,12 +142,12 @@ ArticleCard.fragments = {
     fragment ArticleCard on Article {
       id
       text
-      articleType
-      attachmentUrl(variant: THUMBNAIL)
       replyCount
       replyRequestCount
       createdAt
+      ...ThumbnailArticleData
     }
+    ${Thumbnail.fragments.ThumbnailArticleData}
   `,
   Highlight: highlightSections.fragments.HighlightFields,
 };
diff --git a/components/ListPageDisplays/ReplySearchItem.js b/components/ListPageDisplays/ReplySearchItem.js
index c03d401f..65a8e25a 100644
--- a/components/ListPageDisplays/ReplySearchItem.js
+++ b/components/ListPageDisplays/ReplySearchItem.js
@@ -13,6 +13,7 @@ import {
 import ExpandableText from 'components/ExpandableText';
 import Infos from 'components/Infos';
 import TimeInfo from 'components/Infos/TimeInfo';
+import Thumbnail from 'components/Thumbnail';
 import ReplyItem from './ReplyItem';
 import { nl2br } from 'lib/text';
 import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -92,10 +93,6 @@ const useStyles = makeStyles(theme => ({
       marginBottom: 0,
     },
   },
-  attachmentImage: {
-    maxWidth: '100%',
-    maxHeight: '8em', // So that image don't take too much space (more than replies)
-  },
 }));
 
 function RepliedArticleInfo({ article }) {
@@ -146,13 +143,7 @@ export default function ReplySearchItem({
       <Box p={{ xs: 2, md: 4.5 }}>
         <RepliedArticleInfo article={articleReply.article} />
         <div className={classes.flex}>
-          {articleReply.article.attachmentUrl && (
-            <img
-              className={classes.attachmentImage}
-              src={articleReply.article.attachmentUrl}
-              alt="image"
-            />
-          )}
+          <Thumbnail article={articleReply.article} />
           {articleReply.article.text && (
             <ExpandableText className={classes.content} lineClamp={3}>
               {nl2br(articleReply.article.text)}
@@ -196,13 +187,7 @@ export default function ReplySearchItem({
                   >
                     <div className={classes.otherArticleItem}>
                       <RepliedArticleInfo article={article} />
-                      {article.attachmentUrl && (
-                        <img
-                          className={classes.attachmentImage}
-                          src={article.attachmentUrl}
-                          alt="image"
-                        />
-                      )}
+                      <Thumbnail article={article} />
                       {article.text && (
                         <ExpandableText lineClamp={3}>
                           {article.text}
@@ -229,9 +214,9 @@ ReplySearchItem.fragments = {
         article {
           id
           text
-          attachmentUrl(variant: THUMBNAIL)
           replyRequestCount
           createdAt
+          ...ThumbnailArticleData
         }
         ...ReplyItemArticleReplyData
       }
@@ -239,6 +224,7 @@ ReplySearchItem.fragments = {
     }
     ${ReplyItem.fragments.ReplyItem}
     ${ReplyItem.fragments.ReplyItemArticleReplyData}
+    ${Thumbnail.fragments.ThumbnailArticleData}
   `,
   Highlight: ReplyItem.fragments.Highlight,
 };
diff --git a/components/NewReplySection/Mobile.js b/components/NewReplySection/Mobile.js
index 69162a3a..3d750671 100644
--- a/components/NewReplySection/Mobile.js
+++ b/components/NewReplySection/Mobile.js
@@ -69,7 +69,7 @@ const useStyles = makeStyles(theme => ({
       },
     },
   },
-  attachmentImage: { maxWidth: '100%' },
+  attachment: { maxWidth: '100%' },
 }));
 
 const CustomSelectInput = withStyles(theme => ({
@@ -178,6 +178,31 @@ export default function Mobile({
           <Box display="flex" flexDirection="column" flexGrow={1}>
             {selectedTab === 0 && (
               <Box p={2}>
+                {(() => {
+                  switch (article.articleType) {
+                    case 'IMAGE':
+                      return (
+                        <img
+                          className={classes.attachment}
+                          src={article.attachmentUrl}
+                          alt="image"
+                        />
+                      );
+                    case 'VIDEO':
+                      return (
+                        <video
+                          className={classes.attachment}
+                          src={article.originalAttachmentUrl}
+                          controls
+                        />
+                      );
+                    case 'AUDIO':
+                      return (
+                        <audio src={article.originalAttachmentUrl} controls />
+                      );
+                  }
+                })()}
+
                 {nl2br(
                   linkify(article.text, {
                     props: {
@@ -186,11 +211,6 @@ export default function Mobile({
                   })
                 )}
                 <Hyperlinks hyperlinks={article.hyperlinks} />
-                <img
-                  className={classes.attachmentImage}
-                  src={article.attachmentUrl}
-                  alt="image"
-                />
               </Box>
             )}
             {selectedTab === 1 && (
diff --git a/components/ProfilePage/RepliedArticleTab.js b/components/ProfilePage/RepliedArticleTab.js
index 8f5833e3..6943b0ad 100644
--- a/components/ProfilePage/RepliedArticleTab.js
+++ b/components/ProfilePage/RepliedArticleTab.js
@@ -21,6 +21,7 @@ import ArticleReplyFeedbackControl from 'components/ArticleReplyFeedbackControl'
 import ArticleReplySummary from 'components/ArticleReplySummary';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
 import ReplyInfo from 'components/ReplyInfo';
+import Thumbnail from 'components/Thumbnail';
 
 import { nl2br, linkify } from 'lib/text';
 
@@ -116,10 +117,6 @@ const useStyles = makeStyles(theme => ({
   },
   reply: { marginLeft: 56 },
   replyControl: { marginTop: 16 },
-  attachmentImage: {
-    maxWidth: '100%',
-    maxHeight: '8em', // So that image don't take too much space (more than replies)
-  },
 }));
 
 function ArticleReply({ articleReply }) {
@@ -272,13 +269,7 @@ function RepliedArticleTab({ userId }) {
                   {timeAgo => t`First reported ${timeAgo}`}
                 </TimeInfo>
               </Infos>
-              {article.attachmentUrl && (
-                <img
-                  className={classes.attachmentImage}
-                  src={article.attachmentUrl}
-                  alt="image"
-                />
-              )}
+              <Thumbnail article={article} />
               {article.text && (
                 <ExpandableText lineClamp={3}>{article.text}</ExpandableText>
               )}
diff --git a/components/RelatedReplies.js b/components/RelatedReplies.js
index 79702089..199a5ffc 100644
--- a/components/RelatedReplies.js
+++ b/components/RelatedReplies.js
@@ -9,6 +9,7 @@ import ExpandableText from './ExpandableText';
 import { linkify, nl2br } from 'lib/text';
 import Link from 'next/link';
 import PlainList from 'components/PlainList';
+import Thumbnail from 'components/Thumbnail';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -50,7 +51,7 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     padding: 12,
   },
-  attachmentImage: {
+  attachment: {
     maxWidth: '100%',
     maxHeight: '10em', // 10 lines height
   },
@@ -80,9 +81,10 @@ const RelatedArticleReplyData = gql`
     article {
       id
       text
-      attachmentUrl(variant: THUMBNAIL)
+      ...ThumbnailArticleData
     }
   }
+  ${Thumbnail.fragments.ThumbnailArticleData}
 `;
 
 /**
@@ -115,13 +117,7 @@ function RelatedReplyItem({ article, reply, onConnect, disabled, actionText }) {
         <section>
           <h3 className={classes.title}>{t`Related article`}</h3>
           <blockquote className={classes.blockquote}>
-            {article.attachmentUrl && (
-              <img
-                className={classes.attachmentImage}
-                src={article.attachmentUrl}
-                alt="image"
-              />
-            )}
+            <Thumbnail article={article} className={classes.attachment} />
             {article.text && (
               <ExpandableText wordCount={40}>
                 {/*
diff --git a/components/SideSection.js b/components/SideSection.js
index 1648d343..dd86cfe3 100644
--- a/components/SideSection.js
+++ b/components/SideSection.js
@@ -122,13 +122,3 @@ export const SideSectionText = withStyles(() => ({
     </article>
   );
 });
-
-export const SideSectionImage = withStyles(() => ({
-  asideImage: {
-    maxWidth: '100%',
-    maxHeight: '100px',
-    verticalAlign: 'bottom',
-  },
-}))(({ classes, className, ...props }) => {
-  return <img className={cx(classes.asideImage, className)} {...props} />;
-});
diff --git a/components/SideSection.stories.js b/components/SideSection.stories.js
index ec993e65..f856c2ad 100644
--- a/components/SideSection.stories.js
+++ b/components/SideSection.stories.js
@@ -6,7 +6,6 @@ import {
   SideSectionLinks,
   SideSectionLink,
   SideSectionText,
-  SideSectionImage,
 } from './SideSection';
 
 export default {
@@ -37,12 +36,6 @@ export const SideSectionStructure = () => (
             section 3 Side section 3 Side section 3 Side section 3{' '}
           </SideSectionText>
         </SideSectionLink>
-        <SideSectionLink>
-          <SideSectionImage src="https://placekitten.com/300/200" />
-        </SideSectionLink>
-        <SideSectionLink>
-          <SideSectionImage src="https://placekitten.com/200/500" />
-        </SideSectionLink>
       </SideSectionLinks>
     </SideSection>
   </Container>
diff --git a/components/Thumbnail.js b/components/Thumbnail.js
new file mode 100644
index 00000000..9302579e
--- /dev/null
+++ b/components/Thumbnail.js
@@ -0,0 +1,62 @@
+import gql from 'graphql-tag';
+import { t } from 'ttag';
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'clsx';
+
+import { ellipsis } from 'lib/text';
+
+const useStyles = makeStyles(() => ({
+  thumbnail: {
+    maxWidth: '100%',
+    maxHeight: '8em', // So that image don't take too much space (more than replies)
+  },
+}));
+
+/**
+ *
+ * @param {ThumbnailArticleData} props.article
+ * @param {string} props.className - for replaced elements like image and video
+ */
+function Thumbnail({ article, className }) {
+  const classes = useStyles();
+  const thumbnailCls = cx(classes.thumbnail, className);
+
+  switch (article.articleTypei) {
+    case 'IMAGE': {
+      const altText = ellipsis(article.text, { wordCount: 40 });
+      return (
+        <img
+          className={thumbnailCls}
+          src={article.thumbnailUrl}
+          alt={altText}
+        />
+      );
+    }
+    case 'VIDEO':
+      return !article.thumbnailUrl ? (
+        t`A video` + ` (${t`Preview not supported yet`})`
+      ) : (
+        <video className={thumbnailCls} src={article.thumbnailUrl} controls />
+      );
+    case 'AUDIO':
+      return !article.thumbnailUrl ? (
+        t`An audio` + ` (${t`Preview not supported yet`})`
+      ) : (
+        <audio src={article.thumbnailUrl} controls />
+      );
+  }
+
+  return null;
+}
+
+Thumbnail.fragments = {
+  ThumbnailArticleData: gql`
+    fragment ThumbnailArticleData on Article {
+      articleType
+      text
+      thumbnailUrl: attachmentUrl(variant: THUMBNAIL)
+    }
+  `,
+};
+
+export default Thumbnail;
diff --git a/pages/article/[id].js b/pages/article/[id].js
index 2ec9133d..987fdb5d 100644
--- a/pages/article/[id].js
+++ b/pages/article/[id].js
@@ -30,7 +30,6 @@ import {
   SideSectionLinks,
   SideSectionLink,
   SideSectionText,
-  SideSectionImage,
 } from 'components/SideSection';
 import Hyperlinks from 'components/Hyperlinks';
 import CurrentReplies from 'components/CurrentReplies';
@@ -41,6 +40,7 @@ import ArticleInfo from 'components/ArticleInfo';
 import ArticleCategories from 'components/ArticleCategories';
 import TrendPlot from 'components/TrendPlot';
 import Infos, { TimeInfo } from 'components/Infos';
+import Thumbnail from 'components/Thumbnail';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -109,6 +109,11 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     maxWidth: 600,
   },
+  asideAttachment: {
+    maxWidth: '100%',
+    maxHeight: '100px',
+    verticalAlign: 'bottom',
+  },
 }));
 
 const LOAD_ARTICLE = gql`
@@ -148,11 +153,11 @@ const LOAD_ARTICLE = gql`
             id
             text
             articleType
-            attachmentUrl(variant: THUMBNAIL)
             articleCategories {
               categoryId
             }
             ...ArticleInfo
+            ...ThumbnailArticleData
           }
         }
       }
@@ -179,6 +184,7 @@ const LOAD_ARTICLE = gql`
   ${ArticleCategories.fragments.ArticleCategoryData}
   ${ArticleCategories.fragments.AddCategoryDialogData}
   ${ArticleInfo.fragments.articleInfo}
+  ${Thumbnail.fragments.ThumbnailArticleData}
 `;
 
 const LOAD_ARTICLE_FOR_USER = gql`
@@ -521,8 +527,11 @@ function ArticlePage() {
                   passHref
                 >
                   <SideSectionLink>
-                    {node.articleType === 'IMAGE' ? (
-                      <SideSectionImage src={node.attachmentUrl} />
+                    {node.articleType !== 'TEXT' ? (
+                      <Thumbnail
+                        article={node}
+                        className={classes.asideAttachment}
+                      />
                     ) : (
                       <SideSectionText>{node.text}</SideSectionText>
                     )}
diff --git a/pages/replies.js b/pages/replies.js
index 24338b76..9293c5de 100644
--- a/pages/replies.js
+++ b/pages/replies.js
@@ -29,6 +29,7 @@ import {
 } from 'components/ListPageControls';
 import FeedDisplay from 'components/Subscribe/FeedDisplay';
 import AppLayout from 'components/AppLayout';
+import Thumbnail from 'components/Thumbnail';
 import withData from 'lib/apollo';
 
 const LIST_ARTICLES = gql`
@@ -44,7 +45,7 @@ const LIST_ARTICLES = gql`
           replyRequestCount
           createdAt
           text
-          attachmentUrl(variant: THUMBNAIL)
+          ...ThumbnailArticleData
           articleReplies(status: NORMAL) {
             reply {
               id
@@ -59,6 +60,7 @@ const LIST_ARTICLES = gql`
   }
   ${ReplyItem.fragments.ReplyItem}
   ${ReplyItem.fragments.ReplyItemArticleReplyData}
+  ${Thumbnail.fragments.ThumbnailArticleData}
 `;
 
 const LIST_STAT = gql`
@@ -178,10 +180,6 @@ const useStyles = makeStyles(theme => ({
       marginBottom: 12,
     },
   },
-  attachmentImage: {
-    maxWidth: '100%',
-    maxHeight: '8em', // So that image don't take too much space (more than replies)
-  },
 }));
 
 function ReplyListPage() {
@@ -260,13 +258,7 @@ function ReplyListPage() {
                     {timeAgo => t`First reported ${timeAgo}`}
                   </TimeInfo>
                 </Infos>
-                {article.attachmentUrl && (
-                  <img
-                    className={classes.attachmentImage}
-                    src={article.attachmentUrl}
-                    alt="image"
-                  />
-                )}
+                <Thumbnail article={article} />
                 {article.text && (
                   <ExpandableText lineClamp={2}>{article.text}</ExpandableText>
                 )}
diff --git a/pages/reply/[id].js b/pages/reply/[id].js
index bc574948..61c6f00d 100644
--- a/pages/reply/[id].js
+++ b/pages/reply/[id].js
@@ -17,6 +17,7 @@ import getTermsString from 'lib/terms';
 import ExpandableText from 'components/ExpandableText';
 import AppLayout from 'components/AppLayout';
 import ArticleReply from 'components/ArticleReply';
+import Thumbnail from 'components/Thumbnail';
 import { Card, CardHeader, CardContent } from 'components/Card';
 import { ProfileTooltip } from 'components/ProfileLink';
 import Infos, { TimeInfo } from 'components/Infos';
@@ -58,10 +59,6 @@ const useStyles = makeStyles(theme => ({
   infos: {
     marginTop: 12,
   },
-  attachmentImage: {
-    width: '100%',
-    maxWidth: 600,
-  },
 }));
 
 const LOAD_REPLY = gql`
@@ -74,8 +71,8 @@ const LOAD_REPLY = gql`
         article {
           id
           text
-          attachmentUrl(variant: PREVIEW)
           replyCount
+          ...ThumbnailArticleData
         }
         createdAt
         status
@@ -99,6 +96,7 @@ const LOAD_REPLY = gql`
   }
   ${ArticleReply.fragments.ArticleReplyData}
   ${ProfileTooltip.fragments.ProfileTooltipUserData}
+  ${Thumbnail.fragments.ThumbnailArticleData}
 `;
 
 const LOAD_REPLY_FOR_USER = gql`
@@ -254,13 +252,7 @@ function ReplyPage() {
                 as={`/article/${originalArticleReply.article.id}`}
               >
                 <a className={classes.articleLink}>
-                  {originalArticleReply.article.attachmentUrl && (
-                    <img
-                      className={classes.attachmentImage}
-                      src={originalArticleReply.article.attachmentUrl}
-                      alt="image"
-                    />
-                  )}
+                  <Thumbnail article={originalArticleReply.article} />
                   {originalArticleReply.article.text && (
                     <ExpandableText lineClamp={5}>
                       {nl2br(originalArticleReply.article.text)}
@@ -285,13 +277,7 @@ function ReplyPage() {
                 <CardContent key={ar.article.id}>
                   <Link href="/article/[id]" as={`/article/${ar.article.id}`}>
                     <a className={classes.articleLink}>
-                      {ar.article.attachmentUrl && (
-                        <img
-                          className={classes.attachmentImage}
-                          src={ar.article.attachmentUrl}
-                          alt="image"
-                        />
-                      )}
+                      <Thumbnail article={ar.article} />
                       {ar.article.text && (
                         <ExpandableText>
                           {nl2br(ar.article.text)}

From 48b516717a9329532450535ca7709b2246399297 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 9 Oct 2022 07:33:48 +0800
Subject: [PATCH 04/14] [Thumbnail] fix storyshhot in ListPageCards

---
 .../ListPageDisplays/ListPageCards.stories.js |  12 +-
 .../ListPageCards.stories.storyshot           | 168 ++++++++++++++----
 .../ActionButton.stories.storyshot            |   8 +-
 components/Thumbnail.js                       |  12 +-
 .../SideSection.stories.storyshot             |  28 ---
 5 files changed, 156 insertions(+), 72 deletions(-)

diff --git a/components/ListPageDisplays/ListPageCards.stories.js b/components/ListPageDisplays/ListPageCards.stories.js
index c10e5eb9..fa71360b 100644
--- a/components/ListPageDisplays/ListPageCards.stories.js
+++ b/components/ListPageDisplays/ListPageCards.stories.js
@@ -61,7 +61,7 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id3',
-        attachmentUrl: 'https://placekitten.com/512/1000',
+        thumbnailUrl: 'https://placekitten.com/512/1000',
         replyCount: 6,
         replyRequestCount: 4,
         createdAt: '2020-01-01T00:00:00Z',
@@ -71,7 +71,7 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id3',
-        attachmentUrl: 'https://placekitten.com/2000/150',
+        thumbnailUrl: 'https://placekitten.com/2000/150',
         replyCount: 4,
         replyRequestCount: 6,
         createdAt: '2020-01-01T00:00:00Z',
@@ -81,7 +81,7 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id4',
-        attachmentUrl: null,
+        thumbnailUrl: null,
         replyCount: 0,
         replyRequestCount: 0,
         createdAt: '2020-01-01T00:00:00Z',
@@ -91,7 +91,7 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id5',
-        attachmentUrl:
+        thumbnailUrl:
           'https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t',
         replyCount: 0,
         replyRequestCount: 0,
@@ -102,7 +102,7 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id6',
-        attachmentUrl:
+        thumbnailUrl:
           'https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t',
         replyCount: 0,
         replyRequestCount: 0,
@@ -113,7 +113,7 @@ export const ArticleCards = () => (
     <ArticleCard
       article={{
         id: 'id6',
-        attachmentUrl:
+        thumbnailUrl:
           'https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t',
         replyCount: 0,
         replyRequestCount: 0,
diff --git a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
index a62e9375..55ece4fc 100644
--- a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
+++ b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
@@ -102,6 +102,18 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id1",
+                      "replyCount": 3,
+                      "replyRequestCount": 4,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                    }
+                  }
+                />
               </div>
             </article>
           </ListPageCard>
@@ -248,6 +260,18 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2019-01-01T00:00:00Z",
+                      "id": "id2",
+                      "replyCount": 0,
+                      "replyRequestCount": 999,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
+                    }
+                  }
+                />
               </div>
             </article>
           </ListPageCard>
@@ -258,11 +282,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
       article={
         Object {
           "articleType": "IMAGE",
-          "attachmentUrl": "https://placekitten.com/512/1000",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id3",
           "replyCount": 6,
           "replyRequestCount": 4,
+          "thumbnailUrl": "https://placekitten.com/512/1000",
         }
       }
     >
@@ -332,11 +356,24 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
-                <img
-                  alt="image"
-                  className="makeStyles-attachment"
-                  src="https://placekitten.com/512/1000"
-                />
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "IMAGE",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id3",
+                      "replyCount": 6,
+                      "replyRequestCount": 4,
+                      "thumbnailUrl": "https://placekitten.com/512/1000",
+                    }
+                  }
+                >
+                  <img
+                    alt=""
+                    className="makeStyles-thumbnail"
+                    src="https://placekitten.com/512/1000"
+                  />
+                </Thumbnail>
               </div>
             </article>
           </ListPageCard>
@@ -347,11 +384,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
       article={
         Object {
           "articleType": "IMAGE",
-          "attachmentUrl": "https://placekitten.com/2000/150",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id3",
           "replyCount": 4,
           "replyRequestCount": 6,
+          "thumbnailUrl": "https://placekitten.com/2000/150",
         }
       }
     >
@@ -421,11 +458,24 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
-                <img
-                  alt="image"
-                  className="makeStyles-attachment"
-                  src="https://placekitten.com/2000/150"
-                />
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "IMAGE",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id3",
+                      "replyCount": 4,
+                      "replyRequestCount": 6,
+                      "thumbnailUrl": "https://placekitten.com/2000/150",
+                    }
+                  }
+                >
+                  <img
+                    alt=""
+                    className="makeStyles-thumbnail"
+                    src="https://placekitten.com/2000/150"
+                  />
+                </Thumbnail>
               </div>
             </article>
           </ListPageCard>
@@ -436,11 +486,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
       article={
         Object {
           "articleType": "VIDEO",
-          "attachmentUrl": null,
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id4",
           "replyCount": 0,
           "replyRequestCount": 0,
+          "thumbnailUrl": null,
         }
       }
     >
@@ -510,7 +560,20 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
-                A video (Preview not supported yet)
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "VIDEO",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id4",
+                      "replyCount": 0,
+                      "replyRequestCount": 0,
+                      "thumbnailUrl": null,
+                    }
+                  }
+                >
+                  A video (Preview not supported yet)
+                </Thumbnail>
               </div>
             </article>
           </ListPageCard>
@@ -521,11 +584,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
       article={
         Object {
           "articleType": "VIDEO",
-          "attachmentUrl": "https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id5",
           "replyCount": 0,
           "replyRequestCount": 0,
+          "thumbnailUrl": "https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t",
         }
       }
     >
@@ -595,11 +658,26 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
-                <video
-                  className="makeStyles-attachment"
-                  controls={true}
-                  src="https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t"
-                />
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "VIDEO",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id5",
+                      "replyCount": 0,
+                      "replyRequestCount": 0,
+                      "thumbnailUrl": "https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t",
+                    }
+                  }
+                >
+                  <video
+                    autoPlay={true}
+                    className="makeStyles-thumbnail"
+                    loop={true}
+                    muted={true}
+                    src="https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t"
+                  />
+                </Thumbnail>
               </div>
             </article>
           </ListPageCard>
@@ -610,11 +688,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
       article={
         Object {
           "articleType": "VIDEO",
-          "attachmentUrl": "https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id6",
           "replyCount": 0,
           "replyRequestCount": 0,
+          "thumbnailUrl": "https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t",
         }
       }
     >
@@ -684,11 +762,26 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
-                <video
-                  className="makeStyles-attachment"
-                  controls={true}
-                  src="https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t"
-                />
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "VIDEO",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id6",
+                      "replyCount": 0,
+                      "replyRequestCount": 0,
+                      "thumbnailUrl": "https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t",
+                    }
+                  }
+                >
+                  <video
+                    autoPlay={true}
+                    className="makeStyles-thumbnail"
+                    loop={true}
+                    muted={true}
+                    src="https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t"
+                  />
+                </Thumbnail>
               </div>
             </article>
           </ListPageCard>
@@ -699,11 +792,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
       article={
         Object {
           "articleType": "AUDIO",
-          "attachmentUrl": "https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t",
           "createdAt": "2020-01-01T00:00:00Z",
           "id": "id6",
           "replyCount": 0,
           "replyRequestCount": 0,
+          "thumbnailUrl": "https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t",
         }
       }
     >
@@ -773,10 +866,23 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
-                <audio
-                  controls={true}
-                  src="https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t"
-                />
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "AUDIO",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id6",
+                      "replyCount": 0,
+                      "replyRequestCount": 0,
+                      "thumbnailUrl": "https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t",
+                    }
+                  }
+                >
+                  <audio
+                    controls={true}
+                    src="https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t"
+                  />
+                </Thumbnail>
               </div>
             </article>
           </ListPageCard>
diff --git a/components/ReportPage/__snapshots__/ActionButton.stories.storyshot b/components/ReportPage/__snapshots__/ActionButton.stories.storyshot
index 3bbcd0c9..bbb04341 100644
--- a/components/ReportPage/__snapshots__/ActionButton.stories.storyshot
+++ b/components/ReportPage/__snapshots__/ActionButton.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
   }
 >
   <button
-    className="MuiButtonBase-root-301 MuiButton-root-274 MuiButton-outlined-279 makeStyles-button"
+    className="MuiButtonBase-root-302 MuiButton-root-275 MuiButton-outlined-280 makeStyles-button"
     disabled={false}
     onBlur={[Function]}
     onDragLeave={[Function]}
@@ -31,13 +31,13 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-label-275"
+      className="MuiButton-label-276"
     >
       Action button text
       <Arrow>
         <svg
           aria-hidden={true}
-          className="MuiSvgIcon-root-302"
+          className="MuiSvgIcon-root-303"
           focusable="false"
           viewBox="0 0 14 27"
         >
@@ -51,7 +51,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
       </Arrow>
     </span>
     <span
-      className="MuiTouchRipple-root-311"
+      className="MuiTouchRipple-root-312"
     >
       <TransitionGroup
         childFactory={[Function]}
diff --git a/components/Thumbnail.js b/components/Thumbnail.js
index 9302579e..45a8b9a0 100644
--- a/components/Thumbnail.js
+++ b/components/Thumbnail.js
@@ -21,9 +21,9 @@ function Thumbnail({ article, className }) {
   const classes = useStyles();
   const thumbnailCls = cx(classes.thumbnail, className);
 
-  switch (article.articleTypei) {
+  switch (article.articleType) {
     case 'IMAGE': {
-      const altText = ellipsis(article.text, { wordCount: 40 });
+      const altText = ellipsis(article.text ?? '', { wordCount: 40 });
       return (
         <img
           className={thumbnailCls}
@@ -36,7 +36,13 @@ function Thumbnail({ article, className }) {
       return !article.thumbnailUrl ? (
         t`A video` + ` (${t`Preview not supported yet`})`
       ) : (
-        <video className={thumbnailCls} src={article.thumbnailUrl} controls />
+        <video
+          className={thumbnailCls}
+          src={article.thumbnailUrl}
+          autoPlay
+          loop
+          muted
+        />
       );
     case 'AUDIO':
       return !article.thumbnailUrl ? (
diff --git a/components/__snapshots__/SideSection.stories.storyshot b/components/__snapshots__/SideSection.stories.storyshot
index 38f55518..7825986d 100644
--- a/components/__snapshots__/SideSection.stories.storyshot
+++ b/components/__snapshots__/SideSection.stories.storyshot
@@ -60,34 +60,6 @@ exports[`Storyshots SideSection Side Section Structure 1`] = `
               </Component>
             </a>
           </Component>
-          <Component>
-            <a
-              className="Component-asideItem"
-            >
-              <Component
-                src="https://placekitten.com/300/200"
-              >
-                <img
-                  className="Component-asideImage"
-                  src="https://placekitten.com/300/200"
-                />
-              </Component>
-            </a>
-          </Component>
-          <Component>
-            <a
-              className="Component-asideItem"
-            >
-              <Component
-                src="https://placekitten.com/200/500"
-              >
-                <img
-                  className="Component-asideImage"
-                  src="https://placekitten.com/200/500"
-                />
-              </Component>
-            </a>
-          </Component>
         </div>
       </Component>
     </aside>

From 85c86d6c22e913ac51963a208f9bfd2b34e53df3 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 9 Oct 2022 15:46:13 +0800
Subject: [PATCH 05/14] [ProfilePage] fix replied article thumbnail

---
 components/ProfilePage/RepliedArticleTab.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/ProfilePage/RepliedArticleTab.js b/components/ProfilePage/RepliedArticleTab.js
index 6943b0ad..055f7283 100644
--- a/components/ProfilePage/RepliedArticleTab.js
+++ b/components/ProfilePage/RepliedArticleTab.js
@@ -49,7 +49,7 @@ const LOAD_REPLIED_ARTICLES = gql`
           replyRequestCount
           createdAt
           text
-          attachmentUrl(variant: THUMBNAIL)
+          ...ThumbnailArticleData
           articleReplies(status: NORMAL) {
             replyId
             createdAt
@@ -75,6 +75,7 @@ const LOAD_REPLIED_ARTICLES = gql`
   ${ReplyInfo.fragments.replyInfo}
   ${Avatar.fragments.AvatarData}
   ${ArticleReplySummary.fragments.ArticleReplySummaryData}
+  ${Thumbnail.fragments.ThumbnailArticleData}
 `;
 
 const LOAD_REPLIED_ARTICLES_STAT = gql`

From 8271ddb734902761df030505cb72241ca392a953 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 9 Oct 2022 18:07:08 +0800
Subject: [PATCH 06/14] [ListPageDisplays] adjust size of ArticleCard
 Thumbnails

---
 components/ListPageDisplays/ArticleCard.js       |  2 +-
 .../ListPageCards.stories.storyshot              | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
index 1687b7a6..61824277 100644
--- a/components/ListPageDisplays/ArticleCard.js
+++ b/components/ListPageDisplays/ArticleCard.js
@@ -129,7 +129,7 @@ function ArticleCard({ article, highlight = '' }) {
                   : text}
               </ExpandableText>
             )}
-            <Thumbnail article={article} />
+            <Thumbnail article={article} className={classes.attachment} />
           </div>
         </ListPageCard>
       </a>
diff --git a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
index 55ece4fc..514413c1 100644
--- a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
+++ b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
@@ -113,6 +113,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                     }
                   }
+                  className="makeStyles-attachment"
                 />
               </div>
             </article>
@@ -271,6 +272,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
                     }
                   }
+                  className="makeStyles-attachment"
                 />
               </div>
             </article>
@@ -367,10 +369,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "thumbnailUrl": "https://placekitten.com/512/1000",
                     }
                   }
+                  className="makeStyles-attachment"
                 >
                   <img
                     alt=""
-                    className="makeStyles-thumbnail"
+                    className="makeStyles-thumbnail makeStyles-attachment"
                     src="https://placekitten.com/512/1000"
                   />
                 </Thumbnail>
@@ -469,10 +472,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "thumbnailUrl": "https://placekitten.com/2000/150",
                     }
                   }
+                  className="makeStyles-attachment"
                 >
                   <img
                     alt=""
-                    className="makeStyles-thumbnail"
+                    className="makeStyles-thumbnail makeStyles-attachment"
                     src="https://placekitten.com/2000/150"
                   />
                 </Thumbnail>
@@ -571,6 +575,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "thumbnailUrl": null,
                     }
                   }
+                  className="makeStyles-attachment"
                 >
                   A video (Preview not supported yet)
                 </Thumbnail>
@@ -669,10 +674,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "thumbnailUrl": "https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t",
                     }
                   }
+                  className="makeStyles-attachment"
                 >
                   <video
                     autoPlay={true}
-                    className="makeStyles-thumbnail"
+                    className="makeStyles-thumbnail makeStyles-attachment"
                     loop={true}
                     muted={true}
                     src="https://drive.google.com/uc?id=1SQ9lc1-ghzw-SL6Dyb_UMN6hAPBAckvK&confirm=t"
@@ -773,10 +779,11 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "thumbnailUrl": "https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t",
                     }
                   }
+                  className="makeStyles-attachment"
                 >
                   <video
                     autoPlay={true}
-                    className="makeStyles-thumbnail"
+                    className="makeStyles-thumbnail makeStyles-attachment"
                     loop={true}
                     muted={true}
                     src="https://drive.google.com/uc?id=1DczThMYTmGV3GvDCAU2EPnhsBwVcoFQi&confirm=t"
@@ -877,6 +884,7 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                       "thumbnailUrl": "https://drive.google.com/uc?id=1D-K8hVcOw7UNbu80uJkAYMJd1HilAFOp&confirm=t",
                     }
                   }
+                  className="makeStyles-attachment"
                 >
                   <audio
                     controls={true}

From c8f9df5b4cd0c9ddc582b614c1b9aae95a4f908e Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 9 Oct 2022 23:56:08 +0800
Subject: [PATCH 07/14] [ListPageControls] introducing ArticleTypeFilter and
 use it in article list & profile

---
 .../ListPageControls/ArticleTypeFilter.js     | 48 +++++++++++++++++++
 components/ListPageControls/index.js          |  2 +
 components/ProfilePage/RepliedArticleTab.js   |  5 ++
 pages/articles.js                             |  5 +-
 4 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 components/ListPageControls/ArticleTypeFilter.js

diff --git a/components/ListPageControls/ArticleTypeFilter.js b/components/ListPageControls/ArticleTypeFilter.js
new file mode 100644
index 00000000..1fe09d6c
--- /dev/null
+++ b/components/ListPageControls/ArticleTypeFilter.js
@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import { useRouter } from 'next/router';
+import { t } from 'ttag';
+import BaseFilter from './BaseFilter';
+import { goToUrlQueryAndResetPagination } from 'lib/listPage';
+
+/**
+ * URL param name to read from and write to
+ */
+const PARAM_NAME = 'articleTypes';
+
+const OPTIONS = [
+  { value: 'TEXT', label: t`Text` },
+  { value: 'IMAGE', label: t`Image` },
+  { value: 'VIDEO', label: t`Video` },
+  { value: 'AUDIO', label: t`Audio` },
+];
+
+/**
+ * @param {object} query - query from router
+ * @returns {Arary<keyof TYPE_NAME>} list of selected reply types; see constants/replyType for all possible values
+ */
+function getValues(query) {
+  return query[PARAM_NAME] ? query[PARAM_NAME].split(',') : [];
+}
+
+function ArticleTypeFilter() {
+  const { query } = useRouter();
+  const selectedValues = getValues(query);
+
+  return (
+    <BaseFilter
+      title={t`Format`}
+      selected={selectedValues}
+      options={OPTIONS}
+      onChange={selected =>
+        goToUrlQueryAndResetPagination({
+          ...query,
+          [PARAM_NAME]: selected.join(','),
+        })
+      }
+    />
+  );
+}
+
+const MemoizedArticleTypeFilter = memo(ArticleTypeFilter);
+MemoizedArticleTypeFilter.getValues = getValues;
+export default MemoizedArticleTypeFilter;
diff --git a/components/ListPageControls/index.js b/components/ListPageControls/index.js
index b90a433f..e311e7a5 100644
--- a/components/ListPageControls/index.js
+++ b/components/ListPageControls/index.js
@@ -3,6 +3,7 @@ import Filters from './Filters';
 import BaseFilter from './BaseFilter';
 import ArticleStatusFilter from './ArticleStatusFilter';
 import CategoryFilter from './CategoryFilter';
+import ArticleTypeFilter from './ArticleTypeFilter';
 import ReplyTypeFilter from './ReplyTypeFilter';
 import TimeRange from './TimeRange';
 import SortInput from './SortInput';
@@ -14,6 +15,7 @@ export {
   BaseFilter,
   ArticleStatusFilter,
   CategoryFilter,
+  ArticleTypeFilter,
   ReplyTypeFilter,
   TimeRange,
   SortInput,
diff --git a/components/ProfilePage/RepliedArticleTab.js b/components/ProfilePage/RepliedArticleTab.js
index 055f7283..6fddebac 100644
--- a/components/ProfilePage/RepliedArticleTab.js
+++ b/components/ProfilePage/RepliedArticleTab.js
@@ -8,6 +8,7 @@ import {
   Tools,
   Filters,
   CategoryFilter,
+  ArticleTypeFilter,
   ReplyTypeFilter,
   TimeRange,
   SortInput,
@@ -187,6 +188,9 @@ function urlQuery2Filter(query = {}, userId) {
     };
   }
 
+  const articleTypes = ArticleTypeFilter.getValues(query);
+  if (articleTypes.length) filterObj.articleTypes = articleTypes;
+
   const selectedReplyTypes = ReplyTypeFilter.getValues(query);
   if (selectedReplyTypes.length)
     filterObj.articleReply.replyTypes = selectedReplyTypes;
@@ -238,6 +242,7 @@ function RepliedArticleTab({ userId }) {
         <SortInput defaultOrderBy={DEFAULT_ORDER} options={REPLIES_ORDER} />
       </Tools>
       <Filters className={classes.filters}>
+        <ArticleTypeFilter />
         <ReplyTypeFilter />
         <CategoryFilter />
       </Filters>
diff --git a/pages/articles.js b/pages/articles.js
index 7dd7b5ed..e4c04fc4 100644
--- a/pages/articles.js
+++ b/pages/articles.js
@@ -16,6 +16,7 @@ import {
   Filters,
   ArticleStatusFilter,
   CategoryFilter,
+  ArticleTypeFilter,
   ReplyTypeFilter,
   TimeRange,
   SortInput,
@@ -102,8 +103,7 @@ function urlQuery2Filter({ userId, ...query } = {}) {
   const selectedReplyTypes = ReplyTypeFilter.getValues(query);
   if (selectedReplyTypes.length) filterObj.replyTypes = selectedReplyTypes;
 
-  // No UI for article types yet, so we read from `query` directly
-  const articleTypes = query.articleTypes ? query.articleTypes.split(',') : [];
+  const articleTypes = ArticleTypeFilter.getValues(query);
   if (articleTypes.length) filterObj.articleTypes = articleTypes;
 
   // Return filterObj only when it is populated.
@@ -172,6 +172,7 @@ function ArticleListPage() {
 
       <Filters>
         <ArticleStatusFilter />
+        <ArticleTypeFilter />
         <ReplyTypeFilter />
         <CategoryFilter />
       </Filters>

From 92d2168b2ce8e646c061b2ea6783be5deb8650df Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Sun, 9 Oct 2022 23:58:36 +0800
Subject: [PATCH 08/14] [replies] add article type filter

---
 pages/replies.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/pages/replies.js b/pages/replies.js
index 9293c5de..4a1a2b17 100644
--- a/pages/replies.js
+++ b/pages/replies.js
@@ -22,6 +22,7 @@ import {
   Filters,
   ArticleStatusFilter,
   CategoryFilter,
+  ArticleTypeFilter,
   ReplyTypeFilter,
   TimeRange,
   SortInput,
@@ -126,6 +127,9 @@ function urlQuery2Filter({ userId, ...query } = {}) {
   const selectedReplyTypes = ReplyTypeFilter.getValues(query);
   if (selectedReplyTypes.length) filterObj.replyTypes = selectedReplyTypes;
 
+  const articleTypes = ArticleTypeFilter.getValues(query);
+  if (articleTypes.length) filterObj.articleTypes = articleTypes;
+
   // Return filterObj only when it is populated.
   if (!Object.keys(filterObj).length) {
     return undefined;
@@ -233,6 +237,7 @@ function ReplyListPage() {
 
       <Filters>
         <ArticleStatusFilter />
+        <ArticleTypeFilter />
         <ReplyTypeFilter />
         <CategoryFilter />
       </Filters>

From 07c38200d10f70512328313a9b4b5dcba734a9a9 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 00:21:51 +0800
Subject: [PATCH 09/14] [i18n] extract and translate article type related text

---
 i18n/zh_TW.po | 187 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 114 insertions(+), 73 deletions(-)

diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
index f1ae918b..8e82aacc 100644
--- a/i18n/zh_TW.po
+++ b/i18n/zh_TW.po
@@ -12,9 +12,9 @@ msgid "About"
 msgstr "關於"
 
 #: components/ReportPage/SectionEcosystem.js:175
-#: pages/article/[id].js:343
-#: pages/reply/[id].js:209
-#: pages/reply/[id].js:238
+#: pages/article/[id].js:354
+#: pages/reply/[id].js:207
+#: pages/reply/[id].js:236
 msgid "Cofacts"
 msgstr "Cofacts 真的假的"
 
@@ -51,21 +51,21 @@ msgstr[0] "${ replyCount } 份回應"
 msgid "Sort by"
 msgstr "排序方式"
 
-#: components/ProfilePage/RepliedArticleTab.js:33
-#: pages/articles.js:162
-#: pages/replies.js:137
+#: components/ProfilePage/RepliedArticleTab.js:35
+#: pages/articles.js:166
+#: pages/replies.js:143
 msgid "Most recently asked"
 msgstr "最近被查詢"
 
-#: components/ProfilePage/RepliedArticleTab.js:30
-#: pages/articles.js:164
-#: pages/replies.js:136
+#: components/ProfilePage/RepliedArticleTab.js:32
+#: pages/articles.js:168
+#: pages/replies.js:142
 msgid "Most recently replied"
 msgstr "最近被回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:34
-#: pages/articles.js:163
-#: pages/replies.js:138
+#: components/ProfilePage/RepliedArticleTab.js:36
+#: pages/articles.js:167
+#: pages/replies.js:144
 msgid "Most asked"
 msgstr "最多人詢問"
 
@@ -141,7 +141,7 @@ msgstr "送出"
 msgid "Thank you for the feedback."
 msgstr "感謝您的意見。"
 
-#: pages/article/[id].js:253
+#: pages/article/[id].js:263
 msgid "Your reply has been submitted."
 msgstr "已經送出回應。"
 
@@ -191,13 +191,13 @@ msgstr "Facebook"
 msgid "Tutorial"
 msgstr "使用教學"
 
-#: pages/reply/[id].js:215
-#: pages/reply/[id].js:244
+#: pages/reply/[id].js:213
+#: pages/reply/[id].js:242
 msgid "This reply"
 msgstr "本篇回應"
 
 #: pages/api/articles/[feed].js:174
-#: pages/reply/[id].js:280
+#: pages/reply/[id].js:272
 msgid "someone"
 msgstr "有人"
 
@@ -235,27 +235,27 @@ msgid ""
 msgstr "一起來幫網路上的可疑訊息寫查核回應、共同教導聊天機器人回話，將多元的闢謠資訊傳遞給在 LINE 上收到謠言的人。"
 
 #: components/ProfilePage/ProfilePage.js:98
-#: pages/article/[id].js:290
-#: pages/article/[id].js:294
-#: pages/reply/[id].js:169
-#: pages/reply/[id].js:173
+#: pages/article/[id].js:300
+#: pages/article/[id].js:304
+#: pages/reply/[id].js:167
+#: pages/reply/[id].js:171
 msgid "Loading"
 msgstr "載入中"
 
-#: pages/article/[id].js:305
-#: pages/reply/[id].js:184
+#: pages/article/[id].js:315
+#: pages/reply/[id].js:182
 msgid "Not found"
 msgstr "找不到此頁面"
 
-#: pages/reply/[id].js:188
+#: pages/reply/[id].js:186
 msgid "Reply does not exist"
 msgstr "此回應不存在"
 
-#: pages/article/[id].js:309
+#: pages/article/[id].js:319
 msgid "Message does not exist"
 msgstr "此訊息不存在"
 
-#: pages/reply/[id].js:302
+#: pages/reply/[id].js:288
 #, javascript-format
 msgid "Added by ${ editorElem }"
 msgstr "${editorElem} 加的"
@@ -313,7 +313,7 @@ msgstr "含有正確訊息"
 msgid "contains misinformation"
 msgstr "含有錯誤訊息"
 
-#: pages/replies.js:278
+#: pages/replies.js:275
 msgid "Bust Hoaxes"
 msgstr "查核闢謠"
 
@@ -363,8 +363,8 @@ msgstr "查看更多"
 msgid "Hoax for you"
 msgstr "等你來答"
 
-#: pages/replies.js:224
-#: pages/replies.js:227
+#: pages/replies.js:226
+#: pages/replies.js:229
 msgid "Latest replies"
 msgstr "最新查核"
 
@@ -430,8 +430,8 @@ msgstr "在 可疑訊息"
 msgid "in Replies"
 msgstr "在 最新查核"
 
-#: pages/articles.js:151
-#: pages/articles.js:153
+#: pages/articles.js:155
+#: pages/articles.js:157
 msgid "Dubious Messages"
 msgstr "可疑訊息"
 
@@ -444,10 +444,10 @@ msgid "Why do you think it is not useful?"
 msgstr "您認為沒有幫助的理由是什麼呢？"
 
 #: components/LandingPage/SectionArticles.js:153
-#: components/ProfilePage/RepliedArticleTab.js:247
-#: pages/articles.js:176
+#: components/ProfilePage/RepliedArticleTab.js:250
+#: pages/articles.js:181
 #: pages/hoax-for-you.js:133
-#: pages/replies.js:243
+#: pages/replies.js:246
 #: pages/search.js:181
 #: pages/search.js:258
 msgid "Loading..."
@@ -483,33 +483,33 @@ msgstr[0] "被回報 ${ replyRequestCount } 次"
 msgid "Searching"
 msgstr "正在搜尋"
 
-#: pages/article/[id].js:351
+#: pages/article/[id].js:362
 #, javascript-format
 msgid "${ replyRequestCount } person report this message"
 msgid_plural "${ replyRequestCount } people report this message"
 msgstr[0] "有 ${ replyRequestCount } 人想知道以下訊息的真實性"
 
-#: pages/article/[id].js:488
+#: pages/article/[id].js:519
 msgid "Similar messages"
 msgstr "相似可疑訊息"
 
-#: pages/article/[id].js:507
+#: pages/article/[id].js:545
 msgid "No similar messages found"
 msgstr "沒有相似的可疑訊息"
 
-#: components/RelatedReplies.js:103
+#: components/RelatedReplies.js:105
 msgid "View in new tab"
 msgstr "新分頁查看原文"
 
-#: components/RelatedReplies.js:112
+#: components/RelatedReplies.js:114
 msgid "Message below was considered"
 msgstr "以下訊息被標示為"
 
-#: components/RelatedReplies.js:116
+#: components/RelatedReplies.js:118
 msgid "Related article"
 msgstr "相關訊息原文"
 
-#: components/RelatedReplies.js:137
+#: components/RelatedReplies.js:133
 msgid "Related reply"
 msgstr "查核回應"
 
@@ -538,7 +538,7 @@ msgid "Related messages and replies"
 msgstr "相關可疑訊息及回應"
 
 #: components/NewReplySection/Desktop.js:124
-#: components/NewReplySection/Mobile.js:240
+#: components/NewReplySection/Mobile.js:260
 msgid "Use this reply"
 msgstr "直接用此回應"
 
@@ -564,17 +564,17 @@ msgid ""
 "LINE."
 msgstr "多個來源用斷行分開，會幫助 Line 的使用者更好閱讀 "
 
-#: components/ListPageDisplays/ReplySearchItem.js:176
+#: components/ListPageDisplays/ReplySearchItem.js:167
 #, javascript-format
 msgid "This reply is also used in ${ replyCount } other message"
 msgid_plural "This reply is also used in ${ replyCount } other messages"
 msgstr[0] "此查核回應曾經被用於 ${ replyCount } 個可疑訊息"
 
-#: components/ListPageDisplays/ReplySearchItem.js:182
+#: components/ListPageDisplays/ReplySearchItem.js:173
 msgid "view"
 msgstr "查看"
 
-#: components/ListPageDisplays/ReplySearchItem.js:187
+#: components/ListPageDisplays/ReplySearchItem.js:178
 msgid "This reply is used in following messages"
 msgstr "此查核回應尚被用於以下的可疑訊息"
 
@@ -669,11 +669,11 @@ msgstr "我認為"
 msgid "Unmark"
 msgstr "取消標注"
 
-#: components/LineChart.js:349
+#: components/LineChart.js:355
 msgid "Web Visit"
 msgstr "網頁瀏覽"
 
-#: components/LineChart.js:351
+#: components/LineChart.js:357
 msgid "Line Inquiry"
 msgstr "Line 詢問"
 
@@ -700,40 +700,40 @@ msgstr "詢問 ${ totalLineVisits } 次"
 msgid "Total Visit: ${ totalVisits }"
 msgstr "${ totalVisits } 次瀏覽"
 
-#: components/ListPageDisplays/ReplySearchItem.js:106
-#: components/ProfilePage/RepliedArticleTab.js:265
-#: pages/replies.js:253
+#: components/ListPageDisplays/ReplySearchItem.js:103
+#: components/ProfilePage/RepliedArticleTab.js:268
+#: pages/replies.js:256
 #, javascript-format
 msgid "${ article.replyRequestCount } occurrence"
 msgid_plural "${ article.replyRequestCount } occurrences"
 msgstr[0] "被回報 ${ article.replyRequestCount } 次"
 
-#: pages/reply/[id].js:127
+#: pages/reply/[id].js:125
 #, javascript-format
 msgid "${ otherCount } other reply"
 msgid_plural "${ otherCount } other replies"
 msgstr[0] ""
 msgstr[1] ""
 
-#: pages/reply/[id].js:250
+#: pages/reply/[id].js:248
 msgid "The reply is used in the following messages"
 msgstr "此查核回應尚被用於以下的可疑訊息"
 
-#: pages/reply/[id].js:270
+#: pages/reply/[id].js:262
 msgid "Deleted by its author"
 msgstr "此回應已被原作者刪除。"
 
-#: pages/reply/[id].js:321
+#: pages/reply/[id].js:307
 msgid "Similar replies"
 msgstr "相似回應"
 
-#: pages/reply/[id].js:334
+#: pages/reply/[id].js:320
 #, javascript-format
 msgid "Used in ${ node.articleReplies.length } message"
 msgid_plural "Used in ${ node.articleReplies.length } messages"
 msgstr[0] "此查核回應曾經被用於 ${ node.articleReplies.length } 個可疑訊息"
 
-#: pages/reply/[id].js:346
+#: pages/reply/[id].js:332
 msgid "No similar replies found"
 msgstr "沒有相似的回應"
 
@@ -757,15 +757,15 @@ msgstr "目標網站有 HTTPS 錯誤"
 msgid "Unknown error"
 msgstr "未知錯誤"
 
-#: pages/article/[id].js:457
+#: pages/article/[id].js:488
 #, javascript-format
 msgid "There is ${ replyCount } fact-checking reply to the message"
 msgid_plural "There are ${ replyCount } fact-checking replies to the message"
 msgstr[0] "本訊息有 ${ replyCount } 則查核回應"
 msgstr[1] "本訊息有 ${ replyCount } 則查核回應"
 
-#: pages/article/[id].js:481
-#: pages/article/[id].js:517
+#: pages/article/[id].js:512
+#: pages/article/[id].js:555
 msgid "Add Cofacts as friend in LINE"
 msgstr "加 LINE 查謠言"
 
@@ -875,8 +875,8 @@ msgstr "原始碼"
 msgid "Contact"
 msgstr "聯繫"
 
-#: pages/article/[id].js:472
-#: pages/reply/[id].js:317
+#: pages/article/[id].js:503
+#: pages/reply/[id].js:303
 msgid "The content above"
 msgstr "以上內容"
 
@@ -936,7 +936,7 @@ msgstr "此使用者不存在"
 msgid "Replied messages"
 msgstr "查核回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:251
+#: components/ProfilePage/RepliedArticleTab.js:254
 msgid "No replied messages."
 msgstr "無查核回應"
 
@@ -2293,11 +2293,11 @@ msgid ""
 "to reverse harms to democracy and society caused by misinformation."
 msgstr "目前已經存有4萬5千筆以上查證過的資訊，透過投入資源與人力，扭轉不實訊息對民主與社會的危害。"
 
-#: components/ListPageDisplays/ArticleCard.js:117
-#: components/ListPageDisplays/ReplySearchItem.js:115
-#: components/ProfilePage/RepliedArticleTab.js:272
-#: pages/article/[id].js:359
-#: pages/replies.js:260
+#: components/ListPageDisplays/ArticleCard.js:111
+#: components/ListPageDisplays/ReplySearchItem.js:112
+#: components/ProfilePage/RepliedArticleTab.js:275
+#: pages/article/[id].js:370
+#: pages/replies.js:263
 msgid "First reported ${ timeAgo }"
 msgstr "首次回報於 ${ timeAgo }"
 
@@ -2328,7 +2328,7 @@ msgid "In linked text"
 msgstr "所附網址的網頁內容"
 
 #: components/ArticleReply/ArticleReply.js:106
-#: pages/article/[id].js:275
+#: pages/article/[id].js:285
 #. t: terms subject
 msgid "This info"
 msgstr "此資訊"
@@ -2381,15 +2381,15 @@ msgid ""
 "the thumb-down button below each reply if you find it not good enough."
 msgstr "注意：這裏不是討論區！請針對上面的「可疑訊息」撰寫回覆，不要去回覆下面的查核回應。若只是想表達現有的查核回應不夠好，請使用該篇回應下方的「倒讚」按鈕。"
 
-#: pages/article/[id].js:407
+#: pages/article/[id].js:438
 msgid "Comments from people reporting this message"
 msgstr "網友回報補充"
 
-#: components/ProfilePage/RepliedArticleTab.js:32
+#: components/ProfilePage/RepliedArticleTab.js:34
 msgid "Most recently replied by any user"
 msgstr "最近有人回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:255
+#: components/ProfilePage/RepliedArticleTab.js:258
 #, javascript-format
 msgid "${ totalCount } message matching criteria"
 msgid_plural "${ totalCount } messages matching criteria"
@@ -2399,6 +2399,47 @@ msgstr[0] "${ totalCount } 則符合篩選條件的訊息"
 msgid "Report abuse"
 msgstr "檢舉違規內容"
 
+#: pages/article/[id].js:399
+msgid "Log in to view video content"
+msgstr "登入以檢視影片內容"
+
+#: pages/article/[id].js:409
+msgid "Log in to view audio content"
+msgstr "登入以檢視錄音內容"
+
+#: components/Thumbnail.js:37
+msgid "A video"
+msgstr "影片一則"
+
+#: components/Thumbnail.js:37
+#: components/Thumbnail.js:49
+msgid "Preview not supported yet"
+msgstr "尚未支援預覽"
+
+#: components/Thumbnail.js:49
+msgid "An audio"
+msgstr "語音訊息一則"
+
+#: components/ListPageControls/ArticleTypeFilter.js:13
+msgid "Text"
+msgstr "文字"
+
+#: components/ListPageControls/ArticleTypeFilter.js:14
+msgid "Image"
+msgstr "圖片"
+
+#: components/ListPageControls/ArticleTypeFilter.js:15
+msgid "Video"
+msgstr "影片"
+
+#: components/ListPageControls/ArticleTypeFilter.js:16
+msgid "Audio"
+msgstr "語音訊息"
+
+#: components/ListPageControls/ArticleTypeFilter.js:33
+msgid "Format"
+msgstr "格式"
+
 #: pages/index.js:29
 msgctxt "site title"
 msgid "Cofacts"
@@ -2424,7 +2465,7 @@ msgctxt "Tutorial"
 msgid "I'd Review"
 msgstr "我想確認謠言"
 
-#: components/LineChart.js:233
+#: components/LineChart.js:239
 #, javascript-format
 msgctxt "LineChart"
 msgid "${ visit } time"
@@ -2467,12 +2508,12 @@ msgctxt "Mobile editor tab"
 msgid "Compose"
 msgstr "撰寫回應"
 
-#: components/ListPageDisplays/ArticleCard.js:124
+#: components/ListPageDisplays/ArticleCard.js:118
 msgctxt "Info box"
 msgid "replies"
 msgstr "回應"
 
-#: components/ListPageDisplays/ArticleCard.js:128
+#: components/ListPageDisplays/ArticleCard.js:122
 msgctxt "Info box"
 msgid "reports"
 msgstr "回報"

From 6f680b35d35b5330278e50a23434d52222dd5bd7 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:06:32 +0800
Subject: [PATCH 10/14] Init impl for CommentTab

---
 components/ProfilePage/CommentTab.js | 232 +++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 components/ProfilePage/CommentTab.js

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
new file mode 100644
index 00000000..98f7c82a
--- /dev/null
+++ b/components/ProfilePage/CommentTab.js
@@ -0,0 +1,232 @@
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
+import { useRouter } from 'next/router';
+import { t, ngettext, msgid } from 'ttag';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Tools,
+  TimeRange,
+  SortInput,
+  LoadMore,
+} from 'components/ListPageControls';
+import { CardHeader, CardContent } from 'components/Card';
+import Infos from 'components/Infos';
+import TimeInfo from 'components/Infos/TimeInfo';
+import ExpandableText from 'components/ExpandableText';
+import ReplyRequestReason from 'components/ReplyRequestReason';
+import Thumbnail from 'components/Thumbnail';
+
+const COMMENTS_ORDER = [
+  {
+    value: 'createdAt',
+    label: t`Commented at`,
+  },
+];
+const DEFAULT_ORDER = COMMENTS_ORDER[0].value;
+
+const LOAD_USER_COMMENTS = gql`
+  query LoadUserComments(
+    $filter: ListReplyRequestFilter!
+    $orderBy: [ListReplyRequestOrderBy]
+    $after: String
+  ) {
+    ListReplyRequests(
+      filter: $filter
+      orderBy: $orderBy
+      after: $after
+      first: 15
+    ) {
+      edges {
+        node {
+          id
+          ...ReplyRequestInfo
+          article {
+            id
+            replyRequestCount
+            createdAt
+            text
+            ...ThumbnailArticleData
+          }
+        }
+        ...LoadMoreEdge
+      }
+    }
+  }
+  ${ReplyRequestReason.fragments.ReplyRequestInfo}
+  ${LoadMore.fragments.LoadMoreEdge}
+  ${Thumbnail.fragments.ThumbnailArticleData}
+`;
+
+const LOAD_USER_COMMENTS_STAT = gql`
+  query LoadUserCommentsStat(
+    $filter: ListReplyRequestFilter!
+    $orderBy: [ListReplyRequestOrderBy]
+  ) {
+    ListReplyRequests(filter: $filter, orderBy: $orderBy) {
+      totalCount
+      ...LoadMoreConnectionForStats
+    }
+  }
+  ${LoadMore.fragments.LoadMoreConnectionForStats}
+`;
+
+const useStyles = makeStyles(theme => ({
+  tools: {
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: 'var(--card-px)',
+      marginRight: 'var(--card-px)',
+    },
+  },
+  divider: {
+    border: 0,
+    margin: '16px 0',
+    borderBottom: `1px dashed ${theme.palette.secondary[100]}`,
+  },
+  infos: {
+    marginBottom: 4,
+    [theme.breakpoints.up('md')]: {
+      marginBottom: 12,
+    },
+  },
+}));
+
+/**
+ * @param {object} urlQuery - URL query object and urserId
+ * @param {string} userId - The author ID of article reply to look for
+ * @returns {object} ListArticleFilter
+ */
+function urlQuery2Filter(query = {}, userId) {
+  const filterObj = { userId };
+
+  const [start, end] = TimeRange.getValues(query);
+
+  if (start) {
+    filterObj.createdAt = {
+      ...filterObj.createdAt,
+      GTE: start,
+    };
+  }
+  if (end) {
+    filterObj.createdAt = {
+      ...filterObj.createdAt,
+      LTE: end,
+    };
+  }
+
+  return filterObj;
+}
+
+function CommentTab({ userId }) {
+  const classes = useStyles();
+  const { query } = useRouter();
+
+  const listQueryVars = {
+    filter: urlQuery2Filter(query, userId),
+    orderBy: [{ [SortInput.getValue(query) || DEFAULT_ORDER]: 'DESC' }],
+  };
+
+  const {
+    loading,
+    fetchMore,
+    data: listCommentsData,
+    error: listCommentsError,
+  } = useQuery(LOAD_USER_COMMENTS, {
+    skip: !userId,
+    variables: listQueryVars,
+    notifyOnNetworkStatusChange: true, // Make loading true on `fetchMore`
+  });
+
+  // Separate these stats query so that it will be cached by apollo-client and sends no network request
+  // on page change, but still works when filter options are updated.
+  //
+  const { data: listStatData } = useQuery(LOAD_USER_COMMENTS_STAT, {
+    skip: !userId,
+    variables: listQueryVars,
+  });
+
+  // List data
+  const commentEdges = listCommentsData?.ListReplyReqeusts?.edges || [];
+  const statsData = listStatData?.ListReplyReqeusts || {};
+  const totalCount = statsData?.totalCount;
+
+  if (!userId) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tools className={classes.tools}>
+        <TimeRange />
+        <SortInput defaultOrderBy={DEFAULT_ORDER} options={COMMENTS_ORDER} />
+      </Tools>
+      {loading && !totalCount ? (
+        <CardContent>{t`Loading...`}</CardContent>
+      ) : listCommentsError ? (
+        <CardContent>{listCommentsError.toString()}</CardContent>
+      ) : totalCount === 0 ? (
+        <CardContent>{t`This user does not provide comments to any message.`}</CardContent>
+      ) : (
+        <>
+          <CardHeader>
+            {ngettext(
+              msgid`${totalCount} comment matching criteria`,
+              `${totalCount} comments matching criteria`,
+              totalCount
+            )}
+          </CardHeader>
+          {commentEdges.map(({ node: { article, ...comment } }) => (
+            <CardContent key={comment.id}>
+              <Infos className={classes.infos}>
+                <>
+                  {ngettext(
+                    msgid`${article.replyRequestCount} occurrence`,
+                    `${article.replyRequestCount} occurrences`,
+                    article.replyRequestCount
+                  )}
+                </>
+                <TimeInfo time={article.createdAt}>
+                  {timeAgo => t`First reported ${timeAgo}`}
+                </TimeInfo>
+              </Infos>
+              <Thumbnail article={article} />
+              {article.text && (
+                <ExpandableText lineClamp={3}>{article.text}</ExpandableText>
+              )}
+
+              <hr className={classes.divider} />
+
+              <ReplyRequestReason
+                articleId={article.id}
+                replyRequest={comment}
+              />
+            </CardContent>
+          ))}
+
+          <LoadMore
+            edges={commentEdges}
+            pageInfo={statsData?.pageInfo}
+            loading={loading}
+            onMoreRequest={args =>
+              fetchMore({
+                variables: args,
+                updateQuery(prev, { fetchMoreResult }) {
+                  if (!fetchMoreResult) return prev;
+                  const newCommentData = fetchMoreResult?.ListReplyRequests;
+                  return {
+                    ...prev,
+                    ListArticles: {
+                      ...newCommentData,
+                      edges: [...commentEdges, ...newCommentData.edges],
+                    },
+                  };
+                },
+              })
+            }
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export default CommentTab;

From f4bd274ac4fac0f7f512f343bab7f344f73e91cb Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:26:47 +0800
Subject: [PATCH 11/14] Add comments tab

---
 components/ProfilePage/CommentTab.js  | 10 +++++-----
 components/ProfilePage/ProfilePage.js |  9 +++++++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
index 98f7c82a..7a5128af 100644
--- a/components/ProfilePage/CommentTab.js
+++ b/components/ProfilePage/CommentTab.js
@@ -79,7 +79,7 @@ const useStyles = makeStyles(theme => ({
   },
   divider: {
     border: 0,
-    margin: '16px 0',
+    margin: '16px 0 0',
     borderBottom: `1px dashed ${theme.palette.secondary[100]}`,
   },
   infos: {
@@ -145,8 +145,8 @@ function CommentTab({ userId }) {
   });
 
   // List data
-  const commentEdges = listCommentsData?.ListReplyReqeusts?.edges || [];
-  const statsData = listStatData?.ListReplyReqeusts || {};
+  const commentEdges = listCommentsData?.ListReplyRequests?.edges || [];
+  const statsData = listStatData?.ListReplyRequests || {};
   const totalCount = statsData?.totalCount;
 
   if (!userId) {
@@ -164,7 +164,7 @@ function CommentTab({ userId }) {
       ) : listCommentsError ? (
         <CardContent>{listCommentsError.toString()}</CardContent>
       ) : totalCount === 0 ? (
-        <CardContent>{t`This user does not provide comments to any message.`}</CardContent>
+        <CardContent>{t`This user does not provide comments to any message in the specified date range.`}</CardContent>
       ) : (
         <>
           <CardHeader>
@@ -175,7 +175,7 @@ function CommentTab({ userId }) {
             )}
           </CardHeader>
           {commentEdges.map(({ node: { article, ...comment } }) => (
-            <CardContent key={comment.id}>
+            <CardContent key={comment.id} style={{ paddingBottom: 0 }}>
               <Infos className={classes.infos}>
                 <>
                   {ngettext(
diff --git a/components/ProfilePage/ProfilePage.js b/components/ProfilePage/ProfilePage.js
index e1a3917b..e4766858 100644
--- a/components/ProfilePage/ProfilePage.js
+++ b/components/ProfilePage/ProfilePage.js
@@ -14,6 +14,7 @@ import AppLayout from 'components/AppLayout';
 import { Card } from 'components/Card';
 import UserPageHeader from './UserPageHeader';
 import RepliedArticleTab from './RepliedArticleTab';
+import CommentTab from './CommentTab';
 import ContributionChart from 'components/ContributionChart';
 import { startOfWeek, subDays, format } from 'date-fns';
 
@@ -123,8 +124,11 @@ function ProfilePage({ id, slug }) {
   let contentElem = null;
   switch (tab) {
     case 'replies':
-    default:
       contentElem = <RepliedArticleTab userId={data?.GetUser?.id} />;
+      break;
+    case 'comments':
+      contentElem = <CommentTab userId={data?.GetUser?.id} />;
+      break;
   }
   const today = format(new Date(), 'yyyy-MM-dd');
   const aYearAgo = format(
@@ -159,10 +163,11 @@ function ProfilePage({ id, slug }) {
             indicatorColor="primary"
             textColor="primary"
             onChange={(e, tab) => {
-              router.push({ query: { tab } });
+              router.push({ query: { tab, id, slug } });
             }}
           >
             <Tab value="replies" label={t`Replied messages`} />
+            <Tab value="comments" label={t`Comments`} />
           </Tabs>
           {contentElem}
         </Card>

From 9ec733a59bee4699b83cc814bb8f9ecfd42dbf9f Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:34:20 +0800
Subject: [PATCH 12/14] Add comment stat to profile page header

---
 components/ProfilePage/ProfilePage.js    | 5 +++++
 components/ProfilePage/Stats.js          | 1 +
 components/ProfilePage/UserPageHeader.js | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/ProfilePage/ProfilePage.js b/components/ProfilePage/ProfilePage.js
index e4766858..4f1c4b52 100644
--- a/components/ProfilePage/ProfilePage.js
+++ b/components/ProfilePage/ProfilePage.js
@@ -64,6 +64,9 @@ const LOAD_CONTRIBUTION = gql`
     commentedReplies: ListArticleReplyFeedbacks(filter: { userId: $id }) {
       totalCount
     }
+    comments: ListReplyRequests(filter: { userId: $id }) {
+      totalCount
+    }
   }
 `;
 
@@ -76,6 +79,7 @@ function ProfilePage({ id, slug }) {
   const { data: contributionData } = useQuery(LOAD_CONTRIBUTION, {
     variables: { id: data?.GetUser?.id },
     skip: !data?.GetUser?.id,
+    ssr: false, // Speed up SSR
   });
 
   const isSelf = currentUser && data?.GetUser?.id === currentUser.id;
@@ -148,6 +152,7 @@ function ProfilePage({ id, slug }) {
           stats={{
             repliedArticles: contributionData?.repliedArticles?.totalCount,
             commentedReplies: contributionData?.commentedReplies?.totalCount,
+            comments: contributionData?.comments?.totalCount,
           }}
         />
         <ContributionChart
diff --git a/components/ProfilePage/Stats.js b/components/ProfilePage/Stats.js
index c00e4ba1..8e3e7826 100644
--- a/components/ProfilePage/Stats.js
+++ b/components/ProfilePage/Stats.js
@@ -58,6 +58,7 @@ function Stats({ stats }) {
   return (
     <ul className={classes.root}>
       <Stat label={t`replied messages`} value={stats?.repliedArticles} />
+      <Stat label={t`comments`} value={stats?.comments} />
       <Stat label={t`voted replies`} value={stats?.commentedReplies} />
     </ul>
   );
diff --git a/components/ProfilePage/UserPageHeader.js b/components/ProfilePage/UserPageHeader.js
index a31f70b2..6b6fe4c4 100644
--- a/components/ProfilePage/UserPageHeader.js
+++ b/components/ProfilePage/UserPageHeader.js
@@ -179,7 +179,7 @@ const useStyles = makeStyles(theme => ({
  *
  * @param {object} props.user
  * @param {boolean} props.isSelf - If the current user is the one in `user` prop
- * @param {{repliedArticles: number, commentedReplies: number}} props.stats
+ * @param {{repliedArticles: number, commentedReplies: number, comments: number}} props.stats
  */
 function UserPageHeader({ user, isSelf, stats }) {
   const classes = useStyles();

From 2f1c9ff4bf43a1fa9bbd6392095506425b7e5daa Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:40:15 +0800
Subject: [PATCH 13/14] [ProfilePage] add link from profile to article

---
 components/ProfilePage/CommentTab.js        | 7 ++++++-
 components/ProfilePage/RepliedArticleTab.js | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
index 7a5128af..bf6ee79c 100644
--- a/components/ProfilePage/CommentTab.js
+++ b/components/ProfilePage/CommentTab.js
@@ -1,6 +1,7 @@
 import gql from 'graphql-tag';
 import { useQuery } from '@apollo/react-hooks';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import { t, ngettext, msgid } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -185,7 +186,11 @@ function CommentTab({ userId }) {
                   )}
                 </>
                 <TimeInfo time={article.createdAt}>
-                  {timeAgo => t`First reported ${timeAgo}`}
+                  {timeAgo => (
+                    <Link href="/article/[id]" as={`/article/${article.id}`}>
+                      {t`First reported ${timeAgo}`}
+                    </Link>
+                  )}
                 </TimeInfo>
               </Infos>
               <Thumbnail article={article} />
diff --git a/components/ProfilePage/RepliedArticleTab.js b/components/ProfilePage/RepliedArticleTab.js
index 6fddebac..ef9ce286 100644
--- a/components/ProfilePage/RepliedArticleTab.js
+++ b/components/ProfilePage/RepliedArticleTab.js
@@ -1,6 +1,7 @@
 import gql from 'graphql-tag';
 import { useQuery } from '@apollo/react-hooks';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import { t, ngettext, msgid } from 'ttag';
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -272,7 +273,11 @@ function RepliedArticleTab({ userId }) {
                   )}
                 </>
                 <TimeInfo time={article.createdAt}>
-                  {timeAgo => t`First reported ${timeAgo}`}
+                  {timeAgo => (
+                    <Link href="/article/[id]" as={`/article/${article.id}`}>
+                      {t`First reported ${timeAgo}`}
+                    </Link>
+                  )}
                 </TimeInfo>
               </Infos>
               <Thumbnail article={article} />

From 57b87e907faedfd25d2d92bc1ac1d5a0caeaca76 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 10:02:16 +0800
Subject: [PATCH 14/14] Translate strings for comment tab in profile page

---
 i18n/zh_TW.po | 55 ++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
index 8e82aacc..0937db1a 100644
--- a/i18n/zh_TW.po
+++ b/i18n/zh_TW.po
@@ -51,19 +51,19 @@ msgstr[0] "${ replyCount } 份回應"
 msgid "Sort by"
 msgstr "排序方式"
 
-#: components/ProfilePage/RepliedArticleTab.js:35
+#: components/ProfilePage/RepliedArticleTab.js:36
 #: pages/articles.js:166
 #: pages/replies.js:143
 msgid "Most recently asked"
 msgstr "最近被查詢"
 
-#: components/ProfilePage/RepliedArticleTab.js:32
+#: components/ProfilePage/RepliedArticleTab.js:33
 #: pages/articles.js:168
 #: pages/replies.js:142
 msgid "Most recently replied"
 msgstr "最近被回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:36
+#: components/ProfilePage/RepliedArticleTab.js:37
 #: pages/articles.js:167
 #: pages/replies.js:144
 msgid "Most asked"
@@ -234,7 +234,7 @@ msgid ""
 "fighting mis/disinformation in Taiwan."
 msgstr "一起來幫網路上的可疑訊息寫查核回應、共同教導聊天機器人回話，將多元的闢謠資訊傳遞給在 LINE 上收到謠言的人。"
 
-#: components/ProfilePage/ProfilePage.js:98
+#: components/ProfilePage/ProfilePage.js:103
 #: pages/article/[id].js:300
 #: pages/article/[id].js:304
 #: pages/reply/[id].js:167
@@ -444,7 +444,8 @@ msgid "Why do you think it is not useful?"
 msgstr "您認為沒有幫助的理由是什麼呢？"
 
 #: components/LandingPage/SectionArticles.js:153
-#: components/ProfilePage/RepliedArticleTab.js:250
+#: components/ProfilePage/CommentTab.js:164
+#: components/ProfilePage/RepliedArticleTab.js:251
 #: pages/articles.js:181
 #: pages/hoax-for-you.js:133
 #: pages/replies.js:246
@@ -701,7 +702,8 @@ msgid "Total Visit: ${ totalVisits }"
 msgstr "${ totalVisits } 次瀏覽"
 
 #: components/ListPageDisplays/ReplySearchItem.js:103
-#: components/ProfilePage/RepliedArticleTab.js:268
+#: components/ProfilePage/CommentTab.js:182
+#: components/ProfilePage/RepliedArticleTab.js:269
 #: pages/replies.js:256
 #, javascript-format
 msgid "${ article.replyRequestCount } occurrence"
@@ -924,19 +926,19 @@ msgstr "你的個人頁面網址會變成 ${ profileURL }"
 msgid "Bio"
 msgstr "自我介紹"
 
-#: components/ProfilePage/ProfilePage.js:111
+#: components/ProfilePage/ProfilePage.js:116
 msgid "User not found"
 msgstr "找不到使用者"
 
-#: components/ProfilePage/ProfilePage.js:114
+#: components/ProfilePage/ProfilePage.js:119
 msgid "The user does not exist"
 msgstr "此使用者不存在"
 
-#: components/ProfilePage/ProfilePage.js:165
+#: components/ProfilePage/ProfilePage.js:174
 msgid "Replied messages"
 msgstr "查核回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:254
+#: components/ProfilePage/RepliedArticleTab.js:255
 msgid "No replied messages."
 msgstr "無查核回應"
 
@@ -944,7 +946,7 @@ msgstr "無查核回應"
 msgid "replied messages"
 msgstr "查核回應"
 
-#: components/ProfilePage/Stats.js:61
+#: components/ProfilePage/Stats.js:62
 msgid "voted replies"
 msgstr "評價回應"
 
@@ -2295,7 +2297,8 @@ msgstr "目前已經存有4萬5千筆以上查證過的資訊，透過投入資
 
 #: components/ListPageDisplays/ArticleCard.js:111
 #: components/ListPageDisplays/ReplySearchItem.js:112
-#: components/ProfilePage/RepliedArticleTab.js:275
+#: components/ProfilePage/CommentTab.js:191
+#: components/ProfilePage/RepliedArticleTab.js:278
 #: pages/article/[id].js:370
 #: pages/replies.js:263
 msgid "First reported ${ timeAgo }"
@@ -2385,11 +2388,11 @@ msgstr "注意：這裏不是討論區！請針對上面的「可疑訊息」撰
 msgid "Comments from people reporting this message"
 msgstr "網友回報補充"
 
-#: components/ProfilePage/RepliedArticleTab.js:34
+#: components/ProfilePage/RepliedArticleTab.js:35
 msgid "Most recently replied by any user"
 msgstr "最近有人回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:258
+#: components/ProfilePage/RepliedArticleTab.js:259
 #, javascript-format
 msgid "${ totalCount } message matching criteria"
 msgid_plural "${ totalCount } messages matching criteria"
@@ -2440,6 +2443,30 @@ msgstr "語音訊息"
 msgid "Format"
 msgstr "格式"
 
+#: components/ProfilePage/CommentTab.js:23
+msgid "Commented at"
+msgstr "補充於"
+
+#: components/ProfilePage/CommentTab.js:168
+msgid ""
+"This user does not provide comments to any message in the specified date "
+"range."
+msgstr "這名使用者在指定日期範圍內沒有提供任何回報補充"
+
+#: components/ProfilePage/CommentTab.js:172
+#, javascript-format
+msgid "${ totalCount } comment matching criteria"
+msgid_plural "${ totalCount } comments matching criteria"
+msgstr[0] "${ totalCount } 份符合篩選條件的回報補充"
+
+#: components/ProfilePage/ProfilePage.js:175
+msgid "Comments"
+msgstr "回報補充"
+
+#: components/ProfilePage/Stats.js:61
+msgid "comments"
+msgstr "回報補充"
+
 #: pages/index.js:29
 msgctxt "site title"
 msgid "Cofacts"