Lightbox: Added Button to jump to current image within the conversation

_locales/en/messages.json

@@ -8343,5 +8343,9 @@
   "icu:WhatsNew__v7.50--0": {
     "messageformat": "If you link a new Desktop on Signal Android and choose to transfer your message history, now you can also selectively transfer old attachments from your primary device too. Bring the past into the present by scrolling back in time and clicking on the download icon. As always, the transfer process is end-to-end encrypted and secure.",
     "description": "Release notes for version 7.49"
+  },
+  "icu:jumpto": {
+    "messageformat": "Jump to",
+    "description": "Jumps to the medias position in the conversation"
   }
 }

stylesheets/components/Lightbox.scss

@@ -360,6 +360,15 @@
       }
     }
 
+    &--jump {
+      &::before {
+        @include mixins.color-svg(
+          '../images/icons/v3/chat/chat.svg',
+          variables.$color-gray-15
+        );
+      }
+    }
+
     &--close {
       &::before {
         @include mixins.color-svg(

ts/components/Lightbox.tsx

@@ -13,6 +13,7 @@ import type {
   ConversationType,
   SaveAttachmentActionCreatorType,
 } from '../state/ducks/conversations';
+import { useConversationsActions } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
 import type { MediaItemType } from '../types/MediaItem';
 import * as GoogleChrome from '../util/GoogleChrome';
@@ -99,6 +100,7 @@ export function Lightbox({
   hasNextMessage,
   hasPrevMessage,
 }: PropsType): JSX.Element | null {
+  const { scrollToMessage } = useConversationsActions();
   const hasThumbnails = media.length > 1;
   const messageId = media.at(0)?.message.id;
   const prevMessageId = usePrevious(messageId, messageId);
@@ -243,6 +245,21 @@ export function Lightbox({
     [isViewOnce, media, saveAttachment, selectedIndex]
   );
 
+  const handleJumpToConversation = useCallback(
+    (
+      _event: KeyboardEvent | React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      if (isViewOnce) {
+        return;
+      }
+      const mediaItem = media[selectedIndex];
+      const { message } = mediaItem;
+      const { conversationId, id } = message;
+      scrollToMessage(conversationId, id);
+    },
+    [isViewOnce, media, selectedIndex, scrollToMessage]
+  );
+
   const handleForward = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
@@ -726,6 +743,14 @@ export function Lightbox({
                   <div />
                 )}
                 <div className="Lightbox__controls">
+                  {!isViewOnce ? (
+                    <button
+                      aria-label={i18n('icu:jumpto')}
+                      className="Lightbox__button Lightbox__button--jump"
+                      onClick={handleJumpToConversation}
+                      type="button"
+                    />
+                  ) : null}
                   {!isViewOnce ? (
                     <button
                       aria-label={i18n('icu:forwardMessage')}
@@ -874,7 +899,7 @@ function LightboxHeader({
   item: ReadonlyDeep<MediaItemType>;
 }): JSX.Element {
   const { message } = item;
-  const conversation = getConversation(message.conversationId);
+  const conversation = getConversation(message.authorId ?? '');
 
   const now = Date.now();
 

ts/model-types.d.ts

@@ -220,6 +220,7 @@ export type MessageAttributesType = {
   verified?: boolean;
   verifiedChanged?: string;
 
+  authorId?: string;
   id: string;
   type: MessageType;
   body?: string;

ts/state/ducks/lightbox.ts

@@ -45,6 +45,7 @@ import { AttachmentDownloadUrgency } from '../../types/AttachmentDownload';
 import { queueAttachmentDownloads } from '../../util/queueAttachmentDownloads';
 import { getMessageIdForLogging } from '../../util/idForLogging';
 import { markViewOnceMessageViewed } from '../../services/MessageUpdater';
+import type { MessageModel } from '../../models/messages';
 
 // eslint-disable-next-line local-rules/type-alias-readonlydeep
 export type LightboxStateType =
@@ -203,6 +204,8 @@ function showLightboxForViewOnceMedia(
 
     const { contentType } = tempAttachment;
 
+    const authorId = getAuthorId(message);
+
     const media = [
       {
         attachment: tempAttachment,
@@ -215,6 +218,7 @@ function showLightboxForViewOnceMedia(
           attachments: message.get('attachments') || [],
           id: message.get('id'),
           conversationId: message.get('conversationId'),
+          authorId,
           receivedAt: message.get('received_at'),
           receivedAtMs: Number(message.get('received_at_ms')),
           sentAt: message.get('sent_at'),
@@ -235,6 +239,16 @@ function showLightboxForViewOnceMedia(
   };
 }
 
+function getAuthorId(message: MessageModel) {
+  return (
+    window.ConversationController.lookupOrCreate({
+      serviceId: message.get('sourceServiceId'),
+      e164: message.get('source'),
+      reason: 'conversation_view.showLightBox',
+    })?.id || message.get('conversationId')
+  );
+}
+
 function filterValidAttachments(
   attributes: ReadonlyMessageAttributesType
 ): Array<AttachmentType> {
@@ -297,12 +311,8 @@ function showLightbox(opts: {
     const attachments = filterValidAttachments(message.attributes);
     const loop = isGIF(attachments);
 
-    const authorId =
-      window.ConversationController.lookupOrCreate({
-        serviceId: message.get('sourceServiceId'),
-        e164: message.get('source'),
-        reason: 'conversation_view.showLightBox',
-      })?.id || message.get('conversationId');
+    const authorId = getAuthorId(message);
+    const conversationId = message.get('conversationId');
     const receivedAt = message.get('received_at');
     const sentAt = message.get('sent_at');
 
@@ -322,7 +332,8 @@ function showLightbox(opts: {
         message: {
           attachments: message.get('attachments') || [],
           id: messageId,
-          conversationId: authorId,
+          conversationId,
+          authorId,
           receivedAt,
           receivedAtMs: Number(message.get('received_at_ms')),
           sentAt,

ts/types/MediaItem.ts

@@ -7,7 +7,7 @@ import type { MIMEType } from './MIME';
 
 export type MediaItemMessageType = Pick<
   ReadonlyMessageAttributesType,
-  'attachments' | 'conversationId' | 'id'
+  'attachments' | 'conversationId' | 'authorId' | 'id'
 > & {
   receivedAt: number;
   receivedAtMs?: number;

ts/util/sendStoryMessage.ts

@@ -173,6 +173,7 @@ export async function sendStoryMessage(
         // Note: we use the same sent_at for these messages because we want de-duplication
         //   on the receiver side.
         return window.Signal.Migrations.upgradeMessageSchema({
+          authorId: '',
           attachments,
           bodyRanges,
           conversationId: ourConversation.id,