diff --git a/web/packages/gallery/components/viewer/FileViewer.tsx b/web/packages/gallery/components/viewer/FileViewer.tsx index 063bcc0529..4ab53f564d 100644 --- a/web/packages/gallery/components/viewer/FileViewer.tsx +++ b/web/packages/gallery/components/viewer/FileViewer.tsx @@ -423,7 +423,11 @@ export const FileViewer: React.FC = ({ // Refreshing the current slide after the current file has gone // will show the subsequent slide (since that would've now moved // down to the current index). - psRef.current!.refreshCurrentSlideContent(); + // + // However, we might've been the last slide, in which case we + // need to go back one slide first. To determine this, also pass + // the expected count of files to our PhotoSwipe wrapper. + psRef.current!.refreshCurrentSlideContent(files.length); } else { // If there are no more files left, close the viewer. handleClose(); diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts index 92f6bc3ec8..34aafbae1d 100644 --- a/web/packages/gallery/components/viewer/photoswipe.ts +++ b/web/packages/gallery/components/viewer/photoswipe.ts @@ -1046,9 +1046,18 @@ export class FileViewerPhotoSwipe { /** * Reload the current slide, asking the data source for its data afresh. + * + * @param expectedFileCount The count of files that we expect to show after + * the refresh. If provided, this is used to (circle) go back to the first + * slide when the slide which we were at previously is not available anymore + * (e.g. when deleting the last file in a sequence). */ - refreshCurrentSlideContent() { - this.pswp.refreshSlideContent(this.pswp.currIndex); + refreshCurrentSlideContent(expectedFileCount?: number) { + if (expectedFileCount && this.pswp.currIndex >= expectedFileCount) { + this.pswp.goTo(0); + } else { + this.pswp.refreshSlideContent(this.pswp.currIndex); + } } }