Display file sizes on image expand, don't compress GIFs under 1MB

jasonpyau · Jan 5, 2025 · a5a803e · a5a803e
1 parent 51121a0
commit a5a803e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/backend/src/main/java/com/jasonpyau/chatapp/service/AttachmentService.java b/backend/src/main/java/com/jasonpyau/chatapp/service/AttachmentService.java
@@ -53,6 +53,7 @@ public Attachment newAttachment(String fileDataUrl, String fileName, GroupChat g
             if (!Attachment.validAttachmentTypes().contains(mediaType)) {
                 throw new InvalidInputException(Attachment.INVALID_ATTACHMENT_TYPE);
             }
+            AttachmentType attachmentType = AttachmentType.fromValue(mediaType);
             try {
                 // Storage isn't free.
                 if (decodedBytes.length > 8*1024*1024) {
@@ -70,7 +71,8 @@ public Attachment newAttachment(String fileDataUrl, String fileName, GroupChat g
                 } else if (decodedBytes.length > 1*1024*1024) {
                     // Let's aim for around 0.65 MB.
                     compressedBytes = compressImage(decodedBytes, (65*1024*1024)/100);
-                } else if (decodedBytes.length > 1024*1024/4) {
+                } else if (decodedBytes.length > 1024*1024/4 && attachmentType != AttachmentType.IMAGE_GIF_VALUE) {
+                    // Don't compress GIFs under 1MB (currently this converts GIFs into images).
                     compressedBytes = compressImage(decodedBytes, 0.8);
                 }
             } catch (Exception e) {
@@ -82,7 +84,6 @@ public Attachment newAttachment(String fileDataUrl, String fileName, GroupChat g
                 compressedBytes = decodedBytes;
             }
             String fileHash = Hashing.sha512().hashBytes(decodedBytes).toString();
-            AttachmentType attachmentType = AttachmentType.fromValue(mediaType);
             // Need to get the attachment id before actually building the attachment.
             Attachment attachment = attachmentRepository.save(new Attachment());
             attachment = Attachment.builder()

diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
@@ -260,7 +260,15 @@ const Chat: React.FC<ChatProp> = (props: ChatProp) => {
                         <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={() => setCurrentImageExpand(null)}></button>
                     </div>
                     <div className="modal-body">
-                        <img src={currentImageExpand.url} className="my-1 object-fit-contain mh-100 mw-100" title={currentImageExpand.fileName}/>
+                        <div className="d-flex justify-content-center w-100">
+                            <img src={currentImageExpand.url} className="my-1 object-fit-contain mh-100 mw-100" title={currentImageExpand.fileName}/>
+                        </div>
+                    </div>
+                    <div className="modal-footer">
+                        <div className="w-100 d-flex justify-content-between">
+                            <span>{"Size: "+filesize(currentImageExpand.fileCompressByteSize, {standard: "jedec"})}</span>
+                            <span>{"Original Size: "+filesize(currentImageExpand.fileByteSize, {standard: "jedec"})}</span>
+                        </div>
                     </div>
                 </div>}
             </div>