From d9d175375d9cd9ff9554062996e68ec140e493f0 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Mon, 12 Dec 2022 19:51:55 +0800 Subject: [PATCH] refactor: audio and video message --- src/assets/icons/download.svg | 2 +- .../component/FileMessage/AudioMessage.tsx | 32 ++++++++++++++ .../component/FileMessage/VideoMessage.tsx | 44 +++++++++++++++++++ src/common/component/FileMessage/index.tsx | 28 ++++++++++-- src/common/component/FileMessage/styled.tsx | 4 ++ src/common/component/Message/styled.tsx | 6 +++ 6 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 src/common/component/FileMessage/AudioMessage.tsx create mode 100644 src/common/component/FileMessage/VideoMessage.tsx diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg index 646a6815..4111174a 100644 --- a/src/assets/icons/download.svg +++ b/src/assets/icons/download.svg @@ -1,3 +1,3 @@ - + diff --git a/src/common/component/FileMessage/AudioMessage.tsx b/src/common/component/FileMessage/AudioMessage.tsx new file mode 100644 index 00000000..722efe63 --- /dev/null +++ b/src/common/component/FileMessage/AudioMessage.tsx @@ -0,0 +1,32 @@ +// import { useState } from 'react'; +import { formatBytes } from '../../utils'; +import IconDownload from "../../../assets/icons/download.svg"; +import IconAudio from "../../../assets/icons/file.audio.svg"; + +type Props = { + url: string, + name: string, + size: number, + download: string +} + +const AudioMessage = ({ url, name, size, download }: Props) => { + const _size = formatBytes(size); + return ( +
+
+
+ +
+ {name} + {_size} +
+
+ +
+
+ ); +}; + +export default AudioMessage; \ No newline at end of file diff --git a/src/common/component/FileMessage/VideoMessage.tsx b/src/common/component/FileMessage/VideoMessage.tsx new file mode 100644 index 00000000..7c245962 --- /dev/null +++ b/src/common/component/FileMessage/VideoMessage.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react'; +import { formatBytes } from '../../utils'; +import IconDownload from "../../../assets/icons/download.svg"; +import IconVideo from "../../../assets/icons/file.video.svg"; + +type Props = { + url: string, + name: string, + size: number, + download: string +} + +const VideoMessage = ({ url, name, size, download }: Props) => { + const [playing, setPlaying] = useState(false); + const _size = formatBytes(size); + const handlePlaying = () => { + setPlaying(true); + }; + const handlePause = () => { + setPlaying(false); + }; + return ( +
+ {!playing && + <> +
+
+
+ +
+ {name} + {_size} +
+
+ +
+ + } +
+ ); +}; + +export default VideoMessage; \ No newline at end of file diff --git a/src/common/component/FileMessage/index.tsx b/src/common/component/FileMessage/index.tsx index 057379b6..87d78a4a 100644 --- a/src/common/component/FileMessage/index.tsx +++ b/src/common/component/FileMessage/index.tsx @@ -6,10 +6,12 @@ import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage"; import useUploadFile from "../../hook/useUploadFile"; import useSendMessage from "../../hook/useSendMessage"; import Progress from "./Progress"; -import { getFileIcon, formatBytes, isImage, getImageSize, ImageSize } from "../../utils"; +import { getFileIcon, formatBytes, isImage, getImageSize } from "../../utils"; import { useAppSelector } from "../../../app/store"; import IconDownload from "../../../assets/icons/download.svg"; import IconClose from "../../../assets/icons/close.circle.svg"; +import VideoMessage from "./VideoMessage"; +import AudioMessage from "./AudioMessage"; const isLocalFile = (content: string) => { return content.startsWith("blob:"); @@ -41,7 +43,7 @@ const FileMessage: FC = ({ thumbnail = "", properties = { local_id: 0, name: "", size: 0, content_type: "" } }) => { - const [imageSize, setImageSize] = useState(null); + const [imageSize, setImageSize] = useState(null); const [uploadingFile, setUploadingFile] = useState(false); const removeLocalMessage = useRemoveLocalMessage({ context, id: to }); const { @@ -120,7 +122,7 @@ const FileMessage: FC = ({ if (!content || !name) return null; const sending = uploadingFile || isSending; - + // image if (isImage(content_type, size)) return ( = ({ thumbnail={thumbnail} /> ); + // video + if (content_type.startsWith("video") && !sending) + return ( + + ); + // audio + if (content_type.startsWith("audio") && !sending) + return ( + + ); return (
diff --git a/src/common/component/FileMessage/styled.tsx b/src/common/component/FileMessage/styled.tsx index 9a115132..c21bb177 100644 --- a/src/common/component/FileMessage/styled.tsx +++ b/src/common/component/FileMessage/styled.tsx @@ -22,6 +22,7 @@ const Styled = styled.div` .icon { width: 36px; height: 48px; + } .info { display: flex; @@ -52,6 +53,9 @@ const Styled = styled.div` } .download { white-space: nowrap; + svg path{ + fill: #616161; + } } .cancel { cursor: pointer; diff --git a/src/common/component/Message/styled.tsx b/src/common/component/Message/styled.tsx index e53b8705..5097a36a 100644 --- a/src/common/component/Message/styled.tsx +++ b/src/common/component/Message/styled.tsx @@ -82,6 +82,12 @@ const StyledMsg = styled.div` padding: 2px; color: #1fe1f9; } + /* 下载图标颜色 */ + .download_icon.gray{ + path{ + fill: #616161; + } + } } } &.archive {