Merge branch 'develop' into fix/issue

RocketChat · Jan 5, 2025 · d4d81dd · d4d81dd
2 parents 0215b6f + ad7fefd
commit d4d81dd
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 28 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}>

diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js
@@ -133,7 +133,7 @@ export const MessageToolbox = ({
         id: 'pin',
         onClick: () => handlePinMessage(message),
         iconName: message.pinned ? 'pin-filled' : 'pin',
-        visible: !isThreadMessage && isAllowedToPin,
+        visible: isAllowedToPin,
       },
       edit: {
         label: 'Edit',