[ArticleCard] support audio and video

cofacts · Oct 7, 2022 · 7a8917b · 7a8917b
1 parent 7429b06
commit 7a8917b
Show file tree

Hide file tree

Showing 3 changed files with 437 additions and 10 deletions.
diff --git 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
@@ -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>