Merge branch 'media-gallery' into beta

Author: davidmz

src/components/post/attachments/visual/container-editable.jsx

@@ -24,10 +24,11 @@ export function VisualContainerEditable({
   removeAttachment,
   reorderImageAttachments,
   postId,
+  lightboxOptions,
 }) {
   const withSortable = attachments.length > 1;
   const lightboxItems = useLightboxItems(attachments, postId);
-  const handleClick = useItemClickHandler(lightboxItems);
+  const handleClick = useItemClickHandler(lightboxItems, lightboxOptions);
 
   const setSortedList = useEvent((list) => reorderImageAttachments(list.map((a) => a.id)));
 

src/components/post/attachments/visual/container-static.jsx

@@ -17,12 +17,13 @@ export function VisualContainerStatic({
   reorderImageAttachments,
   postId,
   isExpanded,
+  lightboxOptions,
 }) {
   const containerRef = useRef(null);
   const containerWidth = useWidthOf(containerRef);
 
   const lightboxItems = useLightboxItems(attachments, postId);
-  const handleClick = useItemClickHandler(lightboxItems);
+  const handleClick = useItemClickHandler(lightboxItems, lightboxOptions);
 
   const sizes = attachments.map((a) => ({
     width: a.previewWidth ?? a.width,

src/components/post/attachments/visual/hooks.js

@@ -69,13 +69,13 @@ export function useLightboxItems(attachments, postId) {
   );
 }
 
-export function useItemClickHandler(lightboxItems) {
+export function useItemClickHandler(lightboxItems, lightboxOptions) {
   return useEvent(
     handleLeftClick((e) => {
       e.preventDefault();
       const { currentTarget: el } = e;
       const index = lightboxItems.findIndex((i) => i.pid === el.dataset.pid);
-      openLightbox(index, lightboxItems, el.target);
+      openLightbox(index, lightboxItems, lightboxOptions);
     }),
   );
 }

src/components/user-media.jsx

@@ -6,13 +6,17 @@ import FeedOptionsSwitch from './feed-options-switch';
 import UserProfile from './user-profile';
 import { useNouter } from '../services/nouter';
 import PaginatedView from './paginated-view';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { VisualContainer } from './post/attachments/visual/container';
 import { isPostNSFW } from './select-utils';
 import { htmlSafe } from '../utils';
 import { Helmet } from 'react-helmet';
+import { NEEDMORE_EVENT, MOREITEMS_EVENT } from '../services/lightbox-events';
+import { useLightboxItems } from './post/attachments/visual/hooks';
 
 const tokenizeHashtags = hashtags();
+const lightboxOptions = { loop: false, pagination: true };
+const PAGE_SIZE = 30;
 
 // Persists showNSFW state across remounts within the same userMedia route.
 // Resets when switching to a different user.
@@ -35,6 +39,7 @@ export default function UserMedia() {
     setShowNSFWState(value);
   };
   const { attachments, hasNSFW } = useMediaAttachments(foundUser, showNSFW);
+  useLightboxPagination(attachments);
 
   const nameForTitle = useMemo(
     () =>
@@ -76,7 +81,12 @@ export default function UserMedia() {
       {canViewAccountContent ? (
         attachments.length > 0 ? (
           <PaginatedView>
-            <VisualContainer attachments={attachments} isNSFW={false} isExpanded />
+            <VisualContainer
+              attachments={attachments}
+              isNSFW={false}
+              isExpanded
+              lightboxOptions={lightboxOptions}
+            />
           </PaginatedView>
         ) : (
           <div className="box-body">
@@ -94,6 +104,58 @@ export default function UserMedia() {
   );
 }
 
+// Enables infinite scroll in the lightbox on the UserMedia page.
+//
+// The lightbox (lightbox-actual.js) and this page communicate via two custom
+// DOM events, without direct dependency on each other:
+//
+// 1. When the user approaches the last slide in the lightbox, it dispatches
+//    NEEDMORE_EVENT. This hook listens for it and navigates to the next page
+//    using `navigate({ replace: true })`. The `replace` flag swaps the lightbox
+//    history marker with the new page URL (see lightbox-actual.js for details).
+//
+// 2. Once React processes the new page data and `useMediaAttachments` produces
+//    a new list of attachments, this hook dispatches MOREITEMS_EVENT with the
+//    lightbox-formatted items and the `isLastPage` flag. The lightbox receives
+//    the event, deduplicates items by `pid`, pushes new ones into its
+//    `dataSource` array, and restores the history marker via `pushState`.
+//
+// This way the lightbox never touches React/Redux, and this page never imports
+// PhotoSwipe — they only share event name constants from lightbox-events.js.
+function useLightboxPagination(attachments) {
+  const { navigate, location } = useNouter();
+  const isLastPage = useSelector((state) => state.feedViewState.isLastPage);
+  const lightboxItems = useLightboxItems(attachments);
+
+  // Listen for "need more" requests from the lightbox
+  useEffect(() => {
+    let loading = false;
+    const handler = () => {
+      if (loading || isLastPage) {
+        return;
+      }
+      loading = true;
+      const offset = (+location.query.offset || 0) + PAGE_SIZE;
+      navigate(
+        { pathname: location.pathname, query: { ...location.query, offset } },
+        { replace: true },
+      );
+    };
+    document.addEventListener(NEEDMORE_EVENT, handler);
+    return () => document.removeEventListener(NEEDMORE_EVENT, handler);
+  }, [navigate, location, isLastPage]);
+
+  // Dispatch new items to the lightbox when attachments change
+  useEffect(() => {
+    if (lightboxItems.length === 0) {
+      return;
+    }
+    document.dispatchEvent(
+      new CustomEvent(MOREITEMS_EVENT, { detail: { items: lightboxItems, isLastPage } }),
+    );
+  }, [lightboxItems, isLastPage]);
+}
+
 // Same logic as in UserProfileHead: don't show media for private/banned accounts
 function useCanViewAccountContent(user) {
   const currentUser = useSelector((state) => state.user);

src/services/lightbox-actual.js

@@ -9,13 +9,14 @@ import { getFullscreenAPI } from '../utils/fullscreen';
 import { isGifLike } from '../components/post/attachments/visual/utils';
 import { intentToScroll } from './unscroll';
 import { handlePip } from './pip-video';
+import { NEEDMORE_EVENT, MOREITEMS_EVENT } from './lightbox-events';
 
 const prevHotKeys = ['a', 'ф', 'h', 'р', '4'];
 const nextHotKeys = ['d', 'в', 'k', 'л', '6'];
 const fullScreenHotKeys = ['f', 'а'];
 
-export function openLightbox(index, dataSource) {
-  initLightbox().loadAndOpen(index, dataSource);
+export function openLightbox(index, dataSource, options) {
+  initLightbox(options).loadAndOpen(index, dataSource);
 }
 
 const fullScreenAPI = getFullscreenAPI();
@@ -38,7 +39,9 @@ const downloadIconHtml = {
   outlineID: 'pswp__icn-download',
 };
 
-function initLightbox() {
+const paginationThreshold = 3;
+
+function initLightbox({ loop = true, pagination = false } = {}) {
   const lightbox = new PhotoSwipeLightbox({
     clickToCloseNonZoomable: false,
     tapAction(_, event) {
@@ -54,6 +57,7 @@ function initLightbox() {
     maxZoomLevel: 2,
     pswpModule,
     returnFocus: false,
+    loop,
   });
 
   new PhotoSwipeVideoPlugin(lightbox, {});
@@ -167,14 +171,19 @@ function initLightbox() {
   });
 
   // Handle back button
+  // Push a "marker" history entry so pressing Back closes the lightbox.
+  // We preserve the history library's state (which contains the location key)
+  // so that popping this marker doesn't look like a new navigation to the router.
+  const pushMarker = () => history.pushState(window.history.state, '');
+
   let closedByNavigation = false;
   const close = () => {
     lightbox.pswp.close();
     closedByNavigation = true;
   };
   lightbox.on('beforeOpen', () => {
     window.addEventListener('popstate', close);
-    history.pushState(null, '');
+    pushMarker();
   });
   lightbox.on('destroy', () => {
     window.removeEventListener('popstate', close);
@@ -183,6 +192,47 @@ function initLightbox() {
     }
   });
 
+  // Pagination: request more items when approaching the last slide
+  if (pagination) {
+    let isLastPage = false;
+    let needmoreDispatched = false;
+
+    lightbox.on('beforeOpen', () => {
+      const onMoreItems = (e) => {
+        const { items, isLastPage: last } = e.detail;
+        isLastPage = last;
+        needmoreDispatched = false;
+
+        const dataSource = lightbox.pswp.options.dataSource;
+        const existingPids = new Set(dataSource.map((d) => d.pid));
+        const newItems = items.filter((item) => !existingPids.has(item.pid));
+        if (newItems.length > 0) {
+          dataSource.push(...newItems);
+        }
+
+        // Restore the history marker after navigation (replaceState removed it)
+        pushMarker();
+      };
+
+      document.addEventListener(MOREITEMS_EVENT, onMoreItems);
+      lightbox.on('destroy', () => document.removeEventListener(MOREITEMS_EVENT, onMoreItems));
+    });
+
+    lightbox.on('bindEvents', () => {
+      lightbox.pswp.on('change', () => {
+        if (isLastPage || needmoreDispatched) {
+          return;
+        }
+        const total = lightbox.pswp.getNumItems();
+        const curr = lightbox.pswp.currIndex;
+        if (curr >= total - paginationThreshold) {
+          needmoreDispatched = true;
+          document.dispatchEvent(new CustomEvent(NEEDMORE_EVENT));
+        }
+      });
+    });
+  }
+
   // Looking for video in active slide
   let currentVideo = null;
   lightbox.on('contentActivate', ({ content }) => {

src/services/lightbox-events.js

@@ -0,0 +1,5 @@
+// Custom DOM events for communication between the lightbox and React components.
+// The lightbox dispatches NEEDMORE when approaching the last slide,
+// and listens for MOREITEMS with new slide data from the page component.
+export const NEEDMORE_EVENT = 'lightbox:needmore';
+export const MOREITEMS_EVENT = 'lightbox:moreitems';

src/services/lightbox.js

@@ -1,14 +1,14 @@
 /* eslint-disable no-console */
 
 let firstOpen = true;
-export function openLightbox(index, dataSource) {
+export function openLightbox(index, dataSource, options) {
   if (firstOpen && dataSource[index].src) {
     // Preload image
     new Image().src = dataSource[index].src;
   }
   firstOpen = false;
   import('./lightbox-actual')
-    .then((m) => m.openLightbox(index, dataSource))
+    .then((m) => m.openLightbox(index, dataSource, options))
     .catch((e) => console.error('Could not load lightbox', e));
 }