[FIX] Download buttons on desktop app and CDN being ignored (#20820)

RocketChat · Feb 22, 2021 · 269fd3f · 269fd3f
1 parent e073715
commit 269fd3f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/client/components/Message/Attachments/Attachment.tsx b/client/components/Message/Attachments/Attachment.tsx
@@ -19,7 +19,9 @@ export type AttachmentPropsBase = {
 };
 
 const Row: FC<BoxProps> = (props) => <Box mi='neg-x2' mbe='x2' rcx-message-attachment display='flex' alignItems='center' {...props}/>;
+
 const Title: FC<BoxProps> = (props) => <Box withTruncatedText mi='x2' fontScale='c1' color='hint' {...props}></Box>;
+const TitleLink: FC<{ link: string; title?: string }> = ({ link, title }) => <Title is='a' href={`${ link }?donwload`} color={undefined} target='_blank' download={title} rel='noopener noreferrer'>{title}</Title>;
 const Text: FC<BoxProps> = (props) => <Box mbe='x4' mi='x2' fontScale='p1' color='default' {...props}></Box>;
 
 const Size: FC<BoxProps & { size: number }> = ({ size, ...props }) => {
@@ -33,9 +35,9 @@ const Collapse: FC<ButtonProps & { collapsed?: boolean }> = ({ collapsed = false
 	return <Action title={collapsed ? t('Uncollapse') : t('Collapse')}icon={ !collapsed ? 'chevron-down' : 'chevron-left' }{...props} />;
 };
 
-const Download: FC<ButtonProps & { href: string }> = ({ title, ...props }) => {
+const Download: FC<ButtonProps & { href: string }> = ({ title, href, ...props }) => {
 	const t = useTranslation();
-	return <Action icon='download' title={t('Download')} is='a' target='_blank' download={title} {...props} />;
+	return <Action icon='download' href={`${ href }?download`} title={t('Download')} is='a' target='_blank' rel='noopener noreferrer' download={title} {...props} />;
 };
 
 const Content: FC<BoxProps> = ({ ...props }) => <Box rcx-attachment__content width='full' mb='x4' {...props} />;
@@ -53,6 +55,7 @@ const Thumb: FC<{ url: string }> = memo(({ url }) => <Box mis='x8'><Avatar { ...
 export const Attachment: FC<BoxProps> & {
 	Row: FC<BoxProps>;
 	Title: FC<BoxProps>;
+	TitleLink: FC<{ link: string; title?: string }>;
 	Text: FC<BoxProps>;
 	Size: FC<BoxProps & { size: number }>;
 	Collapse: FC<ButtonProps & { collapsed?: boolean }>;
@@ -78,6 +81,7 @@ Attachment.Image = Image;
 Attachment.Row = Row;
 Attachment.Title = Title;
 Attachment.Text = Text;
+Attachment.TitleLink = TitleLink;
 Attachment.Size = Size;
 
 Attachment.Thumb = Thumb;

diff --git a/client/components/Message/Attachments/Files/AudioAttachment.tsx b/client/components/Message/Attachments/Files/AudioAttachment.tsx
@@ -30,7 +30,7 @@ export const AudioAttachment: FC<AudioAttachmentProps> = ({
 			<Attachment.Title>{title}</Attachment.Title>
 			{size && <Attachment.Size size={size}/>}
 			{collapse}
-			{hasDownload && link && <Attachment.Download title={title} href={link}/>}
+			{hasDownload && link && <Attachment.Download title={title} href={getURL(link)}/>}
 		</Attachment.Row>
 		{ !collapsed && <Attachment.Content border='none'>
 			<audio controls>

diff --git a/client/components/Message/Attachments/Files/GenericFileAttachment.tsx b/client/components/Message/Attachments/Files/GenericFileAttachment.tsx
@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 import { Attachment, AttachmentPropsBase } from '../Attachment';
 import MarkdownText from '../../../MarkdownText';
 import { FileProp } from '..';
+import { useMediaUrl } from '../context/AttachmentContext';
 
 export type GenericFileAttachmentProps = {
 	file: FileProp;
@@ -19,15 +20,16 @@ export const GenericFileAttachment: FC<GenericFileAttachmentProps> = ({
 		// format,
 		// name,
 	},
-}) =>
+}) => {
 	// const [collapsed, collapse] = useCollapse(collapsedDefault);
-	<Attachment>
+	const getURL = useMediaUrl();
+	return <Attachment>
 		{ description && <MarkdownText withRichContent={undefined} content={description} /> }
 		<Attachment.Row>
-			<Attachment.Title { ...hasDownload && link && { is: 'a', href: link, color: undefined, target: '_blank', download: title } } >{title}</Attachment.Title>
+			{ hasDownload && link ? <Attachment.TitleLink link={getURL(link)} title={title} /> : <Attachment.Title>{title}</Attachment.Title> }
 			{size && <Attachment.Size size={size}/>}
 			{/* {collapse} */}
-			{hasDownload && link && <Attachment.Download title={title} href={link}/>}
+			{hasDownload && link && <Attachment.Download title={title} href={getURL(link)}/>}
 		</Attachment.Row>
 		{/* { !collapsed && <Attachment.Content>
 			<Attachment.Details>
@@ -37,3 +39,4 @@ export const GenericFileAttachment: FC<GenericFileAttachmentProps> = ({
 			</Attachment.Details>
 		</Attachment.Content> } */}
 	</Attachment>;
+};
diff --git a/client/components/Message/Attachments/Files/VideoAttachment.tsx b/client/components/Message/Attachments/Files/VideoAttachment.tsx
@@ -30,7 +30,7 @@ export const VideoAttachment: FC<VideoAttachmentProps> = ({ title,
 			<Attachment.Title>{title}</Attachment.Title>
 			{size && <Attachment.Size size={size}/>}
 			{collapse}
-			{hasDownload && link && <Attachment.Download title={title} href={link}/>}
+			{hasDownload && link && <Attachment.Download title={title} href={getURL(link)}/>}
 		</Attachment.Row>
 		{ !collapsed && <Attachment.Content width='full'>
 			<Box is='video' width='full' controls>

diff --git a/client/components/Message/Attachments/providers/AttachmentProvider.tsx b/client/components/Message/Attachments/providers/AttachmentProvider.tsx
@@ -14,7 +14,7 @@ const AttachmentProvider: FC<{}> = ({ children }) => {
 	const saveMobileBandwidth = !!useUserPreference<boolean>('saveMobileBandwidth');
 
 	const contextValue: AttachmentContextValue = useMemo(() => ({
-		getURL: getURL as (url: string) => string,
+		getURL: (url: string): string => getURL(url, { full: true }),
 		collapsedByDefault,
 		autoLoadEmbedMedias: !reducedData && autoLoadEmbedMedias && (!saveMobileBandwidth || !isMobile),
 		dimensions: {