+
+
+ {nameForTitle} - All media - {CONFIG.siteTitle}
+
+
+
+
+
+ ) : (
+
+ );
+}
+
+// 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);
+ return useMemo(() => {
+ if (!user) {
+ return false;
+ }
+ const isCurrentUser = currentUser?.id === user.id;
+ const isBanned = currentUser?.banIds?.includes(user.id);
+ const inSubscriptions = currentUser?.subscriptions.includes(user.id);
+ return !isBanned && (isCurrentUser || user.isPrivate === '0' || inSubscriptions);
+ }, [user, currentUser]);
+}
+
+function useMediaAttachments(foundUser, showNSFW) {
+ // useStore instead of multiple useSelectors for subscriptions/subscribers/users:
+ // isPostNSFW needs these slices, but we don't want to re-render the media
+ // gallery every time they change. store.getState() inside useMemo gives us
+ // the current values without adding them as reactive dependencies.
+ const store = useStore();
+ const allPosts = useSelector((state) => state.posts);
+ const allAttachments = useSelector((state) => state.attachments);
+ const feedPostIds = useSelector((state) => state.feedViewState.entries);
+ const isNSFWVisible = useSelector((state) => state.isNSFWVisible);
+
+ return useMemo(() => {
+ // Fast path: if the user/group itself has #nsfw in description, all posts are NSFW
+ const allNSFW =
+ !isNSFWVisible &&
+ !!foundUser?.description &&
+ tokenizeHashtags(foundUser.description).some((t) => t.text.toLowerCase() === '#nsfw');
+
+ const state = store.getState();
+
+ // Build a postId → isNSFW map (one check per post, not per attachment)
+ const nsfwByPostId = new Map();
+ for (const postId of feedPostIds) {
+ const post = allPosts[postId];
+ if (post && !post.deleted) {
+ nsfwByPostId.set(postId, allNSFW || isPostNSFW(post, state));
+ }
+ }
+
+ let hasNSFW = false;
+ const attachments = feedPostIds
+ .flatMap((postId) => {
+ const post = allPosts[postId];
+ const isNSFW = nsfwByPostId.get(postId) ?? false;
+ if (isNSFW) {
+ hasNSFW = true;
+ }
+ const nsfw = isNSFW && !showNSFW;
+ return (post?.attachments || []).map((attId) => ({ postId, attId, nsfw }));
+ })
+ .map(({ postId, attId, nsfw }) => {
+ const att = allAttachments[attId];
+ if (!att) {
+ return null;
+ }
+ const post = allPosts[postId];
+ const author = post ? state.users[post.createdBy] : null;
+ const caption = buildCaption(author, post, postId);
+ return { ...att, isNSFW: nsfw, caption };
+ })
+ .filter((att) => att && (att.mediaType === 'image' || att.mediaType === 'video'));
+
+ return { attachments, hasNSFW };
+ }, [feedPostIds, allPosts, allAttachments, isNSFWVisible, showNSFW, foundUser, store]);
+}
+
+function buildCaption(author, post, postId) {
+ if (!author || !post) {
+ return '';
+ }
+ const avatarUrl = author.profilePictureMediumUrl || '';
+ const username = htmlSafe(author.username);
+ const postUrl = `/${encodeURIComponent(author.username)}/${encodeURIComponent(postId)}`;
+
+ const maxLen = 150;
+ const rawBody = (post.body || '').replace(/\s+/g, ' ').trim();
+ const body =
+ rawBody.length > maxLen ? htmlSafe(rawBody.slice(0, maxLen)) + '\u2026' : htmlSafe(rawBody);
+
+ // The link is intercepted by LightboxLinkInterceptor (in layout.jsx),
+ // which handles SPA navigation instead of a full page reload.
+ return (
+ `` +
+ `
+
+
+
+
+
+ {canViewAccountContent && hasNSFW && (
+
+
+
+ )}
+ {canViewAccountContent ? (
+ attachments.length > 0 ? (
+
+
+ )
+ ) : (
+ foundUser && (
+ There is no media in this account.
+
+
+ )
+ )}
+ Media is not available for this account.
+
@@ -30,19 +36,74 @@ export default function UserProfile(props) {
)}
{props.whyCannotPost}
} + {whyCannotPost &&{whyCannotPost}
} - {authenticated && !props.canIPostHere && props.isRestricted === '1' && ( -
- Only administrators can post to this group.
-
- )}
+ {authenticated && !canIPostHere && foundUser?.isRestricted === '1' && (
+
+ Only administrators can post to this group.
+
+ )}
+
+ ) : null}
{props.breadcrumbs.shouldShowBreadcrumbs ?
{showContent ? (
@@ -197,8 +180,6 @@ function selectState(state, ownProps) {
breadcrumb: currentRouteName.replace('user', ''),
};
- const sendTo = { ...state.sendTo, defaultFeed: foundUser ? foundUser.username : null };
-
const showSummaryHeader = currentRouteName === 'userSummary';
return {
@@ -208,19 +189,12 @@ function selectState(state, ownProps) {
showSummaryHeader,
viewUser,
breadcrumbs,
- sendTo,
};
}
function selectActions(dispatch) {
return {
...postActions(dispatch),
- createPost: (feeds, postText, attachmentIds, more) =>
- dispatch(createPost(feeds, postText, attachmentIds, more)),
- resetPostCreateForm: (...args) => dispatch(resetPostCreateForm(...args)),
- userActions: userActions(dispatch),
- getUserInfo: (username) => dispatch(getUserInfo(username)),
- togglePinnedGroup: ({ id }) => dispatch(togglePinnedGroup(id)),
};
}
diff --git a/src/redux/route-actions.js b/src/redux/route-actions.js
index db1a5da20..49e1ccd1c 100644
--- a/src/redux/route-actions.js
+++ b/src/redux/route-actions.js
@@ -63,6 +63,10 @@ export const routeActions = {
getUserFeed(next.params.userName, getOffset(next)),
getUserStats(next.params.userName),
],
+ userMedia: (next) => [
+ getSearch(`in:${next.params.userName} has:image,video`, getOffset(next)),
+ getUserStats(next.params.userName),
+ ],
userComments: (next) => getUserComments(next.params.userName, getOffset(next)),
userLikes: (next) => getUserLikes(next.params.userName, getOffset(next)),
userSummary: (next) => getUserSummary(next.params.userName, next.params.days),
diff --git a/src/services/lightbox-actual.js b/src/services/lightbox-actual.js
index 81c3dc992..71b83fb02 100644
--- a/src/services/lightbox-actual.js
+++ b/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, {});
@@ -112,6 +116,29 @@ function initLightbox() {
});
});
+ // Add caption element
+ lightbox.on('uiRegister', () => {
+ lightbox.pswp.ui.registerElement({
+ name: 'custom-caption',
+ order: 9,
+ isButton: false,
+ appendTo: 'root',
+ html: '',
+ onInit: (el, pswp) => {
+ pswp.on('change', () => {
+ const caption = pswp.currSlide.data.caption;
+ if (caption) {
+ el.innerHTML = caption;
+ el.style.display = '';
+ } else {
+ el.innerHTML = '';
+ el.style.display = 'none';
+ }
+ });
+ },
+ });
+ });
+
lightbox.on('bindEvents', () => {
const h = (e) => {
if (e.ctrlKey || e.metaKey) {
@@ -144,6 +171,11 @@ 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();
@@ -151,7 +183,7 @@ function initLightbox() {
};
lightbox.on('beforeOpen', () => {
window.addEventListener('popstate', close);
- history.pushState(null, '');
+ pushMarker();
});
lightbox.on('destroy', () => {
window.removeEventListener('popstate', close);
@@ -160,6 +192,56 @@ 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 pswp = lightbox.pswp;
+ const dataSource = 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) {
+ const firstNewIndex = dataSource.length;
+ dataSource.push(...newItems);
+ // refreshSlideContent loads nearby slides and dispatches 'change',
+ // which updates the counter and navigation arrows.
+ pswp.refreshSlideContent(firstNewIndex);
+ }
+
+ // Restore the history marker after navigation (replaceState removed it)
+ pushMarker();
+ };
+
+ document.addEventListener(MOREITEMS_EVENT, onMoreItems);
+ lightbox.on('destroy', () => document.removeEventListener(MOREITEMS_EVENT, onMoreItems));
+ });
+
+ const checkNeedMore = () => {
+ 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));
+ }
+ };
+
+ lightbox.on('bindEvents', () => {
+ lightbox.pswp.on('change', checkNeedMore);
+ // 'change' does not fire on initial open, so check explicitly
+ checkNeedMore();
+ });
+ }
+
// Looking for video in active slide
let currentVideo = null;
lightbox.on('contentActivate', ({ content }) => {
diff --git a/src/services/lightbox-events.js b/src/services/lightbox-events.js
new file mode 100644
index 000000000..f648e97dd
--- /dev/null
+++ b/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';
diff --git a/src/services/lightbox.js b/src/services/lightbox.js
index 935f34c48..6d5952e78 100644
--- a/src/services/lightbox.js
+++ b/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));
}
diff --git a/styles/shared/lighbox.scss b/styles/shared/lighbox.scss
index 747390820..21647706e 100644
--- a/styles/shared/lighbox.scss
+++ b/styles/shared/lighbox.scss
@@ -97,3 +97,39 @@
align-items: center;
justify-content: center;
}
+
+.pswp__custom-caption {
+ position: absolute;
+ left: 50%;
+ bottom: 1rem;
+ transform: translateX(-50%);
+ max-width: min(30rem, 90vw);
+ width: calc(100% - 2rem);
+ padding: 0.25em 0.75em;
+ border-radius: 0.25rem;
+ background: rgb(0, 0, 0, 0.65);
+ color: #fff;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+}
+
+.pswp-caption__link {
+ color: #fff;
+ text-decoration: none;
+ display: block;
+
+ &:hover,
+ &:active,
+ &:focus {
+ color: #fff;
+ text-decoration: underline;
+ }
+}
+
+.pswp-caption__avatar {
+ border-radius: 50%;
+ vertical-align: middle;
+ width: 1.5em;
+ height: 1.5em;
+}
diff --git a/test/jest/__snapshots__/user-profile-head.test.jsx.snap b/test/jest/__snapshots__/user-profile-head.test.jsx.snap
index e24b43300..187b0ce8c 100644
--- a/test/jest/__snapshots__/user-profile-head.test.jsx.snap
+++ b/test/jest/__snapshots__/user-profile-head.test.jsx.snap
@@ -198,6 +198,17 @@ exports[`UserProfileHead > Correctly displays that we are mutually subscribed 1`