diff --git a/_locales/en/messages.json b/_locales/en/messages.json index fb9c47ec13..6cdd62903c 100644 --- a/_locales/en/messages.json +++ b/_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" } } diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss index cd97e792eb..eb0ef68a53 100644 --- a/stylesheets/components/Lightbox.scss +++ b/stylesheets/components/Lightbox.scss @@ -337,6 +337,15 @@ } } + &--jump { + &::before { + @include mixins.color-svg( + '../images/icons/v3/chat/chat.svg', + variables.$color-gray-15 + ); + } + } + &--close { &::before { @include mixins.color-svg( diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index 6c7429fb36..e4a5c39d22 100644 --- a/ts/components/Lightbox.tsx +++ b/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 + ) => { + 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 ) => { @@ -677,6 +694,14 @@ export function Lightbox({
)}
+ {!isViewOnce ? ( +