mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Merge pull request #2252 from Bilb/allow-multiple-attachments-saving-locally
Allow multiple attachments saving locally
This commit is contained in:
commit
930e3156e4
3 changed files with 30 additions and 3 deletions
|
@ -23,6 +23,7 @@ type Props = {
|
|||
playIconOverlay?: boolean;
|
||||
softCorners?: boolean;
|
||||
forceSquare?: boolean;
|
||||
attachmentIndex?: number;
|
||||
|
||||
onClick?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
|
||||
onClickClose?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
|
||||
|
@ -45,6 +46,7 @@ export const Image = (props: Props) => {
|
|||
playIconOverlay,
|
||||
softCorners,
|
||||
forceSquare,
|
||||
attachmentIndex,
|
||||
url,
|
||||
width,
|
||||
} = props;
|
||||
|
@ -87,6 +89,7 @@ export const Image = (props: Props) => {
|
|||
maxHeight: `${height}px`,
|
||||
maxWidth: `${width}px`,
|
||||
}}
|
||||
data-attachmentindex={attachmentIndex}
|
||||
>
|
||||
{pending || loading ? (
|
||||
<div
|
||||
|
|
|
@ -47,6 +47,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -65,6 +66,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={0}
|
||||
/>
|
||||
<Image
|
||||
alt={getAlt(attachments[1])}
|
||||
|
@ -76,6 +78,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={1}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -94,6 +97,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={0}
|
||||
/>
|
||||
<div className="module-image-grid__column">
|
||||
<Image
|
||||
|
@ -105,6 +109,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={1}
|
||||
/>
|
||||
<Image
|
||||
alt={getAlt(attachments[2])}
|
||||
|
@ -116,6 +121,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[2]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -136,6 +142,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={0}
|
||||
/>
|
||||
<Image
|
||||
alt={getAlt(attachments[1])}
|
||||
|
@ -146,6 +153,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-image-grid__row">
|
||||
|
@ -159,6 +167,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[2]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={2}
|
||||
/>
|
||||
<Image
|
||||
alt={getAlt(attachments[3])}
|
||||
|
@ -170,6 +179,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[3]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -193,6 +203,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={0}
|
||||
/>
|
||||
<Image
|
||||
alt={getAlt(attachments[1])}
|
||||
|
@ -203,6 +214,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-image-grid__row">
|
||||
|
@ -216,6 +228,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[2]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={2}
|
||||
/>
|
||||
<Image
|
||||
alt={getAlt(attachments[3])}
|
||||
|
@ -227,6 +240,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[3]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={3}
|
||||
/>
|
||||
<Image
|
||||
alt={getAlt(attachments[4])}
|
||||
|
@ -240,6 +254,7 @@ export const ImageGrid = (props: Props) => {
|
|||
url={isMessageVisible ? getThumbnailUrl(attachments[4]) : undefined}
|
||||
onClick={onClickAttachment}
|
||||
onError={onError}
|
||||
attachmentIndex={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -73,7 +73,6 @@ export const MessageContextMenu = (props: Props) => {
|
|||
const isOutgoing = direction === 'outgoing';
|
||||
const showRetry = status === 'error' && isOutgoing;
|
||||
const isSent = status === 'sent' || status === 'read'; // a read message should be replyable
|
||||
const multipleAttachments = attachments && attachments.length > 1;
|
||||
|
||||
const onContextMenuShown = useCallback(() => {
|
||||
window.contextMenuShown = true;
|
||||
|
@ -120,13 +119,23 @@ export const MessageContextMenu = (props: Props) => {
|
|||
|
||||
const saveAttachment = useCallback(
|
||||
(e: any) => {
|
||||
// this is quite dirty but considering that we want the context menu of the message to show on click on the attachment
|
||||
// and the context menu save attachment item to save the right attachment I did not find a better way for now.
|
||||
let targetAttachmentIndex = e.triggerEvent.path[1].getAttribute('data-attachmentindex');
|
||||
e.event.stopPropagation();
|
||||
if (!attachments?.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!targetAttachmentIndex) {
|
||||
targetAttachmentIndex = 0;
|
||||
}
|
||||
if (targetAttachmentIndex > attachments.length) {
|
||||
return;
|
||||
}
|
||||
const messageTimestamp = timestamp || serverTimestamp || 0;
|
||||
void saveAttachmentToDisk({
|
||||
attachment: attachments[0],
|
||||
attachment: attachments[targetAttachmentIndex],
|
||||
messageTimestamp,
|
||||
messageSender: sender,
|
||||
conversationId: convoId,
|
||||
|
@ -173,7 +182,7 @@ export const MessageContextMenu = (props: Props) => {
|
|||
onHidden={onContextMenuHidden}
|
||||
animation={animation.fade}
|
||||
>
|
||||
{!multipleAttachments && attachments && attachments[0] ? (
|
||||
{attachments?.length ? (
|
||||
<Item onClick={saveAttachment}>{window.i18n('downloadAttachment')}</Item>
|
||||
) : null}
|
||||
|
||||
|
|
Loading…
Reference in a new issue