Windows | 
macOS | 
Linux | 
Docker
:---:|:---:|:---:|:---:
[Latest Release](https://github.com/stashapp/stash/releases/latest/download/stash-win.exe)
+ = ({ gallery }) => {
const intl = useIntl();
- const [orientation, setOrientation] = React.useState<
- "landscape" | "portrait"
- >("landscape");
+ const [coverOrientation, setCoverOrientation] =
+ React.useState("landscape");
+ const [imageOrientation, setImageOrientation] =
+ React.useState("landscape");
const showLightbox = useGalleryLightbox(gallery.id, gallery.chapters);
const cover = gallery?.paths.cover;
- function onImageLoad(e: React.SyntheticEvent) {
+ function onCoverLoad(e: React.SyntheticEvent) {
+ const target = e.target as HTMLImageElement;
+ setCoverOrientation(
+ getOrientation(target.naturalWidth, target.naturalHeight)
+ );
+ }
+
+ function onNonCoverLoad(e: React.SyntheticEvent) {
const target = e.target as HTMLImageElement;
- setOrientation(
- target.naturalWidth > target.naturalHeight ? "landscape" : "portrait"
+ setImageOrientation(
+ getOrientation(target.naturalWidth, target.naturalHeight)
);
}
+ const [imgSrc, setImgSrc] = useState(cover ?? undefined);
const title = galleryTitle(gallery);
const performerNames = gallery.performers.map((p) => p.name);
const performers =
@@ -48,10 +66,13 @@ const GalleryWallCard: React.FC = ({ gallery }) => {
showLightbox(0);
}
+ const imgClassname =
+ imageOrientation !== coverOrientation ? CLASSNAME_IMG_CONTAIN : "";
+
return (
<>
= ({ gallery }) => {
-
+
);
diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss
index d2314955281..12439a94d5f 100644
--- a/ui/v2.5/src/components/Galleries/styles.scss
+++ b/ui/v2.5/src/components/Galleries/styles.scss
@@ -237,6 +237,18 @@ $galleryTabWidth: 450px;
width: 96vw;
}
+ .lineargradient {
+ background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
+ bottom: 100px;
+ height: 100px;
+ position: relative;
+ }
+
+ .preview-scrubber {
+ top: 0;
+ z-index: 1;
+ }
+
@mixin galleryWidth($width) {
height: math.div($width, 3) * 2;
@@ -264,6 +276,11 @@ $galleryTabWidth: 450px;
object-fit: cover;
object-position: center 20%;
width: 100%;
+
+ &.GalleryWallCard-img-contain {
+ object-fit: contain;
+ object-position: initial;
+ }
}
&-title {
@@ -271,13 +288,13 @@ $galleryTabWidth: 450px;
}
&-footer {
- background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
- bottom: 0;
+ bottom: 20px;
padding: 1rem;
position: absolute;
text-shadow: 1px 1px 3px black;
transition: 0s opacity;
width: 100%;
+ z-index: 2;
@media (min-width: 768px) {
opacity: 0;
@@ -310,6 +327,7 @@ $galleryTabWidth: 450px;
right: 1rem;
text-shadow: 1px 1px 3px black;
top: 1rem;
+ z-index: 2;
}
.rating-stars {
diff --git a/ui/v2.5/src/components/Groups/ContainingGroupsMultiSet.tsx b/ui/v2.5/src/components/Groups/ContainingGroupsMultiSet.tsx
index 25ad0be4a3e..6e61e0ccf99 100644
--- a/ui/v2.5/src/components/Groups/ContainingGroupsMultiSet.tsx
+++ b/ui/v2.5/src/components/Groups/ContainingGroupsMultiSet.tsx
@@ -14,6 +14,7 @@ export const ContainingGroupsMultiSet: React.FC<{
disabled?: boolean;
onUpdate: (value: IRelatedGroupEntry[]) => void;
onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
+ menuPortalTarget?: HTMLElement | null;
}> = (props) => {
const { mode, onUpdate, existingValue } = props;
@@ -48,12 +49,14 @@ export const ContainingGroupsMultiSet: React.FC<{
value={props.value}
onUpdate={props.onUpdate}
disabled={props.disabled}
+ menuPortalTarget={props.menuPortalTarget}
/>
) : (
onRemoveSet(items)}
values={[]}
isDisabled={props.disabled}
+ menuPortalTarget={props.menuPortalTarget}
/>
)}
diff --git a/ui/v2.5/src/components/Groups/EditGroupsDialog.tsx b/ui/v2.5/src/components/Groups/EditGroupsDialog.tsx
index d404ccf9c33..efd14e757a7 100644
--- a/ui/v2.5/src/components/Groups/EditGroupsDialog.tsx
+++ b/ui/v2.5/src/components/Groups/EditGroupsDialog.tsx
@@ -227,6 +227,7 @@ export const EditGroupsDialog: React.FC
{!!imgSrc && (
![]()
= (props) => {
function maybeRenderPerformerPopoverButton() {
if (props.gallery.performers.length <= 0) return;
- return = (props) => {
{
- console.log(i);
history.push(`/galleries/${props.gallery.id}/images/${i}`);
}}
/>
diff --git a/ui/v2.5/src/components/Galleries/GalleryPreviewScrubber.tsx b/ui/v2.5/src/components/Galleries/GalleryPreviewScrubber.tsx
index 6bc10274ada..ef47782bff7 100644
--- a/ui/v2.5/src/components/Galleries/GalleryPreviewScrubber.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryPreviewScrubber.tsx
@@ -21,12 +21,12 @@ export const GalleryPreviewScrubber: React.FC<{
const [activeIndex, setActiveIndex] = useState();
const debounceSetActiveIndex = useThrottle(setActiveIndex, 50);
- function onScrubberClick() {
- if (activeIndex === undefined || !onClick) {
+ function onScrubberClick(index: number) {
+ if (!onClick) {
return;
}
- onClick(activeIndex);
+ onClick(index);
}
useEffect(() => {
@@ -47,7 +47,7 @@ export const GalleryPreviewScrubber: React.FC<{
totalSprites={imageCount}
activeIndex={activeIndex}
setActiveIndex={(i) => debounceSetActiveIndex(i)}
- onClick={() => onScrubberClick()}
+ onClick={onScrubberClick}
/>
);
diff --git a/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx b/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx
index f38103d53c4..c794ddc1481 100644
--- a/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryWallCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import { useIntl } from "react-intl";
import { Link } from "react-router-dom";
import * as GQL from "src/core/generated-graphql";
@@ -7,32 +7,50 @@ import TextUtils from "src/utils/text";
import { useGalleryLightbox } from "src/hooks/Lightbox/hooks";
import { galleryTitle } from "src/core/galleries";
import { RatingSystem } from "../Shared/Rating/RatingSystem";
+import { GalleryPreviewScrubber } from "./GalleryPreviewScrubber";
+import cx from "classnames";
const CLASSNAME = "GalleryWallCard";
const CLASSNAME_FOOTER = `${CLASSNAME}-footer`;
const CLASSNAME_IMG = `${CLASSNAME}-img`;
const CLASSNAME_TITLE = `${CLASSNAME}-title`;
+const CLASSNAME_IMG_CONTAIN = `${CLASSNAME}-img-contain`;
interface IProps {
gallery: GQL.SlimGalleryDataFragment;
}
+type Orientation = "landscape" | "portrait";
+
+function getOrientation(width: number, height: number): Orientation {
+ return width > height ? "landscape" : "portrait";
+}
+
const GalleryWallCard: React.FC
+
+ {
+ showLightbox(i);
+ }}
+ onPathChanged={setImgSrc}
+ />
+
{!!activeFrontImage && (
-
)}
{!!activeBackImage && (
@@ -336,9 +345,23 @@ const GroupPage: React.FC = ({ group, tabKey }) => {
images={lightboxImages}
index={lightboxImages.length - 1}
>
-
diff --git a/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx b/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx
index 6a20eb9081a..d93b0646636 100644
--- a/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx
+++ b/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx
@@ -36,7 +36,6 @@ interface IGroupDetailsPanel {
export const GroupDetailsPanel: React.FC = ({
group,
- collapsed,
fullWidth,
}) => {
// Network state
@@ -55,32 +54,6 @@ export const GroupDetailsPanel: React.FC = ({
);
}
- function maybeRenderExtraDetails() {
- if (!collapsed) {
- return (
- <>
- = ({
}
fullWidth={fullWidth}
/>
-
= ({
}
fullWidth={fullWidth}
/>
- {maybeRenderExtraDetails()}
+
);
};
diff --git a/ui/v2.5/src/components/Groups/GroupDetails/RelatedGroupTable.tsx b/ui/v2.5/src/components/Groups/GroupDetails/RelatedGroupTable.tsx
index feed49ad09b..0b8ecb0c6b7 100644
--- a/ui/v2.5/src/components/Groups/GroupDetails/RelatedGroupTable.tsx
+++ b/ui/v2.5/src/components/Groups/GroupDetails/RelatedGroupTable.tsx
@@ -19,6 +19,7 @@ export const RelatedGroupTable: React.FC<{
excludeIDs?: string[];
filterHook?: (f: ListFilterModel) => ListFilterModel;
disabled?: boolean;
+ menuPortalTarget?: HTMLElement | null;
}> = (props) => {
const { value, onUpdate } = props;
@@ -101,6 +102,7 @@ export const RelatedGroupTable: React.FC<{
excludeIds={excludeIDs}
filterHook={props.filterHook}
isDisabled={props.disabled}
+ menuPortalTarget={props.menuPortalTarget}
/>
= (
}
ids={studioId ? [studioId] : []}
isDisabled={isUpdating}
+ menuPortalTarget={document.body}
/>
@@ -253,6 +254,7 @@ export const EditImagesDialog: React.FC = (
existingIds={existingPerformerIds ?? []}
ids={performerIds ?? []}
mode={performerMode}
+ menuPortalTarget={document.body}
/>
@@ -268,6 +270,7 @@ export const EditImagesDialog: React.FC = (
existingIds={existingTagIds ?? []}
ids={tagIds ?? []}
mode={tagMode}
+ menuPortalTarget={document.body}
/>
@@ -283,6 +286,7 @@ export const EditImagesDialog: React.FC = (
existingIds={existingGalleryIds ?? []}
ids={galleryIds ?? []}
mode={galleryMode}
+ menuPortalTarget={document.body}
/>
diff --git a/ui/v2.5/src/components/Images/ImageCard.tsx b/ui/v2.5/src/components/Images/ImageCard.tsx
index 12e8b9e0012..e4c050a5115 100644
--- a/ui/v2.5/src/components/Images/ImageCard.tsx
+++ b/ui/v2.5/src/components/Images/ImageCard.tsx
@@ -100,7 +100,12 @@ export const ImageCard: React.FC = (
function maybeRenderPerformerPopoverButton() {
if (props.image.performers.length <= 0) return;
- return = ({ image }) => {
);
const title = objectTitle(image);
- const ImageView = isVideo(image.visual_files[0]) ? "video" : "img";
+ const ImageView =
+ image.visual_files.length > 0 && isVideo(image.visual_files[0])
+ ? "video"
+ : "img";
const resolution = useMemo(() => {
return file?.width && file?.height
@@ -362,19 +365,21 @@ const ImagePage: React.FC = ({ image }) => {
{renderTabs()}
-
);
diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
index 65cce87de64..a2044fcffe4 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
@@ -6,131 +6,135 @@ import { PerformerCard } from "src/components/Performers/PerformerCard";
import { sortPerformers } from "src/core/performers";
import { FormattedMessage, useIntl } from "react-intl";
import { PhotographerLink } from "src/components/Shared/Link";
+import { PatchComponent } from "../../../patch";
interface IImageDetailProps {
image: GQL.ImageDataFragment;
}
-export const ImageDetailPanel: React.FC
-
- {props.image.details}
- - ); - } + function renderDetails() { + if (!props.image.details) return; + return ( + <> +
+
+ {props.image.details}
+ + ); + } - function renderTags() { - if (props.image.tags.length === 0) return; - const tags = props.image.tags.map((tag) => ( -
-
- {tags}
-
- );
- }
+ function renderTags() {
+ if (props.image.tags.length === 0) return;
+ const tags = props.image.tags.map((tag) => (
+
+
+ {tags}
+
+ );
+ }
- function renderPerformers() {
- if (props.image.performers.length === 0) return;
- const performers = sortPerformers(props.image.performers);
- const cards = performers.map((performer) => (
-
-
-
- {cards}
-
-
- );
- }
+ return (
+ <>
+
+
+
+ {cards}
+
+
+ );
+ }
+
+ function renderGalleries() {
+ if (props.image.galleries.length === 0) return;
+ const galleries = props.image.galleries.map((gallery) => (
+
+
+ {galleries}
+
+ );
+ }
+
+ // filename should use entire row if there is no studio
+ const imageDetailsWidth = props.image.studio ? "col-9" : "col-12";
- function renderGalleries() {
- if (props.image.galleries.length === 0) return;
- const galleries = props.image.galleries.map((gallery) => (
-
-
- {galleries}
+
+
+
+ {renderGalleries()}
+ {
+
+ {" "}
+
+ }
+ {
+
+
+ }
+ {props.image.code && (
+
+
+ )}
+ {props.image.photographer && (
+
+
+ )}
+
+
+ {" "}
+
+ }
+ {
+
+
+ }
+ {props.image.code && (
+
+
+ )}
+ {props.image.photographer && (
+
+
+ )}
+
+
);
}
-
- // filename should use entire row if there is no studio
- const imageDetailsWidth = props.image.studio ? "col-9" : "col-12";
-
- return (
- <>
-
+ {renderDetails()}
+ {renderTags()}
+ {renderPerformers()}
+
+
-
-
- {renderGalleries()}
- {
-
- {" "}
-
- }
- {
-
-
- }
- {props.image.code && (
-
-
- )}
- {props.image.photographer && (
-
-
- )}
-
-
- {" "}
-
- }
- {
-
-
- }
- {props.image.code && (
-
-
- )}
- {props.image.photographer && (
-
-
- )}
-
-
-
- );
-};
+);
diff --git a/ui/v2.5/src/components/Images/Images.tsx b/ui/v2.5/src/components/Images/Images.tsx
index c0a6b67c814..91edfdf7985 100644
--- a/ui/v2.5/src/components/Images/Images.tsx
+++ b/ui/v2.5/src/components/Images/Images.tsx
@@ -4,12 +4,9 @@ import { Helmet } from "react-helmet";
import { useTitleProps } from "src/hooks/title";
import Image from "./ImageDetails/Image";
import { ImageList } from "./ImageList";
-import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
import { View } from "../List/views";
const Images: React.FC = () => {
- useScrollToTopOnMount();
-
return
- {renderDetails()}
- {renderTags()}
- {renderPerformers()}
-
-
diff --git a/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx b/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx
index 71ff92e5e33..c51c8a2d5f6 100644
--- a/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/HierarchicalLabelValueFilter.tsx
@@ -4,6 +4,7 @@ import { defineMessages, MessageDescriptor, useIntl } from "react-intl";
import { FilterSelect, SelectObject } from "src/components/Shared/Select";
import { Criterion } from "src/models/list-filter/criteria/criterion";
import { IHierarchicalLabelValue } from "src/models/list-filter/types";
+import { NumberField } from "src/utils/form";
interface IHierarchicalLabelValueFilterProps {
criterion: Criterion;
@@ -69,7 +70,7 @@ export const HierarchicalLabelValueFilter: React.FC<
if (inputType === "studios") {
id = "include_sub_studios";
} else if (inputType === "groups") {
- id = "include-sub-groups";
+ id = "include_sub_groups";
} else if (type === "children") {
id = "include_parent_tags";
} else {
@@ -104,9 +105,8 @@ export const HierarchicalLabelValueFilter: React.FC<
{criterion.value.depth !== 0 && (
-
onDepthChanged(e.target.value ? parseInt(e.target.value, 10) : -1)
diff --git a/ui/v2.5/src/components/List/Filters/NumberFilter.tsx b/ui/v2.5/src/components/List/Filters/NumberFilter.tsx
index 7aa574a2e21..21120f799d6 100644
--- a/ui/v2.5/src/components/List/Filters/NumberFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/NumberFilter.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl";
import { CriterionModifier } from "../../../core/generated-graphql";
import { INumberValue } from "../../../models/list-filter/types";
import { NumberCriterion } from "../../../models/list-filter/criteria/criterion";
+import { NumberField } from "src/utils/form";
interface IDurationFilterProps {
criterion: NumberCriterion;
@@ -36,9 +37,8 @@ export const NumberFilter: React.FC = ({
) {
equalsControl = (
- ) =>
onChanged(e, "value")
}
@@ -57,9 +57,8 @@ export const NumberFilter: React.FC = ({
) {
lowerControl = (
- ) =>
onChanged(e, "value")
}
@@ -78,9 +77,8 @@ export const NumberFilter: React.FC = ({
) {
upperControl = (
- ) =>
onChanged(
e,
diff --git a/ui/v2.5/src/components/List/Filters/PhashFilter.tsx b/ui/v2.5/src/components/List/Filters/PhashFilter.tsx
index 68eda800280..a42a612871c 100644
--- a/ui/v2.5/src/components/List/Filters/PhashFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/PhashFilter.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl";
import { IPhashDistanceValue } from "../../../models/list-filter/types";
import { Criterion } from "../../../models/list-filter/criteria/criterion";
import { CriterionModifier } from "src/core/generated-graphql";
+import { NumberField } from "src/utils/form";
interface IPhashFilterProps {
criterion: Criterion;
@@ -49,10 +50,9 @@ export const PhashFilter: React.FC = ({
{criterion.modifier !== CriterionModifier.IsNull &&
criterion.modifier !== CriterionModifier.NotNull && (
- = ({
- item,
+ label,
excluded = false,
onClick,
+ modifier = false,
}) => {
const iconClassName = excluded ? "exclude-icon" : "include-button";
const spanClassName = excluded
@@ -60,21 +65,66 @@ const SelectedItem: React.FC = ({
}
return (
- onClick()}
- onKeyDown={keyboardClickHandler(onClick)}
- onMouseEnter={() => onMouseOver()}
- onMouseLeave={() => onMouseOut()}
- onFocus={() => onMouseOver()}
- onBlur={() => onMouseOut()}
- tabIndex={0}
- >
-
+ onClick()}
+ onKeyDown={keyboardClickHandler(onClick)}
+ onMouseEnter={() => onMouseOver()}
+ onMouseLeave={() => onMouseOut()}
+ onFocus={() => onMouseOver()}
+ onBlur={() => onMouseOut()}
+ tabIndex={0}
+ >
+
+ );
+};
+
+const UnselectedItem: React.FC<{
+ onSelect: (exclude: boolean) => void;
+ label: string;
+ canExclude: boolean;
+ // true if the object is a special modifier value
+ modifier?: boolean;
+}> = ({ onSelect, label, canExclude, modifier = false }) => {
+ const includeIcon =
+ onSelect(false)}
+ onKeyDown={keyboardClickHandler(() => onSelect(false))}
+ tabIndex={0}
+ >
+
);
};
@@ -82,6 +132,7 @@ interface ISelectableFilter {
query: string;
onQueryChange: (query: string) => void;
modifier: CriterionModifier;
+ showModifierValues: boolean;
inputFocus: ReturnType;
canExclude: boolean;
queryResults: ILabeledId[];
@@ -89,12 +140,31 @@ interface ISelectableFilter {
excluded: ILabeledId[];
onSelect: (value: ILabeledId, exclude: boolean) => void;
onUnselect: (value: ILabeledId) => void;
+ onSetModifier: (modifier: CriterionModifier) => void;
+ // true if the filter is for a single value
+ singleValue?: boolean;
+}
+
+type SpecialValue = "any" | "none" | "any_of" | "only";
+
+function modifierValueToModifier(key: SpecialValue): CriterionModifier {
+ switch (key) {
+ case "any":
+ return CriterionModifier.NotNull;
+ case "none":
+ return CriterionModifier.IsNull;
+ case "any_of":
+ return CriterionModifier.Includes;
+ case "only":
+ return CriterionModifier.Equals;
+ }
}
const SelectableFilter: React.FC = ({
query,
onQueryChange,
modifier,
+ showModifierValues,
inputFocus,
canExclude,
queryResults,
@@ -102,23 +172,73 @@ const SelectableFilter: React.FC = ({
excluded,
onSelect,
onUnselect,
+ onSetModifier,
+ singleValue,
}) => {
const intl = useIntl();
const objects = useMemo(() => {
+ if (
+ modifier === CriterionModifier.IsNull ||
+ modifier === CriterionModifier.NotNull
+ ) {
+ return [];
+ }
return queryResults.filter(
(p) =>
selected.find((s) => s.id === p.id) === undefined &&
excluded.find((s) => s.id === p.id) === undefined
);
- }, [queryResults, selected, excluded]);
+ }, [modifier, queryResults, selected, excluded]);
const includingOnly = modifier == CriterionModifier.Equals;
const excludingOnly =
modifier == CriterionModifier.Excludes ||
modifier == CriterionModifier.NotEquals;
- const includeIcon = = useMemo(() => {
+ return {
+ any:
+ modifier === defaultModifier &&
+ selected.length === 0 &&
+ excluded.length === 0,
+ none:
+ modifier === defaultModifier &&
+ selected.length === 0 &&
+ excluded.length === 0,
+ any_of:
+ !singleValue && modifier === defaultModifier && selected.length > 1,
+ only:
+ !singleValue &&
+ modifier === defaultModifier &&
+ selected.length > 0 &&
+ excluded.length === 0,
+ };
+ }, [singleValue, defaultModifier, modifier, selected, excluded]);
+
+ function onModifierValueSelect(key: SpecialValue) {
+ const m = modifierValueToModifier(key);
+ onSetModifier(m);
+ }
+
+ function onModifierValueUnselect() {
+ onSetModifier(defaultModifier);
+ }
return (
> {
criterion: T;
setCriterion: (criterion: T) => void;
useResults: (query: string) => { results: ILabeledId[]; loading: boolean };
+ singleValue?: boolean;
}
export const ObjectsFilter = <
@@ -191,6 +329,7 @@ export const ObjectsFilter = <
criterion,
setCriterion,
useResults,
+ singleValue,
}: IObjectsFilter) => {
const [query, setQuery] = useState("");
const [displayQuery, setDisplayQuery] = useState(query);
@@ -263,6 +402,15 @@ export const ObjectsFilter = <
[criterion, setCriterion, setInputFocus]
);
+ const onSetModifier = useCallback(
+ (modifier: CriterionModifier) => {
+ let newCriterion: T = criterion.clone();
+ newCriterion.modifier = modifier;
+ setCriterion(newCriterion);
+ },
+ [criterion, setCriterion]
+ );
+
const sortedSelected = useMemo(() => {
const ret = criterion.value.items.slice();
ret.sort((a, b) => a.label.localeCompare(b.label));
@@ -287,6 +435,7 @@ export const ObjectsFilter = <
query={displayQuery}
onQueryChange={onQueryChange}
modifier={criterion.modifier}
+ showModifierValues={!query}
inputFocus={inputFocus}
canExclude={canExclude}
selected={sortedSelected}
@@ -294,6 +443,8 @@ export const ObjectsFilter = <
onSelect={onSelect}
onUnselect={onUnselect}
excluded={sortedExcluded}
+ onSetModifier={onSetModifier}
+ singleValue={singleValue}
/>
);
};
@@ -346,24 +497,23 @@ export const HierarchicalObjectsFilter = <
return (
diff --git a/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx b/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx
index cdfc3a6e9bd..eb8f2c10425 100644
--- a/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx
+++ b/ui/v2.5/src/components/Scenes/PreviewScrubber.tsx
@@ -27,6 +27,8 @@ function scaleToFit(dimensions: { w: number; h: number }, bounds: DOMRect) {
return Math.min(rw, rh);
}
+const defaultSprites = 81; // 9x9 grid by default
+
export const PreviewScrubber: React.FC = ({
vttPath,
onClick,
@@ -83,15 +85,16 @@ export const PreviewScrubber: React.FC = ({
return start;
}, [sprite]);
- function onScrubberClick() {
- if (!sprite || !onClick) {
+ function onScrubberClick(index: number) {
+ if (!onClick || !spriteInfo) {
return;
}
- onClick(sprite.start);
+ const s = spriteInfo[index];
+ onClick(s.start);
}
- if (!spriteInfo && hasLoaded) return null;
+ if (spriteInfo === null) return null;
return (
debounceSetActiveIndex(i)}
onClick={onScrubberClick}
diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx
index b5d053c67e7..18261b4bf5c 100644
--- a/ui/v2.5/src/components/Scenes/SceneCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx
@@ -165,7 +165,12 @@ const SceneCardPopovers = PatchComponent(
function maybeRenderPerformerPopoverButton() {
if (props.scene.performers.length <= 0) return;
- return = ({
-
-
-
-
+
+
+
+
+
+ {includeIcon}
+ {label}
+
+
+ {/* TODO item count */}
+ {/* {p.id} */}
+ {canExclude && (
+
+ )}
+
+
+
@@ -129,50 +249,67 @@ const SelectableFilter: React.FC = ({
placeholder={`${intl.formatMessage({ id: "actions.search" })}…`}
/>
@@ -183,6 +320,7 @@ interface IObjectsFilter-
- {selected.map((p) => (
-
-
+ {Object.entries(modifierValues).map(([key, value]) => {
+ if (!value) {
+ return null;
+ }
+
+ return (
onUnselect(p)} + key={key} + onClick={() => onModifierValueUnselect()} + label={`(${intl.formatMessage({ + id: `criterion_modifier_values.${key}`, + })})`} + modifier /> -
+ );
+ })}
+ {selected.map((p) => (
+ -
-
onUnselect(p)} /> + onUnselect(p)} + />
))}
+ {showModifierValues && (
+ <>
+ {Object.entries(availableModifierValues).map(([key, value]) => {
+ if (!value) {
+ return null;
+ }
+
+ return (
+ -
- onSelect(p, false)}
- onKeyDown={keyboardClickHandler(() => onSelect(p, false))}
- tabIndex={0}
- >
- - {!excludingOnly ? includeIcon : excludeIcon} - {p.label} --- {/* TODO item count */} - {/* {p.id} */} - {canExclude && !includingOnly && !excludingOnly && ( - - )} -- -
+
@@ -104,7 +107,7 @@ export const PreviewScrubber: React.FC = ({
)}
{TextUtils.secondsToTimestamp(marker.seconds)}
+
+ {TextUtils.formatTimestampRange(
+ marker.seconds,
+ marker.end_seconds ?? undefined
+ )}
+
{tags}
);
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
index 2eef3de1fb4..fb91cd44925 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
@@ -508,6 +508,7 @@ export const SceneEditPanel: React.FC
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx
index e547e750f7d..d76eba1cc6f 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneVideoFilterPanel.tsx
@@ -21,6 +21,47 @@ type SliderRange = {
divider: number;
};
+function getMatrixValue(value: number, range: SliderRange) {
+ return (value - range.default) / range.divider;
+}
+
+interface ISliderProps {
+ title: string;
+ className?: string;
+ range: SliderRange;
+ value: number;
+ setValue: (value: React.SetStateAction) => void;
+ displayValue: string;
+}
+
+const Slider: React.FC = (sliderProps: ISliderProps) => {
+ return (
+ = (
props: ISceneVideoFilterPanelProps
) => {
@@ -64,7 +105,7 @@ export const SceneVideoFilterPanel: React.FC = (
min: 0,
default: 100,
max: 200,
- divider: 1,
+ divider: 100,
};
const blurRange: SliderRange = { min: 0, default: 0, max: 250, divider: 10 };
const rotateRange: SliderRange = {
@@ -231,20 +272,20 @@ export const SceneVideoFilterPanel: React.FC = (
"http://www.w3.org/2000/svg",
"feColorMatrix"
);
+
+ const wbMatrixValue = getMatrixValue(
+ whiteBalanceValue,
+ whiteBalanceRange
+ );
+
feColorMatrix.setAttribute(
"values",
`${
- 1 +
- (whiteBalanceValue - whiteBalanceRange.default) /
- whiteBalanceRange.divider +
- (redValue - colourRange.default) / colourRange.divider
+ 1 + wbMatrixValue + getMatrixValue(redValue, colourRange)
} 0 0 0 0 0 ${
- 1.0 + (greenValue - colourRange.default) / colourRange.divider
+ 1.0 + getMatrixValue(greenValue, colourRange)
} 0 0 0 0 0 ${
- 1 -
- (whiteBalanceValue - whiteBalanceRange.default) /
- whiteBalanceRange.divider +
- (blueValue - colourRange.default) / colourRange.divider
+ 1 - wbMatrixValue + getMatrixValue(blueValue, colourRange)
} 0 0 0 0 0 1.0 0`
);
videoFilter.appendChild(feColorMatrix);
@@ -324,195 +365,6 @@ export const SceneVideoFilterPanel: React.FC = (
}
}
- interface ISliderProps {
- title: string;
- className?: string;
- range: SliderRange;
- value: number;
- setValue: (value: React.SetStateAction) => void;
- displayValue: string;
- }
-
- function renderSlider(sliderProps: ISliderProps) {
- return (
- = (
- {renderBrightness()}
- {renderContrast()}
- {renderGammaSlider()}
- {renderSaturate()}
- {renderHueRotateSlider()}
- {renderWhiteBalance()}
- {renderRedSlider()}
- {renderGreenSlider()}
- {renderBlueSlider()}
- {renderBlur()}
+
+ {sliderProps.title}
+
+ ) =>
+ sliderProps.setValue(Number.parseInt(e.currentTarget.value, 10))
+ }
+ />
+
+ sliderProps.setValue(sliderProps.range.default)}
+ onKeyPress={() => sliderProps.setValue(sliderProps.range.default)}
+ >
+
+ );
+};
+
export const SceneVideoFilterPanel: React.FC
- {sliderProps.title}
-
- ) =>
- sliderProps.setValue(Number.parseInt(e.currentTarget.value, 10))
- }
- />
-
- sliderProps.setValue(sliderProps.range.default)}
- onKeyPress={() => sliderProps.setValue(sliderProps.range.default)}
- >
-
- );
- }
-
- function renderBlur() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.blur" }),
- range: blurRange,
- value: blurValue,
- setValue: setBlurValue,
- displayValue: `${blurValue / blurRange.divider}px`,
- });
- }
-
- function renderContrast() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.contrast" }),
- className: "contrast-slider",
- range: contrastRange,
- value: contrastValue,
- setValue: setContrastValue,
- displayValue: `${contrastValue / brightnessRange.divider}%`,
- });
- }
-
- function renderBrightness() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.brightness" }),
- className: "brightness-slider",
- range: brightnessRange,
- value: brightnessValue,
- setValue: setBrightnessValue,
- displayValue: `${brightnessValue / brightnessRange.divider}%`,
- });
- }
-
- function renderGammaSlider() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.gamma" }),
- className: "gamma-slider",
- range: gammaRange,
- value: gammaValue,
- setValue: setGammaValue,
- displayValue: `${(gammaValue - gammaRange.default) / gammaRange.divider}`,
- });
- }
-
- function renderSaturate() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.saturation" }),
- className: "saturation-slider",
- range: saturateRange,
- value: saturateValue,
- setValue: setSaturateValue,
- displayValue: `${saturateValue / saturateRange.divider}%`,
- });
- }
-
- function renderHueRotateSlider() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.hue" }),
- className: "hue-rotate-slider",
- range: hueRotateRange,
- value: hueRotateValue,
- setValue: setHueRotateValue,
- displayValue: `${hueRotateValue / hueRotateRange.divider}\xB0`,
- });
- }
-
- function renderWhiteBalance() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.warmth" }),
- className: "white-balance-slider",
- range: whiteBalanceRange,
- value: whiteBalanceValue,
- setValue: setWhiteBalanceValue,
- displayValue: `${
- (whiteBalanceValue - whiteBalanceRange.default) /
- whiteBalanceRange.divider
- }`,
- });
- }
-
- function renderRedSlider() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.red" }),
- className: "red-slider",
- range: colourRange,
- value: redValue,
- setValue: setRedValue,
- displayValue: `${
- (redValue - colourRange.default) / colourRange.divider
- }%`,
- });
- }
-
- function renderGreenSlider() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.green" }),
- className: "green-slider",
- range: colourRange,
- value: greenValue,
- setValue: setGreenValue,
- displayValue: `${
- (greenValue - colourRange.default) / colourRange.divider
- }%`,
- });
- }
-
- function renderBlueSlider() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.blue" }),
- className: "blue-slider",
- range: colourRange,
- value: blueValue,
- setValue: setBlueValue,
- displayValue: `${
- (blueValue - colourRange.default) / colourRange.divider
- }%`,
- });
- }
-
- function renderRotate() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.rotate" }),
- range: rotateRange,
- value: rotateValue,
- setValue: setRotateValue,
- displayValue: `${
- (rotateValue - rotateRange.default) / rotateRange.divider
- }\xB0`,
- });
- }
-
- function renderScale() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.scale" }),
- range: scaleRange,
- value: scaleValue,
- setValue: setScaleValue,
- displayValue: `${scaleValue / scaleRange.divider}%`,
- });
- }
-
- function renderAspectRatio() {
- return renderSlider({
- title: intl.formatMessage({ id: "effect_filters.aspect" }),
- range: aspectRatioRange,
- value: aspectRatioValue,
- setValue: setAspectRatioValue,
- displayValue: `${
- (aspectRatioValue - aspectRatioRange.default) / aspectRatioRange.divider
- }`,
- });
- }
-
function onRotateAndScale(direction: number) {
if (direction === 0) {
// Left -90
@@ -657,16 +509,91 @@ export const SceneVideoFilterPanel: React.FC
@@ -674,9 +601,32 @@ export const SceneVideoFilterPanel: React.FC = (
diff --git a/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx b/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx
index c019abceaca..6fab0a150bb 100644
--- a/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMergeDialog.tsx
@@ -771,6 +771,7 @@ export const SceneMergeModal: React.FC = ({
isMulti
onSelect={(items) => setSourceScenes(items)}
values={sourceScenes}
+ menuPortalTarget={document.body}
/>
@@ -803,6 +804,7 @@ export const SceneMergeModal: React.FC = ({
setDestScene(items)}
values={destScene}
+ menuPortalTarget={document.body}
/>
diff --git a/ui/v2.5/src/components/Scenes/Scenes.tsx b/ui/v2.5/src/components/Scenes/Scenes.tsx
index 7e8031ab5a7..a9124fb8fad 100644
--- a/ui/v2.5/src/components/Scenes/Scenes.tsx
+++ b/ui/v2.5/src/components/Scenes/Scenes.tsx
@@ -3,7 +3,6 @@ import { Route, Switch } from "react-router-dom";
import { Helmet } from "react-helmet";
import { useTitleProps } from "src/hooks/title";
import { lazyComponent } from "src/utils/lazyComponent";
-import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
import { View } from "../List/views";
const SceneList = lazyComponent(() => import("./SceneList"));
@@ -12,14 +11,10 @@ const Scene = lazyComponent(() => import("./SceneDetails/Scene"));
const SceneCreate = lazyComponent(() => import("./SceneDetails/SceneCreate"));
const Scenes: React.FC = () => {
- useScrollToTopOnMount();
-
return = ({
id: "dialogs.scene_gen.preview_seg_count_head",
})}
- ) =>
@@ -71,9 +71,8 @@ export const VideoPreviewInput: React.FC = ({
id: "dialogs.scene_gen.preview_seg_duration_head",
})}
- ) =>
set({
diff --git a/ui/v2.5/src/components/Settings/Inputs.tsx b/ui/v2.5/src/components/Settings/Inputs.tsx
index 073be4e11d9..b84232d1f63 100644
--- a/ui/v2.5/src/components/Settings/Inputs.tsx
+++ b/ui/v2.5/src/components/Settings/Inputs.tsx
@@ -6,6 +6,7 @@ import { Icon } from "../Shared/Icon";
import { StringListInput } from "../Shared/StringListInput";
import { PatchComponent } from "src/patch";
import { useSettings, useSettingsOptional } from "./context";
+import { NumberField } from "src/utils/form";
interface ISetting {
id?: string;
@@ -484,9 +485,8 @@ export const NumberSetting: React.FC = PatchComponent(
{...props}
renderField={(value, setValue) => (
- ) =>
setValue(Number.parseInt(e.currentTarget.value || "0", 10))
diff --git a/ui/v2.5/src/components/Settings/Tasks/DataManagementTasks.tsx b/ui/v2.5/src/components/Settings/Tasks/DataManagementTasks.tsx
index f445b4332cc..e093dc60abe 100644
--- a/ui/v2.5/src/components/Settings/Tasks/DataManagementTasks.tsx
+++ b/ui/v2.5/src/components/Settings/Tasks/DataManagementTasks.tsx
@@ -520,7 +520,7 @@ export const DataManagementTasks: React.FC = ({
type="submit"
onClick={() => onExport()}
>
- = ({
scanGeneratePhashes,
scanGenerateThumbnails,
scanGenerateClipPreviews,
+ rescan,
} = options;
function setOptions(input: Partial) {
@@ -77,6 +78,13 @@ export const ScanOptions: React.FC = ({
headingID="config.tasks.generate_clip_previews_during_scan"
onChange={(v) => setOptions({ scanGenerateClipPreviews: v })}
/>
+ setOptions({ rescan: v })}
+ />
);
};
diff --git a/ui/v2.5/src/components/Setup/Setup.tsx b/ui/v2.5/src/components/Setup/Setup.tsx
index 9168907949e..1f8ec4614a4 100644
--- a/ui/v2.5/src/components/Setup/Setup.tsx
+++ b/ui/v2.5/src/components/Setup/Setup.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useState, useContext, useCallback } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import {
Alert,
@@ -29,45 +29,55 @@ import {
import { releaseNotes } from "src/docs/en/ReleaseNotes";
import { ExternalLink } from "../Shared/ExternalLink";
-export const Setup: React.FC = () => {
- const { configuration, loading: configLoading } =
- useContext(ConfigurationContext);
- const [saveUI] = useConfigureUI();
+interface ISetupContextState {
+ configuration: GQL.ConfigDataFragment;
+ systemStatus: GQL.SystemStatusQuery;
- const [step, setStep] = useState(0);
- const [setupInWorkDir, setSetupInWorkDir] = useState(false);
- const [stashes, setStashes] = useState([]);
- const [showStashAlert, setShowStashAlert] = useState(false);
- const [databaseFile, setDatabaseFile] = useState("");
- const [generatedLocation, setGeneratedLocation] = useState("");
- const [cacheLocation, setCacheLocation] = useState("");
- const [storeBlobsInDatabase, setStoreBlobsInDatabase] = useState(false);
- const [blobsLocation, setBlobsLocation] = useState("");
- const [loading, setLoading] = useState(false);
- const [setupError, setSetupError] = useState();
- const [downloadFFmpeg, setDownloadFFmpeg] = useState(true);
+ setupState: Partial;
+ setupError: string | undefined;
- const intl = useIntl();
- const history = useHistory();
+ pathJoin: (...paths: string[]) => string;
+ pathDir(path: string): string;
- const [showGeneratedSelectDialog, setShowGeneratedSelectDialog] =
- useState(false);
- const [showCacheSelectDialog, setShowCacheSelectDialog] = useState(false);
- const [showBlobsDialog, setShowBlobsDialog] = useState(false);
+ homeDir: string;
+ windows: boolean;
+ macApp: boolean;
+ homeDirPath: string;
+ pwd: string;
+ workingDir: string;
+}
- const { data: systemStatus, loading: statusLoading } = useSystemStatus();
- const status = systemStatus?.systemStatus;
+const SetupStateContext = React.createContext(null);
- const [mutateDownloadFFMpeg] = GQL.useDownloadFfMpegMutation();
+const useSetupContext = () => {
+ const context = React.useContext(SetupStateContext);
+
+ if (context === null) {
+ throw new Error("useSettings must be used within a SettingsContext");
+ }
+
+ return context;
+};
+
+const SetupContext: React.FC<{
+ setupState: Partial;
+ setupError: string | undefined;
+ systemStatus: GQL.SystemStatusQuery;
+ configuration: GQL.ConfigDataFragment;
+}> = ({ setupState, setupError, systemStatus, configuration, children }) => {
+ const status = systemStatus?.systemStatus;
const windows = status?.os === "windows";
const pathSep = windows ? "\\" : "/";
const homeDir = windows ? "%USERPROFILE%" : "$HOME";
const pwd = windows ? "%CD%" : "$PWD";
- function pathJoin(...paths: string[]) {
- return paths.join(pathSep);
- }
+ const pathJoin = useCallback(
+ (...paths: string[]) => {
+ return paths.join(pathSep);
+ },
+ [pathSep]
+ );
// simply returns everything preceding the last path separator
function pathDir(path: string) {
@@ -83,528 +93,877 @@ export const Setup: React.FC = () => {
// so in this situation disallow setting up in the working directory.
const macApp = status?.os === "darwin" && workingDir === "/";
- const fallbackStashDir = pathJoin(homeDir, ".stash");
- const fallbackConfigPath = pathJoin(fallbackStashDir, "config.yml");
+ const homeDirPath = pathJoin(status?.homeDir ?? homeDir, ".stash");
+
+ const state: ISetupContextState = {
+ systemStatus,
+ configuration,
+ windows,
+ macApp,
+ pathJoin,
+ pathDir,
+ homeDir,
+ homeDirPath,
+ pwd,
+ workingDir,
+ setupState,
+ setupError,
+ };
- const overrideConfig = status?.configPath;
- const overrideGenerated = configuration?.general.generatedPath;
- const overrideCache = configuration?.general.cachePath;
- const overrideBlobs = configuration?.general.blobsPath;
- const overrideDatabase = configuration?.general.databasePath;
+ return (
+
+ {children}
+
+ );
+};
- useEffect(() => {
- if (configuration) {
- const configStashes = configuration.general.stashes;
- if (configStashes.length > 0) {
- setStashes(
- configStashes.map((s) => {
- const { __typename, ...withoutTypename } = s;
- return withoutTypename;
- })
- );
- }
- }
- }, [configuration]);
+interface IWizardStep {
+ next: (input?: Partial) => void;
+ goBack: () => void;
+}
- const discordLink = (
- Discord
- );
- const githubLink = (
-
-
- );
+const WelcomeSpecificConfig: React.FC = ({ next }) => {
+ const { systemStatus } = useSetupContext();
+ const status = systemStatus?.systemStatus;
+ const overrideConfig = status?.configPath;
- function onConfigLocationChosen(inWorkDir: boolean) {
- setSetupInWorkDir(inWorkDir);
- next();
+ function onNext() {
+ next({ configLocation: overrideConfig! });
}
- function goBack(n?: number) {
- let dec = n;
- if (!dec) {
- dec = 1;
- }
- setStep(Math.max(0, step - dec));
- }
+ return (
+ <>
+
+
+
+
+
+
+ {chunks},
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
- function next() {
- setStep(step + 1);
- }
+const DefaultWelcomeStep: React.FC = ({ next }) => {
+ const { pathJoin, homeDir, macApp, homeDirPath, pwd, workingDir } =
+ useSetupContext();
- function confirmPaths() {
- if (stashes.length > 0) {
- next();
- return;
- }
+ const fallbackStashDir = pathJoin(homeDir, ".stash");
+ const fallbackConfigPath = pathJoin(fallbackStashDir, "config.yml");
- setShowStashAlert(true);
+ function onConfigLocationChosen(inWorkingDir: boolean) {
+ const configLocation = inWorkingDir ? "config.yml" : "";
+ next({ configLocation });
}
- function maybeRenderStashAlert() {
- if (!showStashAlert) {
- return;
- }
-
- return (
- {
- setShowStashAlert(false);
- next();
- },
- }}
- cancel={{ onClick: () => setShowStashAlert(false) }}
- >
+ return (
+ <>
+
+
+
+
+
- {chunks},
+ fallback_path: fallbackConfigPath,
+ }}
+ />
-
- );
- }
-
- const WelcomeSpecificConfig = () => {
- return (
- <>
-
-
-
-
-
-
- {chunks},
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
- );
- };
+
+ {chunks},
+ }}
+ />
+
+
+
+
- function DefaultWelcomeStep() {
- const homeDirPath = pathJoin(status?.homeDir ?? homeDir, ".stash");
+
+
+
- return (
- <>
-
-
-
-
-
-
- {chunks},
- fallback_path: fallbackConfigPath,
- }}
- />
-
-
+
+
+
+
+
+ );
+};
- function onGeneratedSelectClosed(d?: string) {
- if (d) {
- setGeneratedLocation(d);
- }
+const WelcomeStep: React.FC = (props) => {
+ const { systemStatus } = useSetupContext();
+ const status = systemStatus?.systemStatus;
+ const overrideConfig = status?.configPath;
- setShowGeneratedSelectDialog(false);
- }
+ return overrideConfig ? (
+ close(true),
+ }}
+ cancel={{ onClick: () => close(false) }}
+ >
+
+
+
+ );
+};
- function onBlobsClosed(d?: string) {
- if (d) {
- setBlobsLocation(d);
- }
+const DatabaseSection: React.FC<{
+ databaseFile: string;
+ setDatabaseFile: React.Dispatch>;
+}> = ({ databaseFile, setDatabaseFile }) => {
+ const intl = useIntl();
- setShowBlobsDialog(false);
- }
+ return (
+
+
+
+
+ {chunks},
+ }}
+ />
+
+ {chunks},
+ }}
+ />
+
+ setDatabaseFile(e.currentTarget.value)}
+ />
+
+ );
+};
- function maybeRenderBlobsSelectDialog() {
- if (!showBlobsDialog) {
- return;
+const DirectorySelector: React.FC<{
+ value: string;
+ setValue: React.Dispatch>;
+ placeholder: string;
+ disabled?: boolean;
+}> = ({ value, setValue, placeholder, disabled = false }) => {
+ const [showSelectDialog, setShowSelectDialog] = useState(false);
+
+ function onSelectClosed(dir?: string) {
+ if (dir) {
+ setValue(dir);
}
-
- return
-
-
-
- {chunks},
- }}
- />
-
- {chunks},
- }}
- />
-
+ return (
+ <>
+ {showSelectDialog ? (
+
setValue(e.currentTarget.value)}
+ disabled={disabled}
+ />
+
+
+
+
+
+ );
+};
+
+const GeneratedSection: React.FC<{
+ generatedLocation: string;
+ setGeneratedLocation: React.Dispatch>;
+}> = ({ generatedLocation, setGeneratedLocation }) => {
+ const intl = useIntl();
+
+ return (
+
+
+
+
+ {chunks},
+ }}
+ />
+
+
+ );
+};
+
+const CacheSection: React.FC<{
+ cacheLocation: string;
+ setCacheLocation: React.Dispatch>;
+}> = ({ cacheLocation, setCacheLocation }) => {
+ const intl = useIntl();
+
+ return (
+
+
+
+
+ {chunks},
+ }}
+ />
+
+
+ );
+};
+
+const BlobsSection: React.FC<{
+ blobsLocation: string;
+ setBlobsLocation: React.Dispatch>;
+ storeBlobsInDatabase: boolean;
+ setStoreBlobsInDatabase: React.Dispatch>;
+}> = ({
+ blobsLocation,
+ setBlobsLocation,
+ storeBlobsInDatabase,
+ setStoreBlobsInDatabase,
+}) => {
+ const intl = useIntl();
+
+ return (
+
+
+
+
+ {chunks},
+ }}
+ />
+
+
+ {chunks},
+ strong: (chunks: string) => {chunks},
+ }}
+ />
+
+
+
+ setStoreBlobsInDatabase(!storeBlobsInDatabase)}
+ />
+
+
+
+ setDatabaseFile(e.currentTarget.value)}
+ disabled={storeBlobsInDatabase}
/>
-
- );
+
+
+ );
+};
+
+const SetPathsStep: React.FC = ({ goBack, next }) => {
+ const { configuration } = useSetupContext();
+
+ const [showStashAlert, setShowStashAlert] = useState(false);
+
+ const [stashes, setStashes] = useState([]);
+ const [databaseFile, setDatabaseFile] = useState("");
+ const [generatedLocation, setGeneratedLocation] = useState("");
+ const [cacheLocation, setCacheLocation] = useState("");
+ const [storeBlobsInDatabase, setStoreBlobsInDatabase] = useState(false);
+ const [blobsLocation, setBlobsLocation] = useState("");
+
+ const overrideDatabase = configuration?.general.databasePath;
+ const overrideGenerated = configuration?.general.generatedPath;
+ const overrideCache = configuration?.general.cachePath;
+ const overrideBlobs = configuration?.general.blobsPath;
+
+ function preNext() {
+ if (stashes.length === 0) {
+ setShowStashAlert(true);
+ } else {
+ onNext();
+ }
}
- function maybeRenderGenerated() {
- if (overrideGenerated) return;
+ function onNext() {
+ const input: Partial = {
+ stashes,
+ databaseFile,
+ generatedLocation,
+ cacheLocation,
+ blobsLocation: storeBlobsInDatabase ? "" : blobsLocation,
+ storeBlobsInDatabase,
+ };
+ next(input);
+ }
- return (
-
-
-
+ return (
+ <>
+ {showStashAlert ? (
+ {
+ setShowStashAlert(false);
+ if (confirm) {
+ onNext();
+ }
+ }}
+ />
+ ) : null}
+
+
+
- {chunks},
- }}
- />
+
-
- setGeneratedLocation(e.currentTarget.value)}
+
+
+
+
+
+
+
+
+ setStashes(s)}
+ />
+
+
+ {overrideDatabase ? null : (
+
-
-
-
-
- );
- }
+ )}
+ {overrideGenerated ? null : (
+
+
+
+
+
+
+
+
+ );
+};
- function onCacheSelectClosed(d?: string) {
- if (d) {
- setCacheLocation(d);
- }
+const StashExclusions: React.FC<{ stash: GQL.StashConfig }> = ({ stash }) => {
+ if (!stash.excludeImage && !stash.excludeVideo) {
+ return null;
+ }
- setShowCacheSelectDialog(false);
+ const excludes = [];
+ if (stash.excludeVideo) {
+ excludes.push("videos");
+ }
+ if (stash.excludeImage) {
+ excludes.push("images");
}
- function maybeRenderCacheSelectDialog() {
- if (!showCacheSelectDialog) {
- return;
- }
+ return {`(excludes ${excludes.join(" and ")})`};
+};
+
+const ConfirmStep: React.FC = ({ goBack, next }) => {
+ const { configuration, pathDir, pathJoin, pwd, setupState } =
+ useSetupContext();
+
+ const cfgFile = setupState.configLocation
+ ? setupState.configLocation
+ : pathJoin(pwd, "config.yml");
+ const cfgDir = pathDir(cfgFile);
+ const stashes = setupState.stashes ?? [];
+ const {
+ databaseFile,
+ generatedLocation,
+ cacheLocation,
+ blobsLocation,
+ storeBlobsInDatabase,
+ } = setupState;
- return
+
+
+
+
+
+ -
+
+ -
+
{cfgFile}
+
+
+
+ -
+
+ -
+
+ {stashes.map((s) => (
+ -
+
{s.path}
+
+ ))}
+
+
+
+ {!overrideDatabase && (
+
+ -
+
+ -
+
{databaseFile || joinCfgDir("stash-go.sqlite")}
+
+
+ )}
+ {!overrideGenerated && (
+
+ -
+
+ -
+
{generatedLocation || joinCfgDir("generated")}
+
+
+ )}
+ {!overrideCache && (
+
+ -
+
+ -
+
{cacheLocation || joinCfgDir("cache")}
+
+
+ )}
+ {!overrideBlobs && (
+
+ -
+
+ -
+
+ {storeBlobsInDatabase ? (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+};
- return (
-
-
-
+const DiscordLink = (
+ Discord
+);
+const GithubLink = (
+
+
+);
+
+const ErrorStep: React.FC<{ error: string; goBack: () => void }> = ({
+ error,
+ goBack,
+}) => {
+ return (
+ <>
+
+
+
{chunks},
- }}
+ id="setup.errors.something_went_wrong_while_setting_up_your_system"
+ values={{ error: {error} }}
/>
-
- setCacheLocation(e.currentTarget.value)}
+
+
-
-
-
-
- );
- }
+
+
+
+
+
+
+
+
+ );
+};
- function maybeRenderBlobs() {
- if (overrideBlobs) return;
+const SuccessStep: React.FC<{}> = () => {
+ const intl = useIntl();
+ const history = useHistory();
- return (
-
-
-
+ const [mutateDownloadFFMpeg] = GQL.useDownloadFfMpegMutation();
+
+ const [downloadFFmpeg, setDownloadFFmpeg] = useState(true);
+
+ const { systemStatus } = useSetupContext();
+ const status = systemStatus?.systemStatus;
+
+ function onFinishClick() {
+ if ((!status?.ffmpegPath || !status?.ffprobePath) && downloadFFmpeg) {
+ mutateDownloadFFMpeg();
+ }
+
+ history.push("/settings?tab=library");
+ }
+
+ return (
+ <>
+
+
+
+
+
{chunks},
+ localized_task: intl.formatMessage({
+ id: "config.categories.tasks",
+ }),
+ localized_scan: intl.formatMessage({ id: "actions.scan" }),
}}
/>
+ {!status?.ffmpegPath || !status?.ffprobePath ? (
+ <>
+
+ {chunks},
+ }}
+ />
+
+
+ setDownloadFFmpeg(!downloadFFmpeg)}
+ />
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+
+ {chunks},
- strong: (chunks: string) => {chunks},
+ open_collective_link: (
+
+ Open Collective
+
+ ),
}}
/>
-
- setStoreBlobsInDatabase(!storeBlobsInDatabase)}
- />
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
- {!storeBlobsInDatabase && (
-
- setBlobsLocation(e.currentTarget.value)}
- disabled={storeBlobsInDatabase}
- />
-
-
-
-
- )}
-
- );
- }
+const FinishStep: React.FC = ({ goBack }) => {
+ const { setupError } = useSetupContext();
- function SetPathsStep() {
- return (
- <>
- {maybeRenderStashAlert()}
-
-
-
-
-
-
-
-
-
-
-
-
-
- setStashes(s)}
- />
-
-
- {maybeRenderDatabase()}
- {maybeRenderGenerated()}
- {maybeRenderCache()}
- {maybeRenderBlobs()}
-
-
-
-
-
-
-
-
- );
+ if (setupError !== undefined) {
+ return >({});
+ const [creating, setCreating] = useState(false);
+ const [setupError, setSetupError] = useState(undefined);
+
+ const history = useHistory();
+ const steps: React.FC[] = [
+ WelcomeStep,
+ SetPathsStep,
+ ConfirmStep,
+ FinishStep,
+ ];
+ const Step = steps[step];
+
+ async function createSystem() {
try {
- setLoading(true);
- await mutateSetup({
- configLocation,
- databaseFile,
- generatedLocation,
- cacheLocation,
- storeBlobsInDatabase,
- blobsLocation,
- stashes,
- });
+ setCreating(true);
+ setSetupError(undefined);
+ await mutateSetup(setupInput as GQL.SetupInput);
// Set lastNoteSeen to hide release notes dialog
await saveUI({
variables: {
@@ -621,318 +980,95 @@ export const Setup: React.FC = () => {
setSetupError(String(e));
}
} finally {
- setLoading(false);
- next();
- }
- }
-
- function ConfirmStep() {
- let cfgDir: string;
- let config: string;
- if (overrideConfig) {
- cfgDir = pathDir(overrideConfig);
- config = overrideConfig;
- } else {
- cfgDir = setupInWorkDir ? pwd : fallbackStashDir;
- config = pathJoin(cfgDir, "config.yml");
+ setCreating(false);
+ setStep(step + 1);
}
-
- function joinCfgDir(path: string) {
- if (cfgDir) {
- return pathJoin(cfgDir, path);
- } else {
- return path;
- }
- }
-
- return (
- <>
-
-
-
-
-
-
- -
-
- -
-
{config}
-
-
-
- -
-
- -
-
- {stashes.map((s) => (
- -
-
{s.path}
- {maybeRenderExclusions(s)}
-
- ))}
-
-
-
- {!overrideDatabase && (
-
- -
-
- -
-
{databaseFile || joinCfgDir("stash-go.sqlite")}
-
-
- )}
- {!overrideGenerated && (
-
- -
-
- -
-
{generatedLocation || joinCfgDir("generated")}
-
-
- )}
- {!overrideCache && (
-
- -
-
- -
-
{cacheLocation || joinCfgDir("cache")}
-
-
- )}
- {!overrideBlobs && (
-
- -
-
- -
-
- {storeBlobsInDatabase ? (
-
-
-
- )}
-
-
-
-
-
-
-
-
- );
}
- function ErrorStep() {
- function onBackClick() {
- setSetupError(undefined);
- goBack(2);
- }
-
- return (
- <>
-
-
-
-
- {setupError} }}
- />
-
-
-
-
-
-
-
-
-
-
- );
- }
+ function next(input?: Partial) {
+ setSetupInput({ ...setupInput, ...input });
- function onFinishClick() {
- if ((!status?.ffmpegPath || !status?.ffprobePath) && downloadFFmpeg) {
- mutateDownloadFFMpeg();
+ if (Step === ConfirmStep) {
+ // create the system
+ createSystem();
+ } else {
+ setStep(step + 1);
}
-
- history.push("/settings?tab=library");
}
- function SuccessStep() {
- return (
- <>
-
-
-
-
-
-
- {chunks},
- localized_task: intl.formatMessage({
- id: "config.categories.tasks",
- }),
- localized_scan: intl.formatMessage({ id: "actions.scan" }),
- }}
- />
-
- {!status?.ffmpegPath || !status?.ffprobePath ? (
- <>
-
- {chunks},
- }}
- />
-
-
- setDownloadFFmpeg(!downloadFFmpeg)}
- />
-
-
- ) : null}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Open Collective
-
- ),
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- function FinishStep() {
- if (setupError !== undefined) {
- return
+
+
+
+ );
+ }
- function renderCreating() {
+ if (!configuration || !systemStatus) {
return (
-
-
+
+
+
+
);
}
return (
-
- {maybeRenderGeneratedSelectDialog()}
- {maybeRenderCacheSelectDialog()}
- {maybeRenderBlobsSelectDialog()}
-
-
- {loading ? (
- renderCreating()
- ) : (
+
+
+
+
-
- )}
-
+
+
);
};
diff --git a/ui/v2.5/src/components/Setup/styles.scss b/ui/v2.5/src/components/Setup/styles.scss
index 36db2798a57..0eceeb8e521 100644
--- a/ui/v2.5/src/components/Setup/styles.scss
+++ b/ui/v2.5/src/components/Setup/styles.scss
@@ -24,3 +24,10 @@
margin-left: 0.5rem;
}
}
+
+.setup-wizard {
+ #blobs > div {
+ margin-bottom: 1rem;
+ margin-top: 0;
+ }
+}
diff --git a/ui/v2.5/src/components/Shared/DurationInput.tsx b/ui/v2.5/src/components/Shared/DurationInput.tsx
index 7c7fde43172..5bd58b1e5d0 100644
--- a/ui/v2.5/src/components/Shared/DurationInput.tsx
+++ b/ui/v2.5/src/components/Shared/DurationInput.tsx
@@ -3,7 +3,7 @@ import {
faChevronUp,
faClock,
} from "@fortawesome/free-solid-svg-icons";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
import { Button, ButtonGroup, InputGroup, Form } from "react-bootstrap";
import { Icon } from "./Icon";
import TextUtils from "src/utils/text";
@@ -19,6 +19,8 @@ interface IProps {
allowNegative?: boolean;
}
+const includeMS = true;
+
export const DurationInput: React.FC = ({
disabled,
value,
@@ -96,17 +98,20 @@ export const DurationInput: React.FC = ({
}
}
- let inputValue = "";
- if (tmpValue !== undefined) {
- inputValue = tmpValue;
- } else if (value !== null && value !== undefined) {
- inputValue = TextUtils.secondsToTimestamp(value);
- }
+ const inputValue = useMemo(() => {
+ if (tmpValue !== undefined) {
+ return tmpValue;
+ } else if (value !== null && value !== undefined) {
+ return TextUtils.secondsToTimestamp(value, includeMS);
+ }
+ }, [value, tmpValue]);
+
+ const format = "hh:mm:ss.ms";
if (placeholder) {
- placeholder = `${placeholder} (hh:mm:ss)`;
+ placeholder = `${placeholder} (${format})`;
} else {
- placeholder = "hh:mm:ss";
+ placeholder = format;
}
return (
diff --git a/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx b/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx
index 00b318c65f3..7ecea9b30c5 100644
--- a/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx
+++ b/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx
@@ -5,6 +5,7 @@ import { Icon } from "./Icon";
import { IconDefinition, faLink } from "@fortawesome/free-solid-svg-icons";
import { useMemo } from "react";
import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
+import ReactDOM from "react-dom";
export const ExternalLinksButton: React.FC<{
icon?: IconDefinition;
@@ -15,25 +16,8 @@ export const ExternalLinksButton: React.FC<{
return null;
}
- if (urls.length === 1) {
- return (
-
- );
- }
-
- return (
-
-
-
-
+ const Menu = () =>
+ ReactDOM.createPortal(
{urls.map((url) => (
))}
-
+ ,
+ document.body
+ );
+
+ return (
+
+
+
+
);
};
diff --git a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
index 33aa24e32cd..db35f83f923 100644
--- a/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
+++ b/ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
@@ -154,6 +154,7 @@ export const GridCard: React.FC = (props: ICardProps) => {
if (props.selecting) {
props.onSelectedChanged(!props.selected, shiftKey);
event.preventDefault();
+ event.stopPropagation();
}
}
diff --git a/ui/v2.5/src/components/Shared/GridCard/dragMoveSelect.ts b/ui/v2.5/src/components/Shared/GridCard/dragMoveSelect.ts
index caae45260d9..d5ca0ecb9b7 100644
--- a/ui/v2.5/src/components/Shared/GridCard/dragMoveSelect.ts
+++ b/ui/v2.5/src/components/Shared/GridCard/dragMoveSelect.ts
@@ -1,11 +1,26 @@
import { useState } from "react";
import { useListContextOptional } from "src/components/List/ListProvider";
+// Enum representing the possible sides for a drag operation.
export enum DragSide {
BEFORE,
AFTER,
}
+/**
+ * Hook to manage drag and move selection functionality.
+ * Dragging while selecting will allow the user to select multiple items.
+ * Dragging from the drag handle will allow the user to move the item or selected items.
+ *
+ * @param props - The properties for the hook.
+ * @param props.selecting - Whether the one or more items have been selected.
+ * @param props.selected - Whether this item is currently selected.
+ * @param props.onSelectedChanged - Callback when the selected state changes.
+ * @param props.objectId - The ID of this object.
+ * @param props.onMove - Callback when a move operation occurs.
+ *
+ * @returns An object containing the drag event handlers and state.
+ */
export function useDragMoveSelect(props: {
selecting: boolean;
selected: boolean;
@@ -15,8 +30,12 @@ export function useDragMoveSelect(props: {
}) {
const { selectedIds } = useListContextOptional();
+ // true if the mouse is over the drag handle
const [inHandle, setInHandle] = useState(false);
+
+ // true if this is the source of a move operation
const [moveSrc, setMoveSrc] = useState(false);
+ // the target side for a move operation
const [moveTarget, setMoveTarget] = useState();
const canSelect = props.onSelectedChanged && props.selecting;
@@ -75,6 +94,7 @@ export function useDragMoveSelect(props: {
ev.dataTransfer.dropEffect = "copy";
ev.preventDefault();
} else if (ev.dataTransfer.effectAllowed === "move" && !moveSrc) {
+ // don't allow move on self
doSetMoveTarget(event);
ev.dataTransfer.dropEffect = "move";
ev.preventDefault();
@@ -92,7 +112,8 @@ export function useDragMoveSelect(props: {
}
function onDragOver(event: React.DragEvent) {
- if (event.dataTransfer.effectAllowed === "move" && moveSrc) {
+ // only set move target if move is allowed, or if this is not the source of the move
+ if (event.dataTransfer.effectAllowed !== "move" || moveSrc) {
return;
}
diff --git a/ui/v2.5/src/components/Shared/HoverScrubber.tsx b/ui/v2.5/src/components/Shared/HoverScrubber.tsx
index f658e1fa23e..7c07e8adc30 100644
--- a/ui/v2.5/src/components/Shared/HoverScrubber.tsx
+++ b/ui/v2.5/src/components/Shared/HoverScrubber.tsx
@@ -1,11 +1,14 @@
import React, { useMemo } from "react";
import cx from "classnames";
+// #5231: TouchEvent is not defined on all browsers
+const touchEventDefined = window.TouchEvent !== undefined;
+
interface IHoverScrubber {
totalSprites: number;
activeIndex: number | undefined;
setActiveIndex: (index: number | undefined) => void;
- onClick?: () => void;
+ onClick?: (index: number) => void;
}
export const HoverScrubber: React.FC = ({
@@ -14,9 +17,21 @@ export const HoverScrubber: React.FC = ({
setActiveIndex,
onClick,
}) => {
- function getActiveIndex(e: React.MouseEvent) {
+ function getActiveIndex(
+ e:
+ | React.MouseEvent
+ | React.TouchEvent
+ ) {
const { width } = e.currentTarget.getBoundingClientRect();
- const x = e.nativeEvent.offsetX;
+
+ let x = 0;
+ if (e.nativeEvent instanceof MouseEvent) {
+ x = e.nativeEvent.offsetX;
+ } else if (touchEventDefined && e.nativeEvent instanceof TouchEvent) {
+ x =
+ e.nativeEvent.touches[0].clientX -
+ e.currentTarget.getBoundingClientRect().x;
+ }
const i = Math.round((x / width) * (totalSprites - 1));
@@ -26,27 +41,51 @@ export const HoverScrubber: React.FC = ({
return i;
}
- function onMouseMove(e: React.MouseEvent) {
+ function onMove(
+ e:
+ | React.MouseEvent
+ | React.TouchEvent
+ ) {
const relatedTarget = e.currentTarget;
- if (relatedTarget !== e.target) return;
+ if (
+ (e instanceof MouseEvent && relatedTarget !== e.target) ||
+ (touchEventDefined &&
+ e instanceof TouchEvent &&
+ document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
+ )
+ return;
setActiveIndex(getActiveIndex(e));
}
- function onMouseLeave() {
+ function onLeave() {
setActiveIndex(undefined);
}
- function onScrubberClick(e: React.MouseEvent) {
+ function onScrubberClick(
+ e:
+ | React.MouseEvent
+ | React.TouchEvent
+ ) {
if (!onClick) return;
const relatedTarget = e.currentTarget;
- if (relatedTarget !== e.target) return;
+ if (
+ (e instanceof MouseEvent && relatedTarget !== e.target) ||
+ (touchEventDefined &&
+ e instanceof TouchEvent &&
+ document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
+ )
+ return;
e.preventDefault();
- onClick();
+ e.stopPropagation();
+
+ const i = getActiveIndex(e);
+ if (i === undefined) return;
+ onClick(i);
}
const indicatorStyle = useMemo(() => {
@@ -67,8 +106,11 @@ export const HoverScrubber: React.FC = ({
>
diff --git a/ui/v2.5/src/components/Shared/MultiSet.tsx b/ui/v2.5/src/components/Shared/MultiSet.tsx
index 4ed7a99ffe4..b18c4087ab1 100644
--- a/ui/v2.5/src/components/Shared/MultiSet.tsx
+++ b/ui/v2.5/src/components/Shared/MultiSet.tsx
@@ -17,6 +17,7 @@ interface IMultiSetProps {
disabled?: boolean;
onUpdate: (ids: string[]) => void;
onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
+ menuPortalTarget?: HTMLElement | null;
}
const Select: React.FC = (props) => {
@@ -36,6 +37,7 @@ const Select: React.FC = (props) => {
ids={props.ids ?? []}
// exclude file-based galleries when setting galleries
extraCriteria={excludeFileBasedGalleries}
+ menuPortalTarget={props.menuPortalTarget}
/>
);
}
@@ -48,6 +50,7 @@ const Select: React.FC = (props) => {
isClearable={false}
onSelect={onUpdate}
ids={props.ids ?? []}
+ menuPortalTarget={props.menuPortalTarget}
/>
);
};
diff --git a/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx b/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
index 577faca8b0d..a2d4210ae42 100644
--- a/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
+++ b/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
@@ -6,16 +6,20 @@ import * as GQL from "src/core/generated-graphql";
import { sortPerformers } from "src/core/performers";
import { HoverPopover } from "./HoverPopover";
import { Icon } from "./Icon";
-import { PerformerLink } from "./TagLink";
+import { PerformerLink, PerformerLinkType } from "./TagLink";
interface IProps {
performers: Pick<
GQL.Performer,
"id" | "name" | "image_path" | "disambiguation" | "gender"
>[];
+ linkType?: PerformerLinkType;
}
-export const PerformerPopoverButton: React.FC = ({ performers }) => {
+export const PerformerPopoverButton: React.FC = ({
+ performers,
+ linkType,
+}) => {
const sorted = sortPerformers(performers);
const popoverContent = sorted.map((performer) => (
@@ -33,6 +37,7 @@ export const PerformerPopoverButton: React.FC = ({ performers }) => {
key={performer.id}
performer={performer}
className="d-block"
+ linkType={linkType}
/>
));
diff --git a/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx b/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx
index 14cd701d13a..69195ff407e 100644
--- a/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx
+++ b/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx
@@ -3,6 +3,7 @@ import { Button } from "react-bootstrap";
import { Icon } from "../Icon";
import { faPencil, faStar } from "@fortawesome/free-solid-svg-icons";
import { useFocusOnce } from "src/utils/focus";
+import { useStopWheelScroll } from "src/utils/form";
export interface IRatingNumberProps {
value: number | null;
@@ -26,6 +27,7 @@ export const RatingNumber: React.FC = (
const showTextField = !props.disabled && (editing || !props.clickToRate);
const [ratingRef] = useFocusOnce(editing, true);
+ useStopWheelScroll(ratingRef);
const effectiveValue = editing ? valueStage : props.value;
diff --git a/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx b/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
index 07865533866..b8a7be085ba 100644
--- a/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
+++ b/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
@@ -6,7 +6,7 @@ import {
ObjectScrapeResult,
ScrapeResult,
} from "src/components/Shared/ScrapeDialog/scrapeResult";
-import { TagSelect } from "src/components/Tags/TagSelect";
+import { TagIDSelect } from "src/components/Tags/TagSelect";
import { StudioSelect } from "src/components/Studios/StudioSelect";
import { GroupSelect } from "src/components/Groups/GroupSelect";
@@ -269,17 +269,12 @@ export const ScrapedTagsRow: React.FC<
: scrapeResult.originalValue;
const value = resultValue ?? [];
- const selectValue = value.map((p) => {
- const aliases: string[] = [];
- return {
- id: p.stored_id ?? "",
- name: p.name ?? "",
- aliases,
- };
- });
+ const selectValue = value.map((p) => p.stored_id ?? "");
+ // we need to use TagIDSelect here because we want to use the local name
+ // of the tag instead of the name from the source
return (
- ({ ...p, stored_id: p.id })));
}
}}
- values={selectValue}
+ ids={selectValue}
/>
);
}
diff --git a/ui/v2.5/src/components/Shared/ScraperMenu.tsx b/ui/v2.5/src/components/Shared/ScraperMenu.tsx
index f73103e57b7..4cc38b6f858 100644
--- a/ui/v2.5/src/components/Shared/ScraperMenu.tsx
+++ b/ui/v2.5/src/components/Shared/ScraperMenu.tsx
@@ -1,14 +1,12 @@
import React, { useMemo, useState } from "react";
-import { Dropdown } from "react-bootstrap";
-import { FormattedMessage, useIntl } from "react-intl";
+import { Dropdown, Button } from "react-bootstrap";
+import { useIntl } from "react-intl";
import { Icon } from "./Icon";
import { stashboxDisplayName } from "src/utils/stashbox";
import { ScraperSourceInput, StashBox } from "src/core/generated-graphql";
import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
import { ClearableInput } from "./ClearableInput";
-const minFilteredScrapers = 5;
-
export const ScraperMenu: React.FC<{
toggle: React.ReactNode;
variant?: string;
@@ -54,22 +52,22 @@ export const ScraperMenu: React.FC<{
{toggle}
- onReloadScrapers()}>
-
-
-
- {(stashBoxes?.length ?? 0) + scrapers.length > minFilteredScrapers && (
- ;
linkType: LinkType;
}> = ({ stashID, linkType }) => {
const { configuration } = React.useContext(ConfigurationContext);
diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx
index d01eee2d5ff..b61de8bff70 100644
--- a/ui/v2.5/src/components/Shared/TagLink.tsx
+++ b/ui/v2.5/src/components/Shared/TagLink.tsx
@@ -42,6 +42,8 @@ interface IPerformerLinkProps {
className?: string;
}
+export type PerformerLinkType = IPerformerLinkProps["linkType"];
+
export const PerformerLink: React.FC = ({
performer,
linkType = "scene",
diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss
index 41b4f293a05..644eff047cd 100644
--- a/ui/v2.5/src/components/Shared/styles.scss
+++ b/ui/v2.5/src/components/Shared/styles.scss
@@ -642,9 +642,39 @@ button.btn.favorite-button {
.scraper-menu .dropdown-menu {
min-width: 250px;
+ padding-top: 0;
.dropdown-divider {
border-top-color: $textfield-bg;
margin: 0;
}
+
+ .scraper-filter-container {
+ background-color: $secondary;
+ border-bottom: solid 1px $textfield-bg;
+ padding: 5px;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+
+ .btn-group {
+ border: solid 1px $textfield-bg;
+ border-radius: 5px;
+ width: 100%;
+ }
+
+ .clearable-text-field {
+ background-color: $textfield-bg;
+ }
+
+ .clearable-text-field-clear {
+ background-color: unset;
+ border: unset;
+ }
+
+ .reload-button.btn {
+ border-bottom-right-radius: 0.25rem;
+ border-top-right-radius: 0.25rem;
+ }
+ }
}
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
index 522dfe64ad7..01b2d7524d6 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
@@ -79,7 +79,9 @@ const StudioTabs: React.FC<{
abbreviateCounter: boolean;
showAllCounts?: boolean;
}> = ({ tabKey, studio, abbreviateCounter, showAllCounts = false }) => {
- const [showAllDetails, setShowAllDetails] = useState(showAllCounts);
+ const [showAllDetails, setShowAllDetails] = useState(
+ showAllCounts && studio.child_studios.length > 0
+ );
const sceneCount =
(showAllDetails ? studio.scene_count_all : studio.scene_count) ?? 0;
@@ -125,8 +127,12 @@ const StudioTabs: React.FC<{
baseURL: `/studios/${studio.id}`,
});
- const contentSwitch = useMemo(
- () => (
+ const contentSwitch = useMemo(() => {
+ if (!studio.child_studios.length) {
+ return null;
+ }
+
+ return (
= ({
studio,
- collapsed,
fullWidth,
}) => {
function renderTagsField() {
@@ -47,25 +46,6 @@ export const StudioDetailsPanel: React.FC = ({
);
}
- function maybeRenderExtraDetails() {
- if (!collapsed) {
- return (
- <>
- = ({
}
fullWidth={fullWidth}
/>
- {maybeRenderExtraDetails()}
+
);
};
diff --git a/ui/v2.5/src/components/Studios/StudioSelect.tsx b/ui/v2.5/src/components/Studios/StudioSelect.tsx
index d1ab69e6b7e..7b22b7f22f8 100644
--- a/ui/v2.5/src/components/Studios/StudioSelect.tsx
+++ b/ui/v2.5/src/components/Studios/StudioSelect.tsx
@@ -117,7 +117,7 @@ const _StudioSelect: React.FC<
children: (
{name}
- {alias && {` (${alias})`}}
+ {alias && ({alias})}
),
};
diff --git a/ui/v2.5/src/components/Studios/Studios.tsx b/ui/v2.5/src/components/Studios/Studios.tsx
index e60dbdc06c2..545de936f52 100644
--- a/ui/v2.5/src/components/Studios/Studios.tsx
+++ b/ui/v2.5/src/components/Studios/Studios.tsx
@@ -5,12 +5,9 @@ import { useTitleProps } from "src/hooks/title";
import Studio from "./StudioDetails/Studio";
import StudioCreate from "./StudioDetails/StudioCreate";
import { StudioList } from "./StudioList";
-import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
import { View } from "../List/views";
const Studios: React.FC = () => {
- useScrollToTopOnMount();
-
return = ({
{
endpoint,
stash_id: remoteSiteID,
+ updated_at: new Date().toISOString(),
},
];
}
diff --git a/ui/v2.5/src/components/Tagger/context.tsx b/ui/v2.5/src/components/Tagger/context.tsx
index dc35208c5f2..9b1e996de24 100644
--- a/ui/v2.5/src/components/Tagger/context.tsx
+++ b/ui/v2.5/src/components/Tagger/context.tsx
@@ -613,12 +613,14 @@ export const TaggerContext: React.FC = ({ children }) => {
return {
endpoint: e.endpoint,
stash_id: e.stash_id,
+ updated_at: e.updated_at,
};
});
stashIDs.push({
stash_id: performer.remote_site_id,
endpoint: currentSource?.sourceInput.stash_box_endpoint,
+ updated_at: new Date().toISOString(),
});
await updatePerformer({
@@ -770,12 +772,14 @@ export const TaggerContext: React.FC = ({ children }) => {
return {
endpoint: e.endpoint,
stash_id: e.stash_id,
+ updated_at: e.updated_at,
};
});
stashIDs.push({
stash_id: studio.remote_site_id,
endpoint: currentSource?.sourceInput.stash_box_endpoint,
+ updated_at: new Date().toISOString(),
});
await updateStudio({
diff --git a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
index 25f0ca88f73..6b202be54c7 100755
--- a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
import { Button, ButtonGroup } from "react-bootstrap";
import { FormattedMessage } from "react-intl";
@@ -13,24 +13,24 @@ import {
} from "src/components/Performers/PerformerSelect";
import { getStashboxBase } from "src/utils/stashbox";
import { ExternalLink } from "src/components/Shared/ExternalLink";
+import { Link } from "react-router-dom";
-interface IPerformerName {
+const PerformerLink: React.FC<{
performer: GQL.ScrapedPerformer | Performer;
- id: string | undefined | null;
- baseURL: string | undefined;
-}
-
-const PerformerName: React.FC = ({
- performer,
- id,
- baseURL,
-}) => {
- const name =
- baseURL && id ? (
- {performer.name}
+ url: string | undefined;
+ internal?: boolean;
+}> = ({ performer, url, internal = false }) => {
+ const name = useMemo(() => {
+ if (!url) return performer.name;
+
+ return internal ? (
+
+ {performer.name}
+
) : (
- performer.name
+ {performer.name}
);
+ }, [url, performer.name, internal]);
return (
<>
@@ -115,10 +115,9 @@ const PerformerResult: React.FC = ({
= ({
@@ -169,10 +168,9 @@ const PerformerResult: React.FC = ({
= ({
return {
endpoint: s.endpoint,
stash_id: s.stash_id,
+ updated_at: s.updated_at,
};
})
.filter(
@@ -421,6 +422,7 @@ const StashSearchResult: React.FC = ({
{
endpoint: currentSource.sourceInput.stash_box_endpoint,
stash_id: scene.remote_site_id,
+ updated_at: new Date().toISOString(),
},
];
} else {
diff --git a/ui/v2.5/src/components/Tagger/scenes/StudioModal.tsx b/ui/v2.5/src/components/Tagger/scenes/StudioModal.tsx
index b57c796ab28..249e34e7401 100644
--- a/ui/v2.5/src/components/Tagger/scenes/StudioModal.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/StudioModal.tsx
@@ -198,11 +198,13 @@ const StudioModal: React.FC = ({
// stashid handling code
const remoteSiteID = studio.remote_site_id;
+ const timeNow = new Date().toISOString();
if (remoteSiteID && endpoint) {
studioData.stash_ids = [
{
endpoint,
stash_id: remoteSiteID,
+ updated_at: timeNow,
},
];
}
@@ -230,6 +232,7 @@ const StudioModal: React.FC = ({
{
endpoint,
stash_id: parentRemoteSiteID,
+ updated_at: timeNow,
},
];
}
diff --git a/ui/v2.5/src/components/Tagger/scenes/StudioResult.tsx b/ui/v2.5/src/components/Tagger/scenes/StudioResult.tsx
index 4d099d2a6e2..13ffe6bff82 100755
--- a/ui/v2.5/src/components/Tagger/scenes/StudioResult.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/StudioResult.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
import { Button, ButtonGroup } from "react-bootstrap";
import { FormattedMessage } from "react-intl";
import cx from "classnames";
@@ -12,20 +12,24 @@ import { OptionalField } from "../IncludeButton";
import { faSave } from "@fortawesome/free-solid-svg-icons";
import { getStashboxBase } from "src/utils/stashbox";
import { ExternalLink } from "src/components/Shared/ExternalLink";
+import { Link } from "react-router-dom";
-interface IStudioName {
+const StudioLink: React.FC<{
studio: GQL.ScrapedStudio | GQL.SlimStudioDataFragment;
- id: string | undefined | null;
- baseURL: string | undefined;
-}
-
-const StudioName: React.FC = ({ studio, id, baseURL }) => {
- const name =
- baseURL && id ? (
- {studio.name}
+ url: string | undefined;
+ internal?: boolean;
+}> = ({ studio, url, internal = false }) => {
+ const name = useMemo(() => {
+ if (!url) return studio.name;
+
+ return internal ? (
+
+ {studio.name}
+
) : (
- studio.name
+ {studio.name}
);
+ }, [url, studio.name, internal]);
return {name};
};
@@ -82,10 +86,9 @@ const StudioResult: React.FC = ({
= ({
-
+
+
+
+ {chunks},
+ }}
+ />
+
+
+
+
+
+
+
+
- {chunks},
+ fallback_path: fallbackConfigPath,
+ }}
+ />
-
-
-
- {chunks},
- }}
- />
-
-
-
-
- {chunks},
+ }}
+ />
+
+
+
- return (
- <>
-
-
-
-
- {chunks},
- fallback_path: fallbackConfigPath,
- }}
- />
-
+
+
+
+
+
+
+ {chunks},
+ }}
+ />
+
+
-
-
- {chunks},
- }}
- />
-
-
+
+
+ {chunks},
+ }}
+ />
+
+
+
+ {chunks},
+ }}
+ />
+
+
+
+ {chunks},
+ }}
+ />
+
+ {chunks},
+ strong: (chunks: string) => {chunks},
+ }}
+ />
+
+ setStoreBlobsInDatabase(!storeBlobsInDatabase)}
+ />
+
+
+
+ setDatabaseFile(e.currentTarget.value)}
+ disabled={storeBlobsInDatabase}
/>
-
- );
+
+
-
+ return (
+ <>
+ {showStashAlert ? (
+
+
- {chunks},
- }}
- />
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
+
+ -
+
{cfgFile}+
+
-
+
-
+
+
+ -
+
-
+ {stashes.map((s) => (
+
-
+
{s.path}++
+ ))}
+
+ -
+
-
+
-
+
+
+ -
+
{databaseFile || joinCfgDir("stash-go.sqlite")}+
+
-
+
-
+
+
+ -
+
{generatedLocation || joinCfgDir("generated")}+
+
-
+
-
+
+
+ -
+
{cacheLocation || joinCfgDir("cache")}+
+
-
+
-
+
+
+ -
+
+ {storeBlobsInDatabase ? ( +++ ) : ( + blobsLocation || joinCfgDir("blobs") + )} +
+
+
+
+
+
-
+const DiscordLink = (
+
+
{chunks},
- }}
+ id="setup.errors.something_went_wrong_while_setting_up_your_system"
+ values={{ error: {error} }}
/>
+
+
+
+
-
+ const [mutateDownloadFFMpeg] = GQL.useDownloadFfMpegMutation();
+
+ const [downloadFFmpeg, setDownloadFFmpeg] = useState(true);
+
+ const { systemStatus } = useSetupContext();
+ const status = systemStatus?.systemStatus;
+
+ function onFinishClick() {
+ if ((!status?.ffmpegPath || !status?.ffprobePath) && downloadFFmpeg) {
+ mutateDownloadFFMpeg();
+ }
+
+ history.push("/settings?tab=library");
+ }
+
+ return (
+ <>
+
+
+
+
{chunks},
+ localized_task: intl.formatMessage({
+ id: "config.categories.tasks",
+ }),
+ localized_scan: intl.formatMessage({ id: "actions.scan" }),
}}
/>
{chunks},
+ }}
+ />
+
+
+
+
+
+
+
+ {chunks},
- strong: (chunks: string) => {chunks},
+ open_collective_link: (
+
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
{config}-
-
-
-
-
-
-
- -
-
-
- {stashes.map((s) => (
-
-
-
{s.path}- {maybeRenderExclusions(s)} -
- ))}
-
- -
-
-
-
-
-
-
- -
-
{databaseFile || joinCfgDir("stash-go.sqlite")}-
-
-
-
-
-
-
- -
-
{generatedLocation || joinCfgDir("generated")}-
-
-
-
-
-
-
- -
-
{cacheLocation || joinCfgDir("cache")}-
-
-
-
-
-
-
- -
-
- {storeBlobsInDatabase ? ( --- ) : ( - blobsLocation || joinCfgDir("blobs") - )} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {chunks},
- localized_task: intl.formatMessage({
- id: "config.categories.tasks",
- }),
- localized_scan: intl.formatMessage({ id: "actions.scan" }),
- }}
- />
-
{chunks},
- }}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {loading ? (
- renderCreating()
- ) : (
+
+
diff --git a/ui/v2.5/src/components/Shared/MultiSet.tsx b/ui/v2.5/src/components/Shared/MultiSet.tsx
index 4ed7a99ffe4..b18c4087ab1 100644
--- a/ui/v2.5/src/components/Shared/MultiSet.tsx
+++ b/ui/v2.5/src/components/Shared/MultiSet.tsx
@@ -17,6 +17,7 @@ interface IMultiSetProps {
disabled?: boolean;
onUpdate: (ids: string[]) => void;
onSetMode: (mode: GQL.BulkUpdateIdMode) => void;
+ menuPortalTarget?: HTMLElement | null;
}
const Select: React.FC = (props) => {
@@ -36,6 +37,7 @@ const Select: React.FC = (props) => {
ids={props.ids ?? []}
// exclude file-based galleries when setting galleries
extraCriteria={excludeFileBasedGalleries}
+ menuPortalTarget={props.menuPortalTarget}
/>
);
}
@@ -48,6 +50,7 @@ const Select: React.FC = (props) => {
isClearable={false}
onSelect={onUpdate}
ids={props.ids ?? []}
+ menuPortalTarget={props.menuPortalTarget}
/>
);
};
diff --git a/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx b/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
index 577faca8b0d..a2d4210ae42 100644
--- a/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
+++ b/ui/v2.5/src/components/Shared/PerformerPopoverButton.tsx
@@ -6,16 +6,20 @@ import * as GQL from "src/core/generated-graphql";
import { sortPerformers } from "src/core/performers";
import { HoverPopover } from "./HoverPopover";
import { Icon } from "./Icon";
-import { PerformerLink } from "./TagLink";
+import { PerformerLink, PerformerLinkType } from "./TagLink";
interface IProps {
performers: Pick<
GQL.Performer,
"id" | "name" | "image_path" | "disambiguation" | "gender"
>[];
+ linkType?: PerformerLinkType;
}
-export const PerformerPopoverButton: React.FC = ({ performers }) => {
+export const PerformerPopoverButton: React.FC = ({
+ performers,
+ linkType,
+}) => {
const sorted = sortPerformers(performers);
const popoverContent = sorted.map((performer) => (
= (
const showTextField = !props.disabled && (editing || !props.clickToRate);
const [ratingRef] = useFocusOnce(editing, true);
+ useStopWheelScroll(ratingRef);
const effectiveValue = editing ? valueStage : props.value;
diff --git a/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx b/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
index 07865533866..b8a7be085ba 100644
--- a/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
+++ b/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
@@ -6,7 +6,7 @@ import {
ObjectScrapeResult,
ScrapeResult,
} from "src/components/Shared/ScrapeDialog/scrapeResult";
-import { TagSelect } from "src/components/Tags/TagSelect";
+import { TagIDSelect } from "src/components/Tags/TagSelect";
import { StudioSelect } from "src/components/Studios/StudioSelect";
import { GroupSelect } from "src/components/Groups/GroupSelect";
@@ -269,17 +269,12 @@ export const ScrapedTagsRow: React.FC<
: scrapeResult.originalValue;
const value = resultValue ?? [];
- const selectValue = value.map((p) => {
- const aliases: string[] = [];
- return {
- id: p.stored_id ?? "",
- name: p.name ?? "",
- aliases,
- };
- });
+ const selectValue = value.map((p) => p.stored_id ?? "");
+ // we need to use TagIDSelect here because we want to use the local name
+ // of the tag instead of the name from the source
return (
- ({ ...p, stored_id: p.id })));
}
}}
- values={selectValue}
+ ids={selectValue}
/>
);
}
diff --git a/ui/v2.5/src/components/Shared/ScraperMenu.tsx b/ui/v2.5/src/components/Shared/ScraperMenu.tsx
index f73103e57b7..4cc38b6f858 100644
--- a/ui/v2.5/src/components/Shared/ScraperMenu.tsx
+++ b/ui/v2.5/src/components/Shared/ScraperMenu.tsx
@@ -1,14 +1,12 @@
import React, { useMemo, useState } from "react";
-import { Dropdown } from "react-bootstrap";
-import { FormattedMessage, useIntl } from "react-intl";
+import { Dropdown, Button } from "react-bootstrap";
+import { useIntl } from "react-intl";
import { Icon } from "./Icon";
import { stashboxDisplayName } from "src/utils/stashbox";
import { ScraperSourceInput, StashBox } from "src/core/generated-graphql";
import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
import { ClearableInput } from "./ClearableInput";
-const minFilteredScrapers = 5;
-
export const ScraperMenu: React.FC<{
toggle: React.ReactNode;
variant?: string;
@@ -54,22 +52,22 @@ export const ScraperMenu: React.FC<{
{toggle}
- onReloadScrapers()}>
-
-
-
- {(stashBoxes?.length ?? 0) + scrapers.length > minFilteredScrapers && (
- ;
linkType: LinkType;
}> = ({ stashID, linkType }) => {
const { configuration } = React.useContext(ConfigurationContext);
diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx
index d01eee2d5ff..b61de8bff70 100644
--- a/ui/v2.5/src/components/Shared/TagLink.tsx
+++ b/ui/v2.5/src/components/Shared/TagLink.tsx
@@ -42,6 +42,8 @@ interface IPerformerLinkProps {
className?: string;
}
+export type PerformerLinkType = IPerformerLinkProps["linkType"];
+
export const PerformerLink: React.FC = ({
performer,
linkType = "scene",
diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss
index 41b4f293a05..644eff047cd 100644
--- a/ui/v2.5/src/components/Shared/styles.scss
+++ b/ui/v2.5/src/components/Shared/styles.scss
@@ -642,9 +642,39 @@ button.btn.favorite-button {
.scraper-menu .dropdown-menu {
min-width: 250px;
+ padding-top: 0;
.dropdown-divider {
border-top-color: $textfield-bg;
margin: 0;
}
+
+ .scraper-filter-container {
+ background-color: $secondary;
+ border-bottom: solid 1px $textfield-bg;
+ padding: 5px;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+
+ .btn-group {
+ border: solid 1px $textfield-bg;
+ border-radius: 5px;
+ width: 100%;
+ }
+
+ .clearable-text-field {
+ background-color: $textfield-bg;
+ }
+
+ .clearable-text-field-clear {
+ background-color: unset;
+ border: unset;
+ }
+
+ .reload-button.btn {
+ border-bottom-right-radius: 0.25rem;
+ border-top-right-radius: 0.25rem;
+ }
+ }
}
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
index 522dfe64ad7..01b2d7524d6 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
@@ -79,7 +79,9 @@ const StudioTabs: React.FC<{
abbreviateCounter: boolean;
showAllCounts?: boolean;
}> = ({ tabKey, studio, abbreviateCounter, showAllCounts = false }) => {
- const [showAllDetails, setShowAllDetails] = useState(showAllCounts);
+ const [showAllDetails, setShowAllDetails] = useState(
+ showAllCounts && studio.child_studios.length > 0
+ );
const sceneCount =
(showAllDetails ? studio.scene_count_all : studio.scene_count) ?? 0;
@@ -125,8 +127,12 @@ const StudioTabs: React.FC<{
baseURL: `/studios/${studio.id}`,
});
- const contentSwitch = useMemo(
- () => (
+ const contentSwitch = useMemo(() => {
+ if (!studio.child_studios.length) {
+ return null;
+ }
+
+ return (
= ({
studio,
- collapsed,
fullWidth,
}) => {
function renderTagsField() {
@@ -47,25 +46,6 @@ export const StudioDetailsPanel: React.FC = ({
);
}
- function maybeRenderExtraDetails() {
- if (!collapsed) {
- return (
- <>
- = ({
}
fullWidth={fullWidth}
/>
- {maybeRenderExtraDetails()}
+
);
};
diff --git a/ui/v2.5/src/components/Studios/StudioSelect.tsx b/ui/v2.5/src/components/Studios/StudioSelect.tsx
index d1ab69e6b7e..7b22b7f22f8 100644
--- a/ui/v2.5/src/components/Studios/StudioSelect.tsx
+++ b/ui/v2.5/src/components/Studios/StudioSelect.tsx
@@ -117,7 +117,7 @@ const _StudioSelect: React.FC<
children: (
{name}
- {alias && {` (${alias})`}}
+ {alias && ({alias})}
),
};
diff --git a/ui/v2.5/src/components/Studios/Studios.tsx b/ui/v2.5/src/components/Studios/Studios.tsx
index e60dbdc06c2..545de936f52 100644
--- a/ui/v2.5/src/components/Studios/Studios.tsx
+++ b/ui/v2.5/src/components/Studios/Studios.tsx
@@ -5,12 +5,9 @@ import { useTitleProps } from "src/hooks/title";
import Studio from "./StudioDetails/Studio";
import StudioCreate from "./StudioDetails/StudioCreate";
import { StudioList } from "./StudioList";
-import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
import { View } from "../List/views";
const Studios: React.FC = () => {
- useScrollToTopOnMount();
-
return = ({
{
endpoint,
stash_id: remoteSiteID,
+ updated_at: new Date().toISOString(),
},
];
}
diff --git a/ui/v2.5/src/components/Tagger/context.tsx b/ui/v2.5/src/components/Tagger/context.tsx
index dc35208c5f2..9b1e996de24 100644
--- a/ui/v2.5/src/components/Tagger/context.tsx
+++ b/ui/v2.5/src/components/Tagger/context.tsx
@@ -613,12 +613,14 @@ export const TaggerContext: React.FC = ({ children }) => {
return {
endpoint: e.endpoint,
stash_id: e.stash_id,
+ updated_at: e.updated_at,
};
});
stashIDs.push({
stash_id: performer.remote_site_id,
endpoint: currentSource?.sourceInput.stash_box_endpoint,
+ updated_at: new Date().toISOString(),
});
await updatePerformer({
@@ -770,12 +772,14 @@ export const TaggerContext: React.FC = ({ children }) => {
return {
endpoint: e.endpoint,
stash_id: e.stash_id,
+ updated_at: e.updated_at,
};
});
stashIDs.push({
stash_id: studio.remote_site_id,
endpoint: currentSource?.sourceInput.stash_box_endpoint,
+ updated_at: new Date().toISOString(),
});
await updateStudio({
diff --git a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
index 25f0ca88f73..6b202be54c7 100755
--- a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
import { Button, ButtonGroup } from "react-bootstrap";
import { FormattedMessage } from "react-intl";
@@ -13,24 +13,24 @@ import {
} from "src/components/Performers/PerformerSelect";
import { getStashboxBase } from "src/utils/stashbox";
import { ExternalLink } from "src/components/Shared/ExternalLink";
+import { Link } from "react-router-dom";
-interface IPerformerName {
+const PerformerLink: React.FC<{
performer: GQL.ScrapedPerformer | Performer;
- id: string | undefined | null;
- baseURL: string | undefined;
-}
-
-const PerformerName: React.FC = ({
- performer,
- id,
- baseURL,
-}) => {
- const name =
- baseURL && id ? (
- {performer.name}
+ url: string | undefined;
+ internal?: boolean;
+}> = ({ performer, url, internal = false }) => {
+ const name = useMemo(() => {
+ if (!url) return performer.name;
+
+ return internal ? (
+
+ {performer.name}
+
) : (
- performer.name
+ {performer.name}
);
+ }, [url, performer.name, internal]);
return (
<>
@@ -115,10 +115,9 @@ const PerformerResult: React.FC = ({
= ({
@@ -169,10 +168,9 @@ const PerformerResult: React.FC
@@ -33,6 +37,7 @@ export const PerformerPopoverButton: React.FC = ({ performers }) => {
key={performer.id}
performer={performer}
className="d-block"
+ linkType={linkType}
/>
));
diff --git a/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx b/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx
index 14cd701d13a..69195ff407e 100644
--- a/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx
+++ b/ui/v2.5/src/components/Shared/Rating/RatingNumber.tsx
@@ -3,6 +3,7 @@ import { Button } from "react-bootstrap";
import { Icon } from "../Icon";
import { faPencil, faStar } from "@fortawesome/free-solid-svg-icons";
import { useFocusOnce } from "src/utils/focus";
+import { useStopWheelScroll } from "src/utils/form";
export interface IRatingNumberProps {
value: number | null;
@@ -26,6 +27,7 @@ export const RatingNumber: React.FC
+
{filteredStashboxes.map((s, index) => (
+
+