enhance: file upload and filter

src/common/component/FileBox/index.js

@@ -77,7 +77,7 @@ export default function FileBox({
     <Styled
       className={`file_box ${flex ? "flex" : ""} ${
         withPreview ? "preview" : ""
-      }`}
+      } ${file_type.startsWith("audio") ? "audio" : ""}`}
     >
       <div className="basic">
         {icon}
@@ -91,7 +91,11 @@ export default function FileBox({
             </i>
           </span>
         </div>
-        <a className="download" download={name} href={content}>
+        <a
+          className="download"
+          download={name}
+          href={`${content}&download=true`}
+        >
           <IconDownload />
         </a>
       </div>

src/common/component/FileBox/preview/Audio.js

@@ -1,6 +1,34 @@
-import React from "react";
-
+import { useState } from "react";
+import styled from "styled-components";
+const Styled = styled.div`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .err {
+    padding: 18px;
+    /* font-weight: bold; */
+    font-size: 16px;
+    color: #999;
+  }
+  audio {
+    width: 100%;
+  }
+`;
 export default function Audio({ url = "" }) {
+  const [err, setErr] = useState(false);
+  const handleError = (err) => {
+    console.log("audio err", err);
+    setErr(true);
+  };
   if (!url) return null;
-  return <audio src={url} />;
+  return (
+    <Styled>
+      {err ? (
+        <div className="err">Unable to play this audio</div>
+      ) : (
+        <audio controls src={url} onError={handleError} />
+      )}
+    </Styled>
+  );
 }

src/common/component/FileBox/preview/Pdf.js

@@ -1,29 +1,29 @@
-import { useState } from "react";
+// import { useState, useEffect } from "react";
 import styled from "styled-components";
-import { Document, Page } from "react-pdf";
+// import { Document, Page } from "react-pdf";
 const Styled = styled.div`
   padding: 8px;
   /* height: 218px; */
   overflow: hidden;
-  img {
+  embed {
     width: 100%;
     height: 100%;
-    object-fit: cover;
   }
 `;
 export default function Pdf({ url = "" }) {
-  const [pageNumber, setPageNumber] = useState(1);
-  const [numPages, setNumPages] = useState(null);
+  // const [content, setContent] = useState("");
+  // const [pageNumber, setPageNumber] = useState(1);
+  // const [numPages, setNumPages] = useState(null);
+  // const onDocumentLoadSuccess = ({ numPages }) => {
+  //   setNumPages(numPages);
+  // };
   if (!url) return null;
-  const onDocumentLoadSuccess = ({ numPages }) => {
-    setNumPages(numPages);
-  };
-  console.log("pdf url", url);
   return (
     <Styled>
-      <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
+      <embed src={url} type="application/pdf" />
+      {/* <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
         <Page pageNumber={pageNumber} />
-      </Document>
+      </Document> */}
     </Styled>
   );
 }

src/common/component/FileBox/styled.js

@@ -17,6 +17,9 @@ const Styled = styled.div`
     position: relative;
     overflow: hidden;
     height: 281px;
+    &.audio {
+      height: 125px;
+    }
   }
   .basic {
     padding: 8px;
@@ -59,8 +62,8 @@ const Styled = styled.div`
     }
   }
   .preview {
+    height: calc(100% - 64px);
     overflow: hidden;
-
     /* todo */
   }
 `;

src/common/hook/useLogout.js

@@ -7,6 +7,7 @@ import { resetContacts } from "../../app/slices/contacts";
 import { resetChannelMsg } from "../../app/slices/message.channel";
 import { resetUserMsg } from "../../app/slices/message.user";
 import { resetReactionMessage } from "../../app/slices/message.reaction";
+import { resetFileMessage } from "../../app/slices/message.file";
 import { resetMessage } from "../../app/slices/message";
 import { useLazyLogoutQuery } from "../../app/services/auth";
 export default function useLogout() {
@@ -21,6 +22,7 @@ export default function useLogout() {
       dispatch(resetContacts());
       dispatch(resetMessage());
       dispatch(resetReactionMessage());
+      dispatch(resetFileMessage());
     });
   };
 

src/common/hook/useSendFileMessage.js

@@ -53,7 +53,10 @@ export default function useUploadImageMessage({
     if (!file) return;
     const { name, type: file_type, size: file_size } = file;
     // 拿file id
-    const { data: file_id } = await prepareUploadFile();
+    const { data: file_id } = await prepareUploadFile({
+      content_type: file_type,
+      filename: name,
+    });
     console.log("file id", file_id);
 
     let uploadResult = null;