feat: support audio player (#948)

web/src/components/MemoResource.tsx

+import Icon from "./Icon";
+
+interface Props {
+  resource: Resource;
+  className?: string;
+}
+
+const MemoResource: React.FC<Props> = (props: Props) => {
+  const { className, resource } = props;
+  const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
+
+  const handlePreviewBtnClick = () => {
+    window.open(resourceUrl);
+  };
+
+  return (
+    <>
+      <div className={`w-auto flex flex-row justify-start items-center ${className}`}>
+        {resource.type.startsWith("audio") ? (
+          <>
+            <audio className="h-8" src={resourceUrl} controls></audio>
+          </>
+        ) : (
+          <>
+            <Icon.FileText className="w-4 h-auto mr-1 text-gray-500" />
+            <span className="text-gray-500 text-sm max-w-xs truncate font-mono cursor-pointer" onClick={handlePreviewBtnClick}>
+              {resource.filename}
+            </span>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default MemoResource;

web/src/components/MemoResources.tsx

 import { absolutifyLink } from "../helpers/utils";
-import Icon from "./Icon";
 import SquareDiv from "./common/SquareDiv";
 import showPreviewImageDialog from "./PreviewImageDialog";
+import MemoResource from "./MemoResource";
 import "../less/memo-resources.less";
 
 interface Props {
@@ -24,11 +24,6 @@ const MemoResources: React.FC<Props> = (props: Props) => {
   const availableResourceList = resourceList.filter((resource) => resource.type.startsWith("image") || resource.type.startsWith("video"));
   const otherResourceList = resourceList.filter((resource) => !availableResourceList.includes(resource));
 
-  const handlePreviewBtnClick = (resource: Resource) => {
-    const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
-    window.open(resourceUrl);
-  };
-
   const imgUrls = availableResourceList
     .filter((resource) => resource.type.startsWith("image"))
     .map((resource) => {
@@ -68,16 +63,13 @@ const MemoResources: React.FC<Props> = (props: Props) => {
           </div>
         )}
       </div>
-      <div className="other-resource-wrapper">
-        {otherResourceList.map((resource) => {
-          return (
-            <div className="other-resource-container" key={resource.id} onClick={() => handlePreviewBtnClick(resource)}>
-              <Icon.FileText className="icon-img" />
-              <span className="name-text">{resource.filename}</span>
-            </div>
-          );
-        })}
-      </div>
+      {otherResourceList.length > 0 && (
+        <div className="w-full flex flex-row justify-start flex-wrap mt-2">
+          {otherResourceList.map((resource) => {
+            return <MemoResource key={resource.id} className="my-1 mr-2" resource={resource} />;
+          })}
+        </div>
+      )}
     </>
   );
 };

web/src/less/memo-resources.less

@@ -17,19 +17,3 @@
     }
   }
 }
-
-.other-resource-wrapper {
-  @apply w-full flex flex-row justify-start flex-wrap;
-
-  > .other-resource-container {
-    @apply mt-1 mr-1 max-w-full flex flex-row justify-start items-center flex-nowrap bg-gray-100 px-2 py-1 rounded cursor-pointer hover:bg-gray-200;
-
-    > .icon-img {
-      @apply w-4 h-auto mr-1 text-gray-500;
-    }
-
-    > .name-text {
-      @apply text-gray-500 text-sm max-w-xs truncate font-mono;
-    }
-  }
-}