Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 12:24:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Plugin api improvements (#4935)

Browse Source 
* Support hook into App component
* Add hookable PluginSettings component
* Add useSettings to plugin hooks
* Make setting inputs hookable
* Add hooks for performer details panel
* Update docs
This commit is contained in:
WithoutPants
2024-06-11 13:18:45 +10:00
committed by GitHub
parent ed057c971f
commit 845d718c67
7 changed files with 526 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
ui/v2.5/src/App.tsx
View File

@@ -50,6 +50,7 @@ import { PluginRoutes } from "./plugins";
// import plugin_api to run code
import "./pluginApi";
import { ConnectionMonitor } from "./ConnectionMonitor";
import { PatchFunction } from "./patch";
const Performers = lazyComponent(
() => import("./components/Performers/Performers")
@@ -144,6 +145,13 @@ function sortPlugins(plugins: PluginList) {
return sorted;
}
const AppContainer: React.FC<React.PropsWithChildren<{}>> = PatchFunction(
"App",
(props: React.PropsWithChildren<{}>) => {
return <>{props.children}</>;
}
) as React.FC;
export const App: React.FC = () => {
const config = useConfiguration();
const [saveUI] = useConfigureUI();
@@ -357,41 +365,43 @@ export const App: React.FC = () => {
const titleProps = makeTitleProps();
return (
<ErrorBoundary>
{messages ? (
<IntlProvider
locale={language}
messages={messages}
formats={intlFormats}
>
<ConfigurationProvider
configuration={config.data?.configuration}
loading={config.loading}
<AppContainer>
<ErrorBoundary>
{messages ? (
<IntlProvider
locale={language}
messages={messages}
formats={intlFormats}
>
{maybeRenderReleaseNotes()}
<ToastProvider>
<ConnectionMonitor />
<Suspense fallback={<LoadingIndicator />}>
<LightboxProvider>
<ManualProvider>
<InteractiveProvider>
<Helmet {...titleProps} />
{maybeRenderNavbar()}
<div
className={`main container-fluid ${
appleRendering ? "apple" : ""
}`}
>
{renderContent()}
</div>
</InteractiveProvider>
</ManualProvider>
</LightboxProvider>
</Suspense>
</ToastProvider>
</ConfigurationProvider>
</IntlProvider>
) : null}
</ErrorBoundary>
<ConfigurationProvider
configuration={config.data?.configuration}
loading={config.loading}
>
{maybeRenderReleaseNotes()}
<ToastProvider>
<ConnectionMonitor />
<Suspense fallback={<LoadingIndicator />}>
<LightboxProvider>
<ManualProvider>
<InteractiveProvider>
<Helmet {...titleProps} />
{maybeRenderNavbar()}
<div
className={`main container-fluid ${
appleRendering ? "apple" : ""
}`}
>
{renderContent()}
</div>
</InteractiveProvider>
</ManualProvider>
</LightboxProvider>
</Suspense>
</ToastProvider>
</ConfigurationProvider>
</IntlProvider>
) : null}
</ErrorBoundary>
</AppContainer>
);
};

422
ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React, { PropsWithChildren } from "react";
import { useIntl } from "react-intl";
import { TagLink } from "src/components/Shared/TagLink";
import * as GQL from "src/core/generated-graphql";
@@ -13,6 +13,7 @@ import {
FormatPenisLength,
FormatWeight,
} from "../PerformerList";
import { PatchComponent } from "src/patch";
interface IPerformerDetails {
performer: GQL.PerformerDataFragment;
@@ -20,231 +21,236 @@ interface IPerformerDetails {
fullWidth?: boolean;
}
export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
performer,
collapsed,
fullWidth,
}) => {
// Network state
const intl = useIntl();
const PerformerDetailGroup: React.FC<PropsWithChildren<IPerformerDetails>> =
PatchComponent("PerformerDetailsPanel.DetailGroup", ({ children }) => {
return <div className="detail-group">{children}</div>;
});
function renderTagsField() {
if (!performer.tags.length) {
return;
}
return (
<ul className="pl-0">
{(performer.tags ?? []).map((tag) => (
<TagLink key={tag.id} linkType="performer" tag={tag} />
))}
</ul>
);
}
export const PerformerDetailsPanel: React.FC<IPerformerDetails> =
PatchComponent("PerformerDetailsPanel", (props) => {
const { performer, collapsed, fullWidth } = props;
function renderStashIDs() {
if (!performer.stash_ids.length) {
return;
}
// Network state
const intl = useIntl();
return (
<ul className="pl-0">
{performer.stash_ids.map((stashID) => (
<li key={stashID.stash_id} className="row no-gutters">
<StashIDPill stashID={stashID} linkType="performers" />
</li>
))}
</ul>
);
}
function maybeRenderExtraDetails() {
if (!collapsed) {
/* Remove extra urls provided in details since they will be present by perfomr name */
/* This code can be removed once multple urls are supported for performers */
let details = performer?.details
?.replace(/\[((?:http|www\.)[^\n\]]+)\]/gm, "")
.trim();
function renderTagsField() {
if (!performer.tags.length) {
return;
}
return (
<>
<DetailItem
id="tattoos"
value={performer?.tattoos}
fullWidth={fullWidth}
/>
<DetailItem
id="piercings"
value={performer?.piercings}
fullWidth={fullWidth}
/>
<DetailItem
id="career_length"
value={performer?.career_length}
fullWidth={fullWidth}
/>
<DetailItem id="details" value={details} fullWidth={fullWidth} />
<DetailItem
id="tags"
value={renderTagsField()}
fullWidth={fullWidth}
/>
<DetailItem
id="stash_ids"
value={renderStashIDs()}
fullWidth={fullWidth}
/>
</>
<ul className="pl-0">
{(performer.tags ?? []).map((tag) => (
<TagLink key={tag.id} linkType="performer" tag={tag} />
))}
</ul>
);
}
}
return (
<div className="detail-group">
{performer.gender ? (
<DetailItem
id="gender"
value={intl.formatMessage({ id: "gender_types." + performer.gender })}
fullWidth={fullWidth}
/>
) : (
""
)}
<DetailItem
id="age"
value={
!fullWidth
? TextUtils.age(performer.birthdate, performer.death_date)
: FormatAge(performer.birthdate, performer.death_date)
}
title={
!fullWidth
? TextUtils.formatDate(intl, performer.birthdate ?? undefined)
: ""
}
fullWidth={fullWidth}
/>
<DetailItem id="death_date" value={performer.death_date} />
{performer.country ? (
<DetailItem
id="country"
value={
<CountryFlag
country={performer.country}
className="mr-2"
includeName={true}
function renderStashIDs() {
if (!performer.stash_ids.length) {
return;
}
return (
<ul className="pl-0">
{performer.stash_ids.map((stashID) => (
<li key={stashID.stash_id} className="row no-gutters">
<StashIDPill stashID={stashID} linkType="performers" />
</li>
))}
</ul>
);
}
function maybeRenderExtraDetails() {
if (!collapsed) {
/* Remove extra urls provided in details since they will be present by perfomr name */
/* This code can be removed once multple urls are supported for performers */
let details = performer?.details
?.replace(/\[((?:http|www\.)[^\n\]]+)\]/gm, "")
.trim();
return (
<>
<DetailItem
id="tattoos"
value={performer?.tattoos}
fullWidth={fullWidth}
/>
<DetailItem
id="piercings"
value={performer?.piercings}
fullWidth={fullWidth}
/>
<DetailItem
id="career_length"
value={performer?.career_length}
fullWidth={fullWidth}
/>
<DetailItem id="details" value={details} fullWidth={fullWidth} />
<DetailItem
id="tags"
value={renderTagsField()}
fullWidth={fullWidth}
/>
<DetailItem
id="stash_ids"
value={renderStashIDs()}
fullWidth={fullWidth}
/>
</>
);
}
}
return (
<PerformerDetailGroup {...props}>
{performer.gender ? (
<DetailItem
id="gender"
value={intl.formatMessage({
id: "gender_types." + performer.gender,
})}
fullWidth={fullWidth}
/>
) : (
""
)}
<DetailItem
id="age"
value={
!fullWidth
? TextUtils.age(performer.birthdate, performer.death_date)
: FormatAge(performer.birthdate, performer.death_date)
}
title={
!fullWidth
? TextUtils.formatDate(intl, performer.birthdate ?? undefined)
: ""
}
fullWidth={fullWidth}
/>
) : (
""
)}
<DetailItem
id="ethnicity"
value={performer?.ethnicity}
fullWidth={fullWidth}
/>
<DetailItem
id="hair_color"
value={performer?.hair_color}
fullWidth={fullWidth}
/>
<DetailItem
id="eye_color"
value={performer?.eye_color}
fullWidth={fullWidth}
/>
<DetailItem
id="height"
value={FormatHeight(performer.height_cm)}
fullWidth={fullWidth}
/>
<DetailItem
id="weight"
value={FormatWeight(performer.weight)}
fullWidth={fullWidth}
/>
<DetailItem
id="penis_length"
value={FormatPenisLength(performer.penis_length)}
fullWidth={fullWidth}
/>
<DetailItem
id="circumcised"
value={FormatCircumcised(performer.circumcised)}
fullWidth={fullWidth}
/>
<DetailItem
id="measurements"
value={performer?.measurements}
fullWidth={fullWidth}
/>
<DetailItem
id="fake_tits"
value={performer?.fake_tits}
fullWidth={fullWidth}
/>
{maybeRenderExtraDetails()}
</div>
);
};
export const CompressedPerformerDetailsPanel: React.FC<IPerformerDetails> = ({
performer,
}) => {
// Network state
const intl = useIntl();
function scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
return (
<div className="sticky detail-header">
<div className="sticky detail-header-group">
<a className="performer-name" onClick={() => scrollToTop()}>
{performer.name}
</a>
{performer.gender ? (
<>
<span className="detail-divider">/</span>
<span className="performer-gender">
{intl.formatMessage({ id: "gender_types." + performer.gender })}
</span>
</>
) : (
""
)}
{performer.birthdate ? (
<>
<span className="detail-divider">/</span>
<span
className="performer-age"
title={TextUtils.formatDate(
intl,
performer.birthdate ?? undefined
)}
>
{TextUtils.age(performer.birthdate, performer.death_date)}
</span>
</>
) : (
""
)}
<DetailItem id="death_date" value={performer.death_date} />
{performer.country ? (
<>
<span className="detail-divider">/</span>
<span className="performer-country">
<DetailItem
id="country"
value={
<CountryFlag
country={performer.country}
className="mr-2"
includeName={true}
/>
</span>
</>
}
fullWidth={fullWidth}
/>
) : (
""
)}
<DetailItem
id="ethnicity"
value={performer?.ethnicity}
fullWidth={fullWidth}
/>
<DetailItem
id="hair_color"
value={performer?.hair_color}
fullWidth={fullWidth}
/>
<DetailItem
id="eye_color"
value={performer?.eye_color}
fullWidth={fullWidth}
/>
<DetailItem
id="height"
value={FormatHeight(performer.height_cm)}
fullWidth={fullWidth}
/>
<DetailItem
id="weight"
value={FormatWeight(performer.weight)}
fullWidth={fullWidth}
/>
<DetailItem
id="penis_length"
value={FormatPenisLength(performer.penis_length)}
fullWidth={fullWidth}
/>
<DetailItem
id="circumcised"
value={FormatCircumcised(performer.circumcised)}
fullWidth={fullWidth}
/>
<DetailItem
id="measurements"
value={performer?.measurements}
fullWidth={fullWidth}
/>
<DetailItem
id="fake_tits"
value={performer?.fake_tits}
fullWidth={fullWidth}
/>
{maybeRenderExtraDetails()}
</PerformerDetailGroup>
);
});
export const CompressedPerformerDetailsPanel: React.FC<IPerformerDetails> =
PatchComponent("CompressedPerformerDetailsPanel", ({ performer }) => {
// Network state
const intl = useIntl();
function scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
return (
<div className="sticky detail-header">
<div className="sticky detail-header-group">
<a className="performer-name" onClick={() => scrollToTop()}>
{performer.name}
</a>
{performer.gender ? (
<>
<span className="detail-divider">/</span>
<span className="performer-gender">
{intl.formatMessage({ id: "gender_types." + performer.gender })}
</span>
</>
) : (
""
)}
{performer.birthdate ? (
<>
<span className="detail-divider">/</span>
<span
className="performer-age"
title={TextUtils.formatDate(
intl,
performer.birthdate ?? undefined
)}
>
{TextUtils.age(performer.birthdate, performer.death_date)}
</span>
</>
) : (
""
)}
{performer.country ? (
<>
<span className="detail-divider">/</span>
<span className="performer-country">
<CountryFlag
country={performer.country}
className="mr-2"
includeName={true}
/>
</span>
</>
) : (
""
)}
</div>
</div>
</div>
);
};
);
});

325
ui/v2.5/src/components/Settings/Inputs.tsx
View File

@@ -92,60 +92,58 @@ interface ISettingGroup {
collapsedDefault?: boolean;
}
export const SettingGroup: React.FC<PropsWithChildren<ISettingGroup>> = ({
settingProps,
topLevel,
collapsible,
collapsedDefault,
children,
}) => {
const [open, setOpen] = useState(!collapsedDefault);
export const SettingGroup: React.FC<PropsWithChildren<ISettingGroup>> =
PatchComponent(
"SettingGroup",
({ settingProps, topLevel, collapsible, collapsedDefault, children }) => {
const [open, setOpen] = useState(!collapsedDefault);
function renderCollapseButton() {
if (!collapsible) return;
function renderCollapseButton() {
if (!collapsible) return;
return (
<Button
className="setting-group-collapse-button"
variant="minimal"
onClick={() => setOpen(!open)}
>
<Icon className="fa-fw" icon={open ? faChevronUp : faChevronDown} />
</Button>
);
}
function onDivClick(e: React.MouseEvent<HTMLDivElement>) {
if (!collapsible) return;
// ensure button was not clicked
let target: HTMLElement | null = e.target as HTMLElement;
while (target && target !== e.currentTarget) {
if (
target.nodeName.toLowerCase() === "button" ||
target.nodeName.toLowerCase() === "a"
) {
// button clicked, swallow event
return;
return (
<Button
className="setting-group-collapse-button"
variant="minimal"
onClick={() => setOpen(!open)}
>
<Icon className="fa-fw" icon={open ? faChevronUp : faChevronDown} />
</Button>
);
}
target = target.parentElement;
function onDivClick(e: React.MouseEvent<HTMLDivElement>) {
if (!collapsible) return;
// ensure button was not clicked
let target: HTMLElement | null = e.target as HTMLElement;
while (target && target !== e.currentTarget) {
if (
target.nodeName.toLowerCase() === "button" ||
target.nodeName.toLowerCase() === "a"
) {
// button clicked, swallow event
return;
}
target = target.parentElement;
}
setOpen(!open);
}
return (
<div className={`setting-group ${collapsible ? "collapsible" : ""}`}>
<Setting {...settingProps} onClick={onDivClick}>
{topLevel}
{renderCollapseButton()}
</Setting>
<Collapse in={open}>
<div className="collapsible-section">{children}</div>
</Collapse>
</div>
);
}
setOpen(!open);
}
return (
<div className={`setting-group ${collapsible ? "collapsible" : ""}`}>
<Setting {...settingProps} onClick={onDivClick}>
{topLevel}
{renderCollapseButton()}
</Setting>
<Collapse in={open}>
<div className="collapsible-section">{children}</div>
</Collapse>
</div>
);
};
interface IBooleanSetting extends ISetting {
id: string;
@@ -153,53 +151,52 @@ interface IBooleanSetting extends ISetting {
onChange: (v: boolean) => void;
}
export const BooleanSetting: React.FC<IBooleanSetting> = (props) => {
const { id, disabled, checked, onChange, ...settingProps } = props;
export const BooleanSetting: React.FC<IBooleanSetting> = PatchComponent(
"BooleanSetting",
(props) => {
const { id, disabled, checked, onChange, ...settingProps } = props;
return (
<Setting {...settingProps} disabled={disabled}>
<Form.Switch
id={id}
disabled={disabled}
checked={checked ?? false}
onChange={() => onChange(!checked)}
/>
</Setting>
);
};
return (
<Setting {...settingProps} disabled={disabled}>
<Form.Switch
id={id}
disabled={disabled}
checked={checked ?? false}
onChange={() => onChange(!checked)}
/>
</Setting>
);
}
);
interface ISelectSetting extends ISetting {
value?: string | number | string[];
onChange: (v: string) => void;
}
export const SelectSetting: React.FC<PropsWithChildren<ISelectSetting>> = ({
id,
headingID,
subHeadingID,
value,
children,
onChange,
advanced,
}) => {
return (
<Setting
advanced={advanced}
headingID={headingID}
subHeadingID={subHeadingID}
id={id}
>
<Form.Control
className="input-control"
as="select"
value={value ?? ""}
onChange={(e) => onChange(e.currentTarget.value)}
>
{children}
</Form.Control>
</Setting>
export const SelectSetting: React.FC<PropsWithChildren<ISelectSetting>> =
PatchComponent(
"SelectSetting",
({ id, headingID, subHeadingID, value, children, onChange, advanced }) => {
return (
<Setting
advanced={advanced}
headingID={headingID}
subHeadingID={subHeadingID}
id={id}
>
<Form.Control
className="input-control"
as="select"
value={value ?? ""}
onChange={(e) => onChange(e.currentTarget.value)}
>
{children}
</Form.Control>
</Setting>
);
}
);
};
interface IDialogSetting<T> extends ISetting {
buttonText?: string;
@@ -208,8 +205,7 @@ interface IDialogSetting<T> extends ISetting {
renderValue?: (v: T | undefined) => JSX.Element;
onChange: () => void;
}
export const ChangeButtonSetting = <T extends {}>(props: IDialogSetting<T>) => {
const _ChangeButtonSetting = <T extends {}>(props: IDialogSetting<T>) => {
const {
id,
className,
@@ -266,6 +262,11 @@ export const ChangeButtonSetting = <T extends {}>(props: IDialogSetting<T>) => {
);
};
export const ChangeButtonSetting = PatchComponent(
"ChangeButtonSetting",
_ChangeButtonSetting
) as typeof _ChangeButtonSetting;
export interface ISettingModal<T> {
heading?: React.ReactNode;
headingID?: string;
@@ -283,7 +284,7 @@ export interface ISettingModal<T> {
error?: string | undefined;
}
export const SettingModal = <T extends {}>(props: ISettingModal<T>) => {
const _SettingModal = <T extends {}>(props: ISettingModal<T>) => {
const {
heading,
headingID,
@@ -342,6 +343,11 @@ export const SettingModal = <T extends {}>(props: ISettingModal<T>) => {
);
};
export const SettingModal = PatchComponent(
"SettingModal",
_SettingModal
) as typeof _SettingModal;
interface IModalSetting<T> extends ISetting {
value: T | undefined;
buttonText?: string;
@@ -357,7 +363,7 @@ interface IModalSetting<T> extends ISetting {
validateChange?: (v: T) => void | undefined;
}
export const ModalSetting = <T extends {}>(props: IModalSetting<T>) => {
export const _ModalSetting = <T extends {}>(props: IModalSetting<T>) => {
const {
id,
className,
@@ -435,52 +441,63 @@ export const ModalSetting = <T extends {}>(props: IModalSetting<T>) => {
);
};
export const ModalSetting = PatchComponent(
"ModalSetting",
_ModalSetting
) as typeof _ModalSetting;
interface IStringSetting extends ISetting {
value: string | undefined;
onChange: (v: string) => void;
}
export const StringSetting: React.FC<IStringSetting> = (props) => {
return (
<ModalSetting<string>
{...props}
renderField={(value, setValue) => (
<Form.Control
className="text-input"
value={value ?? ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setValue(e.currentTarget.value)
}
/>
)}
renderValue={(value) => <span>{value}</span>}
/>
);
};
export const StringSetting: React.FC<IStringSetting> = PatchComponent(
"StringSetting",
(props) => {
return (
<ModalSetting<string>
{...props}
renderField={(value, setValue) => (
<Form.Control
className="text-input"
value={value ?? ""}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setValue(e.currentTarget.value)
}
/>
)}
renderValue={(value) => <span>{value}</span>}
/>
);
}
);
interface INumberSetting extends ISetting {
value: number | undefined;
onChange: (v: number) => void;
}
export const NumberSetting: React.FC<INumberSetting> = (props) => {
return (
<ModalSetting<number>
{...props}
renderField={(value, setValue) => (
<Form.Control
className="text-input"
type="number"
value={value ?? 0}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setValue(Number.parseInt(e.currentTarget.value || "0", 10))
}
/>
)}
renderValue={(value) => <span>{value}</span>}
/>
);
};
export const NumberSetting: React.FC<INumberSetting> = PatchComponent(
"NumberSetting",
(props) => {
return (
<ModalSetting<number>
{...props}
renderField={(value, setValue) => (
<Form.Control
className="text-input"
type="number"
value={value ?? 0}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setValue(Number.parseInt(e.currentTarget.value || "0", 10))
}
/>
)}
renderValue={(value) => <span>{value}</span>}
/>
);
}
);
interface IStringListSetting extends ISetting {
value: string[] | undefined;
@@ -488,35 +505,38 @@ interface IStringListSetting extends ISetting {
onChange: (v: string[]) => void;
}
export const StringListSetting: React.FC<IStringListSetting> = (props) => {
return (
<ModalSetting<string[]>
{...props}
renderField={(value, setValue) => (
<StringListInput
value={value ?? []}
setValue={setValue}
placeholder={props.defaultNewValue}
/>
)}
renderValue={(value) => (
<div>
{value?.map((v, i) => (
// eslint-disable-next-line react/no-array-index-key
<div key={i}>{v}</div>
))}
</div>
)}
/>
);
};
export const StringListSetting: React.FC<IStringListSetting> = PatchComponent(
"StringListSetting",
(props) => {
return (
<ModalSetting<string[]>
{...props}
renderField={(value, setValue) => (
<StringListInput
value={value ?? []}
setValue={setValue}
placeholder={props.defaultNewValue}
/>
)}
renderValue={(value) => (
<div>
{value?.map((v, i) => (
// eslint-disable-next-line react/no-array-index-key
<div key={i}>{v}</div>
))}
</div>
)}
/>
);
}
);
interface IConstantSetting<T> extends ISetting {
value?: T;
renderValue?: (v: T | undefined) => JSX.Element;
}
export const ConstantSetting = <T extends {}>(props: IConstantSetting<T>) => {
export const _ConstantSetting = <T extends {}>(props: IConstantSetting<T>) => {
const { id, headingID, subHeading, subHeadingID, renderValue, value } = props;
const intl = useIntl();
@@ -539,3 +559,8 @@ export const ConstantSetting = <T extends {}>(props: IConstantSetting<T>) => {
</div>
);
};
export const ConstantSetting = PatchComponent(
"ConstantSetting",
_ConstantSetting
) as typeof _ConstantSetting;

66
ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
View File

@@ -27,6 +27,7 @@ import {
InstalledPluginPackages,
} from "./PluginPackageManager";
import { ExternalLink } from "../Shared/ExternalLink";
import { PatchComponent } from "src/patch";
interface IPluginSettingProps {
pluginID: string;
@@ -75,11 +76,38 @@ const PluginSetting: React.FC<IPluginSettingProps> = ({
}
};
const PluginSettings: React.FC<{
pluginID: string;
settings: GQL.PluginSetting[];
}> = PatchComponent("PluginSettings", ({ pluginID, settings }) => {
const { plugins, savePluginSettings } = useSettings();
const pluginSettings = plugins[pluginID] ?? {};
return (
<div className="plugin-settings">
{settings.map((setting) => (
<PluginSetting
key={setting.name}
pluginID={pluginID}
setting={setting}
value={pluginSettings[setting.name]}
onChange={(v) =>
savePluginSettings(pluginID, {
...pluginSettings,
[setting.name]: v,
})
}
/>
))}
</div>
);
});
export const SettingsPluginsPanel: React.FC = () => {
const Toast = useToast();
const intl = useIntl();
const { loading: configLoading, plugins, savePluginSettings } = useSettings();
const { loading: configLoading } = useSettings();
const { data, loading } = usePlugins();
const [changedPluginID, setChangedPluginID] = React.useState<
@@ -163,7 +191,10 @@ export const SettingsPluginsPanel: React.FC = () => {
}
>
{renderPluginHooks(plugin.hooks ?? undefined)}
{renderPluginSettings(plugin.id, plugin.settings ?? [])}
<PluginSettings
pluginID={plugin.id}
settings={plugin.settings ?? []}
/>
</SettingGroup>
));
@@ -208,37 +239,8 @@ export const SettingsPluginsPanel: React.FC = () => {
);
}
function renderPluginSettings(
pluginID: string,
settings: GQL.PluginSetting[]
) {
const pluginSettings = plugins[pluginID] ?? {};
return settings.map((setting) => (
<PluginSetting
key={setting.name}
pluginID={pluginID}
setting={setting}
value={pluginSettings[setting.name]}
onChange={(v) =>
savePluginSettings(pluginID, {
...pluginSettings,
[setting.name]: v,
})
}
/>
));
}
return renderPlugins();
}, [
data?.plugins,
intl,
Toast,
changedPluginID,
plugins,
savePluginSettings,
]);
}, [data?.plugins, intl, Toast, changedPluginID]);
if (loading || configLoading) return <LoadingIndicator />;

16
ui/v2.5/src/docs/en/Manual/UIPluginApi.md
View File

@@ -139,6 +139,11 @@ Returns `void`.
#### Patchable components and functions
- `App`
- `BooleanSetting`
- `ChangeButtonSetting`
- `CompressedPerformerDetailsPanel`
- `ConstantSetting`
- `CountrySelect`
- `DateInput`
- `FolderSelect`
@@ -146,9 +151,13 @@ Returns `void`.
- `GallerySelect`
- `GallerySelect.sort`
- `Icon`
- `ModalSetting`
- `MovieIDSelect`
- `MovieSelect`
- `MovieSelect.sort`
- `NumberSetting`
- `PerformerDetailsPanel`
- `PerformerDetailsPanel.DetailGroup`
- `PerformerIDSelect`
- `PerformerSelect`
- `PerformerSelect.sort`
@@ -161,13 +170,20 @@ Returns `void`.
- `SceneIDSelect`
- `SceneSelect`
- `SceneSelect.sort`
- `SelectSetting`
- `Setting`
- `SettingModal`
- `StringSetting`
- `StringListSetting`
- `StudioIDSelect`
- `StudioSelect`
- `StudioSelect.sort`
- `TagIDSelect`
- `TagSelect`
- `TagSelect.sort`
- `PluginSettings`
- `Setting`
- `SettingGroup`
### `PluginApi.Event`

41
ui/v2.5/src/pluginApi.d.ts vendored
View File

@@ -681,7 +681,18 @@ declare namespace PluginApi {
"SceneCard.Details": React.FC<any>;
"SceneCard.Overlays": React.FC<any>;
"SceneCard.Image": React.FC<any>;
SceneCard: React.FC<any>;
PluginSettings: React.FC<any>;
Setting: React.FC<any>;
SettingGroup: React.FC<any>;
BooleanSetting: React.FC<any>;
SelectSetting: React.FC<any>;
ChangeButtonSetting: React.FC<any>;
SettingModal: React.FC<any>;
ModalSetting: React.FC<any>;
StringSetting: React.FC<any>;
NumberSetting: React.FC<any>;
StringListSetting: React.FC<any>;
ConstantSetting: React.FC<any>;
};
namespace utils {
namespace NavUtils {
@@ -922,6 +933,34 @@ declare namespace PluginApi {
success(message: JSX.Element | string): void;
error(error: unknown): void;
};
function useSettings(): {
loading: boolean;
error: any | undefined;
general: any;
interface: any;
defaults: any;
scraping: any;
dlna: any;
ui: any;
plugins: any;
advancedMode: boolean;
// apikey isn't directly settable, so expose it here
apiKey: string;
saveGeneral: (input: any) => void;
saveInterface: (input: any) => void;
saveDefaults: (input: any) => void;
saveScraping: (input: any) => void;
saveDLNA: (input: any) => void;
saveUI: (input: any) => void;
savePluginSettings: (pluginID: string, input: {}) => void;
setAdvancedMode: (value: boolean) => void;
refetch: () => void;
};
}
namespace patch {
function before(target: string, fn: Function): void;

2
ui/v2.5/src/pluginApi.tsx
View File

@@ -15,6 +15,7 @@ import { useSpriteInfo } from "./hooks/sprite";
import { useToast } from "./hooks/Toast";
import Event from "./hooks/event";
import { before, instead, after, components, RegisterComponent } from "./patch";
import { useSettings } from "./components/Settings/context";
// due to code splitting, some components may not have been loaded when a plugin
// page is loaded. This function will load all components passed to it.
@@ -92,6 +93,7 @@ export const PluginApi = {
useLoadComponents,
useSpriteInfo,
useToast,
useSettings,
},
patch: {
// intercept the arguments of supported functions