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

Author: findus

_locales/en/messages.json

@@ -7691,5 +7691,9 @@
   "icu:WhatsNew__v7.35--0": {
     "messageformat": "The new filter icon next to the search box makes it easy to quickly find unread chats, but feel free to take your time deciding whether or not to leave them on read after seeing what they had to say.",
     "description": "Release notes for version 7.35"
+  },
+  "icu:jumpto": {
+    "messageformat": "Jump to",
+    "description": "Jumps to the medias position in the conversation"
   }
 }

stylesheets/components/Lightbox.scss

@@ -55,6 +55,7 @@
 
   &__thumbnail {
     @include mixins.button-reset;
+
     & {
       position: relative;
       border-radius: 6px;
@@ -87,6 +88,7 @@
         '../images/image.svg',
         variables.$color-gray-25
       );
+
       & {
         height: 100%;
         width: 100%;
@@ -135,6 +137,7 @@
 
   &__unsupported {
     @include mixins.button-reset;
+
     & {
       flex-grow: 1;
       height: 100%;
@@ -295,6 +298,7 @@
 
   &__button {
     @include mixins.button-reset;
+
     & {
       border-radius: 4px;
       display: inline-block;
@@ -322,17 +326,26 @@
     &--forward {
       &::before {
         @include mixins.color-svg(
-          '../images/icons/v3/forward/forward.svg',
-          variables.$color-gray-15
+                        '../images/icons/v3/forward/forward.svg',
+                        variables.$color-gray-15
         );
       }
     }
 
     &--save {
       &::before {
         @include mixins.color-svg(
-          '../images/icons/v3/save/save.svg',
-          variables.$color-gray-15
+                        '../images/icons/v3/save/save.svg',
+                        variables.$color-gray-15
+        );
+      }
+    }
+
+    &--jump {
+      &::before {
+        @include mixins.color-svg(
+                        '../images/icons/v3/chat/chat.svg',
+                        variables.$color-gray-15
         );
       }
     }
@@ -371,6 +384,7 @@
       }
 
       outline: none;
+
       &:focus {
         outline: none;
       }

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, MediaItemMessageType } from '../types/MediaItem';
 import * as GoogleChrome from '../util/GoogleChrome';
@@ -94,6 +95,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);
@@ -186,6 +188,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>
   ) => {
@@ -677,6 +694,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')}