diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
index 62e80e23e..d6519bcd2 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryCreate.tsx
@@ -1,16 +1,39 @@
import React, { useMemo } from "react";
import { FormattedMessage, useIntl } from "react-intl";
-import { useLocation } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
+import * as GQL from "src/core/generated-graphql";
+import { useGalleryCreate } from "src/core/StashService";
+import { useToast } from "src/hooks/Toast";
import { GalleryEditPanel } from "./GalleryEditPanel";
const GalleryCreate: React.FC = () => {
+ const history = useHistory();
const intl = useIntl();
+ const Toast = useToast();
+
const location = useLocation();
const query = useMemo(() => new URLSearchParams(location.search), [location]);
const gallery = {
title: query.get("q") ?? undefined,
};
+ const [createGallery] = useGalleryCreate();
+
+ async function onSave(input: GQL.GalleryCreateInput) {
+ const result = await createGallery({
+ variables: { input },
+ });
+ if (result.data?.galleryCreate) {
+ history.push(`/galleries/${result.data.galleryCreate.id}`);
+ Toast.success({
+ content: intl.formatMessage(
+ { id: "toast.created_entity" },
+ { entity: intl.formatMessage({ id: "gallery" }).toLocaleLowerCase() }
+ ),
+ });
+ }
+ }
+
return (
);
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
index d560127dc..7208971f0 100644
--- a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryEditPanel.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
-import { useHistory, Prompt } from "react-router-dom";
+import { Prompt } from "react-router-dom";
import {
Button,
Dropdown,
@@ -15,8 +15,6 @@ import * as yup from "yup";
import {
queryScrapeGallery,
queryScrapeGalleryURL,
- useGalleryCreate,
- useGalleryUpdate,
useListGalleryScrapers,
mutateReloadScrapers,
} from "src/core/StashService";
@@ -40,21 +38,23 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
import { ConfigurationContext } from "src/hooks/Config";
import isEqual from "lodash-es/isEqual";
import { DateInput } from "src/components/Shared/DateInput";
+import { handleUnsavedChanges } from "src/utils/navigation";
interface IProps {
gallery: Partial;
isVisible: boolean;
+ onSubmit: (input: GQL.GalleryCreateInput) => Promise;
onDelete: () => void;
}
export const GalleryEditPanel: React.FC = ({
gallery,
isVisible,
+ onSubmit,
onDelete,
}) => {
const intl = useIntl();
const Toast = useToast();
- const history = useHistory();
const [scenes, setScenes] = useState<{ id: string; title: string }[]>(
(gallery?.scenes ?? []).map((s) => ({
id: s.id,
@@ -74,9 +74,6 @@ export const GalleryEditPanel: React.FC = ({
// Network state
const [isLoading, setIsLoading] = useState(false);
- const [createGallery] = useGalleryCreate();
- const [updateGallery] = useGalleryUpdate();
-
const titleRequired =
isNew || (gallery?.files?.length === 0 && !gallery?.folder);
@@ -151,7 +148,9 @@ export const GalleryEditPanel: React.FC = ({
useEffect(() => {
if (isVisible) {
Mousetrap.bind("s s", () => {
- formik.handleSubmit();
+ if (formik.dirty) {
+ formik.submitForm();
+ }
});
Mousetrap.bind("d d", () => {
onDelete();
@@ -174,51 +173,11 @@ export const GalleryEditPanel: React.FC = ({
setQueryableScrapers(newQueryableScrapers);
}, [Scrapers]);
- async function onSave(input: GQL.GalleryCreateInput) {
+ async function onSave(input: InputValues) {
setIsLoading(true);
try {
- if (isNew) {
- const result = await createGallery({
- variables: {
- input,
- },
- });
- if (result.data?.galleryCreate) {
- history.push(`/galleries/${result.data.galleryCreate.id}`);
- Toast.success({
- content: intl.formatMessage(
- { id: "toast.created_entity" },
- {
- entity: intl
- .formatMessage({ id: "gallery" })
- .toLocaleLowerCase(),
- }
- ),
- });
- }
- } else {
- const result = await updateGallery({
- variables: {
- input: {
- id: gallery.id!,
- ...input,
- },
- },
- });
- if (result.data?.galleryUpdate) {
- Toast.success({
- content: intl.formatMessage(
- { id: "toast.updated_entity" },
- {
- entity: intl
- .formatMessage({ id: "gallery" })
- .toLocaleLowerCase(),
- }
- ),
- });
- formik.resetForm();
- }
- }
+ await onSubmit(input);
+ formik.resetForm();
} catch (e) {
Toast.error(e);
}
@@ -412,7 +371,7 @@ export const GalleryEditPanel: React.FC = ({
= (props) => {
className="gallery-recommendations"
header={props.header}
link={
-
+
= ({ galleryId }) => {
images.forEach((image, index) => {
let imageData = {
src: image.paths.thumbnail!,
- width: image.files[0].width,
- height: image.files[0].height,
+ width: image.visual_files[0].width,
+ height: image.visual_files[0].height,
tabIndex: index,
key: image.id ?? index,
loading: "lazy",
diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss
index 7aa1bf052..cb88a360e 100644
--- a/ui/v2.5/src/components/Galleries/styles.scss
+++ b/ui/v2.5/src/components/Galleries/styles.scss
@@ -26,6 +26,10 @@
overflow: hidden;
padding: 0;
padding-bottom: 1rem;
+
+ @media (max-width: 576px) {
+ width: 100%;
+ }
}
.card-section {
diff --git a/ui/v2.5/src/components/Help/Manual.tsx b/ui/v2.5/src/components/Help/Manual.tsx
index f9f18fa68..0004325cf 100644
--- a/ui/v2.5/src/components/Help/Manual.tsx
+++ b/ui/v2.5/src/components/Help/Manual.tsx
@@ -6,7 +6,7 @@ import AutoTagging from "src/docs/en/Manual/AutoTagging.md";
import JSONSpec from "src/docs/en/Manual/JSONSpec.md";
import Configuration from "src/docs/en/Manual/Configuration.md";
import Interface from "src/docs/en/Manual/Interface.md";
-import Galleries from "src/docs/en/Manual/Galleries.md";
+import Images from "src/docs/en/Manual/Images.md";
import Scraping from "src/docs/en/Manual/Scraping.md";
import ScraperDevelopment from "src/docs/en/Manual/ScraperDevelopment.md";
import Plugins from "src/docs/en/Manual/Plugins.md";
@@ -88,9 +88,9 @@ export const Manual: React.FC = ({
content: Browsing,
},
{
- key: "Galleries.md",
- title: "Image Galleries",
- content: Galleries,
+ key: "Images.md",
+ title: "Images and Galleries",
+ content: Images,
},
{
key: "Scraping.md",
diff --git a/ui/v2.5/src/components/Help/context.tsx b/ui/v2.5/src/components/Help/context.tsx
index 4034e3fcb..f3cd199d8 100644
--- a/ui/v2.5/src/components/Help/context.tsx
+++ b/ui/v2.5/src/components/Help/context.tsx
@@ -1,4 +1,5 @@
import React, { Suspense, useState } from "react";
+import { Link } from "react-router-dom";
import { lazyComponent } from "src/utils/lazyComponent";
const Manual = lazyComponent(() => import("./Manual"));
@@ -48,14 +49,14 @@ export const ManualLink: React.FC = ({ tab, children }) => {
const { openManual } = React.useContext(ManualStateContext);
return (
- {
openManual(`${tab}.md`);
e.preventDefault();
}}
>
{children}
-
+
);
};
diff --git a/ui/v2.5/src/components/Images/ImageCard.tsx b/ui/v2.5/src/components/Images/ImageCard.tsx
index 50ae8bcc4..28598d417 100644
--- a/ui/v2.5/src/components/Images/ImageCard.tsx
+++ b/ui/v2.5/src/components/Images/ImageCard.tsx
@@ -30,7 +30,10 @@ export const ImageCard: React.FC = (
props: IImageCardProps
) => {
const file = useMemo(
- () => (props.image.files.length > 0 ? props.image.files[0] : undefined),
+ () =>
+ props.image.visual_files.length > 0
+ ? props.image.visual_files[0]
+ : undefined,
[props.image]
);
@@ -138,6 +141,13 @@ export const ImageCard: React.FC = (
return height > width;
}
+ const source =
+ props.image.paths.preview != ""
+ ? props.image.paths.preview ?? ""
+ : props.image.paths.thumbnail ?? "";
+ const video = source.includes("preview");
+ const ImagePreview = video ? "video" : "img";
+
return (
= (
image={
<>
@@ -20,7 +43,12 @@ const GalleryCreate: React.FC = () => {
values={{ entityType: intl.formatMessage({ id: "gallery" }) }}
/>
- {}} />
+ {}}
+ />
- 
{props.onPreview ? (
{props.onPreview ? (
diff --git a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
index eb3d1211c..c52ae22d7 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
@@ -17,6 +17,7 @@ import { Icon } from "src/components/Shared/Icon";
import { Counter } from "src/components/Shared/Counter";
import { useToast } from "src/hooks/Toast";
import * as Mousetrap from "mousetrap";
+import * as GQL from "src/core/generated-graphql";
import { OCounterButton } from "src/components/Scenes/SceneDetails/OCounterButton";
import { OrganizedButton } from "src/components/Scenes/SceneDetails/OrganizedButton";
import { ImageFileInfoPanel } from "./ImageFileInfoPanel";
@@ -25,6 +26,7 @@ import { ImageDetailPanel } from "./ImageDetailPanel";
import { DeleteImagesDialog } from "../DeleteImagesDialog";
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
import { objectPath, objectTitle } from "src/core/files";
+import { isVideo } from "src/utils/visualFile";
interface IImageParams {
id?: string;
@@ -50,8 +52,20 @@ export const Image: React.FC = () => {
const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
+ async function onSave(input: GQL.ImageUpdateInput) {
+ await updateImage({
+ variables: { input },
+ });
+ Toast.success({
+ content: intl.formatMessage(
+ { id: "toast.updated_entity" },
+ { entity: intl.formatMessage({ id: "image" }).toLocaleLowerCase() }
+ ),
+ });
+ }
+
async function onRescan() {
- if (!image || !image.files.length) {
+ if (!image || !image.visual_files.length) {
return;
}
@@ -181,8 +195,8 @@ export const Image: React.FC = () => {
@@ -224,6 +238,7 @@ export const Image: React.FC = () => {
setIsDeleteAlertOpen(true)}
/>
@@ -260,6 +275,7 @@ export const Image: React.FC = () => {
}
const title = objectTitle(image);
+ const ImageView = isVideo(image.visual_files[0]) ? "video" : "img";
return (
@@ -286,8 +302,16 @@ export const Image: React.FC = () => {
{renderTabs()}
- 
diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx
index 96ace1609..9d7e55e9f 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/ImageEditPanel.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage, useIntl } from "react-intl";
import Mousetrap from "mousetrap";
import * as GQL from "src/core/generated-graphql";
import * as yup from "yup";
-import { useImageUpdate } from "src/core/StashService";
import {
PerformerSelect,
TagSelect,
@@ -25,12 +24,14 @@ import { DateInput } from "src/components/Shared/DateInput";
interface IProps {
image: GQL.ImageDataFragment;
isVisible: boolean;
+ onSubmit: (input: GQL.ImageUpdateInput) => Promise;
onDelete: () => void;
}
export const ImageEditPanel: React.FC = ({
image,
isVisible,
+ onSubmit,
onDelete,
}) => {
const intl = useIntl();
@@ -41,8 +42,6 @@ export const ImageEditPanel: React.FC = ({
const { configuration } = React.useContext(ConfigurationContext);
- const [updateImage] = useImageUpdate();
-
const schema = yup.object({
title: yup.string().ensure(),
url: yup.string().ensure(),
@@ -97,7 +96,9 @@ export const ImageEditPanel: React.FC = ({
useEffect(() => {
if (isVisible) {
Mousetrap.bind("s s", () => {
- formik.handleSubmit();
+ if (formik.dirty) {
+ formik.submitForm();
+ }
});
Mousetrap.bind("d d", () => {
onDelete();
@@ -113,23 +114,11 @@ export const ImageEditPanel: React.FC = ({
async function onSave(input: InputValues) {
setIsLoading(true);
try {
- const result = await updateImage({
- variables: {
- input: {
- id: image.id,
- ...input,
- },
- },
+ await onSubmit({
+ id: image.id,
+ ...input,
});
- if (result.data?.imageUpdate) {
- Toast.success({
- content: intl.formatMessage(
- { id: "toast.updated_entity" },
- { entity: intl.formatMessage({ id: "image" }).toLocaleLowerCase() }
- ),
- });
- formik.resetForm();
- }
+ formik.resetForm();
} catch (e) {
Toast.error(e);
}
diff --git a/ui/v2.5/src/components/Images/ImageDetails/ImageFileInfoPanel.tsx b/ui/v2.5/src/components/Images/ImageDetails/ImageFileInfoPanel.tsx
index 026c51dea..2b906c6d5 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/ImageFileInfoPanel.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/ImageFileInfoPanel.tsx
@@ -10,7 +10,7 @@ import TextUtils from "src/utils/text";
import { TextField, URLField } from "src/utils/field";
interface IFileInfoPanelProps {
- file: GQL.ImageFileDataFragment;
+ file: GQL.ImageFileDataFragment | GQL.VideoFileDataFragment;
primary?: boolean;
ofMany?: boolean;
onSetPrimaryFile?: () => void;
@@ -110,17 +110,17 @@ export const ImageFileInfoPanel: React.FC = (
const [loading, setLoading] = useState(false);
const [deletingFile, setDeletingFile] = useState<
- GQL.ImageFileDataFragment | undefined
+ GQL.ImageFileDataFragment | GQL.VideoFileDataFragment | undefined
>();
- if (props.image.files.length === 0) {
+ if (props.image.visual_files.length === 0) {
return <>;
}
- if (props.image.files.length === 1) {
+ if (props.image.visual_files.length === 1) {
return (
<>
-
-
@@ -150,14 +150,14 @@ export const ImageFileInfoPanel: React.FC
-
+
onUnselect(p)} + /> +
+ ))}
+ {excluded.map((p) => (
+ -
+
onUnselect(p)} /> +
+ ))}
+ {objects.map((p) => (
+ -
+ onSelect(p, false)}
+ onKeyDown={keyboardClickHandler(() => onSelect(p, false))}
+ tabIndex={0}
+ >
+ + {!excludingOnly ? includeIcon : excludeIcon} + {p.label} +++ {/* TODO item count */} + {/* {p.id} */} + {canExclude && !includingOnly && !excludingOnly && ( + + )} ++ +
+ ))}
+
-
+
: +
+ - + {formatPenisLength(performer.penis_length)} + {formatCircumcised(performer.circumcised)} + + + )}
+
+ = ({
criteria={criteriaList}
currentCriterion={criterion}
setCriterion={replaceCriterion}
- criterionOptions={criterionOptions}
+ criterionOptions={unpinnedElements}
+ pinnedCriterionOptions={pinnedElements}
optionSelected={optionSelected}
selected={criterion?.criterionOption}
onRemoveCriterion={(c) => removeCriterionString(c)}
+ onTogglePin={(c) => onTogglePinFilter(c)}
/>
{criteria.length > 0 && (
;
+ setCriterion: (c: Criterion) => void;
+}
+
+export const OptionFilter: React.FC = ({
+ criterion,
+ setCriterion,
+}) => {
+ function onSelect(v: string) {
+ const c = cloneDeep(criterion);
+ if (c.value === v) {
+ c.value = "";
+ } else {
+ c.value = v;
+ }
+
+ setCriterion(c);
+ }
+
+ const { options } = criterion.criterionOption;
+
+ return (
+ ;
+ setCriterion: (c: Criterion) => void;
+}
+
+export const OptionListFilter: React.FC = ({
+ criterion,
+ setCriterion,
+}) => {
+ function onSelect(v: string) {
+ const c = cloneDeep(criterion);
+ const cv = c.value as string[];
+ if (cv.includes(v)) {
+ c.value = cv.filter((x) => x !== v);
+ } else {
+ c.value = [...cv, v];
+ }
+
+ setCriterion(c);
+ }
+
+ const { options } = criterion.criterionOption;
+ const value = criterion.value as string[];
+
+ return (
+ ;
- onValueChanged: (value: CriterionValue) => void;
-}
-
-export const OptionsFilter: React.FC = ({
- criterion,
- onValueChanged,
-}) => {
- function onChanged(event: React.ChangeEvent) {
- onValueChanged(event.target.value);
- }
-
- const options = useMemo(() => {
- const ret = criterion.criterionOption.options?.slice() ?? [];
-
- ret.unshift("");
-
- return ret;
- }, [criterion.criterionOption.options]);
-
- return (
-
-
- {options.map((c) => (
-
- ))}
-
-
- );
-};
diff --git a/ui/v2.5/src/components/List/Filters/OptionsListFilter.tsx b/ui/v2.5/src/components/List/Filters/OptionsListFilter.tsx
deleted file mode 100644
index b84cf8bd1..000000000
--- a/ui/v2.5/src/components/List/Filters/OptionsListFilter.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import cloneDeep from "lodash-es/cloneDeep";
-import React from "react";
-import { Form } from "react-bootstrap";
-import {
- CriterionValue,
- Criterion,
-} from "src/models/list-filter/criteria/criterion";
-
-interface IOptionsListFilter {
- criterion: Criterion;
- setCriterion: (c: Criterion) => void;
-}
-
-export const OptionsListFilter: React.FC = ({
- criterion,
- setCriterion,
-}) => {
- function onSelect(v: string) {
- const c = cloneDeep(criterion);
- if (c.value === v) {
- c.value = "";
- } else {
- c.value = v;
- }
-
- setCriterion(c);
- }
-
- const { options } = criterion.criterionOption;
-
- return (
- = ({
+ criterion,
+ setCriterion,
+}) => {
+ return (
+ ;
+ onValueChanged: (value: IPhashDistanceValue) => void;
+}
+
+export const PhashFilter: React.FC = ({
+ criterion,
+ onValueChanged,
+}) => {
+ const intl = useIntl();
+ const { value } = criterion;
+
+ function valueChanged(event: React.ChangeEvent) {
+ onValueChanged({
+ value: event.target.value,
+ distance: criterion.value.distance,
+ });
+ }
+
+ function distanceChanged(event: React.ChangeEvent) {
+ let distance = parseInt(event.target.value);
+ if (distance < 0 || isNaN(distance)) {
+ distance = 0;
+ }
+
+ onValueChanged({
+ distance,
+ value: criterion.value.value,
+ });
+ }
+
+ return (
+ = ({
+ item,
+ excluded = false,
+ onClick,
+}) => {
+ const iconClassName = excluded ? "exclude-icon" : "include-button";
+ const spanClassName = excluded
+ ? "excluded-object-label"
+ : "selected-object-label";
+ const [hovered, setHovered] = useState(false);
+
+ const icon = useMemo(() => {
+ if (!hovered) {
+ return excluded ? faTimesCircle : faCheckCircle;
+ }
+
+ return faTimesCircleRegular;
+ }, [hovered, excluded]);
+
+ function onMouseOver() {
+ setHovered(true);
+ }
+
+ function onMouseOut() {
+ setHovered(false);
+ }
+
+ return (
+ onClick()}
+ onKeyDown={keyboardClickHandler(onClick)}
+ onMouseEnter={() => onMouseOver()}
+ onMouseLeave={() => onMouseOut()}
+ onFocus={() => onMouseOver()}
+ onBlur={() => onMouseOut()}
+ tabIndex={0}
+ >
+ ;
+ canExclude: boolean;
+ queryResults: ILabeledId[];
+ selected: ILabeledId[];
+ excluded: ILabeledId[];
+ onSelect: (value: ILabeledId, exclude: boolean) => void;
+ onUnselect: (value: ILabeledId) => void;
+}
+
+const SelectableFilter: React.FC = ({
+ query,
+ onQueryChange,
+ modifier,
+ inputFocus,
+ canExclude,
+ queryResults,
+ selected,
+ excluded,
+ onSelect,
+ onUnselect,
+}) => {
+ const objects = useMemo(() => {
+ return queryResults.filter(
+ (p) =>
+ selected.find((s) => s.id === p.id) === undefined &&
+ excluded.find((s) => s.id === p.id) === undefined
+ );
+ }, [queryResults, selected, excluded]);
+
+ const includingOnly = modifier == CriterionModifier.Equals;
+ const excludingOnly =
+ modifier == CriterionModifier.Excludes ||
+ modifier == CriterionModifier.NotEquals;
+
+ const includeIcon = > {
+ criterion: T;
+ setCriterion: (criterion: T) => void;
+ useResults: (query: string) => { results: ILabeledId[]; loading: boolean };
+}
+
+export const ObjectsFilter = <
+ T extends Criterion
+>({
+ criterion,
+ setCriterion,
+ useResults,
+}: IObjectsFilter) => {
+ const [query, setQuery] = useState("");
+ const [displayQuery, setDisplayQuery] = useState(query);
+
+ const debouncedSetQuery = useDebouncedSetState(setQuery, 250);
+ const onQueryChange = useCallback(
+ (input: string) => {
+ setDisplayQuery(input);
+ debouncedSetQuery(input);
+ },
+ [debouncedSetQuery, setDisplayQuery]
+ );
+
+ const [queryResults, setQueryResults] = useState([]);
+ const { results, loading: resultsLoading } = useResults(query);
+ useEffect(() => {
+ if (!resultsLoading) {
+ setQueryResults(results);
+ }
+ }, [results, resultsLoading]);
+
+ const inputFocus = useFocus();
+ const [, setInputFocus] = inputFocus;
+
+ function onSelect(value: ILabeledId, newExclude: boolean) {
+ let newCriterion: T = cloneDeep(criterion);
+
+ if (newExclude) {
+ if (newCriterion.value.excluded) {
+ newCriterion.value.excluded.push(value);
+ } else {
+ newCriterion.value.excluded = [value];
+ }
+ } else {
+ newCriterion.value.items.push(value);
+ }
+
+ setCriterion(newCriterion);
+
+ // reset filter query after selecting
+ debouncedSetQuery.cancel();
+ setQuery("");
+ setDisplayQuery("");
+
+ // focus the input box
+ setInputFocus();
+ }
+
+ const onUnselect = useCallback(
+ (value: ILabeledId) => {
+ if (!criterion) return;
+
+ let newCriterion: T = cloneDeep(criterion);
+
+ newCriterion.value.items = criterion.value.items.filter(
+ (v) => v.id !== value.id
+ );
+ newCriterion.value.excluded = criterion.value.excluded.filter(
+ (v) => v.id !== value.id
+ );
+
+ setCriterion(newCriterion);
+
+ // focus the input box
+ setInputFocus();
+ },
+ [criterion, setCriterion, setInputFocus]
+ );
+
+ const sortedSelected = useMemo(() => {
+ const ret = criterion.value.items.slice();
+ ret.sort((a, b) => a.label.localeCompare(b.label));
+ return ret;
+ }, [criterion]);
+
+ const sortedExcluded = useMemo(() => {
+ if (!criterion.value.excluded) return [];
+ const ret = criterion.value.excluded.slice();
+ ret.sort((a, b) => a.label.localeCompare(b.label));
+ return ret;
+ }, [criterion]);
+
+ // if excludes is not a valid modifierOption then we can use `value.excluded`
+ const canExclude =
+ criterion.criterionOption.modifierOptions.find(
+ (m) => m === CriterionModifier.Excludes
+ ) === undefined;
+
+ return (
+
+ extends IObjectsFilter {}
+
+export const HierarchicalObjectsFilter = <
+ T extends IHierarchicalLabeledIdCriterion
+>(
+ props: IHierarchicalObjectsFilter
+) => {
+ const intl = useIntl();
+ const { criterion, setCriterion } = props;
+
+ const messages = defineMessages({
+ studio_depth: {
+ id: "studio_depth",
+ defaultMessage: "Levels (empty for all)",
+ },
+ });
+
+ function onDepthChanged(depth: number) {
+ let newCriterion: T = cloneDeep(criterion);
+ newCriterion.value.depth = depth;
+ setCriterion(newCriterion);
+ }
+
+ function criterionOptionTypeToIncludeID(): string {
+ if (criterion.criterionOption.type === "studios") {
+ return "include-sub-studios";
+ }
+ if (criterion.criterionOption.type === "childTags") {
+ return "include-parent-tags";
+ }
+ return "include-sub-tags";
+ }
+
+ function criterionOptionTypeToIncludeUIString(): MessageDescriptor {
+ const optionType =
+ criterion.criterionOption.type === "studios"
+ ? "include_sub_studios"
+ : criterion.criterionOption.type === "childTags"
+ ? "include_parent_tags"
+ : "include_sub_tags";
+ return {
+ id: optionType,
+ };
+ }
+
+ return (
+
+ );
+};
diff --git a/ui/v2.5/src/components/List/Filters/StudiosFilter.tsx b/ui/v2.5/src/components/List/Filters/StudiosFilter.tsx
new file mode 100644
index 000000000..cb10596ef
--- /dev/null
+++ b/ui/v2.5/src/components/List/Filters/StudiosFilter.tsx
@@ -0,0 +1,48 @@
+import React, { useMemo } from "react";
+import { useFindStudiosQuery } from "src/core/generated-graphql";
+import { HierarchicalObjectsFilter } from "./SelectableFilter";
+import { StudiosCriterion } from "src/models/list-filter/criteria/studios";
+
+interface IStudiosFilter {
+ criterion: StudiosCriterion;
+ setCriterion: (c: StudiosCriterion) => void;
+}
+
+function useStudioQuery(query: string) {
+ const { data, loading } = useFindStudiosQuery({
+ variables: {
+ filter: {
+ q: query,
+ per_page: 200,
+ },
+ },
+ });
+
+ const results = useMemo(
+ () =>
+ data?.findStudios.studios.map((p) => {
+ return {
+ id: p.id,
+ label: p.name,
+ };
+ }) ?? [],
+ [data]
+ );
+
+ return { results, loading };
+}
+
+const StudiosFilter: React.FC = ({
+ criterion,
+ setCriterion,
+}) => {
+ return (
+ = ({ criterion, setCriterion }) => {
+ return (
+ ({
// set up hotkeys
useEffect(() => {
- Mousetrap.bind("f", () => setShowEditFilter(true));
+ Mousetrap.bind("f", (e) => {
+ setShowEditFilter(true);
+ // prevent default behavior of typing f in a text field
+ // otherwise the filter dialog closes, the query field is focused and
+ // f is typed.
+ e.preventDefault();
+ });
return () => {
Mousetrap.unbind("f");
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index c8fcb4bc4..1c6a390f4 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -108,7 +108,7 @@ input[type="range"].zoom-slider {
}
}
-.add-filter-dialog .rating-stars {
+.edit-filter-dialog .rating-stars {
font-size: 1.3em;
margin-left: 0.25em;
}
@@ -118,6 +118,15 @@ input[type="range"].zoom-slider {
}
.edit-filter-dialog {
+ .modal-header {
+ align-items: center;
+ padding: 0.5rem 1rem;
+
+ .search-input {
+ width: auto;
+ }
+ }
+
.modal-body {
padding-left: 0;
padding-right: 0;
@@ -134,6 +143,10 @@ input[type="range"].zoom-slider {
max-height: 550px;
overflow-y: auto;
+ .pinned-criterion-divider {
+ padding-bottom: 2.5rem;
+ }
+
.card {
border: 1px solid rgb(16 22 26 / 40%);
box-shadow: none;
@@ -144,18 +157,41 @@ input[type="range"].zoom-slider {
margin-left: 0;
}
- .card-header {
+ .filter-item-header {
+ background-color: $card-cap-bg;
+ border: none;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+ color: inherit;
cursor: pointer;
display: flex;
- justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0.75rem 1.25rem;
+
+ &:focus {
+ border-color: $primary;
+ border-radius: calc(0.375rem - 1px);
+ box-shadow: inset 0 0 0 0.1rem rgba(19, 124, 189);
+ outline: 0;
+ }
+ }
+ }
+
+ .filter-item-header .btn {
+ border: 0;
+ padding-bottom: 0;
+ padding-top: 0;
+ }
+
+ .pin-criterion-button {
+ color: $text_color;
+
+ &:hover svg {
+ transform: rotate(0);
}
}
.remove-criterion-button {
- border: 0;
color: $danger;
- padding-bottom: 0;
- padding-top: 0;
}
}
@@ -169,11 +205,33 @@ input[type="range"].zoom-slider {
}
}
-.modifier-selector {
- margin-bottom: 1rem;
+.modifier-options {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
- // to accommodate for caret
- padding-right: 2rem;
+.modifier-options .modifier-option {
+ background-color: $secondary;
+ border: none;
+ border-radius: 10rem;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 100%;
+ font-weight: 700;
+ line-height: 1;
+ margin-bottom: 0.5rem;
+ margin-right: 0.25rem;
+ padding: 0.25em 0.6em;
+ text-align: center;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ vertical-align: baseline;
+ white-space: nowrap;
+
+ &.selected {
+ background-color: $primary;
+ }
}
.filter-tags .clear-all-button {
@@ -196,3 +254,108 @@ input[type="range"].zoom-slider {
z-index: 2;
}
}
+
+.filter-visible-button {
+ padding-left: 0.3rem;
+ padding-right: 0.3rem;
+
+ &:focus:not(.active):not(:hover) {
+ background: none;
+ }
+
+ &:focus,
+ &.active:focus {
+ box-shadow: none;
+ }
+}
+
+.selectable-filter ul {
+ list-style-type: none;
+ margin-top: 0.5rem;
+ max-height: 300px;
+ overflow-y: auto;
+ // to prevent unnecessary vertical scrollbar
+ padding-bottom: 0.15rem;
+ padding-inline-start: 0;
+
+ .unselected-object {
+ opacity: 0.8;
+ }
+
+ .selected-object,
+ .excluded-object,
+ .unselected-object {
+ cursor: pointer;
+ height: 2em;
+ margin-bottom: 0.25rem;
+
+ a {
+ align-items: center;
+ display: flex;
+ height: 2em;
+ justify-content: space-between;
+ outline: none;
+
+ &:hover,
+ &:focus-visible {
+ background-color: rgba(138, 155, 168, 0.15);
+ }
+
+ .selected-object-label,
+ .excluded-object-label {
+ font-size: 16px;
+ }
+ }
+
+ .include-button {
+ color: $success;
+ }
+
+ .exclude-icon {
+ color: $danger;
+ }
+
+ .exclude-button {
+ align-items: center;
+ display: flex;
+ margin-left: 0.25rem;
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+
+ .exclude-button-text {
+ color: $danger;
+ display: none;
+ font-size: 12px;
+ font-weight: 600;
+ }
+
+ &:hover {
+ background-color: inherit;
+ }
+
+ &:hover .exclude-button-text,
+ &:focus .exclude-button-text {
+ display: inline;
+ }
+ }
+
+ .object-count {
+ color: $text-muted;
+ font-size: 12px;
+ }
+ }
+
+ .selected-object:hover,
+ .selected-object a:focus-visible,
+ .excluded-object:hover,
+ .excluded-object a:focus-visible {
+ .include-button,
+ .exclude-icon {
+ color: #fff;
+ }
+ }
+}
+
+.tilted {
+ transform: rotate(45deg);
+}
diff --git a/ui/v2.5/src/components/MainNavbar.tsx b/ui/v2.5/src/components/MainNavbar.tsx
index 85eea19c0..34389e0cf 100644
--- a/ui/v2.5/src/components/MainNavbar.tsx
+++ b/ui/v2.5/src/components/MainNavbar.tsx
@@ -32,6 +32,7 @@ import {
faUser,
faVideo,
} from "@fortawesome/free-solid-svg-icons";
+import { baseURL } from "src/core/createClient";
interface IMenuItem {
name: string;
@@ -256,7 +257,7 @@ export const MainNavbar: React.FC = () => {
return (
);
}
}
@@ -184,7 +242,7 @@ const MoviePage: React.FC = ({ movie }) => {
objectName={movie.name}
isNew={false}
isEditing={isEditing}
- onToggleEdit={onToggleEdit}
+ onToggleEdit={() => toggleEditing()}
onSave={() => {}}
onImageChange={() => {}}
onDelete={onDelete}
@@ -194,7 +252,7 @@ const MoviePage: React.FC = ({ movie }) => {
toggleEditing()}
onDelete={onDelete}
setFrontImage={setFrontImage}
setBackImage={setBackImage}
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx
index 36b6ea5bd..973fe89bd 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieCreate.tsx
@@ -2,15 +2,17 @@ import React, { useMemo, useState } from "react";
import * as GQL from "src/core/generated-graphql";
import { useMovieCreate } from "src/core/StashService";
import { useHistory, useLocation } from "react-router-dom";
+import { useIntl } from "react-intl";
import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
import { useToast } from "src/hooks/Toast";
import { MovieEditPanel } from "./MovieEditPanel";
const MovieCreate: React.FC = () => {
const history = useHistory();
- const location = useLocation();
+ const intl = useIntl();
const Toast = useToast();
+ const location = useLocation();
const query = useMemo(() => new URLSearchParams(location.search), [location]);
const movie = {
name: query.get("q") ?? undefined,
@@ -24,15 +26,17 @@ const MovieCreate: React.FC = () => {
const [createMovie] = useMovieCreate();
async function onSave(input: GQL.MovieCreateInput) {
- try {
- const result = await createMovie({
- variables: input,
+ const result = await createMovie({
+ variables: input,
+ });
+ if (result.data?.movieCreate?.id) {
+ history.push(`/movies/${result.data.movieCreate.id}`);
+ Toast.success({
+ content: intl.formatMessage(
+ { id: "toast.created_entity" },
+ { entity: intl.formatMessage({ id: "gallery" }).toLocaleLowerCase() }
+ ),
});
- if (result.data?.movieCreate?.id) {
- history.push(`/movies/${result.data.movieCreate.id}`);
- }
- } catch (e) {
- Toast.error(e);
}
}
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
index c2c51794c..561cab69d 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
@@ -25,10 +25,11 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
import { ConfigurationContext } from "src/hooks/Config";
import isEqual from "lodash-es/isEqual";
import { DateInput } from "src/components/Shared/DateInput";
+import { handleUnsavedChanges } from "src/utils/navigation";
interface IMovieEditPanel {
movie: Partial;
- onSubmit: (movie: GQL.MovieCreateInput) => void;
+ onSubmit: (movie: GQL.MovieCreateInput) => Promise;
onCancel: () => void;
onDelete: () => void;
setFrontImage: (image?: string | null) => void;
@@ -103,7 +104,7 @@ export const MovieEditPanel: React.FC = ({
initialValues,
enableReinitialize: true,
validationSchema: schema,
- onSubmit: (values) => onSubmit(values),
+ onSubmit: (values) => onSave(values),
});
function setRating(v: number) {
@@ -116,19 +117,17 @@ export const MovieEditPanel: React.FC = ({
setRating
);
- function onCancelEditing() {
- setFrontImage(undefined);
- setBackImage(undefined);
- onCancel?.();
- }
-
// set up hotkeys
useEffect(() => {
// Mousetrap.bind("u", (e) => {
// setStudioFocus()
// e.preventDefault();
// });
- Mousetrap.bind("s s", () => formik.handleSubmit());
+ Mousetrap.bind("s s", () => {
+ if (formik.dirty) {
+ formik.submitForm();
+ }
+ });
return () => {
// Mousetrap.unbind("u");
@@ -182,6 +181,17 @@ export const MovieEditPanel: React.FC = ({
}
}
+ async function onSave(input: InputValues) {
+ setIsLoading(true);
+ try {
+ await onSubmit(input);
+ formik.resetForm();
+ } catch (e) {
+ Toast.error(e);
+ }
+ setIsLoading(false);
+ }
+
async function onScrapeMovieURL() {
const { url } = formik.values;
if (!url) return;
@@ -373,7 +383,8 @@ export const MovieEditPanel: React.FC = ({
// Check if it's a redirect after movie creation
if (action === "PUSH" && location.pathname.startsWith("/movies/"))
return true;
- return intl.formatMessage({ id: "dialogs.unsaved_changes" });
+
+ return handleUnsavedChanges(intl, "movies", movie.id)(location);
}}
/>
@@ -488,7 +499,7 @@ export const MovieEditPanel: React.FC = ({
objectName={movie?.name ?? intl.formatMessage({ id: "movie" })}
isNew={isNew}
isEditing={isEditing}
- onToggleEdit={onCancelEditing}
+ onToggleEdit={onCancel}
onSave={formik.handleSubmit}
saveDisabled={(!isNew && !formik.dirty) || !isEqual(formik.errors, {})}
onImageChange={onFrontImageChange}
diff --git a/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx b/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx
index 34d5119ff..b6c652a9a 100644
--- a/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx
+++ b/ui/v2.5/src/components/Movies/MovieRecommendationRow.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { Link } from "react-router-dom";
import { useFindMovies } from "src/core/StashService";
import Slider from "@ant-design/react-slick";
import { MovieCard } from "./MovieCard";
@@ -26,9 +27,9 @@ export const MovieRecommendationRow: React.FC = (props: IProps) => {
className="movie-recommendations"
header={props.header}
link={
-
+
= (
useState({});
// weight needs conversion to/from number
const [weight, setWeight] = useState();
+ const [penis_length, setPenisLength] = useState();
const [updateInput, setUpdateInput] = useState(
{}
);
const genderOptions = [""].concat(genderStrings);
+ const circumcisedOptions = [""].concat(circumcisedStrings);
const [updatePerformers] = useBulkPerformerUpdate(getPerformerInput());
@@ -100,11 +109,19 @@ export const EditPerformersDialog: React.FC = (
updateInput.gender,
aggregateState.gender
);
+ performerInput.circumcised = getAggregateInputValue(
+ updateInput.circumcised,
+ aggregateState.circumcised
+ );
if (weight !== undefined) {
performerInput.weight = parseFloat(weight);
}
+ if (penis_length !== undefined) {
+ performerInput.penis_length = parseFloat(penis_length);
+ }
+
return performerInput;
}
@@ -135,6 +152,7 @@ export const EditPerformersDialog: React.FC = (
const state = props.selected;
let updateTagIds: string[] = [];
let updateWeight: string | undefined | null = undefined;
+ let updatePenisLength: string | undefined | null = undefined;
let first = true;
state.forEach((performer: GQL.SlimPerformerDataFragment) => {
@@ -151,6 +169,16 @@ export const EditPerformersDialog: React.FC = (
: performer.weight;
updateWeight = getAggregateState(updateWeight, thisWeight, first);
+ const thisPenisLength =
+ performer.penis_length !== undefined && performer.penis_length !== null
+ ? performer.penis_length.toString()
+ : performer.penis_length;
+ updatePenisLength = getAggregateState(
+ updatePenisLength,
+ thisPenisLength,
+ first
+ );
+
first = false;
});
@@ -270,6 +298,32 @@ export const EditPerformersDialog: React.FC = (
{renderTextField("measurements", updateInput.measurements, (v) =>
setUpdateField({ measurements: v })
)}
+ {renderTextField("penis_length", penis_length, (v) =>
+ setPenisLength(v)
+ )}
+
+
+
+
+
+ setUpdateField({
+ circumcised: stringToCircumcised(event.currentTarget.value),
+ })
+ }
+ >
+ {circumcisedOptions.map((opt) => (
+
+ ))}
+
+
+
{renderTextField("fake_tits", updateInput.fake_tits, (v) =>
setUpdateField({ fake_tits: v })
)}
diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx
index f11f96dbe..c34b184a5 100644
--- a/ui/v2.5/src/components/Performers/PerformerCard.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx
@@ -6,6 +6,7 @@ import NavUtils from "src/utils/navigation";
import TextUtils from "src/utils/text";
import { GridCard } from "../Shared/GridCard";
import { CountryFlag } from "../Shared/CountryFlag";
+import { SweatDrops } from "../Shared/SweatDrops";
import { HoverPopover } from "../Shared/HoverPopover";
import { Icon } from "../Shared/Icon";
import { TagLink } from "../Shared/TagLink";
@@ -20,12 +21,14 @@ import { faHeart, faTag } from "@fortawesome/free-solid-svg-icons";
import { RatingBanner } from "../Shared/RatingBanner";
import cx from "classnames";
import { usePerformerUpdate } from "src/core/StashService";
+import { ILabeledId } from "src/models/list-filter/types";
export interface IPerformerCardExtraCriteria {
- scenes: Criterion[];
- images: Criterion[];
- galleries: Criterion[];
- movies: Criterion[];
+ scenes?: Criterion[];
+ images?: Criterion[];
+ galleries?: Criterion[];
+ movies?: Criterion[];
+ performer?: ILabeledId;
}
interface IPerformerCardProps {
@@ -103,7 +106,11 @@ export const PerformerCard: React.FC = ({
className="scene-count"
type="scene"
count={performer.scene_count}
- url={NavUtils.makePerformerScenesUrl(performer, extraCriteria?.scenes)}
+ url={NavUtils.makePerformerScenesUrl(
+ performer,
+ extraCriteria?.performer,
+ extraCriteria?.scenes
+ )}
/>
);
}
@@ -116,7 +123,11 @@ export const PerformerCard: React.FC = ({
className="image-count"
type="image"
count={performer.image_count}
- url={NavUtils.makePerformerImagesUrl(performer, extraCriteria?.images)}
+ url={NavUtils.makePerformerImagesUrl(
+ performer,
+ extraCriteria?.performer,
+ extraCriteria?.images
+ )}
/>
);
}
@@ -131,12 +142,28 @@ export const PerformerCard: React.FC = ({
count={performer.gallery_count}
url={NavUtils.makePerformerGalleriesUrl(
performer,
+ extraCriteria?.performer,
extraCriteria?.galleries
)}
/>
);
}
+ function maybeRenderOCounter() {
+ if (!performer.o_counter) return;
+
+ return (
+ = ({
className="movie-count"
type="movie"
count={performer.movie_count}
- url={NavUtils.makePerformerMoviesUrl(performer, extraCriteria?.movies)}
+ url={NavUtils.makePerformerMoviesUrl(
+ performer,
+ extraCriteria?.performer,
+ extraCriteria?.movies
+ )}
/>
);
}
@@ -173,6 +204,7 @@ export const PerformerCard: React.FC = ({
performer.image_count ||
performer.gallery_count ||
performer.tags.length > 0 ||
+ performer.o_counter ||
performer.movie_count
) {
return (
@@ -184,6 +216,7 @@ export const PerformerCard: React.FC = ({
{maybeRenderImagesPopoverButton()}
{maybeRenderGalleriesPopoverButton()}
{maybeRenderTagPopoverButton()}
+ {maybeRenderOCounter()}
);
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
index 36b288e9a..a024124c8 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -28,10 +28,16 @@ import { PerformerScenesPanel } from "./PerformerScenesPanel";
import { PerformerGalleriesPanel } from "./PerformerGalleriesPanel";
import { PerformerMoviesPanel } from "./PerformerMoviesPanel";
import { PerformerImagesPanel } from "./PerformerImagesPanel";
+import { PerformerAppearsWithPanel } from "./performerAppearsWithPanel";
import { PerformerEditPanel } from "./PerformerEditPanel";
import { PerformerSubmitButton } from "./PerformerSubmitButton";
import GenderIcon from "../GenderIcon";
-import { faHeart, faLink } from "@fortawesome/free-solid-svg-icons";
+import {
+ faHeart,
+ faLink,
+ faChevronRight,
+ faChevronLeft,
+} from "@fortawesome/free-solid-svg-icons";
import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
import { IUIConfig } from "src/core/config";
import { useRatingKeybinds } from "src/hooks/keybinds";
@@ -60,13 +66,20 @@ const PerformerPage: React.FC = ({ performer }) => {
const [image, setImage] = useState();
const [encodingImage, setEncodingImage] = useState(false);
- // if undefined then get the existing image
- // if null then get the default (no) image
- // otherwise get the set image
- const activeImage =
- image === undefined
- ? performer.image_path ?? ""
- : image ?? `${performer.image_path}&default=true`;
+ const activeImage = useMemo(() => {
+ const performerImage = performer.image_path;
+ if (isEditing) {
+ if (image === null && performerImage) {
+ const performerImageURL = new URL(performerImage);
+ performerImageURL.searchParams.set("default", "true");
+ return performerImageURL.toString();
+ } else if (image) {
+ return image;
+ }
+ }
+ return performerImage;
+ }, [image, isEditing, performer.image_path]);
+
const lightboxImages = useMemo(
() => [{ paths: { thumbnail: activeImage, image: activeImage } }],
[activeImage]
@@ -83,7 +96,8 @@ const PerformerPage: React.FC = ({ performer }) => {
tab === "scenes" ||
tab === "galleries" ||
tab === "images" ||
- tab === "movies"
+ tab === "movies" ||
+ tab == "appearswith"
? tab
: "details";
const setActiveTabKey = (newTab: string | null) => {
@@ -113,7 +127,7 @@ const PerformerPage: React.FC = ({ performer }) => {
// set up hotkeys
useEffect(() => {
Mousetrap.bind("a", () => setActiveTabKey("details"));
- Mousetrap.bind("e", () => setIsEditing(!isEditing));
+ Mousetrap.bind("e", () => toggleEditing());
Mousetrap.bind("c", () => setActiveTabKey("scenes"));
Mousetrap.bind("g", () => setActiveTabKey("galleries"));
Mousetrap.bind("m", () => setActiveTabKey("movies"));
@@ -130,6 +144,24 @@ const PerformerPage: React.FC = ({ performer }) => {
};
});
+ async function onSave(input: GQL.PerformerCreateInput) {
+ await updatePerformer({
+ variables: {
+ input: {
+ id: performer.id,
+ ...input,
+ },
+ },
+ });
+ toggleEditing(false);
+ Toast.success({
+ content: intl.formatMessage(
+ { id: "toast.updated_entity" },
+ { entity: intl.formatMessage({ id: "performer" }).toLocaleLowerCase() }
+ ),
+ });
+ }
+
async function onDelete() {
try {
await deletePerformer({ variables: { id: performer.id } });
@@ -141,6 +173,24 @@ const PerformerPage: React.FC = ({ performer }) => {
history.push("/performers");
}
+ function toggleEditing(value?: boolean) {
+ if (value !== undefined) {
+ setIsEditing(value);
+ } else {
+ setIsEditing((e) => !e);
+ }
+ setImage(undefined);
+ }
+
+ function renderImage() {
+ if (activeImage) {
+ return (
+
+ );
+ }
+ }
const renderTabs = () => (
= ({ performer }) => {
objectName={
performer?.name ?? intl.formatMessage({ id: "performer" })
}
- onToggleEdit={() => {
- setIsEditing(!isEditing);
- }}
+ onToggleEdit={() => toggleEditing()}
onDelete={onDelete}
onAutoTag={onAutoTag}
isNew={false}
@@ -244,6 +292,23 @@ const PerformerPage: React.FC = ({ performer }) => {
performer={performer}
/>
+
+ {intl.formatMessage({ id: "appears_with" })}
+
+ }
+ >
+ = ({ performer }) => {
setIsEditing(false)}
+ onSubmit={onSave}
+ onCancel={() => toggleEditing()}
setImage={setImage}
setEncodingImage={setEncodingImage}
/>
@@ -384,8 +450,8 @@ const PerformerPage: React.FC = ({ performer }) => {
/>
);
- function getCollapseButtonText() {
- return collapsed ? ">" : "<";
+ function getCollapseButtonIcon() {
+ return collapsed ? faChevronRight : faChevronLeft;
}
return (
@@ -402,18 +468,12 @@ const PerformerPage: React.FC = ({ performer }) => {
{encodingImage ? (
diff --git a/ui/v2.5/src/components/List/Filters/BooleanFilter.tsx b/ui/v2.5/src/components/List/Filters/BooleanFilter.tsx
index 0a04a4fc6..e9e2da084 100644
--- a/ui/v2.5/src/components/List/Filters/BooleanFilter.tsx
+++ b/ui/v2.5/src/components/List/Filters/BooleanFilter.tsx
@@ -30,14 +30,14 @@ export const BooleanFilter: React.FC = ({
id={`${criterion.getId()}-true`}
onChange={() => onSelect(true)}
checked={criterion.value === "true"}
- type="checkbox"
+ type="radio"
label={ onSelect(false)}
checked={criterion.value === "false"}
- type="checkbox"
+ type="radio"
label={
diff --git a/ui/v2.5/src/components/List/Filters/OptionFilter.tsx b/ui/v2.5/src/components/List/Filters/OptionFilter.tsx
new file mode 100644
index 000000000..dad0e38cc
--- /dev/null
+++ b/ui/v2.5/src/components/List/Filters/OptionFilter.tsx
@@ -0,0 +1,85 @@
+import cloneDeep from "lodash-es/cloneDeep";
+import React from "react";
+import { Form } from "react-bootstrap";
+import {
+ CriterionValue,
+ Criterion,
+} from "src/models/list-filter/criteria/criterion";
+
+interface IOptionsFilter {
+ criterion: Criterion
+ {options?.map((o) => (
+ onSelect(o.toString())}
+ checked={criterion.value === o.toString()}
+ type="radio"
+ label={o.toString()}
+ />
+ ))}
+
+ );
+};
+
+interface IOptionsListFilter {
+ criterion: Criterion
+ {options?.map((o) => (
+ onSelect(o.toString())}
+ checked={value.includes(o.toString())}
+ type="checkbox"
+ label={o.toString()}
+ />
+ ))}
+
+ );
+};
diff --git a/ui/v2.5/src/components/List/Filters/OptionsFilter.tsx b/ui/v2.5/src/components/List/Filters/OptionsFilter.tsx
deleted file mode 100644
index 2f6f40bdc..000000000
--- a/ui/v2.5/src/components/List/Filters/OptionsFilter.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useMemo } from "react";
-import { Form } from "react-bootstrap";
-import {
- Criterion,
- CriterionValue,
-} from "../../../models/list-filter/criteria/criterion";
-
-interface IOptionsFilterProps {
- criterion: Criterion
- {options?.map((o) => (
- onSelect(o.toString())}
- checked={criterion.value === o.toString()}
- type="checkbox"
- label={o.toString()}
- />
- ))}
-
- );
-};
diff --git a/ui/v2.5/src/components/List/Filters/PerformersFilter.tsx b/ui/v2.5/src/components/List/Filters/PerformersFilter.tsx
new file mode 100644
index 000000000..483cb7400
--- /dev/null
+++ b/ui/v2.5/src/components/List/Filters/PerformersFilter.tsx
@@ -0,0 +1,48 @@
+import React, { useMemo } from "react";
+import { PerformersCriterion } from "src/models/list-filter/criteria/performers";
+import { useFindPerformersQuery } from "src/core/generated-graphql";
+import { ObjectsFilter } from "./SelectableFilter";
+
+interface IPerformersFilter {
+ criterion: PerformersCriterion;
+ setCriterion: (c: PerformersCriterion) => void;
+}
+
+function usePerformerQuery(query: string) {
+ const { data, loading } = useFindPerformersQuery({
+ variables: {
+ filter: {
+ q: query,
+ per_page: 200,
+ },
+ },
+ });
+
+ const results = useMemo(
+ () =>
+ data?.findPerformers.performers.map((p) => {
+ return {
+ id: p.id,
+ label: p.name,
+ };
+ }) ?? [],
+ [data]
+ );
+
+ return { results, loading };
+}
+
+const PerformersFilter: React.FC
+
+
+ {criterion.modifier !== CriterionModifier.IsNull &&
+ criterion.modifier !== CriterionModifier.NotNull && (
+
+
+ )}
+
+ );
+};
diff --git a/ui/v2.5/src/components/List/Filters/SelectableFilter.tsx b/ui/v2.5/src/components/List/Filters/SelectableFilter.tsx
new file mode 100644
index 000000000..2c13eb57e
--- /dev/null
+++ b/ui/v2.5/src/components/List/Filters/SelectableFilter.tsx
@@ -0,0 +1,377 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Button, Form } from "react-bootstrap";
+import { Icon } from "src/components/Shared/Icon";
+import {
+ faCheckCircle,
+ faMinus,
+ faPlus,
+ faTimesCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import { faTimesCircle as faTimesCircleRegular } from "@fortawesome/free-regular-svg-icons";
+import { ClearableInput } from "src/components/Shared/ClearableInput";
+import {
+ IHierarchicalLabelValue,
+ ILabeledId,
+ ILabeledValueListValue,
+} from "src/models/list-filter/types";
+import { cloneDeep } from "lodash-es";
+import {
+ Criterion,
+ IHierarchicalLabeledIdCriterion,
+} from "src/models/list-filter/criteria/criterion";
+import { defineMessages, MessageDescriptor, useIntl } from "react-intl";
+import { CriterionModifier } from "src/core/generated-graphql";
+import { keyboardClickHandler } from "src/utils/keyboard";
+import { useDebouncedSetState } from "src/hooks/debounce";
+import useFocus from "src/utils/focus";
+
+interface ISelectedItem {
+ item: ILabeledId;
+ excluded?: boolean;
+ onClick: () => void;
+}
+
+const SelectedItem: React.FC
+
+
+
+ );
+};
+
+interface ISelectableFilter {
+ query: string;
+ onQueryChange: (query: string) => void;
+ modifier: CriterionModifier;
+ inputFocus: ReturnType
+ onQueryChange(v)}
+ />
+
+ );
+};
+
+interface IObjectsFilter-
+ {selected.map((p) => (
+
+
+
+ );
+ }
+
function maybeRenderTagPopoverButton() {
if (performer.tags.length <= 0) return;
@@ -162,7 +189,11 @@ export const PerformerCard: React.FC
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx
index 2f3e32b2e..26b3f88f0 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerCreate.tsx
@@ -2,9 +2,16 @@ import React, { useMemo, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
import { PerformerEditPanel } from "./PerformerEditPanel";
-import { useLocation } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
+import { useToast } from "src/hooks/Toast";
+import * as GQL from "src/core/generated-graphql";
+import { usePerformerCreate } from "src/core/StashService";
const PerformerCreate: React.FC = () => {
+ const Toast = useToast();
+ const history = useHistory();
+ const intl = useIntl();
+
const [image, setImage] = useState();
const [encodingImage, setEncodingImage] = useState(false);
@@ -14,7 +21,24 @@ const PerformerCreate: React.FC = () => {
name: query.get("q") ?? undefined,
};
- const intl = useIntl();
+ const [createPerformer] = usePerformerCreate();
+
+ async function onSave(input: GQL.PerformerCreateInput) {
+ const result = await createPerformer({
+ variables: { input },
+ });
+ if (result.data?.performerCreate) {
+ history.push(`/performers/${result.data.performerCreate.id}`);
+ Toast.success({
+ content: intl.formatMessage(
+ { id: "toast.created_entity" },
+ {
+ entity: intl.formatMessage({ id: "performer" }).toLocaleLowerCase(),
+ }
+ ),
+ });
+ }
+ }
function renderPerformerImage() {
if (encodingImage) {
@@ -46,6 +70,7 @@ const PerformerCreate: React.FC = () => {
= ({
);
};
+ const formatPenisLength = (penis_length?: number | null) => {
+ if (!penis_length) {
+ return "";
+ }
+
+ const inches = cmToInches(penis_length);
+
+ return (
+
+
+ {intl.formatNumber(penis_length, {
+ style: "unit",
+ unit: "centimeter",
+ unitDisplay: "short",
+ maximumFractionDigits: 2,
+ })}
+
+
+ {intl.formatNumber(inches, {
+ style: "unit",
+ unit: "inch",
+ unitDisplay: "narrow",
+ maximumFractionDigits: 2,
+ })}
+
+
+ );
+ };
+
+ const formatCircumcised = (circumcised?: GQL.CircumisedEnum | null) => {
+ if (!circumcised) {
+ return "";
+ }
+
+ return (
+
+ {intl.formatMessage({
+ id: "circumcised_types." + performer.circumcised,
+ })}
+
+ );
+ };
+
return (
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneScrapeDialog.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneScrapeDialog.tsx
index 953b24b64..cf658200a 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneScrapeDialog.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneScrapeDialog.tsx
@@ -521,7 +521,7 @@ export const SceneScrapeDialog: React.FC
{!isNew && onCancel ? (
-
= {
+ [VRType.Spherical]: "360",
+ [VRType.Off]: "NONE",
+};
+
+function isVrDevice() {
+ return navigator.userAgent.match(/oculusbrowser|\svr\s/i);
+}
+
+class VRMenuItem extends videojs.getComponent("MenuItem") {
+ public type: VRType;
+ public isSelected = false;
+
+ constructor(parent: VRMenuButton, type: VRType) {
+ const options: videojs.MenuItemOptions = {};
+ options.selectable = true;
+ options.multiSelectable = false;
+ options.label = type;
+
+ super(parent.player(), options);
+
+ this.type = type;
+
+ this.addClass("vjs-source-menu-item");
+ }
+
+ selected(selected: boolean): void {
+ super.selected(selected);
+ this.isSelected = selected;
+ }
+
+ handleClick() {
+ if (this.isSelected) return;
+
+ this.trigger("selected");
+ }
+}
+
+class VRMenuButton extends videojs.getComponent("MenuButton") {
+ private items: VRMenuItem[] = [];
+ private selectedType: VRType = VRType.Off;
+
+ constructor(player: VideoJsPlayer) {
+ super(player);
+ this.setTypes();
+ }
+
+ private onSelected(item: VRMenuItem) {
+ this.selectedType = item.type;
+
+ this.items.forEach((i) => {
+ i.selected(i.type === this.selectedType);
+ });
+
+ this.trigger("typeselected", item.type);
+ }
+
+ public setTypes() {
+ this.items = Object.values(VRType).map((type) => {
+ const item = new VRMenuItem(this, type);
+
+ item.on("selected", () => {
+ this.onSelected(item);
+ });
+
+ return item;
+ });
+ this.update();
+ }
+
+ createEl() {
+ return videojs.dom.createEl("div", {
+ className:
+ "vjs-vr-selector vjs-menu-button vjs-menu-button-popup vjs-control vjs-button",
+ });
+ }
+
+ createItems() {
+ if (this.items === undefined) return [];
+
+ for (const item of this.items) {
+ item.selected(item.type === this.selectedType);
+ }
+
+ return this.items;
+ }
+}
+
+class VRMenuPlugin extends videojs.getPlugin("plugin") {
+ private menu: VRMenuButton;
+ private showButton: boolean;
+ private vr?: VideoJsVRPlugin;
+
+ constructor(player: VideoJsPlayer, options: VRMenuOptions) {
+ super(player);
+
+ this.menu = new VRMenuButton(player);
+ this.showButton = options.showButton ?? false;
+
+ if (isVrDevice()) return;
+
+ this.vr = this.player.vr();
+
+ this.menu.on("typeselected", (_, type: VRType) => {
+ this.loadVR(type);
+ });
+
+ player.on("ready", () => {
+ if (this.showButton) {
+ this.addButton();
+ }
+ });
+ }
+
+ private loadVR(type: VRType) {
+ const projection = vrTypeProjection[type];
+ this.vr?.setProjection(projection);
+ this.vr?.init();
+ }
+
+ private addButton() {
+ const { controlBar } = this.player;
+ const fullscreenToggle = controlBar.getChild("fullscreenToggle")!.el();
+ controlBar.addChild(this.menu);
+ controlBar.el().insertBefore(this.menu.el(), fullscreenToggle);
+ }
+
+ private removeButton() {
+ const { controlBar } = this.player;
+ controlBar.removeChild(this.menu);
+ }
+
+ public setShowButton(showButton: boolean) {
+ if (isVrDevice()) return;
+
+ if (showButton === this.showButton) return;
+
+ this.showButton = showButton;
+ if (showButton) {
+ this.addButton();
+ } else {
+ this.removeButton();
+ this.loadVR(VRType.Off);
+ }
+ }
+}
+
+// Register the plugin with video.js.
+videojs.registerComponent("VRMenuButton", VRMenuButton);
+videojs.registerPlugin("vrMenu", VRMenuPlugin);
+
+/* eslint-disable @typescript-eslint/naming-convention */
+declare module "video.js" {
+ interface VideoJsPlayer {
+ vrMenu: () => VRMenuPlugin;
+ }
+ interface VideoJsPlayerPluginOptions {
+ vrMenu?: VRMenuOptions;
+ }
+}
+
+export default VRMenuPlugin;
diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx
index 3205fdcb8..190c4b469 100644
--- a/ui/v2.5/src/components/Scenes/SceneCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx
@@ -97,12 +97,6 @@ export const SceneCard: React.FC = (
[props.scene]
);
- // studio image is missing if it uses the default
- const missingStudioImage =
- props.scene.studio?.image_path?.endsWith("?default=true");
- const showStudioAsText =
- missingStudioImage || (configuration?.interface.showStudioAsText ?? false);
-
function maybeRenderSceneSpecsOverlay() {
let sizeObj = null;
if (file?.size) {
@@ -146,21 +140,31 @@ export const SceneCard: React.FC = (
);
}
+ function renderStudioThumbnail() {
+ const studioImage = props.scene.studio?.image_path;
+ const studioName = props.scene.studio?.name;
+
+ if (configuration?.interface.showStudioAsText || !studioImage) {
+ return studioName;
+ }
+
+ const studioImageURL = new URL(studioImage);
+ if (studioImageURL.searchParams.get("default") === "true") {
+ return studioName;
+ }
+
+ return (
+ 
+ );
+ }
+
function maybeRenderSceneStudioOverlay() {
if (!props.scene.studio) return;
return (
= ({
};
});
+ async function onSave(input: GQL.SceneCreateInput) {
+ await updateScene({
+ variables: {
+ input: {
+ id: scene.id,
+ ...input,
+ },
+ },
+ });
+ Toast.success({
+ content: intl.formatMessage(
+ { id: "toast.updated_entity" },
+ { entity: intl.formatMessage({ id: "scene" }).toLocaleLowerCase() }
+ ),
+ });
+ }
+
const onOrganizedClick = async () => {
try {
setOrganizedLoading(true);
@@ -457,6 +478,7 @@ const ScenePage: React.FC = ({
setIsDeleteAlertOpen(true)}
/>
@@ -464,8 +486,8 @@ const ScenePage: React.FC = ({
);
- function getCollapseButtonText() {
- return collapsed ? ">" : "<";
+ function getCollapseButtonIcon() {
+ return collapsed ? faChevronRight : faChevronLeft;
}
const title = objectTitle(scene);
@@ -500,7 +522,7 @@ const ScenePage: React.FC = ({
@@ -372,7 +377,7 @@ export const ScenePlayerScrubber: React.FC = ({
id="scrubber-forward"
onClick={() => goForward()}
>
- >
+
);
diff --git a/ui/v2.5/src/components/ScenePlayer/big-buttons.ts b/ui/v2.5/src/components/ScenePlayer/big-buttons.ts
new file mode 100644
index 000000000..619349aea
--- /dev/null
+++ b/ui/v2.5/src/components/ScenePlayer/big-buttons.ts
@@ -0,0 +1,69 @@
+import videojs, { VideoJsPlayer } from "video.js";
+
+// prettier-ignore
+const BigPlayButton = videojs.getComponent("BigPlayButton") as unknown as typeof videojs.BigPlayButton;
+
+class BigPlayPauseButton extends BigPlayButton {
+ handleClick(event: videojs.EventTarget.Event) {
+ if (this.player().paused()) {
+ super.handleClick(event);
+ } else {
+ this.player().pause();
+ }
+ }
+
+ buildCSSClass() {
+ return "vjs-control vjs-button vjs-big-play-pause-button";
+ }
+}
+
+class BigButtonGroup extends videojs.getComponent("Component") {
+ constructor(player: VideoJsPlayer) {
+ super(player);
+
+ this.addChild("seekButton", {
+ direction: "back",
+ seconds: 10,
+ });
+
+ this.addChild("BigPlayPauseButton");
+
+ this.addChild("seekButton", {
+ direction: "forward",
+ seconds: 10,
+ });
+ }
+
+ createEl() {
+ return super.createEl("div", {
+ className: "vjs-big-button-group",
+ });
+ }
+}
+
+class BigButtonsPlugin extends videojs.getPlugin("plugin") {
+ constructor(player: VideoJsPlayer) {
+ super(player);
+
+ player.ready(() => {
+ player.addChild("BigButtonGroup");
+ });
+ }
+}
+
+// Register the plugin with video.js.
+videojs.registerComponent("BigButtonGroup", BigButtonGroup);
+videojs.registerComponent("BigPlayPauseButton", BigPlayPauseButton);
+videojs.registerPlugin("bigButtons", BigButtonsPlugin);
+
+/* eslint-disable @typescript-eslint/naming-convention */
+declare module "video.js" {
+ interface VideoJsPlayer {
+ bigButtons: () => BigButtonsPlugin;
+ }
+ interface VideoJsPlayerPluginOptions {
+ bigButtons?: {};
+ }
+}
+
+export default BigButtonsPlugin;
diff --git a/ui/v2.5/src/components/ScenePlayer/source-selector.ts b/ui/v2.5/src/components/ScenePlayer/source-selector.ts
index 206d3fbca..c94e2fbae 100644
--- a/ui/v2.5/src/components/ScenePlayer/source-selector.ts
+++ b/ui/v2.5/src/components/ScenePlayer/source-selector.ts
@@ -99,15 +99,12 @@ class SourceSelectorPlugin extends videojs.getPlugin("plugin") {
this.selectedIndex = this.sources.findIndex((src) => src === source);
if (this.selectedIndex === -1) return;
+ const loadSrc = this.sources[this.selectedIndex];
+
const currentTime = player.currentTime();
-
- // put the selected source at the top of the list
- const loadSources = [...this.sources];
- const selectedSrc = loadSources.splice(this.selectedIndex, 1)[0];
- loadSources.unshift(selectedSrc);
-
const paused = player.paused();
- player.src(loadSources);
+
+ player.src(loadSrc);
player.one("canplay", () => {
if (paused) {
player.pause();
@@ -128,10 +125,15 @@ class SourceSelectorPlugin extends videojs.getPlugin("plugin") {
if (!player.videoWidth() && !player.videoHeight()) {
// Occurs during preload when videos with supported audio/unsupported video are preloaded.
// Treat this as a decoding error and try the next source without playing.
- // However on Safari we get an media event when m3u8 is loaded which needs to be ignored.
+ // However on Safari we get an media event when m3u8 or mpd is loaded which needs to be ignored.
if (player.error() !== null) return;
+
const currentSrc = player.currentSrc();
- if (currentSrc !== null && !currentSrc.includes(".m3u8")) {
+ if (currentSrc === null) return;
+
+ if (currentSrc.includes(".m3u8") || currentSrc.includes(".mpd")) {
+ player.play();
+ } else {
player.error(MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED);
return;
}
@@ -156,7 +158,7 @@ class SourceSelectorPlugin extends videojs.getPlugin("plugin") {
console.log(`Trying next source in playlist: '${newSource.label}'`);
this.menu.setSources(this.sources);
this.selectedIndex = 0;
- player.src(this.sources);
+ player.src(newSource);
player.load();
player.play();
} else {
@@ -179,7 +181,7 @@ class SourceSelectorPlugin extends videojs.getPlugin("plugin") {
}
this.sources = sources;
- this.player.src(this.sources);
+ this.player.src(sources[0]);
}
get textTracks(): HTMLTrackElement[] {
diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss
index 8e717892f..7fcd6c27b 100644
--- a/ui/v2.5/src/components/ScenePlayer/styles.scss
+++ b/ui/v2.5/src/components/ScenePlayer/styles.scss
@@ -16,19 +16,25 @@ $sceneTabWidth: 450px;
height: 100vh;
}
- &.portrait .video-js {
+ &.portrait .video-wrapper {
height: 177.78vw;
}
}
-.video-js {
+.video-wrapper {
height: 56.25vw;
+ max-height: calc(100vh - #{$menuHeight});
overflow: hidden;
width: 100%;
@media (min-width: 1200px) {
height: 100%;
}
+}
+
+.video-js {
+ height: 100%;
+ width: 100%;
.vjs-button {
outline: none;
@@ -109,7 +115,7 @@ $sceneTabWidth: 450px;
width: 100%;
.vjs-progress-holder {
- margin: 0 1rem;
+ margin: 0 15px;
}
}
@@ -170,6 +176,10 @@ $sceneTabWidth: 450px;
}
.vjs-source-selector {
+ &.vjs-hover .vjs-menu {
+ display: none;
+ }
+
.vjs-menu li {
font-size: 0.8em;
}
@@ -180,6 +190,17 @@ $sceneTabWidth: 450px;
}
}
+ .vjs-vr-selector {
+ .vjs-menu li {
+ font-size: 0.8em;
+ }
+
+ .vjs-button {
+ background: url("/vr.svg") center center no-repeat;
+ width: 50%;
+ }
+ }
+
.vjs-marker {
background-color: rgba(33, 33, 33, 0.8);
bottom: 0;
@@ -355,13 +376,13 @@ $sceneTabWidth: 450px;
border: 1px solid #555;
color: $link-color;
cursor: pointer;
- font-size: 1.3rem;
+ font-size: 1.1rem;
font-weight: 800;
height: 100%;
line-height: $scrubberHeight;
padding: 0;
text-align: center;
- width: 1.3rem;
+ width: 1.8rem;
}
.scrubber-content {
diff --git a/ui/v2.5/src/components/ScenePlayer/vrmode.ts b/ui/v2.5/src/components/ScenePlayer/vrmode.ts
new file mode 100644
index 000000000..b11be3364
--- /dev/null
+++ b/ui/v2.5/src/components/ScenePlayer/vrmode.ts
@@ -0,0 +1,182 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import videojs, { VideoJsPlayer } from "video.js";
+import "videojs-vr";
+// separate type import, otherwise typescript elides the above import
+// and the plugin does not get initialized
+import type { ProjectionType, Plugin as VideoJsVRPlugin } from "videojs-vr";
+
+export interface VRMenuOptions {
+ /**
+ * Whether to show the vr button.
+ * @default false
+ */
+ showButton?: boolean;
+}
+
+enum VRType {
+ Spherical = "360",
+ Off = "Off",
+}
+
+const vrTypeProjection: Record
- {showStudioAsText ? (
- props.scene.studio.name
- ) : (
- 
- )}
+ {renderStudioThumbnail()}
);
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index 21ba9d5c4..b3ef0b423 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -28,7 +28,11 @@ import { OCounterButton } from "./OCounterButton";
import { OrganizedButton } from "./OrganizedButton";
import { ConfigurationContext } from "src/hooks/Config";
import { getPlayerPosition } from "src/components/ScenePlayer/util";
-import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
+import {
+ faEllipsisV,
+ faChevronRight,
+ faChevronLeft,
+} from "@fortawesome/free-solid-svg-icons";
import { lazyComponent } from "src/utils/lazyComponent";
const SubmitStashBoxDraft = lazyComponent(
@@ -165,6 +169,23 @@ const ScenePage: React.FC
@@ -64,10 +85,10 @@ const SceneCreate: React.FC = () => {
+
+ );
+};
+
+export default ClearableInput;
diff --git a/ui/v2.5/src/components/Shared/ImageInput.tsx b/ui/v2.5/src/components/Shared/ImageInput.tsx
index cf25aa887..05b5eb264 100644
--- a/ui/v2.5/src/components/Shared/ImageInput.tsx
+++ b/ui/v2.5/src/components/Shared/ImageInput.tsx
@@ -53,6 +53,11 @@ export const ImageInput: React.FC
-