Page media in Lightbox

ts/components/AvatarLightbox.tsx

@@ -35,6 +35,10 @@ export function AvatarLightbox({
       saveAttachment={noop}
       toggleForwardMessageModal={noop}
       onMediaPlaybackStart={noop}
+      onNextAttachment={noop}
+      onPrevAttachment={noop}
+      onSelectAttachment={noop}
+      selectedIndex={0}
     >
       <AvatarPreview
         avatarColor={avatarColor}

ts/components/Lightbox.stories.tsx

@@ -1,7 +1,7 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import * as React from 'react';
+import React, { useState } from 'react';
 
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
@@ -55,16 +55,30 @@ function createMediaItem(
   };
 }
 
-const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
-  closeLightbox: action('closeLightbox'),
-  i18n,
-  isViewOnce: Boolean(overrideProps.isViewOnce),
-  media: overrideProps.media || [],
-  saveAttachment: action('saveAttachment'),
-  selectedIndex: number('selectedIndex', overrideProps.selectedIndex || 0),
-  toggleForwardMessageModal: action('toggleForwardMessageModal'),
-  onMediaPlaybackStart: noop,
-});
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [selectedIndex, setSelectedIndex] = useState(
+    number('selectedIndex', overrideProps.selectedIndex || 0)
+  );
+  const media = overrideProps.media || [];
+  return {
+    closeLightbox: action('closeLightbox'),
+    i18n,
+    isViewOnce: Boolean(overrideProps.isViewOnce),
+    media,
+    saveAttachment: action('saveAttachment'),
+    selectedIndex,
+    toggleForwardMessageModal: action('toggleForwardMessageModal'),
+    onMediaPlaybackStart: noop,
+    onPrevAttachment: () => {
+      setSelectedIndex(Math.max(0, selectedIndex - 1));
+    },
+    onNextAttachment: () => {
+      setSelectedIndex(Math.min(media.length - 1, selectedIndex + 1));
+    },
+    onSelectAttachment: setSelectedIndex,
+  };
+};
 
 export function Multimedia(): JSX.Element {
   const props = createProps({

ts/components/Lightbox.tsx

@@ -32,9 +32,14 @@ export type PropsType = {
   isViewOnce?: boolean;
   media: ReadonlyArray<ReadonlyDeep<MediaItemType>>;
   saveAttachment: SaveAttachmentActionCreatorType;
-  selectedIndex?: number;
+  selectedIndex: number;
   toggleForwardMessageModal: (messageId: string) => unknown;
   onMediaPlaybackStart: () => void;
+  onNextAttachment: () => void;
+  onPrevAttachment: () => void;
+  onSelectAttachment: (index: number) => void;
+  hasPrevMessage?: boolean;
+  hasNextMessage?: boolean;
 };
 
 const ZOOM_SCALE = 3;
@@ -59,13 +64,16 @@ export function Lightbox({
   i18n,
   isViewOnce = false,
   saveAttachment,
-  selectedIndex: initialSelectedIndex = 0,
+  selectedIndex,
   toggleForwardMessageModal,
   onMediaPlaybackStart,
+  onNextAttachment,
+  onPrevAttachment,
+  onSelectAttachment,
+  hasNextMessage,
+  hasPrevMessage,
 }: PropsType): JSX.Element | null {
   const [root, setRoot] = React.useState<HTMLElement | undefined>();
-  const [selectedIndex, setSelectedIndex] =
-    useState<number>(initialSelectedIndex);
 
   const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
     null
@@ -106,9 +114,9 @@ export function Lightbox({
         return;
       }
 
-      setSelectedIndex(prevSelectedIndex => Math.max(prevSelectedIndex - 1, 0));
+      onPrevAttachment();
     },
-    [isZoomed]
+    [isZoomed, onPrevAttachment]
   );
 
   const onNext = useCallback(
@@ -122,11 +130,9 @@ export function Lightbox({
         return;
       }
 
-      setSelectedIndex(prevSelectedIndex =>
-        Math.min(prevSelectedIndex + 1, media.length - 1)
-      );
+      onNextAttachment();
     },
-    [isZoomed, media]
+    [isZoomed, onNextAttachment]
   );
 
   const onTimeUpdate = useCallback(() => {
@@ -521,8 +527,9 @@ export function Lightbox({
     }
   }
 
-  const hasNext = !isZoomed && selectedIndex < media.length - 1;
-  const hasPrevious = !isZoomed && selectedIndex > 0;
+  const hasNext =
+    !isZoomed && (selectedIndex < media.length - 1 || hasNextMessage);
+  const hasPrevious = !isZoomed && (selectedIndex > 0 || hasPrevMessage);
 
   return root
     ? createPortal(
@@ -663,7 +670,7 @@ export function Lightbox({
                             event.stopPropagation();
                             event.preventDefault();
 
-                            setSelectedIndex(index);
+                            onSelectAttachment(index);
                           }}
                         >
                           {item.thumbnailObjectUrl ? (