-
-
- {FormUtils.renderLabel({
- title: intl.formatMessage({ id: "dialogs.merge.source" }),
- labelProps: {
- column: true,
- sm: 3,
- xl: 12,
- },
- })}
-
- setSrc(items)}
- values={src}
- excludeIds={destID}
- menuPortalTarget={document.body}
- />
-
-
-
-
-
- );
-};
+
+ );
+ }
+);
diff --git a/ui/v2.5/src/docs/en/Manual/Browsing.md b/ui/v2.5/src/docs/en/Manual/Browsing.md
index 525cca2222..040c25d660 100644
--- a/ui/v2.5/src/docs/en/Manual/Browsing.md
+++ b/ui/v2.5/src/docs/en/Manual/Browsing.md
@@ -10,7 +10,7 @@ The text field allows you to search using keywords. Keyword searching matches on
|------|-----------------|
| Scene | Title, Details, Path, OSHash, Checksum, Marker titles |
| Image | Title, Details, Path, Checksum |
-| Group | Title |
+| Group | Name, Aliases |
| Marker | Title, Scene title |
| Gallery | Title, Path, Checksum |
| Performer | Name, Aliases |
diff --git a/ui/v2.5/src/docs/en/Manual/Images.md b/ui/v2.5/src/docs/en/Manual/Images.md
index a280b9c32a..e1ebe7076e 100644
--- a/ui/v2.5/src/docs/en/Manual/Images.md
+++ b/ui/v2.5/src/docs/en/Manual/Images.md
@@ -30,3 +30,9 @@ A clip/gif will be a stillframe in the wall and grid view by default. To view th
If you want the loop to be used as a preview on the wall and grid view, you will have to generate them.
You can do this as you scan for the new clip file by activating **Generate previews for image clips** on the scan settings, or do it after by going to the **Generated Content** section in the task section of your settings, activating **Image clip previews** and clicking generate. This takes a while, as the files are transcoded.
+
+## Sorting by performer age
+
+Images can be sorted by **Performer Age**. This sorts by how old the image's performer(s) were on the image's own date: ascending order uses the youngest performer, descending order uses the oldest.
+
+Because the age is calculated from the image's date, this sort only works for images that have a date set (and performers with a birthdate). Images with no date, or with no performers, have no age to compare and are always sorted last regardless of direction. If your images appear unsorted when using this option, check that they have a date set.
diff --git a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
index 92b1f3f313..a711fde63f 100644
--- a/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
+++ b/ui/v2.5/src/docs/en/Manual/UIPluginApi.md
@@ -239,6 +239,7 @@ Returns `void`.
- `FilteredSceneMarkerList`
- `FilteredStudioList`
- `FilteredTagList`
+- `FilterTags.Extras`
- `FolderSelect`
- `FrontPage`
- `GalleryCard`
@@ -298,6 +299,7 @@ Returns `void`.
- `PerformerIDSelect`
- `PerformerImagesPanel`
- `PerformerList`
+- `PerformerMergeModal`
- `PerformerPage`
- `PerformerRecommendationRow`
- `PerformerScenesPanel`
@@ -309,6 +311,7 @@ Returns `void`.
- `RatingStars`
- `RatingSystem`
- `RecommendationRow`
+- `SavedFilter.Loaded`
- `SceneCard`
- `SceneCard.Details`
- `SceneCard.Image`
@@ -325,6 +328,7 @@ Returns `void`.
- `SceneMarkerCardsGrid`
- `SceneMarkerList`
- `SceneMarkerRecommendationRow`
+- `SceneMergeModal`
- `SceneList`
- `ScenePage`
- `ScenePage.TabContent`
@@ -360,6 +364,7 @@ Returns `void`.
- `TagIDSelect`
- `TagLink`
- `TagList`
+- `TagMergeModal`
- `TagPage`
- `TagRecommendationRow`
- `TagSelect`
@@ -372,4 +377,4 @@ Allows plugins to listen for Stash's events.
```js
PluginApi.Event.addEventListener("stash:location", (e) => console.log("Page Changed", e.detail.data.location.pathname))
-```
\ No newline at end of file
+```
diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
index 858f3cb8b6..d2f79c28ea 100644
--- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
+++ b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
@@ -53,6 +53,7 @@ import { useDebounce } from "../debounce";
import { isVideo } from "src/utils/visualFile";
import { imageTitle } from "src/core/files";
import { galleryTitle } from "src/core/galleries";
+import type { LightboxHideReason } from "./context";
const CLASSNAME = "Lightbox";
const CLASSNAME_HEADER = `${CLASSNAME}-header`;
@@ -98,7 +99,7 @@ interface IProps {
totalCount?: number;
pageCallback?: (props: { direction?: number; page?: number }) => void;
chapters?: IChapter[];
- hide: () => void;
+ hide: (reason?: LightboxHideReason) => void;
onDeleteImage?: (id: string) => void;
}
@@ -126,15 +127,65 @@ export const LightboxComponent: React.FC
= ({
const oldIndex = useRef(null);
const [instantTransition, setInstantTransition] = useState(false);
const [isSwitchingPage, setIsSwitchingPage] = useState(true);
+ // Synchronous mirror of isSwitchingPage. The nav handlers (handleLeft/
+ // handleRight, reached by the arrow keys, the on-screen chevrons and the
+ // image-edge clicks) fire on raw keydown/click events that can arrive faster
+ // than React re-renders, so the isSwitchingPage *state* they close over is
+ // stale. The ref reflects an in-flight page switch immediately — set true
+ // before pageCallback — so rapid inputs are dropped and, crucially, the
+ // index-range effect won't clamp a stale index while a (possibly
+ // synchronously-cached) page is still swapping in. The landing index stays
+ // under the handlers' control; this ref only gates, it never picks the index.
+ const isSwitchingPageRef = useRef(true);
const [isFullscreen, setFullscreen] = useState(false);
const [showOptions, setShowOptions] = useState(false);
const [showChapters, setShowChapters] = useState(false);
const [imagesLoaded, setImagesLoaded] = useState(0);
- const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+ // The image the delete dialog acts on, captured when the dialog is opened.
+ // Reading images[currentIndex] at confirm time instead would delete whatever
+ // image the index has since moved to (e.g. a page-switch settle landing
+ // while the dialog is open).
+ const [deleteTarget, setDeleteTarget] = useState(null);
const lastDKeyTime = useRef(0);
const [navOffset, setNavOffset] = useState();
- const oldImages = useRef([]);
+ // An in-flight page switch's intended landing, set synchronously by
+ // startPageSwitch *before* pageCallback. The landing is an explicit target —
+ // "last" or a concrete index (0 for a forward cross) — NOT derived from the
+ // page-number direction (a wrap moves the page number opposite to nav
+ // direction, so deriving from direction breaks first/last wraparound). It is
+ // resolved by the settle effect once the new page has loaded.
+ const pendingTarget = useRef<"last" | number | null>(null);
+ // The page number and images array at switch start, used by the settle
+ // effect to detect the new page's arrival.
+ const switchFromPage = useRef(page);
+ const switchFromImages = useRef(images);
+
+ // The ref and the state must never disagree, so they are only written
+ // through this setter.
+ const setSwitching = useCallback((v: boolean) => {
+ isSwitchingPageRef.current = v;
+ setIsSwitchingPage(v);
+ }, []);
+
+ // Begin a page switch: raise the guard and record the landing intent
+ // *before* pageCallback. An already-cached page can swap its images in
+ // synchronously, so the guard must be up first or a rapid input (and the
+ // index-range effect) races the swap. The index is parked at 0 — valid on
+ // any non-empty page — while the new page loads, so the index-range clamp
+ // can't fire on a shorter incoming page; the settle effect moves it to the
+ // target once the page arrives.
+ const startPageSwitch = useCallback(
+ (target: "last" | number, cbArg: { direction?: number; page?: number }) => {
+ setSwitching(true);
+ switchFromPage.current = page;
+ switchFromImages.current = images;
+ pendingTarget.current = target;
+ setIndex(0);
+ pageCallback?.(cbArg);
+ },
+ [images, page, pageCallback, setSwitching]
+ );
const [zoom, setZoom] = useState(1);
@@ -256,11 +307,41 @@ export const LightboxComponent: React.FC = ({
useState((slideshowDelay / SECONDS_TO_MS).toString());
useEffect(() => {
- if (images !== oldImages.current && isSwitchingPage) {
- if (index === -1) setIndex(images.length - 1);
- setIsSwitchingPage(false);
+ const target = pendingTarget.current;
+ if (target !== null) {
+ // A page switch is in flight. It completes when the page number AND the
+ // images array have both changed: the parent delivers them together, and
+ // requiring both means a parent that updates the page a commit ahead of
+ // the images can't settle the switch against the outgoing page's array.
+ // Callers that provide pageCallback without a page prop can never change
+ // the page number, so for them fall back to the images identity alone.
+ const pageChanged = page !== switchFromPage.current;
+ const imagesChanged = images !== switchFromImages.current;
+ const settled =
+ page === undefined ? imagesChanged : pageChanged && imagesChanged;
+ if (settled) {
+ // Resolve the landing, clamped to the arrived page: a chapter's
+ // numeric target can be stale (images deleted since the chapters
+ // loaded), and "last" is -1 on an empty page (which the close effect
+ // then handles).
+ const resolved =
+ target === "last"
+ ? images.length - 1
+ : Math.min(target, images.length - 1);
+ setIndex(Math.max(0, resolved));
+ pendingTarget.current = null;
+ switchFromPage.current = page;
+ switchFromImages.current = images;
+ setSwitching(false);
+ }
+ return;
+ }
+ // No switch pending: clear the switching flag once the first page's images
+ // have loaded (the flag starts true on open so the loader shows until then).
+ if (isSwitchingPage && !isLoading && images.length > 0) {
+ setSwitching(false);
}
- }, [isSwitchingPage, images, index]);
+ }, [isSwitchingPage, isLoading, images, page, setSwitching]);
const disableInstantTransition = useDebounce(
() => setInstantTransition(false),
@@ -333,13 +414,27 @@ export const LightboxComponent: React.FC = ({
};
useEffect(() => {
- if (isVisible) {
- if (index === null) setIndex(initialIndex);
- document.body.style.overflow = "hidden";
- Mousetrap.pause();
- }
+ if (isVisible && index === null) setIndex(initialIndex);
}, [initialIndex, isVisible, index]);
+ useEffect(() => {
+ if (!isVisible) return;
+
+ document.body.style.overflow = "hidden";
+ Mousetrap.pause();
+ return () => {
+ const fullscreenElement = document.fullscreenElement;
+ if (
+ fullscreenElement &&
+ containerRef.current?.contains(fullscreenElement)
+ ) {
+ document.exitFullscreen();
+ }
+ document.body.style.overflow = "auto";
+ Mousetrap.unpause();
+ };
+ }, [isVisible]);
+
const toggleSlideshow = useCallback(() => {
if (slideshowInterval) {
setSlideshowInterval(null);
@@ -355,13 +450,12 @@ export const LightboxComponent: React.FC = ({
}
});
- const close = useCallback(() => {
- if (isFullscreen) document.exitFullscreen();
-
- hide();
- document.body.style.overflow = "auto";
- Mousetrap.unpause();
- }, [isFullscreen, hide]);
+ const close = useCallback(
+ (reason: LightboxHideReason = "dismiss") => {
+ hide(reason);
+ },
+ [hide]
+ );
const handleClose = (e: React.MouseEvent) => {
const { className } = e.target as Element;
@@ -370,7 +464,7 @@ export const LightboxComponent: React.FC = ({
const handleLeft = useCallback(
(isUserAction = true) => {
- if (isSwitchingPage || index === -1) return;
+ if (isSwitchingPageRef.current) return;
if (disableAnimation) {
setInstant();
@@ -380,12 +474,10 @@ export const LightboxComponent: React.FC = ({
setMovingLeft(true);
if (index === 0) {
- // go to next page, or loop back if no callback is set
+ // go to previous page (landing on its last image), or loop back if no
+ // callback is set
if (pageCallback) {
- pageCallback({ direction: -1 });
- setIndex(-1);
- oldImages.current = images;
- setIsSwitchingPage(true);
+ startPageSwitch("last", { direction: -1 });
} else setIndex(images.length - 1);
} else setIndex((index ?? 0) - 1);
@@ -393,12 +485,12 @@ export const LightboxComponent: React.FC = ({
resetIntervalCallback.current();
}
},
- [images, pageCallback, isSwitchingPage, index, disableAnimation, setInstant]
+ [images, pageCallback, index, disableAnimation, setInstant, startPageSwitch]
);
const handleRight = useCallback(
(isUserAction = true) => {
- if (isSwitchingPage) return;
+ if (isSwitchingPageRef.current) return;
if (disableAnimation) {
setInstant();
@@ -408,12 +500,10 @@ export const LightboxComponent: React.FC = ({
setShowChapters(false);
if (index === images.length - 1) {
- // go to preview page, or loop back if no callback is set
+ // go to next page (landing on its first image), or loop back if no
+ // callback is set
if (pageCallback) {
- pageCallback({ direction: 1 });
- oldImages.current = images;
- setIsSwitchingPage(true);
- setIndex(0);
+ startPageSwitch(0, { direction: 1 });
} else setIndex(0);
} else setIndex((index ?? 0) + 1);
@@ -421,7 +511,7 @@ export const LightboxComponent: React.FC = ({
resetIntervalCallback.current();
}
},
- [images, pageCallback, isSwitchingPage, index, disableAnimation, setInstant]
+ [images, pageCallback, index, disableAnimation, setInstant, startPageSwitch]
);
const firstScroll = useRef(null);
@@ -432,6 +522,13 @@ export const LightboxComponent: React.FC = ({
inScrollGroup.current = false;
}, SCROLL_ZOOM_TIMEOUT);
+ useEffect(() => {
+ return () => {
+ disableInstantTransition.cancel();
+ debouncedScrollReset.cancel();
+ };
+ }, [disableInstantTransition, debouncedScrollReset]);
+
const handleKey = useCallback(
(e: KeyboardEvent) => {
if (e.repeat && (e.key === "ArrowRight" || e.key === "ArrowLeft"))
@@ -439,15 +536,17 @@ export const LightboxComponent: React.FC = ({
if (e.key === "ArrowLeft") handleLeft();
else if (e.key === "ArrowRight") handleRight();
else if (e.key === "Escape") close();
- else if (
- e.key === "d" &&
- images[index ?? initialIndex]?.id !== undefined
- ) {
- const now = Date.now();
- if (now - lastDKeyTime.current < 1000) {
- setIsDeleteDialogOpen(true);
+ else if (e.key === "d") {
+ // Not while a page switch is in flight: the index is parked at 0 then,
+ // so the shortcut would target an image the user isn't viewing.
+ const image = images[index ?? initialIndex];
+ if (!isSwitchingPageRef.current && image?.id !== undefined) {
+ const now = Date.now();
+ if (now - lastDKeyTime.current < 1000) {
+ setDeleteTarget(image);
+ }
+ lastDKeyTime.current = now;
}
- lastDKeyTime.current = now;
}
},
[setInstant, handleLeft, handleRight, close, images, index, initialIndex]
@@ -547,19 +646,31 @@ export const LightboxComponent: React.FC = ({
if (isLoading) return;
if (images.length === 0) {
close();
- } else if (index !== null && index >= images.length) {
+ } else if (
+ !isSwitchingPageRef.current &&
+ index !== null &&
+ index >= images.length
+ ) {
+ // Same-page shrink only — e.g. the last image was deleted and findImages
+ // refetched a shorter list. While a page switch is in flight the index is
+ // transiently stale against a just-swapped, shorter page; clamping it
+ // here is what made a forward cross land on the page's *last* image. The
+ // settle effect reconciles the switch instead, so skip the clamp then.
setIndex(images.length - 1);
}
}, [images.length, index, close, isLoading]);
function gotoPage(imageIndex: number) {
+ // indexInPage is the chapter's explicit target; the settle effect lands on
+ // it once the new page loads, so a chapter jump lands on the right image of
+ // the new page rather than its first/last.
const indexInPage = (imageIndex - 1) % pageSize;
if (pageCallback) {
const jumppage = Math.floor((imageIndex - 1) / pageSize) + 1;
if (page !== jumppage) {
- pageCallback({ page: jumppage });
- oldImages.current = images;
- setIsSwitchingPage(true);
+ startPageSwitch(indexInPage, { page: jumppage });
+ setShowChapters(false);
+ return;
}
}
@@ -993,14 +1104,15 @@ export const LightboxComponent: React.FC = ({
close()}
+ replace
+ onClick={() => close("navigate")}
>
{title ?? ""}
{currentImage.id !== undefined && (