feat: support display video (#558)

web/src/components/MemoResources.tsx

@@ -21,25 +21,34 @@ const MemoResources: React.FC<Props> = (props: Props) => {
     ...getDefaultProps(),
     ...props,
   };
-  const imageList = resourceList.filter((resource) => resource.type.includes("image"));
-  const otherResourceList = resourceList.filter((resource) => !resource.type.includes("image"));
+  const availableResourceList = resourceList.filter((resource) => resource.type.startsWith("image") || resource.type.startsWith("video"));
+  const otherResourceList = resourceList.filter((resource) => !availableResourceList.includes(resource));
 
   const handlPreviewBtnClick = (resource: Resource) => {
     const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
     window.open(resourceUrl);
   };
 
-  const imgUrls = imageList.map((resource) => {
-    return `/o/r/${resource.id}/${resource.filename}`;
-  });
+  const imgUrls = availableResourceList
+    .filter((resource) => resource.type.startsWith("image"))
+    .map((resource) => {
+      return `/o/r/${resource.id}/${resource.filename}`;
+    });
 
   return (
     <div className={`resource-wrapper ${className || ""}`}>
-      {imageList.length > 0 && (
+      {availableResourceList.length > 0 && (
         <div className={`images-wrapper ${style}`}>
-          {imageList.map((resource, index) => (
-            <Image className="memo-img" key={resource.id} imgUrls={imgUrls} index={index} />
-          ))}
+          {availableResourceList.map((resource) => {
+            const url = `/o/r/${resource.id}/${resource.filename}`;
+            if (resource.type.startsWith("image")) {
+              return (
+                <Image className="memo-resource" key={resource.id} imgUrls={imgUrls} index={imgUrls.findIndex((item) => item === url)} />
+              );
+            } else {
+              return <video className="memo-resource" controls key={resource.id} src={url} />;
+            }
+          })}
         </div>
       )}
       <div className="other-resource-wrapper">

web/src/less/memo-resources.less

@@ -4,8 +4,8 @@
   > .images-wrapper {
     @apply w-full flex mt-2 pb-1;
 
-    > .memo-img {
-      @apply w-auto h-auto shrink-0 grow-0 cursor-pointer;
+    > .memo-resource {
+      @apply w-auto h-auto shrink-0 grow-0 cursor-pointer rounded;
 
       > img {
         @apply rounded hover:shadow;
@@ -15,8 +15,8 @@
     &.row {
       @apply flex-row justify-start items-start overflow-x-auto overflow-y-hidden;
 
-      > .memo-img {
-        @apply max-w-xs h-auto mr-2 last:mr-0;
+      > .memo-resource {
+        @apply max-w-xs h-auto max-h-40 mr-2 last:mr-0;
 
         > img {
           @apply w-auto max-h-40;
@@ -27,7 +27,7 @@
     &.col {
       @apply flex-col justify-start items-start;
 
-      > .memo-img {
+      > .memo-resource {
         @apply w-full h-auto mb-2 last:mb-0;
 
         > img {