Fixes save in lightbox

stylesheets/components/Lightbox.scss

@@ -228,6 +228,7 @@
 
     &--forward {
       &::before {
+        transform: scaleX(-1);
         @include color-svg(
           '../images/icons/v2/reply-solid-24.svg',
           $color-gray-15

ts/components/Lightbox.stories.tsx

@@ -43,6 +43,7 @@ function createMediaItem(
       id: 'image-msg',
       received_at: 0,
       received_at_ms: Date.now(),
+      sent_at: Date.now(),
     },
     objectURL: '',
     ...overrideProps,
@@ -77,6 +78,7 @@ story.add('Multimedia', () => {
           id: 'image-msg',
           received_at: 1,
           received_at_ms: Date.now(),
+          sent_at: Date.now(),
         },
         objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
       },
@@ -94,6 +96,7 @@ story.add('Multimedia', () => {
           id: 'video-msg',
           received_at: 2,
           received_at_ms: Date.now(),
+          sent_at: Date.now(),
         },
         objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
       },
@@ -132,6 +135,7 @@ story.add('Missing Media', () => {
           id: 'image-msg',
           received_at: 3,
           received_at_ms: Date.now(),
+          sent_at: Date.now(),
         },
         objectURL: undefined,
       },

ts/components/conversation/media-gallery/AttachmentSection.stories.tsx

@@ -56,6 +56,7 @@ const createRandomFile = (
       received_at: Math.floor(Math.random() * 10),
       received_at_ms: random(startTime, startTime + timeWindow),
       attachments: [],
+      sent_at: Date.now(),
     },
     attachment: {
       url: '',

ts/components/conversation/media-gallery/MediaGridItem.stories.tsx

@@ -50,6 +50,7 @@ const createMediaItem = (
     id: 'id',
     received_at: Date.now(),
     received_at_ms: Date.now(),
+    sent_at: Date.now(),
   },
 });
 

ts/test-node/components/media-gallery/groupMessagesByDate_test.ts

@@ -20,6 +20,7 @@ const toMediaItem = (date: Date): MediaItemType => ({
     received_at: date.getTime(),
     received_at_ms: date.getTime(),
     attachments: [],
+    sent_at: Date.now(),
   },
   attachment: {
     fileName: 'fileName',
@@ -62,6 +63,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1523534400000,
               received_at_ms: 1523534400000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -78,6 +80,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1523491260000,
               received_at_ms: 1523491260000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -99,6 +102,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1523491140000,
               received_at_ms: 1523491140000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -120,6 +124,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1523232060000,
               received_at_ms: 1523232060000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -141,6 +146,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1523231940000,
               received_at_ms: 1523231940000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -157,6 +163,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1522540860000,
               received_at_ms: 1522540860000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -180,6 +187,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1522540740000,
               received_at_ms: 1522540740000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -196,6 +204,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1519912800000,
               received_at_ms: 1519912800000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -219,6 +228,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1298937540000,
               received_at_ms: 1298937540000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',
@@ -235,6 +245,7 @@ describe('groupMediaItemsByDate', () => {
               received_at: 1296554400000,
               received_at_ms: 1296554400000,
               attachments: [],
+              sent_at: Date.now(),
             },
             attachment: {
               fileName: 'fileName',

ts/types/MediaItem.ts

@@ -12,6 +12,8 @@ export type MessageAttributesType = {
   received_at: number;
   // eslint-disable-next-line camelcase
   received_at_ms: number;
+  // eslint-disable-next-line camelcase
+  sent_at: number;
 };
 
 export type MediaItemType = {

ts/views/conversation_view.ts

@@ -26,7 +26,10 @@ import {
   MessageAttributesType,
 } from '../model-types.d';
 import { LinkPreviewType } from '../types/message/LinkPreviews';
-import { MediaItemType } from '../types/MediaItem';
+import {
+  MediaItemType,
+  MessageAttributesType as MediaItemMessageType,
+} from '../types/MediaItem';
 import { MessageModel } from '../models/messages';
 import { assert } from '../util/assert';
 import { maybeParseUrl } from '../util/url';
@@ -2614,6 +2617,7 @@ Whisper.ConversationView = Whisper.View.extend({
                   id: message.id,
                   received_at: message.received_at,
                   received_at_ms: Number(message.received_at_ms),
+                  sent_at: message.sent_at,
                 },
               };
             });
@@ -2958,6 +2962,7 @@ Whisper.ConversationView = Whisper.View.extend({
               conversationId: message.get('conversationId'),
               received_at: message.get('received_at'),
               received_at_ms: message.get('received_at_ms'),
+              sent_at: message.get('sent_at'),
             },
           },
         ],
@@ -3058,13 +3063,21 @@ Whisper.ConversationView = Whisper.View.extend({
     selectedMediaItem: MediaItemType,
     media: Array<MediaItemType> = []
   ) {
-    const onSave = async (options: WhatIsThis = {}) => {
+    const onSave = async ({
+      attachment,
+      message,
+      index,
+    }: {
+      attachment: AttachmentType;
+      message: MediaItemMessageType;
+      index: number;
+    }) => {
       const fullPath = await window.Signal.Types.Attachment.save({
-        attachment: options.attachment,
+        attachment,
-        index: options.index + 1,
+        index: index + 1,
         readAttachmentData,
         saveAttachmentToDisk,
-        timestamp: options.message.get('sent_at'),
+        timestamp: message.sent_at,
       });
 
       if (fullPath) {
@@ -3146,6 +3159,7 @@ Whisper.ConversationView = Whisper.View.extend({
             )?.id || message.get('conversationId'),
           received_at: message.get('received_at'),
           received_at_ms: message.get('received_at_ms'),
+          sent_at: message.get('sent_at'),
         },
         attachment: item,
         thumbnailObjectUrl:
@@ -3590,6 +3604,7 @@ Whisper.ConversationView = Whisper.View.extend({
                   id: message.id,
                   received_at: message.received_at,
                   received_at_ms: Number(message.received_at_ms),
+                  sent_at: message.sent_at,
                 },
               };
             }