Feat: Added 'Collapse & Uncollapse' Functionality for Audio, Video Me…

…ssages & Image attachment (#772) * BUG: Fix extra top space for audio and video messages to improve UI consistency * Fix: Add padding for audio and video messages in nested attachments and quotes * added conditional CSS handling the description present or absent case * Same logic for conditional CSS but written in better way * Feat: Add 'Collapse & Uncollapse' functionality for Audio and Video messages * Feat: Add 'Collapse & Uncollapse' functionality * Feat: Add 'Collapse & Uncollapse' functionality * Added Collapse & Uncollapse Functionality for Image Attachment * Using chevron-down, chevron-left instead of arrow-down, arrow-right
RocketChat · Jan 5, 2025 · 9352c03 · 9352c03
1 parent 12cefd6
commit 9352c03
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 27 deletions.
diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -3,7 +3,14 @@ import { css } from '@emotion/react';
 import { ActionButton, Box } from '@embeddedchat/ui-elements';
 import { Markdown } from '../Markdown';
 
-const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => {
+const AttachmentMetadata = ({
+  attachment,
+  url,
+  variantStyles = {},
+  msg,
+  onExpandCollapseClick,
+  isExpanded,
+}) => {
   const handleDownload = async () => {
     try {
       const response = await fetch(url);
@@ -78,6 +85,16 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => {
         >
           {attachment.title}
         </p>
+        <ActionButton
+          ghost
+          icon={isExpanded ? 'chevron-down' : 'chevron-left'}
+          size="small"
+          onClick={onExpandCollapseClick}
+          css={css`
+            margin-left: 10px;
+            margin-top: ${attachment.description ? '3px' : '13px'};
+          `}
+        />
         <ActionButton
           ghost
           icon="download"

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
@@ -21,6 +21,12 @@ const AudioAttachment = ({
     return URL;
   };
   const { authorIcon, authorName } = author;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
   return (
     <Box>
       <Box
@@ -66,8 +72,12 @@ const AudioAttachment = ({
           url={host + (attachment.title_url || attachment.audio_url)}
           variantStyles={variantStyles}
           msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
         />
-        <audio src={host + attachment.audio_url} width="100%" controls />
+        {isExpanded && (
+          <audio src={host + attachment.audio_url} width="100%" controls />
+        )}
 
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (

diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -30,10 +30,14 @@ const ImageAttachment = ({
 
   const { authorIcon, authorName } = author;
 
+  const [isExpanded, setIsExpanded] = useState(true);
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
   return (
     <Box css={variantStyles.imageAttachmentContainer}>
       <Box
-        onClick={() => setShowGallery(true)}
         css={[
           css`
             cursor: pointer;
@@ -77,16 +81,22 @@ const ImageAttachment = ({
           url={host + (attachment.title_link || attachment.image_url)}
           variantStyles={variantStyles}
           msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
         />
-        <img
-          src={host + attachment.image_url}
-          style={{
-            maxWidth: '100%',
-            objectFit: 'contain',
-            borderBottomLeftRadius: 'inherit',
-            borderBottomRightRadius: 'inherit',
-          }}
-        />
+        {isExpanded && (
+          <Box onClick={() => setShowGallery(true)}>
+            <img
+              src={host + attachment.image_url}
+              style={{
+                maxWidth: '100%',
+                objectFit: 'contain',
+                borderBottomLeftRadius: 'inherit',
+                borderBottomRightRadius: 'inherit',
+              }}
+            />
+          </Box>
+        )}
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
             <Box css={variantStyles.imageAttachmentContainer} key={index}>

diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
@@ -31,6 +31,12 @@ const VideoAttachment = ({
     return URL;
   };
   const { authorIcon, authorName } = author;
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const toggleExpanded = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
   return (
     <Box css={variantStyles.videoAttachmentContainer}>
       <Box
@@ -76,20 +82,24 @@ const VideoAttachment = ({
           url={host + (attachment.title_url || attachment.video_url)}
           variantStyles={variantStyles}
           msg={msg}
+          onExpandCollapseClick={toggleExpanded}
+          isExpanded={isExpanded}
         />
-        <video
-          width={300}
-          controls
-          style={{
-            borderBottomLeftRadius: 'inherit',
-            borderBottomRightRadius: 'inherit',
-          }}
-        >
-          <source
-            src={host + attachment.video_url}
-            type={userAgentMIMETypeFallback(attachment.video_type)}
-          />
-        </video>
+        {isExpanded && (
+          <video
+            width={300}
+            controls
+            style={{
+              borderBottomLeftRadius: 'inherit',
+              borderBottomRightRadius: 'inherit',
+            }}
+          >
+            <source
+              src={host + attachment.video_url}
+              type={userAgentMIMETypeFallback(attachment.video_type)}
+            />
+          </video>
+        )}
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
             <Box css={variantStyles.videoAttachmentContainer} key={index}>