{error.message}
;
+ if (error) return {error.message}
;
return (
-
+
, filter: ListFilterModel) {
- if (!result.data || !result.data.findGalleries) { return; }
+ function renderContent(
+ result: QueryHookResult,
+ filter: ListFilterModel
+ ) {
+ if (!result.data || !result.data.findGalleries) {
+ return;
+ }
if (filter.displayMode === DisplayMode.Grid) {
return
+
);
- } if (filter.displayMode === DisplayMode.Wall) {
+ }
+ if (filter.displayMode === DisplayMode.Wall) {
return = ({ gallery }) => {
const [currentImage, setCurrentImage] = useState(0);
const [lightboxIsOpen, setLightboxIsOpen] = useState(false);
- function openLightbox(_event: React.MouseEvent, obj: {index: number}) {
+ function openLightbox(
+ _event: React.MouseEvent,
+ obj: { index: number }
+ ) {
setCurrentImage(obj.index);
setLightboxIsOpen(true);
}
@@ -26,8 +29,15 @@ export const GalleryViewer: FunctionComponent = ({ gallery }) => {
setCurrentImage(currentImage + 1);
}
- const photos = gallery.files.map((file) => ({src: file.path || "", caption: file.name}));
- const thumbs = gallery.files.map((file) => ({src: `${file.path}?thumb=true` || "", width: 1, height: 1}));
+ const photos = gallery.files.map(file => ({
+ src: file.path || "",
+ caption: file.name
+ }));
+ const thumbs = gallery.files.map(file => ({
+ src: `${file.path}?thumb=true` || "",
+ width: 1,
+ height: 1
+ }));
return (
-
-
- );
+ const path =
+ location.pathname === "/performers"
+ ? "/performers/new"
+ : location.pathname === "/studios"
+ ? "/studios/new"
+ : null;
+ const newButton =
+ path === null ? (
+ ""
+ ) : (
+
+
+
+ );
return (
-
+
diff --git a/ui/v2.5/src/components/PageNotFound.tsx b/ui/v2.5/src/components/PageNotFound.tsx
index 8e7cfb32e..645709fcf 100644
--- a/ui/v2.5/src/components/PageNotFound.tsx
+++ b/ui/v2.5/src/components/PageNotFound.tsx
@@ -1,7 +1,5 @@
import React, { FunctionComponent } from "react";
export const PageNotFound: FunctionComponent = () => {
- return (
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx b/ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx
index 70008e3e4..2e70f7abf 100644
--- a/ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx
@@ -1,12 +1,14 @@
import React from "react";
-import { Table, Spinner } from 'react-bootstrap';
+import { Table, Spinner } from "react-bootstrap";
import { StashService } from "src/core/StashService";
export const SettingsAboutPanel: React.FC = () => {
const { data, error, loading } = StashService.useVersion();
function maybeRenderTag() {
- if (!data || !data.version || !data.version.version) { return; }
+ if (!data || !data.version || !data.version.version) {
+ return;
+ }
return (
Version:
@@ -16,30 +18,32 @@ export const SettingsAboutPanel: React.FC = () => {
}
function renderVersion() {
- if (!data || !data.version) { return; }
+ if (!data || !data.version) {
+ return;
+ }
return (
<>
-
-
- {maybeRenderTag()}
-
+
+
+ {maybeRenderTag()}
+
);
}
return (
<>
([]);
- const [databasePath, setDatabasePath] = useState(undefined);
- const [generatedPath, setGeneratedPath] = useState(undefined);
- const [maxTranscodeSize, setMaxTranscodeSize] = useState(undefined);
- const [maxStreamingTranscodeSize, setMaxStreamingTranscodeSize] = useState(undefined);
+ const [databasePath, setDatabasePath] = useState(
+ undefined
+ );
+ const [generatedPath, setGeneratedPath] = useState(
+ undefined
+ );
+ const [maxTranscodeSize, setMaxTranscodeSize] = useState<
+ GQL.StreamingResolutionEnum | undefined
+ >(undefined);
+ const [maxStreamingTranscodeSize, setMaxStreamingTranscodeSize] = useState<
+ GQL.StreamingResolutionEnum | undefined
+ >(undefined);
const [username, setUsername] = useState(undefined);
const [password, setPassword] = useState(undefined);
const [logFile, setLogFile] = useState();
const [logOut, setLogOut] = useState(true);
const [logLevel, setLogLevel] = useState("Info");
const [logAccess, setLogAccess] = useState(true);
- const [excludes, setExcludes] = useState<(string)[]>([]);
+ const [excludes, setExcludes] = useState([]);
const { data, error, loading } = StashService.useConfiguration();
@@ -36,12 +44,11 @@ export const SettingsConfigurationPanel: React.FC = () => {
logOut,
logLevel,
logAccess,
- excludes,
+ excludes
});
useEffect(() => {
- if (!data?.configuration || error)
- return;
+ if (!data?.configuration || error) return;
const conf = data.configuration;
if (conf.general) {
@@ -65,27 +72,26 @@ export const SettingsConfigurationPanel: React.FC = () => {
}
function excludeRegexChanged(idx: number, value: string) {
- const newExcludes = excludes.map((regex, i)=> {
- const ret = ( idx !== i ) ? regex : value ;
- return ret
- })
+ const newExcludes = excludes.map((regex, i) => {
+ const ret = idx !== i ? regex : value;
+ return ret;
+ });
setExcludes(newExcludes);
}
function excludeRemoveRegex(idx: number) {
- const newExcludes = excludes.filter((_regex, i) => i !== idx );
+ const newExcludes = excludes.filter((_regex, i) => i !== idx);
setExcludes(newExcludes);
}
function excludeAddRegex() {
- const demo = "sample\\.mp4$"
+ const demo = "sample\\.mp4$";
const newExcludes = excludes.concat(demo);
setExcludes(newExcludes);
}
-
async function onSave() {
try {
const result = await updateGeneralConfig();
@@ -106,35 +112,46 @@ export const SettingsConfigurationPanel: React.FC = () => {
GQL.StreamingResolutionEnum.Original
].map(resolutionToString);
- function resolutionToString(r : GQL.StreamingResolutionEnum | undefined) {
+ function resolutionToString(r: GQL.StreamingResolutionEnum | undefined) {
switch (r) {
- case GQL.StreamingResolutionEnum.Low: return "240p";
- case GQL.StreamingResolutionEnum.Standard: return "480p";
- case GQL.StreamingResolutionEnum.StandardHd: return "720p";
- case GQL.StreamingResolutionEnum.FullHd: return "1080p";
- case GQL.StreamingResolutionEnum.FourK: return "4k";
- case GQL.StreamingResolutionEnum.Original: return "Original";
+ case GQL.StreamingResolutionEnum.Low:
+ return "240p";
+ case GQL.StreamingResolutionEnum.Standard:
+ return "480p";
+ case GQL.StreamingResolutionEnum.StandardHd:
+ return "720p";
+ case GQL.StreamingResolutionEnum.FullHd:
+ return "1080p";
+ case GQL.StreamingResolutionEnum.FourK:
+ return "4k";
+ case GQL.StreamingResolutionEnum.Original:
+ return "Original";
}
return "Original";
}
- function translateQuality(quality : string) {
+ function translateQuality(quality: string) {
switch (quality) {
- case "240p": return GQL.StreamingResolutionEnum.Low;
- case "480p": return GQL.StreamingResolutionEnum.Standard;
- case "720p": return GQL.StreamingResolutionEnum.StandardHd;
- case "1080p": return GQL.StreamingResolutionEnum.FullHd;
- case "4k": return GQL.StreamingResolutionEnum.FourK;
- case "Original": return GQL.StreamingResolutionEnum.Original;
+ case "240p":
+ return GQL.StreamingResolutionEnum.Low;
+ case "480p":
+ return GQL.StreamingResolutionEnum.Standard;
+ case "720p":
+ return GQL.StreamingResolutionEnum.StandardHd;
+ case "1080p":
+ return GQL.StreamingResolutionEnum.FullHd;
+ case "4k":
+ return GQL.StreamingResolutionEnum.FourK;
+ case "Original":
+ return GQL.StreamingResolutionEnum.Original;
}
return GQL.StreamingResolutionEnum.Original;
}
- if(error)
- return Directory locations to your content
+
+ Directory locations to your content
+
Database Path
- setDatabasePath(e.target.value)} />
- File location for the SQLite database (requires restart)
+ setDatabasePath(e.target.value)}
+ />
+
+ File location for the SQLite database (requires restart)
+
Generated Path
- setGeneratedPath(e.target.value)} />
- Directory location for the generated files (scene markers, scene previews, sprites, etc)
+ setGeneratedPath(e.target.value)}
+ />
+
+ Directory location for the generated files (scene markers, scene
+ previews, sprites, etc)
+
Excluded Patterns
- { excludes ? excludes.map((regexp, i) => (
-
- excludeRegexChanged(i, e.target.value)}
- />
-
-
-
-
- )) : ''
- }
+ {excludes
+ ? excludes.map((regexp, i) => (
+
+
+ excludeRegexChanged(i, e.target.value)
+ }
+ />
+
+
+
+
+ ))
+ : ""}
Maximum streaming transcode size
) => setMaxStreamingTranscodeSize(translateQuality(event.currentTarget.value))}
+ onChange={(event: React.FormEvent) =>
+ setMaxStreamingTranscodeSize(
+ translateQuality(event.currentTarget.value)
+ )
+ }
value={resolutionToString(maxStreamingTranscodeSize)}
>
- { transcodeQualities.map(q => ())}
+ {transcodeQualities.map(q => (
+
+ ))}
- Maximum size for transcoded streams
+
+ Maximum size for transcoded streams
+
@@ -231,13 +287,28 @@ export const SettingsConfigurationPanel: React.FC = () => {
Username
- ) => setUsername(e.currentTarget.value)} />
- Username to access Stash. Leave blank to disable user authentication
+ ) =>
+ setUsername(e.currentTarget.value)
+ }
+ />
+
+ Username to access Stash. Leave blank to disable user authentication
+
Password
- ) => setPassword(e.currentTarget.value)} />
- Password to access Stash. Leave blank to disable user authentication
+ ) =>
+ setPassword(e.currentTarget.value)
+ }
+ />
+
+ Password to access Stash. Leave blank to disable user authentication
+
@@ -246,8 +317,16 @@ export const SettingsConfigurationPanel: React.FC = () => {
Log file
- ) => setLogFile(e.currentTarget.value)} />
- Path to the file to output logging to. Blank to disable file logging. Requires restart.
+ ) =>
+ setLogFile(e.currentTarget.value)
+ }
+ />
+
+ Path to the file to output logging to. Blank to disable file logging.
+ Requires restart.
+
@@ -256,17 +335,26 @@ export const SettingsConfigurationPanel: React.FC = () => {
label="Log to terminal"
onChange={() => setLogOut(!logOut)}
/>
- Logs to the terminal in addition to a file. Always true if file logging is disabled. Requires restart.
+
+ Logs to the terminal in addition to a file. Always true if file
+ logging is disabled. Requires restart.
+
Log Level
) => setLogLevel(event.currentTarget.value)}
+ onChange={(event: React.FormEvent) =>
+ setLogLevel(event.currentTarget.value)
+ }
value={logLevel}
>
- { ["Debug", "Info", "Warning", "Error"].map(o => ()) }
+ {["Debug", "Info", "Warning", "Error"].map(o => (
+
+ ))}
@@ -276,12 +364,16 @@ export const SettingsConfigurationPanel: React.FC = () => {
label="Log http access"
onChange={() => setLogAccess(!logAccess)}
/>
- Logs http access to the terminal. Requires restart.
+
+ Logs http access to the terminal. Requires restart.
+
- + ); }; diff --git a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx b/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx index ae44e934b..4fc8f7abd 100644 --- a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx +++ b/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; -import { Button, Form, Spinner } from 'react-bootstrap'; +import { Button, Form, Spinner } from "react-bootstrap"; import { StashService } from "src/core/StashService"; -import { useToast } from 'src/hooks'; +import { useToast } from "src/hooks"; export const SettingsInterfacePanel: React.FC = () => { const Toast = useToast(); @@ -25,8 +25,7 @@ export const SettingsInterfacePanel: React.FC = () => { }); useEffect(() => { - if (config.error) - return; + if (config.error) return; const iCfg = config?.data?.configuration?.interface; setSoundOnPreview(iCfg?.soundOnPreview ?? true); @@ -51,8 +50,12 @@ export const SettingsInterfacePanel: React.FC = () => { return ( <> - {config.error ?
Scene / Marker Wall
@@ -66,7 +69,9 @@ export const SettingsInterfacePanel: React.FC = () => {
label="Enable sound"
onChange={() => setSoundOnPreview(!soundOnPreview)}
/>
- Configuration for wall items
+
+ Configuration for wall items
+
@@ -75,31 +80,38 @@ export const SettingsInterfacePanel: React.FC = () => {
checked={showStudioAsText}
label="Show Studios as text"
onChange={() => {
- setShowStudioAsText(!showStudioAsText)
+ setShowStudioAsText(!showStudioAsText);
}}
/>
-
+
Scene Player
{
- setAutostartVideo(!autostartVideo)
+ setAutostartVideo(!autostartVideo);
}}
/>
-
+
Maximum loop duration
) => setMaximumLoopDuration(Number.parseInt(event.currentTarget.value, 10) ?? 0)}
+ onChange={(event: React.FormEvent) =>
+ setMaximumLoopDuration(
+ Number.parseInt(event.currentTarget.value, 10) ?? 0
+ )
+ }
min={0}
step={1}
/>
- Maximum scene duration - in seconds - where scene player will loop the video - 0 to disable
+
+ Maximum scene duration - in seconds - where scene player will loop
+ the video - 0 to disable
+
@@ -109,7 +121,7 @@ export const SettingsInterfacePanel: React.FC = () => {
checked={cssEnabled}
label="Custom CSS enabled"
onChange={() => {
- setCSSEnabled(!cssEnabled)
+ setCSSEnabled(!cssEnabled);
}}
/>
@@ -117,13 +129,17 @@ export const SettingsInterfacePanel: React.FC = () => {
as="textarea"
value={css}
onChange={(e: any) => setCSS(e.target.value)}
- rows={16}>
-
- Page must be reloaded for changes to take effect.
+ rows={16}
+ >
+
+ Page must be reloaded for changes to take effect.
+
- + ); }; diff --git a/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx b/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx index aba2f4497..4a4d7d8bc 100644 --- a/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx +++ b/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx @@ -1,13 +1,13 @@ import React, { useState } from "react"; -import { Form, Col } from 'react-bootstrap'; +import { Form, Col } from "react-bootstrap"; import * as GQL from "src/core/generated-graphql"; import { StashService } from "src/core/StashService"; function convertTime(logEntry: GQL.LogEntryDataFragment) { - function pad(val : number) { + function pad(val: number) { let ret = val.toString(); if (val <= 9) { - ret = `0${ ret}`; + ret = `0${ret}`; } return ret; @@ -16,21 +16,23 @@ function convertTime(logEntry: GQL.LogEntryDataFragment) { const date = new Date(logEntry.time); const month = date.getMonth() + 1; const day = date.getDate(); - let dateStr = `${date.getFullYear() }-${ pad(month) }-${ pad(day)}`; - dateStr += ` ${ pad(date.getHours()) }:${ pad(date.getMinutes()) }:${ pad(date.getSeconds())}`; + let dateStr = `${date.getFullYear()}-${pad(month)}-${pad(day)}`; + dateStr += ` ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad( + date.getSeconds() + )}`; return dateStr; } -function levelClass(level : string) { +function levelClass(level: string) { return level.toLowerCase().trim(); } interface ILogElementProps { - logEntry : LogEntry + logEntry: LogEntry; } -const LogElement: React.FC = ({ logEntry }) => {
+const LogElement: React.FC = ({ logEntry }) => {
// pad to maximum length of level enum
const level = logEntry.level.padEnd(GQL.LogLevel.Progress.length);
@@ -39,11 +41,10 @@ const LogElement: React.FC = ({ logEntry }) => {
{logEntry.time}
{level}
{logEntry.message}
-
+
); -} - +}; class LogEntry { public time: string; @@ -77,15 +78,17 @@ export const SettingsLogsPanel: React.FC = () => { const newData = (data?.loggingSubscribe ?? []).map(e => new LogEntry(e)); const filteredLogEntries = [...newData.reverse(), ...oldData] - .filter(filterByLogLevel).slice(0, MAX_LOG_ENTRIES); + .filter(filterByLogLevel) + .slice(0, MAX_LOG_ENTRIES); - const maybeRenderError = error - ? setLogLevel(event.currentTarget.value)}
+ onChange={event => setLogLevel(event.currentTarget.value)}
>
- { logLevels.map(level => ()) }
+ {logLevels.map(level => (
+
+ ))}
- setSprites(!sprites)} />
- setPreviews(!previews)} />
- setMarkers(!markers)} />
- setTranscodes(!transcodes)} />
-
- Generate supporting image, sprite, video, vtt and other files.
+ setSprites(!sprites)}
+ />
+ setPreviews(!previews)}
+ />
+ setMarkers(!markers)}
+ />
+ setTranscodes(!transcodes)}
+ />
+
+
+ Generate supporting image, sprite, video, vtt and other files.
+
);
};
diff --git a/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx b/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx
index 7019141a4..b1a73a955 100644
--- a/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsTasksPanel/SettingsTasksPanel.tsx
@@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react";
-import { Button, Form, ProgressBar } from 'react-bootstrap';
+import { Button, Form, ProgressBar } from "react-bootstrap";
import { Link } from "react-router-dom";
import { StashService } from "src/core/StashService";
-import { useToast } from 'src/hooks';
-import { Modal } from 'src/components/Shared';
+import { useToast } from "src/hooks";
+import { Modal } from "src/components/Shared";
import { GenerateButton } from "./GenerateButton";
export const SettingsTasksPanel: React.FC = () => {
@@ -22,7 +22,7 @@ export const SettingsTasksPanel: React.FC = () => {
const metadataUpdate = StashService.useMetadataUpdate();
function statusToText(s: string) {
- switch(s) {
+ switch (s) {
case "Idle":
return "Idle";
case "Scan":
@@ -38,7 +38,7 @@ export const SettingsTasksPanel: React.FC = () => {
case "Auto Tag":
return "Auto tagging scenes";
default:
- return "Idle"
+ return "Idle";
}
}
@@ -68,7 +68,9 @@ export const SettingsTasksPanel: React.FC = () => {
function onImport() {
setIsImportAlertOpen(false);
- StashService.queryMetadataImport().then(() => { jobStatus.refetch()});
+ StashService.queryMetadataImport().then(() => {
+ jobStatus.refetch();
+ });
}
function renderImportAlert() {
@@ -76,12 +78,12 @@ export const SettingsTasksPanel: React.FC = () => {
setIsImportAlertOpen(false) }}
>
);
@@ -89,7 +91,9 @@ export const SettingsTasksPanel: React.FC = () => {
function onClean() {
setIsCleanAlertOpen(false);
- StashService.queryMetadataClean().then(() => { jobStatus.refetch()});
+ StashService.queryMetadataClean().then(() => {
+ jobStatus.refetch();
+ });
}
function renderCleanAlert() {
@@ -97,13 +101,13 @@ export const SettingsTasksPanel: React.FC = () => {
setIsCleanAlertOpen(false) }}
>
);
@@ -111,7 +115,7 @@ export const SettingsTasksPanel: React.FC = () => {
async function onScan() {
try {
- await StashService.queryMetadataScan({useFileMetadata});
+ await StashService.queryMetadataScan({ useFileMetadata });
Toast.success({ content: "Started scan" });
jobStatus.refetch();
} catch (e) {
@@ -125,7 +129,7 @@ export const SettingsTasksPanel: React.FC = () => {
performers: autoTagPerformers ? wildcard : [],
studios: autoTagStudios ? wildcard : [],
tags: autoTagTags ? wildcard : []
- }
+ };
}
async function onAutoTag() {
@@ -145,7 +149,15 @@ export const SettingsTasksPanel: React.FC = () => {
return (
-
+
);
}
@@ -153,11 +165,15 @@ export const SettingsTasksPanel: React.FC = () => {
function renderJobStatus() {
return (
<>
-
-
- {maybeRenderStop()}
+
+
+ {maybeRenderStop()}
);
}
@@ -180,8 +196,12 @@ export const SettingsTasksPanel: React.FC = () => {
label="Set name, date, details from metadata (if present)"
onChange={() => setUseFileMetadata(!useFileMetadata)}
/>
-
- Scan for new content and add it to the database.
+
+
+ Scan for new content and add it to the database.
+
@@ -204,8 +224,12 @@ export const SettingsTasksPanel: React.FC = () => { label="Tags" onChange={() => setAutoTagTags(!autoTagTags)} /> - -Auto-tag content based on filenames.
+
+
+ Auto-tag content based on filenames.
+
@@ -219,21 +243,50 @@ export const SettingsTasksPanel: React.FC = () => {
-
- Check for missing files and remove them from the database. This is a destructive action.
+
+
+ Check for missing files and remove them from the database. This is a
+ destructive action.
+
-
- Export the database content into JSON format.
+
+
+ Export the database content into JSON format.
+
-
- Import from exported JSON. This is a destructive action.
+
+
+ Import from exported JSON. This is a destructive action.
+
);
diff --git a/ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx b/ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx
index 1d87e45d8..6db019597 100644
--- a/ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx
+++ b/ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx
@@ -1,4 +1,12 @@
-import { Button, Form, Modal, Nav, Navbar, OverlayTrigger, Popover } from 'react-bootstrap';
+import {
+ Button,
+ Form,
+ Modal,
+ Nav,
+ Navbar,
+ OverlayTrigger,
+ Popover
+} from "react-bootstrap";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import * as GQL from "src/core/generated-graphql";
@@ -17,56 +25,85 @@ interface IProps {
// TODO: only for performers. make generic
scrapers?: GQL.ListPerformerScrapersListPerformerScrapers[];
- onDisplayScraperDialog?: (scraper: GQL.ListPerformerScrapersListPerformerScrapers) => void;
+ onDisplayScraperDialog?: (
+ scraper: GQL.ListPerformerScrapersListPerformerScrapers
+ ) => void;
}
export const DetailsEditNavbar: React.FC = (props: IProps) => {
const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);
function renderEditButton() {
- if (props.isNew) { return; }
+ if (props.isNew) {
+ return;
+ }
return (
-
- )
+ );
};
diff --git a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx b/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
index 3bd5c274f..7c605cbce 100644
--- a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
+++ b/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
-import { Button, InputGroup, Form, Modal, Spinner } from 'react-bootstrap';
+import { Button, InputGroup, Form, Modal, Spinner } from "react-bootstrap";
import { StashService } from "src/core/StashService";
interface IProps {
@@ -11,13 +11,15 @@ export const FolderSelect: React.FC = (props: IProps) => {
const [currentDirectory, setCurrentDirectory] = useState("");
const [isDisplayingDialog, setIsDisplayingDialog] = useState(false);
const [selectedDirectories, setSelectedDirectories] = useState([]);
- const { data, error, loading } = StashService.useDirectories(currentDirectory);
+ const { data, error, loading } = StashService.useDirectories(
+ currentDirectory
+ );
useEffect(() => {
setSelectedDirectories(props.directories);
}, [props.directories]);
- const selectableDirectories:string[] = data?.directories ?? [];
+ const selectableDirectories: string[] = data?.directories ?? [];
function onSelectDirectory() {
selectedDirectories.push(currentDirectory);
@@ -28,7 +30,9 @@ export const FolderSelect: React.FC = (props: IProps) => {
}
function onRemoveDirectory(directory: string) {
- const newSelectedDirectories = selectedDirectories.filter((dir) => dir !== directory);
+ const newSelectedDirectories = selectedDirectories.filter(
+ dir => dir !== directory
+ );
setSelectedDirectories(newSelectedDirectories);
props.onDirectoriesChanged(newSelectedDirectories);
}
@@ -40,9 +44,7 @@ export const FolderSelect: React.FC = (props: IProps) => {
onHide={() => setIsDisplayingDialog(false)}
title=""
>
-
- Select Directory
-
+ Select Directory
@@ -52,11 +54,23 @@ export const FolderSelect: React.FC = (props: IProps) => {
defaultValue={currentDirectory}
/>
- {(!data || !data.directories || loading) ?
- {selectableDirectories.map((path) => {
- return ;
+ {selectableDirectories.map(path => {
+ return (
+
+ );
})}
@@ -69,11 +83,18 @@ export const FolderSelect: React.FC = (props: IProps) => {
return (
<>
- {error ?
- {selectedDirectories.map((path) => {
- return
diff --git a/ui/v2.5/src/components/Shared/HoverPopover.tsx b/ui/v2.5/src/components/Shared/HoverPopover.tsx
index 566c64720..1941f4e4d 100644
--- a/ui/v2.5/src/components/Shared/HoverPopover.tsx
+++ b/ui/v2.5/src/components/Shared/HoverPopover.tsx
@@ -1,15 +1,22 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react'
-import { Overlay, Popover, OverlayProps } from 'react-bootstrap'
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { Overlay, Popover, OverlayProps } from "react-bootstrap";
interface IHoverPopover {
- enterDelay?: number;
- leaveDelay?: number;
+ enterDelay?: number;
+ leaveDelay?: number;
content: JSX.Element[] | JSX.Element | string;
className?: string;
placement?: OverlayProps["placement"];
}
-export const HoverPopover: React.FC = ({ enterDelay = 0, leaveDelay = 400, content, children, className, placement = 'top' }) => {
+export const HoverPopover: React.FC = ({
+ enterDelay = 0,
+ leaveDelay = 400,
+ content,
+ children,
+ className,
+ placement = "top"
+}) => {
const [show, setShow] = useState(false);
const triggerRef = useRef(null);
const enterTimer = useRef();
@@ -25,33 +32,35 @@ export const HoverPopover: React.FC = ({ enterDelay = 0, leaveDel
leaveTimer.current = window.setTimeout(() => setShow(false), leaveDelay);
}, [leaveDelay]);
- useEffect(() => (
- () => {
- window.clearTimeout(enterTimer.current)
- window.clearTimeout(leaveTimer.current)
- }
- ), []);
+ useEffect(
+ () => () => {
+ window.clearTimeout(enterTimer.current);
+ window.clearTimeout(leaveTimer.current);
+ },
+ []
+ );
return (
<>
-
@@ -309,7 +346,10 @@ export const Performer: React.FC = () => {
performer={performer}
isNew={isNew}
isEditing={isEditing}
- onToggleEdit={() => { setIsEditing(!isEditing); updatePerformerEditState(performer); }}
+ onToggleEdit={() => {
+ setIsEditing(!isEditing);
+ updatePerformerEditState(performer);
+ }}
onSave={onSave}
onDelete={onDelete}
onImageChange={onImageChangeHandler}
@@ -319,12 +359,12 @@ export const Performer: React.FC = () => {
/>
+
- {TableUtils.renderInputGroup(
- {title: "Birthdate (YYYY-MM-DD)", value: birthdate, isEditing, onChange: setBirthdate})}
+ {TableUtils.renderInputGroup({
+ title: "Birthdate (YYYY-MM-DD)",
+ value: birthdate,
+ isEditing,
+ onChange: setBirthdate
+ })}
{renderEthnicity()}
- {TableUtils.renderInputGroup(
- {title: "Eye Color", value: eyeColor, isEditing, onChange: setEyeColor})}
- {TableUtils.renderInputGroup(
- {title: "Country", value: country, isEditing, onChange: setCountry})}
- {TableUtils.renderInputGroup(
- {title: "Height (CM)", value: height, isEditing, onChange: setHeight})}
- {TableUtils.renderInputGroup(
- {title: "Measurements", value: measurements, isEditing, onChange: setMeasurements})}
- {TableUtils.renderInputGroup(
- {title: "Fake Tits", value: fakeTits, isEditing, onChange: setFakeTits})}
- {TableUtils.renderInputGroup(
- {title: "Career Length", value: careerLength, isEditing, onChange: setCareerLength})}
- {TableUtils.renderInputGroup(
- {title: "Tattoos", value: tattoos, isEditing, onChange: setTattoos})}
- {TableUtils.renderInputGroup(
- {title: "Piercings", value: piercings, isEditing, onChange: setPiercings})}
+ {TableUtils.renderInputGroup({
+ title: "Eye Color",
+ value: eyeColor,
+ isEditing,
+ onChange: setEyeColor
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Country",
+ value: country,
+ isEditing,
+ onChange: setCountry
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Height (CM)",
+ value: height,
+ isEditing,
+ onChange: setHeight
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Measurements",
+ value: measurements,
+ isEditing,
+ onChange: setMeasurements
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Fake Tits",
+ value: fakeTits,
+ isEditing,
+ onChange: setFakeTits
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Career Length",
+ value: careerLength,
+ isEditing,
+ onChange: setCareerLength
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Tattoos",
+ value: tattoos,
+ isEditing,
+ onChange: setTattoos
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Piercings",
+ value: piercings,
+ isEditing,
+ onChange: setPiercings
+ })}
{renderURLField()}
- {TableUtils.renderInputGroup(
- {title: "Twitter", value: twitter, isEditing, onChange: setTwitter})}
- {TableUtils.renderInputGroup(
- {title: "Instagram", value: instagram, isEditing, onChange: setInstagram})}
+ {TableUtils.renderInputGroup({
+ title: "Twitter",
+ value: twitter,
+ isEditing,
+ onChange: setTwitter
+ })}
+ {TableUtils.renderInputGroup({
+ title: "Instagram",
+ value: instagram,
+ isEditing,
+ onChange: setInstagram
+ })}
diff --git a/ui/v2.5/src/components/performers/PerformerList.tsx b/ui/v2.5/src/components/performers/PerformerList.tsx
index bcddf9fac..46fb5bd65 100644
--- a/ui/v2.5/src/components/performers/PerformerList.tsx
+++ b/ui/v2.5/src/components/performers/PerformerList.tsx
@@ -1,8 +1,11 @@
import _ from "lodash";
import React from "react";
import { QueryHookResult } from "react-apollo-hooks";
-import { useHistory } from 'react-router-dom';
-import { FindPerformersQuery, FindPerformersVariables } from "src/core/generated-graphql";
+import { useHistory } from "react-router-dom";
+import {
+ FindPerformersQuery,
+ FindPerformersVariables
+} from "src/core/generated-graphql";
import { StashService } from "src/core/StashService";
import { usePerformersList } from "src/hooks";
import { ListFilterModel } from "src/models/list-filter/filter";
@@ -15,41 +18,60 @@ export const PerformerList: React.FC = () => {
const otherOperations = [
{
text: "Open Random",
- onClick: getRandom,
+ onClick: getRandom
}
];
const listData = usePerformersList({
otherOperations,
- renderContent,
+ renderContent
});
- async function getRandom(result: QueryHookResult, filter: ListFilterModel) {
+ async function getRandom(
+ result: QueryHookResult,
+ filter: ListFilterModel
+ ) {
if (result.data && result.data.findPerformers) {
- const {count} = result.data.findPerformers;
+ const { count } = result.data.findPerformers;
const index = Math.floor(Math.random() * count);
const filterCopy = _.cloneDeep(filter);
filterCopy.itemsPerPage = 1;
filterCopy.currentPage = index + 1;
const singleResult = await StashService.queryFindPerformers(filterCopy);
- if (singleResult && singleResult.data && singleResult.data.findPerformers && singleResult.data.findPerformers.performers.length === 1) {
- const {id} = singleResult!.data!.findPerformers!.performers[0]!;
- history.push(`/performers/${ id}`);
+ if (
+ singleResult &&
+ singleResult.data &&
+ singleResult.data.findPerformers &&
+ singleResult.data.findPerformers.performers.length === 1
+ ) {
+ const { id } = singleResult!.data!.findPerformers!.performers[0]!;
+ history.push(`/performers/${id}`);
}
}
}
function renderContent(
- result: QueryHookResult, filter: ListFilterModel) {
- if (!result.data || !result.data.findPerformers) { return; }
+ result: QueryHookResult,
+ filter: ListFilterModel
+ ) {
+ if (!result.data || !result.data.findPerformers) {
+ return;
+ }
if (filter.displayMode === DisplayMode.Grid) {
return (
;
+ }
+ if (filter.displayMode === DisplayMode.List) {
+ return (
+ = (props: IPerformerListTableProps) => {
-
- function maybeRenderFavoriteHeart(performer : GQL.PerformerDataFragment) {
- if (!performer.favorite) { return; }
+export const PerformerListTable: React.FC = (
+ props: IPerformerListTableProps
+) => {
+ function maybeRenderFavoriteHeart(performer: GQL.PerformerDataFragment) {
+ if (!performer.favorite) {
+ return;
+ }
return (
);
};
-
diff --git a/ui/v2.5/src/components/scenes/SceneMarkerList.tsx b/ui/v2.5/src/components/scenes/SceneMarkerList.tsx
index 3ca359505..02dfa5b93 100644
--- a/ui/v2.5/src/components/scenes/SceneMarkerList.tsx
+++ b/ui/v2.5/src/components/scenes/SceneMarkerList.tsx
@@ -1,8 +1,11 @@
import _ from "lodash";
import React from "react";
import { QueryHookResult } from "react-apollo-hooks";
-import { useHistory } from 'react-router-dom';
-import { FindSceneMarkersQuery, FindSceneMarkersVariables } from "src/core/generated-graphql";
+import { useHistory } from "react-router-dom";
+import {
+ FindSceneMarkersQuery,
+ FindSceneMarkersVariables
+} from "src/core/generated-graphql";
import { StashService } from "src/core/StashService";
import { NavUtils } from "src/utils";
import { useSceneMarkersList } from "src/hooks";
@@ -12,29 +15,41 @@ import { WallPanel } from "../Wall/WallPanel";
export const SceneMarkerList: React.FC = () => {
const history = useHistory();
- const otherOperations = [{
- text: "Play Random",
- onClick: playRandom
- }];
+ const otherOperations = [
+ {
+ text: "Play Random",
+ onClick: playRandom
+ }
+ ];
const listData = useSceneMarkersList({
otherOperations,
- renderContent,
+ renderContent
});
- async function playRandom(result: QueryHookResult, filter: ListFilterModel) {
+ async function playRandom(
+ result: QueryHookResult,
+ filter: ListFilterModel
+ ) {
// query for a random scene
if (result.data && result.data.findSceneMarkers) {
- const {count} = result.data.findSceneMarkers;
+ const { count } = result.data.findSceneMarkers;
const index = Math.floor(Math.random() * count);
const filterCopy = _.cloneDeep(filter);
filterCopy.itemsPerPage = 1;
filterCopy.currentPage = index + 1;
const singleResult = await StashService.queryFindSceneMarkers(filterCopy);
- if (singleResult && singleResult.data && singleResult.data.findSceneMarkers && singleResult.data.findSceneMarkers.scene_markers.length === 1) {
+ if (
+ singleResult &&
+ singleResult.data &&
+ singleResult.data.findSceneMarkers &&
+ singleResult.data.findSceneMarkers.scene_markers.length === 1
+ ) {
// navigate to the scene player page
- const url = NavUtils.makeSceneMarkerUrl(singleResult.data.findSceneMarkers.scene_markers[0])
+ const url = NavUtils.makeSceneMarkerUrl(
+ singleResult.data.findSceneMarkers.scene_markers[0]
+ );
history.push(url);
}
}
@@ -42,12 +57,13 @@ export const SceneMarkerList: React.FC = () => {
function renderContent(
result: QueryHookResult,
- filter: ListFilterModel,
+ filter: ListFilterModel
) {
- if (!result?.data?.findSceneMarkers)
- return;
+ if (!result?.data?.findSceneMarkers) return;
if (filter.displayMode === DisplayMode.Wall) {
- return {
+export class ScenePlayerImpl extends React.Component<
+ IScenePlayerProps,
+ IScenePlayerState
+> {
private player: any;
private lastTime = 0;
private KeyHandlers = {
- NUM0: () => {this.onReset()},
- NUM1: () => {this.onDecrease()},
- NUM2: () => {this.onIncrease()},
- SPACE: () => {this.onPause()}
- }
+ NUM0: () => {
+ this.onReset();
+ },
+ NUM1: () => {
+ this.onDecrease();
+ },
+ NUM2: () => {
+ this.onIncrease();
+ },
+ SPACE: () => {
+ this.onPause();
+ }
+ };
constructor(props: IScenePlayerProps) {
super(props);
@@ -46,7 +57,7 @@ export class ScenePlayerImpl extends React.Component 1) {
this.lastTime = position;
- this.setState({scrubberPosition: position});
+ this.setState({ scrubberPosition: position });
}
}
@@ -103,16 +114,26 @@ export class ScenePlayerImpl extends React.Component GQL.Maybe) | undefined;
- let seekHook: ((seekToPosition: number, _videoTag: any) => void) | undefined;
+ let seekHook:
+ | ((seekToPosition: number, _videoTag: any) => void)
+ | undefined;
let getCurrentTimeHook: ((_videoTag: any) => number) | undefined;
if (!this.props.scene.is_streamable) {
@@ -124,14 +145,14 @@ export class ScenePlayerImpl extends React.Component {
const start = _videoTag.start || 0;
return _videoTag.currentTime + start;
- }
+ };
}
const ret = {
@@ -140,21 +161,23 @@ export class ScenePlayerImpl extends React.Component = (props: IScenePlayerProps) => {
- const config = StashService.useConfiguration();
+export const ScenePlayer: React.FC = (
+ props: IScenePlayerProps
+) => {
+ const config = StashService.useConfiguration();
- return (vttPath, {responseType: "text"});
+ const response = await axios.get(vttPath, { responseType: "text" });
// TODO: This is gnarly
const lines = response.data.split("\n");
- if (lines.shift() !== "WEBVTT") { return; }
- if (lines.shift() !== "") { return; }
- let item: ISceneSpriteItem = {start: 0, end: 0, x: 0, y: 0, w: 0, h: 0};
+ if (lines.shift() !== "WEBVTT") {
+ return;
+ }
+ if (lines.shift() !== "") {
+ return;
+ }
+ let item: ISceneSpriteItem = { start: 0, end: 0, x: 0, y: 0, w: 0, h: 0 };
const newSpriteItems: ISceneSpriteItem[] = [];
while (lines.length) {
const line = lines.shift();
if (line !== undefined) {
if (line.includes("#") && line.includes("=") && line.includes(",")) {
- const size = line.split("#")[1].split("=")[1].split(",");
+ const size = line
+ .split("#")[1]
+ .split("=")[1]
+ .split(",");
item.x = Number(size[0]);
item.y = Number(size[1]);
item.w = Number(size[2]);
item.h = Number(size[3]);
newSpriteItems.push(item);
- item = {start: 0, end: 0, x: 0, y: 0, w: 0, h: 0};
+ item = { start: 0, end: 0, x: 0, y: 0, w: 0, h: 0 };
} else if (line.includes(" --> ")) {
const times = line.split(" --> ");
const start = times[0].split(":");
- item.start = (+start[0]) * 60 * 60 + (+start[1]) * 60 + (+start[2]);
+ item.start = +start[0] * 60 * 60 + +start[1] * 60 + +start[2];
const end = times[1].split(":");
- item.end = (+end[0]) * 60 * 60 + (+end[1]) * 60 + (+end[2]);
+ item.end = +end[0] * 60 * 60 + +end[1] * 60 + +end[2];
}
}
}
@@ -60,8 +72,9 @@ async function fetchSpriteInfo(vttPath: string) {
return newSpriteItems;
}
-
-export const ScenePlayerScrubber: React.FC = (props: IScenePlayerScrubberProps) => {
+export const ScenePlayerScrubber: React.FC = (
+ props: IScenePlayerScrubberProps
+) => {
const contentEl = useRef(null);
const positionIndicatorEl = useRef(null);
const scrubberSliderEl = useRef(null);
@@ -72,52 +85,63 @@ export const ScenePlayerScrubber: React.FC = (props:
const _position = useRef(0);
const getPosition = useCallback(() => _position.current, []);
- const setPosition = useCallback((newPostion: number, shouldEmit: boolean = true) => {
- if (!scrubberSliderEl.current || !positionIndicatorEl.current) { return; }
- if (shouldEmit) { props.onScrolled(); }
+ const setPosition = useCallback(
+ (newPostion: number, shouldEmit: boolean = true) => {
+ if (!scrubberSliderEl.current || !positionIndicatorEl.current) {
+ return;
+ }
+ if (shouldEmit) {
+ props.onScrolled();
+ }
- const midpointOffset = scrubberSliderEl.current.clientWidth / 2;
+ const midpointOffset = scrubberSliderEl.current.clientWidth / 2;
- const bounds = getBounds() * -1;
- if (newPostion > midpointOffset) {
- _position.current = midpointOffset;
- } else if (newPostion < bounds - midpointOffset) {
- _position.current = bounds - midpointOffset;
- } else {
- _position.current = newPostion;
- }
+ const bounds = getBounds() * -1;
+ if (newPostion > midpointOffset) {
+ _position.current = midpointOffset;
+ } else if (newPostion < bounds - midpointOffset) {
+ _position.current = bounds - midpointOffset;
+ } else {
+ _position.current = newPostion;
+ }
- scrubberSliderEl.current.style.transform = `translateX(${_position.current}px)`;
+ scrubberSliderEl.current.style.transform = `translateX(${_position.current}px)`;
- const indicatorPosition = (
- (newPostion - midpointOffset) / (bounds - (midpointOffset * 2)) * scrubberSliderEl.current.clientWidth
- );
- positionIndicatorEl.current.style.transform = `translateX(${indicatorPosition}px)`;
- }, [props]);
+ const indicatorPosition =
+ ((newPostion - midpointOffset) / (bounds - midpointOffset * 2)) *
+ scrubberSliderEl.current.clientWidth;
+ positionIndicatorEl.current.style.transform = `translateX(${indicatorPosition}px)`;
+ },
+ [props]
+ );
const [spriteItems, setSpriteItems] = useState([]);
useEffect(() => {
- if (!scrubberSliderEl.current) { return; }
- scrubberSliderEl.current.style.transform = `translateX(${scrubberSliderEl.current.clientWidth / 2}px)`;
+ if (!scrubberSliderEl.current) {
+ return;
+ }
+ scrubberSliderEl.current.style.transform = `translateX(${scrubberSliderEl
+ .current.clientWidth / 2}px)`;
}, [scrubberSliderEl]);
useEffect(() => {
- if (!props.scene.paths.vtt)
- return;
- fetchSpriteInfo(props.scene.paths.vtt).then((sprites) => {
- if(sprites)
- setSpriteItems(sprites);
+ if (!props.scene.paths.vtt) return;
+ fetchSpriteInfo(props.scene.paths.vtt).then(sprites => {
+ if (sprites) setSpriteItems(sprites);
});
}, [props.scene]);
useEffect(() => {
- if (!scrubberSliderEl.current) { return; }
+ if (!scrubberSliderEl.current) {
+ return;
+ }
const duration = Number(props.scene.file.duration);
const percentage = props.position / duration;
- const position = (
- (scrubberSliderEl.current.scrollWidth * percentage) - (scrubberSliderEl.current.clientWidth / 2)
- ) * -1;
+ const position =
+ (scrubberSliderEl.current.scrollWidth * percentage -
+ scrubberSliderEl.current.clientWidth / 2) *
+ -1;
setPosition(position, false);
}, [props.position, props.scene.file.duration, setPosition]);
@@ -129,37 +153,48 @@ export const ScenePlayerScrubber: React.FC = (props:
});
useEffect(() => {
- if (!contentEl.current) { return; }
+ if (!contentEl.current) {
+ return;
+ }
const el = contentEl.current;
el.addEventListener("mousedown", onMouseDown, false);
return () => {
- if (!el) { return; }
+ if (!el) {
+ return;
+ }
el.removeEventListener("mousedown", onMouseDown);
};
});
useEffect(() => {
- if (!contentEl.current) { return; }
+ if (!contentEl.current) {
+ return;
+ }
const el = contentEl.current;
el.addEventListener("mousemove", onMouseMove, false);
return () => {
- if (!el) { return; }
+ if (!el) {
+ return;
+ }
el.removeEventListener("mousemove", onMouseMove);
};
});
function onMouseUp(this: Window, event: MouseEvent) {
- if (!startMouseEvent.current || !scrubberSliderEl.current) { return; }
+ if (!startMouseEvent.current || !scrubberSliderEl.current) {
+ return;
+ }
mouseDown.current = false;
const delta = Math.abs(event.clientX - startMouseEvent.current.clientX);
if (delta < 1 && event.target instanceof HTMLDivElement) {
- const {target} = event;
+ const { target } = event;
let seekSeconds: number | undefined;
const spriteIdString = target.getAttribute("data-sprite-item-id");
if (spriteIdString != null) {
const spritePercentage = event.offsetX / target.clientWidth;
- const offset = target.offsetLeft + (target.clientWidth * spritePercentage);
+ const offset =
+ target.offsetLeft + target.clientWidth * spritePercentage;
const percentage = offset / scrubberSliderEl.current.scrollWidth;
seekSeconds = percentage * (props.scene.file.duration || 0);
}
@@ -170,9 +205,11 @@ export const ScenePlayerScrubber: React.FC = (props:
seekSeconds = marker.seconds;
}
- if (seekSeconds) { props.onSeek(seekSeconds); }
+ if (seekSeconds) {
+ props.onSeek(seekSeconds);
+ }
} else if (Math.abs(velocity.current) > 25) {
- const newPosition = getPosition() + (velocity.current * 10);
+ const newPosition = getPosition() + velocity.current * 10;
setPosition(newPosition);
velocity.current = 0;
}
@@ -187,7 +224,9 @@ export const ScenePlayerScrubber: React.FC = (props:
}
function onMouseMove(this: HTMLDivElement, event: MouseEvent) {
- if (!mouseDown.current) { return; }
+ if (!mouseDown.current) {
+ return;
+ }
// negative dragging right (past), positive left (future)
const delta = event.clientX - lastMouseEvent.current.clientX;
@@ -201,30 +240,45 @@ export const ScenePlayerScrubber: React.FC = (props:
}
function getBounds(): number {
- if (!scrubberSliderEl.current || !positionIndicatorEl.current) { return 0; }
- return scrubberSliderEl.current.scrollWidth - scrubberSliderEl.current.clientWidth;
+ if (!scrubberSliderEl.current || !positionIndicatorEl.current) {
+ return 0;
+ }
+ return (
+ scrubberSliderEl.current.scrollWidth -
+ scrubberSliderEl.current.clientWidth
+ );
}
function goBack() {
- if (!scrubberSliderEl.current) { return; }
+ if (!scrubberSliderEl.current) {
+ return;
+ }
const newPosition = getPosition() + scrubberSliderEl.current.clientWidth;
setPosition(newPosition);
}
function goForward() {
- if (!scrubberSliderEl.current) { return; }
+ if (!scrubberSliderEl.current) {
+ return;
+ }
const newPosition = getPosition() - scrubberSliderEl.current.clientWidth;
setPosition(newPosition);
}
function renderTags() {
function getTagStyle(i: number): CSSProperties {
- if (!scrubberSliderEl.current ||
- spriteItems.length === 0 ||
- getBounds() === 0) { return {}; }
+ if (
+ !scrubberSliderEl.current ||
+ spriteItems.length === 0 ||
+ getBounds() === 0
+ ) {
+ return {};
+ }
const tags = window.document.getElementsByClassName("scrubber-tag");
- if (tags.length === 0) { return {}; }
+ if (tags.length === 0) {
+ return {};
+ }
let tag: any;
for (let index = 0; index < tags.length; index++) {
@@ -239,16 +293,17 @@ export const ScenePlayerScrubber: React.FC = (props:
const duration = Number(props.scene.file.duration);
const percentage = marker.seconds / duration;
- const left = (scrubberSliderEl.current.scrollWidth * percentage) - (tag.clientWidth / 2);
+ const left =
+ scrubberSliderEl.current.scrollWidth * percentage - tag.clientWidth / 2;
return {
left: `${left}px`,
- height: 20,
+ height: 20
};
}
return props.scene.scene_markers.map((marker, index) => {
const dataAttrs = {
- "data-marker-id": index,
+ "data-marker-id": index
};
return (
({
query: GQL.StopJobDocument,
- fetchPolicy: "network-only",
+ fetchPolicy: "network-only"
});
}
@@ -416,18 +484,21 @@ export class StashService {
return StashService.client.query({
query: GQL.ScrapeFreeonesDocument,
variables: {
- performer_name: performerName,
- },
+ performer_name: performerName
+ }
});
}
- public static queryScrapePerformer(scraperId: string, scrapedPerformer: GQL.ScrapedPerformerInput) {
+ public static queryScrapePerformer(
+ scraperId: string,
+ scrapedPerformer: GQL.ScrapedPerformerInput
+ ) {
return StashService.client.query({
query: GQL.ScrapePerformerDocument,
variables: {
scraper_id: scraperId,
- scraped_performer: scrapedPerformer,
- },
+ scraped_performer: scrapedPerformer
+ }
});
}
@@ -435,8 +506,8 @@ export class StashService {
return StashService.client.query({
query: GQL.ScrapePerformerUrlDocument,
variables: {
- url,
- },
+ url
+ }
});
}
@@ -444,18 +515,21 @@ export class StashService {
return StashService.client.query({
query: GQL.ScrapeSceneUrlDocument,
variables: {
- url,
- },
+ url
+ }
});
}
- public static queryScrapeScene(scraperId: string, scene: GQL.SceneUpdateInput) {
+ public static queryScrapeScene(
+ scraperId: string,
+ scene: GQL.SceneUpdateInput
+ ) {
return StashService.client.query({
query: GQL.ScrapeSceneDocument,
variables: {
scraper_id: scraperId,
- scene,
- },
+ scene
+ }
});
}
@@ -463,7 +537,7 @@ export class StashService {
return StashService.client.query({
query: GQL.MetadataScanDocument,
variables: { input },
- fetchPolicy: "network-only",
+ fetchPolicy: "network-only"
});
}
@@ -471,7 +545,7 @@ export class StashService {
return StashService.client.query({
query: GQL.MetadataAutoTagDocument,
variables: { input },
- fetchPolicy: "network-only",
+ fetchPolicy: "network-only"
});
}
@@ -479,43 +553,46 @@ export class StashService {
return StashService.client.query({
query: GQL.MetadataGenerateDocument,
variables: { input },
- fetchPolicy: "network-only",
+ fetchPolicy: "network-only"
});
}
public static queryMetadataClean() {
return StashService.client.query({
query: GQL.MetadataCleanDocument,
- fetchPolicy: "network-only",
+ fetchPolicy: "network-only"
});
}
public static queryMetadataExport() {
return StashService.client.query({
query: GQL.MetadataExportDocument,
- fetchPolicy: "network-only",
+ fetchPolicy: "network-only"
});
}
public static queryMetadataImport() {
return StashService.client.query({
query: GQL.MetadataImportDocument,
- fetchPolicy: "network-only",
+ fetchPolicy: "network-only"
});
}
public static querySceneByPathRegex(filter: GQL.FindFilterType) {
return StashService.client.query({
query: GQL.FindScenesByPathRegexDocument,
- variables: {filter},
+ variables: { filter }
});
}
- public static queryParseSceneFilenames(filter: GQL.FindFilterType, config: GQL.SceneParserInput) {
+ public static queryParseSceneFilenames(
+ filter: GQL.FindFilterType,
+ config: GQL.SceneParserInput
+ ) {
return StashService.client.query({
query: GQL.ParseSceneFilenamesDocument,
- variables: {filter, config},
- fetchPolicy: "network-only",
+ variables: { filter, config },
+ fetchPolicy: "network-only"
});
}
diff --git a/ui/v2.5/src/core/generated-graphql.tsx b/ui/v2.5/src/core/generated-graphql.tsx
index af909dbc3..e64e20bc8 100644
--- a/ui/v2.5/src/core/generated-graphql.tsx
+++ b/ui/v2.5/src/core/generated-graphql.tsx
@@ -634,7 +634,7 @@ export type ScenesUpdateVariables = {
export type ScenesUpdateMutation = {
__typename?: "Mutation";
- scenesUpdate: Maybe<(Maybe)[]>;
+ scenesUpdate: Maybe[]>;
};
export type ScenesUpdateScenesUpdate = SceneDataFragment;
@@ -801,7 +801,7 @@ export type MarkerStringsVariables = {
export type MarkerStringsQuery = {
__typename?: "Query";
- markerStrings: (Maybe)[];
+ markerStrings: Maybe[];
};
export type MarkerStringsMarkerStrings = {
diff --git a/ui/v2.5/src/hooks/ListHook.tsx b/ui/v2.5/src/hooks/ListHook.tsx
index 2cb6fa3d9..e8af0495e 100644
--- a/ui/v2.5/src/hooks/ListHook.tsx
+++ b/ui/v2.5/src/hooks/ListHook.tsx
@@ -1,10 +1,10 @@
import _ from "lodash";
import queryString from "query-string";
import React, { useState } from "react";
-import { Spinner } from 'react-bootstrap';
+import { Spinner } from "react-bootstrap";
import { QueryHookResult } from "react-apollo-hooks";
-import { ApolloError } from 'apollo-client';
-import { useHistory } from 'react-router-dom';
+import { ApolloError } from "apollo-client";
+import { useHistory } from "react-router-dom";
import {
FindScenesQuery,
FindScenesVariables,
@@ -21,7 +21,7 @@ import {
FindPerformersQuery,
FindPerformersVariables,
PerformerDataFragment
-} from 'src/core/generated-graphql';
+} from "src/core/generated-graphql";
import { ListFilter } from "../components/list/ListFilter";
import { Pagination } from "../components/list/Pagination";
import { StashService } from "../core/StashService";
@@ -32,19 +32,31 @@ import { DisplayMode, FilterMode } from "../models/list-filter/types";
interface IListHookData {
filter: ListFilterModel;
template: JSX.Element;
- onSelectChange: (id: string, selected : boolean, shiftKey: boolean) => void;
+ onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
}
interface IListHookOperation {
text: string;
- onClick: (result: T, filter: ListFilterModel, selectedIds: Set) => void;
+ onClick: (
+ result: T,
+ filter: ListFilterModel,
+ selectedIds: Set
+ ) => void;
}
interface IListHookOptions {
zoomable?: boolean;
otherOperations?: IListHookOperation[];
- renderContent: (result: T, filter: ListFilterModel, selectedIds: Set, zoomIndex: number) => JSX.Element | undefined;
- renderSelectedOptions?: (result: T, selectedIds: Set) => JSX.Element | undefined;
+ renderContent: (
+ result: T,
+ filter: ListFilterModel,
+ selectedIds: Set,
+ zoomIndex: number
+ ) => JSX.Element | undefined;
+ renderSelectedOptions?: (
+ result: T,
+ selectedIds: Set
+ ) => JSX.Element | undefined;
}
interface IDataItem {
@@ -63,10 +75,15 @@ interface IQuery {
}
const useList = (
- options: (IListHookOptions & IQuery)
+ options: IListHookOptions & IQuery
): IListHookData => {
const history = useHistory();
- const [filter, setFilter] = useState(new ListFilterModel(options.filterMode, queryString.parse(history.location.search)));
+ const [filter, setFilter] = useState(
+ new ListFilterModel(
+ options.filterMode,
+ queryString.parse(history.location.search)
+ )
+ );
const [selectedIds, setSelectedIds] = useState>(new Set());
const [lastClickedId, setLastClickedId] = useState();
const [zoomIndex, setZoomIndex] = useState(1);
@@ -75,8 +92,8 @@ const useList = (
const totalCount = options.getCount(result);
const items = options.getData(result);
- function updateQueryParams(listfilter:ListFilterModel) {
- const newLocation = { ...history.location};
+ function updateQueryParams(listfilter: ListFilterModel) {
+ const newLocation = { ...history.location };
newLocation.search = listfilter.makeQueryParameters();
history.replace(newLocation);
}
@@ -123,7 +140,7 @@ const useList = (
const newFilter = _.cloneDeep(filter);
// Find if we are editing an existing criteria, then modify that. Or create a new one.
- const existingIndex = newFilter.criteria.findIndex((c) => {
+ const existingIndex = newFilter.criteria.findIndex(c => {
// If we modified an existing criterion, then look for the old id.
const id = oldId || criterion.getId();
return c.getId() === id;
@@ -136,7 +153,9 @@ const useList = (
// Remove duplicate modifiers
newFilter.criteria = newFilter.criteria.filter((obj, pos, arr) => {
- return arr.map((mapObj: any) => mapObj.getId()).indexOf(obj.getId()) === pos;
+ return (
+ arr.map((mapObj: any) => mapObj.getId()).indexOf(obj.getId()) === pos
+ );
});
newFilter.currentPage = 1;
@@ -146,7 +165,9 @@ const useList = (
function onRemoveCriterion(removedCriterion: Criterion) {
const newFilter = _.cloneDeep(filter);
- newFilter.criteria = newFilter.criteria.filter((criterion) => criterion.getId() !== removedCriterion.getId());
+ newFilter.criteria = newFilter.criteria.filter(
+ criterion => criterion.getId() !== removedCriterion.getId()
+ );
newFilter.currentPage = 1;
setFilter(newFilter);
updateQueryParams(newFilter);
@@ -172,7 +193,7 @@ const useList = (
setSelectedIds(newSelectedIds);
}
- function selectRange(startIndex : number, endIndex : number) {
+ function selectRange(startIndex: number, endIndex: number) {
let start = startIndex;
let end = endIndex;
if (start > end) {
@@ -182,9 +203,9 @@ const useList = (
}
const subset = items.slice(start, end + 1);
- const newSelectedIds : Set = new Set();
+ const newSelectedIds: Set = new Set();
- subset.forEach((item) => {
+ subset.forEach(item => {
newSelectedIds.add(item.id);
});
@@ -196,19 +217,19 @@ const useList = (
let thisIndex = -1;
if (lastClickedId) {
- startIndex = items.findIndex((item) => {
+ startIndex = items.findIndex(item => {
return item.id === lastClickedId;
});
}
- thisIndex = items.findIndex((item) => {
+ thisIndex = items.findIndex(item => {
return item.id === id;
});
selectRange(startIndex, thisIndex);
}
- function onSelectChange(id: string, selected : boolean, shiftKey: boolean) {
+ function onSelectChange(id: string, selected: boolean, shiftKey: boolean) {
if (shiftKey) {
multiSelect(id);
} else {
@@ -217,8 +238,8 @@ const useList = (
}
function onSelectAll() {
- const newSelectedIds : Set = new Set();
- items.forEach((item) => {
+ const newSelectedIds: Set = new Set();
+ items.forEach(item => {
newSelectedIds.add(item.id);
});
@@ -227,23 +248,25 @@ const useList = (
}
function onSelectNone() {
- const newSelectedIds : Set = new Set();
+ const newSelectedIds: Set = new Set();
setSelectedIds(newSelectedIds);
setLastClickedId(undefined);
}
- function onChangeZoom(newZoomIndex : number) {
+ function onChangeZoom(newZoomIndex: number) {
setZoomIndex(newZoomIndex);
}
- const otherOperations = options.otherOperations ? options.otherOperations.map((o) => {
- return {
- text: o.text,
- onClick: () => {
- o.onClick(result, filter, selectedIds);
- }
- }
- }) : undefined;
+ const otherOperations = options.otherOperations
+ ? options.otherOperations.map(o => {
+ return {
+ text: o.text,
+ onClick: () => {
+ o.onClick(result, filter, selectedIds);
+ }
+ };
+ })
+ : undefined;
const template = (
TODO
; - } if (filter.displayMode === DisplayMode.List) { + } + if (filter.displayMode === DisplayMode.List) { return ( -| Preview | @@ -26,20 +35,27 @@ export const GalleryList: React.FC = () => {||
|---|---|---|
|
- {gallery.files.length > 0 ? |
- {gallery.path} | ++ {gallery.path} + |
TODO
; } } diff --git a/ui/v2.5/src/components/Galleries/GalleryViewer.tsx b/ui/v2.5/src/components/Galleries/GalleryViewer.tsx index 25d96ef4b..b7cf9c1de 100644 --- a/ui/v2.5/src/components/Galleries/GalleryViewer.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryViewer.tsx @@ -11,7 +11,10 @@ export const GalleryViewer: FunctionComponentPage not found.
- ); + returnPage not found.
; }; diff --git a/ui/v2.5/src/components/Settings/Settings.tsx b/ui/v2.5/src/components/Settings/Settings.tsx index f2f164cdc..e3e02686c 100644 --- a/ui/v2.5/src/components/Settings/Settings.tsx +++ b/ui/v2.5/src/components/Settings/Settings.tsx @@ -1,7 +1,7 @@ import React from "react"; import queryString from "query-string"; -import { Card, Tab, Nav, Row, Col } from 'react-bootstrap'; -import { useHistory, useLocation } from 'react-router-dom'; +import { Card, Tab, Nav, Row, Col } from "react-bootstrap"; +import { useHistory, useLocation } from "react-router-dom"; import { SettingsAboutPanel } from "./SettingsAboutPanel"; import { SettingsConfigurationPanel } from "./SettingsConfigurationPanel"; import { SettingsInterfacePanel } from "./SettingsInterfacePanel"; @@ -9,55 +9,59 @@ import { SettingsLogsPanel } from "./SettingsLogsPanel"; import { SettingsTasksPanel } from "./SettingsTasksPanel/SettingsTasksPanel"; export const Settings: React.FC = () => { - const location = useLocation(); + const location = useLocation(); const history = useHistory(); - const defaultTab = queryString.parse(location.search).tab ?? 'configuration'; + const defaultTab = queryString.parse(location.search).tab ?? "configuration"; - const onSelect = ((val:string) => history.push(`?tab=${val}`)); + const onSelect = (val: string) => history.push(`?tab=${val}`); return (| Build hash: | -{data.version.hash} | -
| Build time: | -{data.version.build_time} | -
| Build hash: | +{data.version.hash} | +
| Build time: | +{data.version.build_time} | +
About
- {!data || loading ?{error.message}
; - if(!data?.configuration || loading) + if (error) return{error.message}
; + if (!data?.configuration || loading) returnAuthentication
Logging
- + ); }; diff --git a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx b/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx index ae44e934b..4fc8f7abd 100644 --- a/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx +++ b/ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; -import { Button, Form, Spinner } from 'react-bootstrap'; +import { Button, Form, Spinner } from "react-bootstrap"; import { StashService } from "src/core/StashService"; -import { useToast } from 'src/hooks'; +import { useToast } from "src/hooks"; export const SettingsInterfacePanel: React.FC = () => { const Toast = useToast(); @@ -25,8 +25,7 @@ export const SettingsInterfacePanel: React.FC = () => { }); useEffect(() => { - if (config.error) - return; + if (config.error) return; const iCfg = config?.data?.configuration?.interface; setSoundOnPreview(iCfg?.soundOnPreview ?? true); @@ -51,8 +50,12 @@ export const SettingsInterfacePanel: React.FC = () => { return ( <> - {config.error ?
{config.error.message}
: ''} - {(!config?.data?.configuration || config.loading) ?{config.error.message}
: ""} + {!config?.data?.configuration || config.loading ? ( +User Interface
- + ); }; diff --git a/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx b/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx index aba2f4497..4a4d7d8bc 100644 --- a/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx +++ b/ui/v2.5/src/components/Settings/SettingsLogsPanel.tsx @@ -1,13 +1,13 @@ import React, { useState } from "react"; -import { Form, Col } from 'react-bootstrap'; +import { Form, Col } from "react-bootstrap"; import * as GQL from "src/core/generated-graphql"; import { StashService } from "src/core/StashService"; function convertTime(logEntry: GQL.LogEntryDataFragment) { - function pad(val : number) { + function pad(val: number) { let ret = val.toString(); if (val <= 9) { - ret = `0${ ret}`; + ret = `0${ret}`; } return ret; @@ -16,21 +16,23 @@ function convertTime(logEntry: GQL.LogEntryDataFragment) { const date = new Date(logEntry.time); const month = date.getMonth() + 1; const day = date.getDate(); - let dateStr = `${date.getFullYear() }-${ pad(month) }-${ pad(day)}`; - dateStr += ` ${ pad(date.getHours()) }:${ pad(date.getMinutes()) }:${ pad(date.getSeconds())}`; + let dateStr = `${date.getFullYear()}-${pad(month)}-${pad(day)}`; + dateStr += ` ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad( + date.getSeconds() + )}`; return dateStr; } -function levelClass(level : string) { +function levelClass(level: string) { return level.toLowerCase().trim(); } interface ILogElementProps { - logEntry : LogEntry + logEntry: LogEntry; } -const LogElement: React.FC
+
); -} - +}; class LogEntry { public time: string; @@ -77,15 +78,17 @@ export const SettingsLogsPanel: React.FC = () => { const newData = (data?.loggingSubscribe ?? []).map(e => new LogEntry(e)); const filteredLogEntries = [...newData.reverse(), ...oldData] - .filter(filterByLogLevel).slice(0, MAX_LOG_ENTRIES); + .filter(filterByLogLevel) + .slice(0, MAX_LOG_ENTRIES); - const maybeRenderError = error - ?
Error connecting to log server: {error.message}
- : '';
+ const maybeRenderError = error ? (
+ Error connecting to log server: {error.message}
+ ) : (
+ ""
+ );
- function filterByLogLevel(logEntry : LogEntry) {
- if (logLevel === "Debug")
- return true;
+ function filterByLogLevel(logEntry: LogEntry) {
+ if (logLevel === "Debug") return true;
const logLevelIndex = logLevels.indexOf(logLevel);
const levelIndex = logLevels.indexOf(logEntry.level);
@@ -104,17 +107,21 @@ export const SettingsLogsPanel: React.FC = () => {
{maybeRenderError}
- {filteredLogEntries.map((logEntry) =>
-
- )}
+ {filteredLogEntries.map(logEntry => (
+
);
diff --git a/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx b/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx
index 21fcbe4e8..af280ce33 100644
--- a/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsTasksPanel/GenerateButton.tsx
@@ -1,7 +1,7 @@
import React, { useState } from "react";
-import { Button, Form } from 'react-bootstrap';
+import { Button, Form } from "react-bootstrap";
import { StashService } from "src/core/StashService";
-import { useToast } from 'src/hooks';
+import { useToast } from "src/hooks";
export const GenerateButton: React.FC = () => {
const Toast = useToast();
@@ -12,7 +12,12 @@ export const GenerateButton: React.FC = () => {
async function onGenerate() {
try {
- await StashService.queryMetadataGenerate({sprites, previews, markers, transcodes});
+ await StashService.queryMetadataGenerate({
+ sprites,
+ previews,
+ markers,
+ transcodes
+ });
Toast.success({ content: "Started generating" });
} catch (e) {
Toast.error(e);
@@ -21,12 +26,36 @@ export const GenerateButton: React.FC = () => {
return (
- Are you sure you want to import? This will delete the database and re-import from - your exported metadata. + Are you sure you want to import? This will delete the database and + re-import from your exported metadata.
- Are you sure you want to Clean? - This will delete db information and generated content - for all scenes that are no longer found in the filesystem. + Are you sure you want to Clean? This will delete db information and + generated content for all scenes that are no longer found in the + filesystem.
Status: {status}
- { status !== "Idle" ?Status: {status}
+ {status !== "Idle" ? ( +@@ -204,8 +224,12 @@ export const SettingsTasksPanel: React.FC = () => { label="Tags" onChange={() => setAutoTagTags(!autoTagTags)} /> - -
Generated Content
Metadata
{error.message}
: ''} + {error ?{error.message}
: ""} {renderDialog()}{path}
;
+ {selectedDirectories.map(path => {
+ return (
+
+ {path}{" "}
+
+
+ );
})}
+
+ {triggerRef.current && (
+
{content}
- }
+ )}
);
-}
+};
diff --git a/ui/v2.5/src/components/Shared/Icon.tsx b/ui/v2.5/src/components/Shared/Icon.tsx
index f59238c54..5ce5bfe3f 100644
--- a/ui/v2.5/src/components/Shared/Icon.tsx
+++ b/ui/v2.5/src/components/Shared/Icon.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconName } from "@fortawesome/fontawesome-svg-core";
interface IIcon {
icon: IconName;
diff --git a/ui/v2.5/src/components/Shared/Modal.tsx b/ui/v2.5/src/components/Shared/Modal.tsx
index f90939b20..5fc9e2252 100644
--- a/ui/v2.5/src/components/Shared/Modal.tsx
+++ b/ui/v2.5/src/components/Shared/Modal.tsx
@@ -1,11 +1,11 @@
import React from "react";
-import { Button, Modal } from 'react-bootstrap';
-import { Icon } from 'src/components/Shared';
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import { Button, Modal } from "react-bootstrap";
+import { Icon } from "src/components/Shared";
+import { IconName } from "@fortawesome/fontawesome-svg-core";
interface IButton {
text?: string;
- variant?: 'danger'|'primary';
+ variant?: "danger" | "primary";
onClick?: () => void;
}
@@ -18,27 +18,42 @@ interface IModal {
accept?: IButton;
}
-const ModalComponent: React.FC = ({ children, show, icon, header, cancel, accept, onHide }) => ((
-
+const ModalComponent: React.FC = ({
+ children,
+ show,
+ icon,
+ header,
+ cancel,
+ accept,
+ onHide
+}) => (
+
- { icon ?
{children}
-));
+);
export default ModalComponent;
diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx
index 9dd474ac7..b5fb3904a 100644
--- a/ui/v2.5/src/components/Shared/Select.tsx
+++ b/ui/v2.5/src/components/Shared/Select.tsx
@@ -1,20 +1,20 @@
import React, { useState, useCallback } from "react";
-import Select, { ValueType } from 'react-select';
-import CreatableSelect from 'react-select/creatable';
-import { debounce } from 'lodash';
+import Select, { ValueType } from "react-select";
+import CreatableSelect from "react-select/creatable";
+import { debounce } from "lodash";
import * as GQL from "src/core/generated-graphql";
import { StashService } from "src/core/StashService";
-import { useToast } from 'src/hooks';
+import { useToast } from "src/hooks";
type ValidTypes =
- GQL.AllPerformersForFilterAllPerformers |
- GQL.AllTagsForFilterAllTags |
- GQL.AllStudiosForFilterAllStudios;
-type Option = { value:string, label:string };
+ | GQL.AllPerformersForFilterAllPerformers
+ | GQL.AllTagsForFilterAllTags
+ | GQL.AllStudiosForFilterAllStudios;
+type Option = { value: string; label: string };
interface ITypeProps {
- type?: 'performers' | 'studios' | 'tags';
+ type?: "performers" | "studios" | "tags";
}
interface IFilterProps {
initialIds: string[];
@@ -40,131 +40,221 @@ interface ISelectProps {
interface ISceneGallerySelect {
initialId?: string;
sceneId: string;
- onSelect: (item: GQL.ValidGalleriesForSceneValidGalleriesForScene | undefined) => void;
+ onSelect: (
+ item: GQL.ValidGalleriesForSceneValidGalleriesForScene | undefined
+ ) => void;
}
-const getSelectedValues = (selectedItems:ValueType
{children}
- { triggerRef.current &&
-
- { cancel
- ?
- : ''
- }
-
+ {cancel ? (
+
+ ) : (
+ ""
+ )}
+
setName(event.target.value)}
- />
+ readOnly={!isEditing}
+ plaintext={!isEditing}
+ defaultValue={name}
+ placeholder="Name"
+ onChange={(event: any) => setName(event.target.value)}
+ />
@@ -334,12 +374,14 @@ export const Performer: React.FC = () => {
readOnly={!isEditing}
plaintext={!isEditing}
placeholder="Aliases"
- onChange={(event: React.FormEvent) => setAliases(event.currentTarget.value) }
+ onChange={(event: React.FormEvent) =>
+ setAliases(event.currentTarget.value)
+ }
/>
- Favorite:
+ Favorite:
-
- {result.data.findPerformers.performers.map((p) => (
);
- } if (filter.displayMode === DisplayMode.List) {
- return = (props:
function renderSprites() {
function getStyleForSprite(index: number): CSSProperties {
- if (!props.scene.paths.vtt) { return {}; }
+ if (!props.scene.paths.vtt) {
+ return {};
+ }
const sprite = spriteItems[index];
const left = sprite.w * index;
const path = props.scene.paths.vtt.replace("_thumbs.vtt", "_sprite.jpg"); // TODO: Gnarly
@@ -273,15 +330,15 @@ export const ScenePlayerScrubber: React.FC = (props:
width: `${sprite.w}px`,
height: `${sprite.h}px`,
margin: "0px auto",
- backgroundPosition: `${-sprite.x }px ${ -sprite.y }px`,
+ backgroundPosition: `${-sprite.x}px ${-sprite.y}px`,
backgroundImage: `url(${path})`,
- left: `${left}px`,
+ left: `${left}px`
};
}
return spriteItems.map((spriteItem, index) => {
const dataAttrs = {
- "data-sprite-item-id": index,
+ "data-sprite-item-id": index
};
return (
= (props:
return (
= (props: IListOperationProps) => {
+export const SceneSelectedOptions: React.FC = (
+ props: IListOperationProps
+) => {
const Toast = useToast();
const [rating, setRating] = useState("");
const [studioId, setStudioId] = useState(undefined);
- const [performerIds, setPerformerIds] = useState(undefined);
+ const [performerIds, setPerformerIds] = useState(
+ undefined
+ );
const [tagIds, setTagIds] = useState(undefined);
const updateScenes = StashService.useBulkSceneUpdate(getSceneInput());
@@ -23,15 +27,15 @@ export const SceneSelectedOptions: React.FC = (props: IList
// Network state
const [isLoading, setIsLoading] = useState(false);
- function getSceneInput() : GQL.BulkSceneUpdateInput {
+ function getSceneInput(): GQL.BulkSceneUpdateInput {
// need to determine what we are actually setting on each scene
const aggregateRating = getRating(props.selected);
const aggregateStudioId = getStudioId(props.selected);
const aggregatePerformerIds = getPerformerIds(props.selected);
const aggregateTagIds = getTagIds(props.selected);
- const sceneInput : GQL.BulkSceneUpdateInput = {
- ids: props.selected.map((scene) => {
+ const sceneInput: GQL.BulkSceneUpdateInput = {
+ ids: props.selected.map(scene => {
return scene.id;
})
};
@@ -39,7 +43,7 @@ export const SceneSelectedOptions: React.FC = (props: IList
// if rating is undefined
if (rating === "") {
// and all scenes have the same rating, then we are unsetting the rating.
- if(aggregateRating) {
+ if (aggregateRating) {
// an undefined rating is ignored in the server, so set it to 0 instead
sceneInput.rating = 0;
}
@@ -102,26 +106,26 @@ export const SceneSelectedOptions: React.FC = (props: IList
}
function getRating(state: GQL.SlimSceneDataFragment[]) {
- let ret : number | undefined;
+ let ret: number | undefined;
let first = true;
- state.forEach((scene : GQL.SlimSceneDataFragment) => {
+ state.forEach((scene: GQL.SlimSceneDataFragment) => {
if (first) {
ret = scene.rating;
first = false;
} else if (ret !== scene.rating) {
- ret = undefined;
- }
+ ret = undefined;
+ }
});
return ret;
}
function getStudioId(state: GQL.SlimSceneDataFragment[]) {
- let ret : string | undefined;
+ let ret: string | undefined;
let first = true;
- state.forEach((scene : GQL.SlimSceneDataFragment) => {
+ state.forEach((scene: GQL.SlimSceneDataFragment) => {
if (first) {
ret = scene?.studio?.id;
first = false;
@@ -137,15 +141,17 @@ export const SceneSelectedOptions: React.FC = (props: IList
}
function getPerformerIds(state: GQL.SlimSceneDataFragment[]) {
- let ret : string[] = [];
+ let ret: string[] = [];
let first = true;
- state.forEach((scene : GQL.SlimSceneDataFragment) => {
+ state.forEach((scene: GQL.SlimSceneDataFragment) => {
if (first) {
ret = scene.performers ? scene.performers.map(p => p.id).sort() : [];
first = false;
} else {
- const perfIds = scene.performers ? scene.performers.map(p => p.id).sort() : [];
+ const perfIds = scene.performers
+ ? scene.performers.map(p => p.id).sort()
+ : [];
if (!_.isEqual(ret, perfIds)) {
ret = [];
@@ -157,10 +163,10 @@ export const SceneSelectedOptions: React.FC = (props: IList
}
function getTagIds(state: GQL.SlimSceneDataFragment[]) {
- let ret : string[] = [];
+ let ret: string[] = [];
let first = true;
- state.forEach((scene : GQL.SlimSceneDataFragment) => {
+ state.forEach((scene: GQL.SlimSceneDataFragment) => {
if (first) {
ret = scene.tags ? scene.tags.map(t => t.id).sort() : [];
first = false;
@@ -178,19 +184,21 @@ export const SceneSelectedOptions: React.FC = (props: IList
function updateScenesEditState(state: GQL.SlimSceneDataFragment[]) {
let updateRating = "";
- let updateStudioId : string | undefined;
- let updatePerformerIds : string[] = [];
- let updateTagIds : string[] = [];
+ let updateStudioId: string | undefined;
+ let updatePerformerIds: string[] = [];
+ let updateTagIds: string[] = [];
let first = true;
- state.forEach((scene : GQL.SlimSceneDataFragment) => {
+ state.forEach((scene: GQL.SlimSceneDataFragment) => {
const thisRating = scene.rating ? scene.rating.toString() : "";
const thisStudio = scene.studio ? scene.studio.id : undefined;
if (first) {
updateRating = thisRating;
updateStudioId = thisStudio;
- updatePerformerIds = scene.performers ? scene.performers.map(p => p.id).sort() : [];
+ updatePerformerIds = scene.performers
+ ? scene.performers.map(p => p.id).sort()
+ : [];
updateTagIds = scene.tags ? scene.tags.map(p => p.id).sort() : [];
first = false;
} else {
@@ -200,7 +208,9 @@ export const SceneSelectedOptions: React.FC = (props: IList
if (studioId !== thisStudio) {
updateStudioId = undefined;
}
- const perfIds = scene.performers ? scene.performers.map(p => p.id).sort() : [];
+ const perfIds = scene.performers
+ ? scene.performers.map(p => p.id).sort()
+ : [];
const tIds = scene.tags ? scene.tags.map(t => t.id).sort() : [];
if (!_.isEqual(performerIds, perfIds)) {
@@ -223,16 +233,23 @@ export const SceneSelectedOptions: React.FC = (props: IList
updateScenesEditState(props.selected);
}, [props.selected]);
- function renderMultiSelect(type: "performers" | "tags", initialIds: string[] | undefined) {
+ function renderMultiSelect(
+ type: "performers" | "tags",
+ initialIds: string[] | undefined
+ ) {
return (
{
- const ids = items.map((i) => i.id);
+ onSelect={items => {
+ const ids = items.map(i => i.id);
switch (type) {
- case "performers": setPerformerIds(ids); break;
- case "tags": setTagIds(ids); break;
+ case "performers":
+ setPerformerIds(ids);
+ break;
+ case "tags":
+ setTagIds(ids);
+ break;
}
}}
initialIds={initialIds ?? []}
@@ -249,17 +266,20 @@ export const SceneSelectedOptions: React.FC = (props: IList
Rating
setRating(event.target.value)}>
- { ["", 1, 2, 3, 4, 5].map(opt => (
-
- )) }
+ onChange={(event: any) => setRating(event.target.value)}
+ >
+ {["", 1, 2, 3, 4, 5].map(opt => (
+
+ ))}
Studio
setStudioId(items[0]?.id)}
+ onSelect={items => setStudioId(items[0]?.id)}
initialIds={studioId ? [studioId] : []}
/>
@@ -275,10 +295,8 @@ export const SceneSelectedOptions: React.FC = (props: IList
-
diff --git a/ui/v2.5/src/components/scenes/helpers.tsx b/ui/v2.5/src/components/scenes/helpers.tsx
index d1cb89526..fa1f05af5 100644
--- a/ui/v2.5/src/components/scenes/helpers.tsx
+++ b/ui/v2.5/src/components/scenes/helpers.tsx
@@ -1,4 +1,4 @@
-import React, { } from "react";
+import React from "react";
import { Link } from "react-router-dom";
import * as GQL from "src/core/generated-graphql";
@@ -7,8 +7,7 @@ export class SceneHelpers {
scene: GQL.SceneDataFragment | GQL.SlimSceneDataFragment,
height: number
) {
- if (!scene.studio)
- return;
+ if (!scene.studio) return;
const style: React.CSSProperties = {
backgroundImage: `url('${scene.studio.image_path}')`,
width: "100%",
@@ -17,17 +16,14 @@ export class SceneHelpers {
backgroundSize: "contain",
display: "inline-block",
backgroundPosition: "center",
- backgroundRepeat: "no-repeat",
+ backgroundRepeat: "no-repeat"
};
- return (
-
- );
+ return ;
}
- public static getJWPlayerId(): string { return "main-jwplayer"; }
+ public static getJWPlayerId(): string {
+ return "main-jwplayer";
+ }
public static getPlayer(): any {
return (window as any).jwplayer("main-jwplayer");
}
diff --git a/ui/v2.5/src/core/StashService.ts b/ui/v2.5/src/core/StashService.ts
index 8bbed51e4..608c8a514 100644
--- a/ui/v2.5/src/core/StashService.ts
+++ b/ui/v2.5/src/core/StashService.ts
@@ -1,6 +1,6 @@
import ApolloClient from "apollo-client";
-import { WebSocketLink } from 'apollo-link-ws';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { WebSocketLink } from "apollo-link-ws";
+import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink, split } from "apollo-boost";
import { getMainDefinition } from "apollo-utilities";
import { ListFilterModel } from "../models/list-filter/filter";
@@ -27,27 +27,27 @@ export class StashService {
if (platformUrl.protocol === "https:") {
wsPlatformUrl.protocol = "wss:";
}
- const url = `${platformUrl.toString().slice(0, -1) }/graphql`;
- const wsUrl = `${wsPlatformUrl.toString().slice(0, -1) }/graphql`;
+ const url = `${platformUrl.toString().slice(0, -1)}/graphql`;
+ const wsUrl = `${wsPlatformUrl.toString().slice(0, -1)}/graphql`;
const httpLink = new HttpLink({
- uri: url,
+ uri: url
});
const wsLink = new WebSocketLink({
uri: wsUrl,
options: {
reconnect: true
- },
+ }
});
const link = split(
({ query }) => {
const { kind, operation } = getMainDefinition(query);
- return kind === 'OperationDefinition' && operation === 'subscription';
+ return kind === "OperationDefinition" && operation === "subscription";
},
wsLink,
- httpLink,
+ httpLink
);
StashService.cache = new InMemoryCache();
@@ -64,18 +64,20 @@ export class StashService {
StashService.client.resetStore();
}
- private static invalidateQueries(queries : string[]) {
+ private static invalidateQueries(queries: string[]) {
if (StashService.cache) {
const cache = StashService.cache as any;
const keyMatchers = queries.map(query => {
- return new RegExp(`^${ query}`);
+ return new RegExp(`^${query}`);
});
const rootQuery = cache.data.data.ROOT_QUERY;
Object.keys(rootQuery).forEach(key => {
- if (keyMatchers.some(matcher => {
- return !!key.match(matcher);
- })) {
+ if (
+ keyMatchers.some(matcher => {
+ return !!key.match(matcher);
+ })
+ ) {
delete rootQuery[key];
}
});
@@ -85,8 +87,8 @@ export class StashService {
public static useFindGalleries(filter: ListFilterModel) {
return GQL.useFindGalleries({
variables: {
- filter: filter.makeFindFilter(),
- },
+ filter: filter.makeFindFilter()
+ }
});
}
@@ -104,8 +106,8 @@ export class StashService {
return GQL.useFindScenes({
variables: {
filter: filter.makeFindFilter(),
- scene_filter: sceneFilter,
- },
+ scene_filter: sceneFilter
+ }
});
}
@@ -117,7 +119,7 @@ export class StashService {
query: GQL.FindScenesDocument,
variables: {
filter: filter.makeFindFilter(),
- scene_filter: sceneFilter,
+ scene_filter: sceneFilter
}
});
}
@@ -136,8 +138,8 @@ export class StashService {
return GQL.useFindSceneMarkers({
variables: {
filter: filter.makeFindFilter(),
- scene_marker_filter: sceneMarkerFilter,
- },
+ scene_marker_filter: sceneMarkerFilter
+ }
});
}
@@ -149,7 +151,7 @@ export class StashService {
query: GQL.FindSceneMarkersDocument,
variables: {
filter: filter.makeFindFilter(),
- scene_marker_filter: sceneMarkerFilter,
+ scene_marker_filter: sceneMarkerFilter
}
});
}
@@ -157,8 +159,8 @@ export class StashService {
public static useFindStudios(filter: ListFilterModel) {
return GQL.useFindStudios({
variables: {
- filter: filter.makeFindFilter(),
- },
+ filter: filter.makeFindFilter()
+ }
});
}
@@ -176,8 +178,8 @@ export class StashService {
return GQL.useFindPerformers({
variables: {
filter: filter.makeFindFilter(),
- performer_filter: performerFilter,
- },
+ performer_filter: performerFilter
+ }
});
}
@@ -189,20 +191,24 @@ export class StashService {
query: GQL.FindPerformersDocument,
variables: {
filter: filter.makeFindFilter(),
- performer_filter: performerFilter,
+ performer_filter: performerFilter
}
});
}
- public static useFindGallery(id: string) { return GQL.useFindGallery({variables: {id}}); }
- public static useFindScene(id: string) { return GQL.useFindScene({variables: {id}}); }
+ public static useFindGallery(id: string) {
+ return GQL.useFindGallery({ variables: { id } });
+ }
+ public static useFindScene(id: string) {
+ return GQL.useFindScene({ variables: { id } });
+ }
public static useFindPerformer(id: string) {
const skip = id === "new";
- return GQL.useFindPerformer({variables: {id}, skip});
+ return GQL.useFindPerformer({ variables: { id }, skip });
}
public static useFindStudio(id: string) {
const skip = id === "new";
- return GQL.useFindStudio({variables: {id}, skip});
+ return GQL.useFindStudio({ variables: { id }, skip });
}
// TODO - scene marker manipulation functions are handled differently
@@ -226,31 +232,59 @@ export class StashService {
public static useListPerformerScrapers() {
return GQL.useListPerformerScrapers();
}
- public static useScrapePerformerList(scraperId: string, q : string) {
- return GQL.useScrapePerformerList({ variables: { scraper_id: scraperId, query: q }, skip: q === ''});
+ public static useScrapePerformerList(scraperId: string, q: string) {
+ return GQL.useScrapePerformerList({
+ variables: { scraper_id: scraperId, query: q },
+ skip: q === ""
+ });
}
- public static useScrapePerformer(scraperId: string, scrapedPerformer : GQL.ScrapedPerformerInput) {
- return GQL.useScrapePerformer({ variables: { scraper_id: scraperId, scraped_performer: scrapedPerformer }});
+ public static useScrapePerformer(
+ scraperId: string,
+ scrapedPerformer: GQL.ScrapedPerformerInput
+ ) {
+ return GQL.useScrapePerformer({
+ variables: { scraper_id: scraperId, scraped_performer: scrapedPerformer }
+ });
}
public static useListSceneScrapers() {
return GQL.useListSceneScrapers();
}
- public static useScrapeFreeonesPerformers(q: string) { return GQL.useScrapeFreeonesPerformers({ variables: { q } }); }
- public static useMarkerStrings() { return GQL.useMarkerStrings(); }
- public static useAllTags() { return GQL.useAllTags(); }
- public static useAllTagsForFilter() { return GQL.useAllTagsForFilter(); }
- public static useAllPerformersForFilter() { return GQL.useAllPerformersForFilter(); }
- public static useAllStudiosForFilter() { return GQL.useAllStudiosForFilter(); }
- public static useValidGalleriesForScene(sceneId: string) {
- return GQL.useValidGalleriesForScene({variables: {scene_id: sceneId}});
+ public static useScrapeFreeonesPerformers(q: string) {
+ return GQL.useScrapeFreeonesPerformers({ variables: { q } });
+ }
+ public static useMarkerStrings() {
+ return GQL.useMarkerStrings();
+ }
+ public static useAllTags() {
+ return GQL.useAllTags();
+ }
+ public static useAllTagsForFilter() {
+ return GQL.useAllTagsForFilter();
+ }
+ public static useAllPerformersForFilter() {
+ return GQL.useAllPerformersForFilter();
+ }
+ public static useAllStudiosForFilter() {
+ return GQL.useAllStudiosForFilter();
+ }
+ public static useValidGalleriesForScene(sceneId: string) {
+ return GQL.useValidGalleriesForScene({ variables: { scene_id: sceneId } });
+ }
+ public static useStats() {
+ return GQL.useStats();
+ }
+ public static useVersion() {
+ return GQL.useVersion();
}
- public static useStats() { return GQL.useStats(); }
- public static useVersion() { return GQL.useVersion(); }
- public static useConfiguration() { return GQL.useConfiguration(); }
- public static useDirectories(path?: string) { return GQL.useDirectories({ variables: { path }}); }
+ public static useConfiguration() {
+ return GQL.useConfiguration();
+ }
+ public static useDirectories(path?: string) {
+ return GQL.useDirectories({ variables: { path } });
+ }
private static performerMutationImpactedQueries = [
"findPerformers",
@@ -262,19 +296,28 @@ export class StashService {
public static usePerformerCreate(input: GQL.PerformerCreateInput) {
return GQL.usePerformerCreate({
variables: input,
- update: () => StashService.invalidateQueries(StashService.performerMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.performerMutationImpactedQueries
+ )
});
}
public static usePerformerUpdate(input: GQL.PerformerUpdateInput) {
return GQL.usePerformerUpdate({
variables: input,
- update: () => StashService.invalidateQueries(StashService.performerMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.performerMutationImpactedQueries
+ )
});
}
public static usePerformerDestroy(input: GQL.PerformerDestroyInput) {
return GQL.usePerformerDestroy({
variables: input,
- update: () => StashService.invalidateQueries(StashService.performerMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.performerMutationImpactedQueries
+ )
});
}
@@ -290,7 +333,10 @@ export class StashService {
public static useSceneUpdate(input: GQL.SceneUpdateInput) {
return GQL.useSceneUpdate({
variables: input,
- update: () => StashService.invalidateQueries(StashService.sceneMutationImpactedQueries),
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.sceneMutationImpactedQueries
+ ),
refetchQueries: ["AllTagsForFilter"]
});
}
@@ -307,18 +353,24 @@ export class StashService {
public static useBulkSceneUpdate(input: GQL.BulkSceneUpdateInput) {
return GQL.useBulkSceneUpdate({
variables: input,
- update: () => StashService.invalidateQueries(StashService.sceneBulkMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.sceneBulkMutationImpactedQueries
+ )
});
}
public static useScenesUpdate(input: GQL.SceneUpdateInput[]) {
- return GQL.useScenesUpdate({ variables: { input }});
+ return GQL.useScenesUpdate({ variables: { input } });
}
public static useSceneDestroy(input: GQL.SceneDestroyInput) {
return GQL.useSceneDestroy({
variables: input,
- update: () => StashService.invalidateQueries(StashService.sceneMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.sceneMutationImpactedQueries
+ )
});
}
@@ -331,21 +383,30 @@ export class StashService {
public static useStudioCreate(input: GQL.StudioCreateInput) {
return GQL.useStudioCreate({
variables: input,
- update: () => StashService.invalidateQueries(StashService.studioMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.studioMutationImpactedQueries
+ )
});
}
public static useStudioUpdate(input: GQL.StudioUpdateInput) {
return GQL.useStudioUpdate({
variables: input,
- update: () => StashService.invalidateQueries(StashService.studioMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.studioMutationImpactedQueries
+ )
});
}
public static useStudioDestroy(input: GQL.StudioDestroyInput) {
return GQL.useStudioDestroy({
variables: input,
- update: () => StashService.invalidateQueries(StashService.studioMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(
+ StashService.studioMutationImpactedQueries
+ )
});
}
@@ -359,30 +420,37 @@ export class StashService {
public static useTagCreate(input: GQL.TagCreateInput) {
return GQL.useTagCreate({
variables: input,
- refetchQueries: ["AllTags", "AllTagsForFilter"],
+ refetchQueries: ["AllTags", "AllTagsForFilter"]
// update: () => StashService.invalidateQueries(StashService.tagMutationImpactedQueries)
});
}
public static useTagUpdate(input: GQL.TagUpdateInput) {
return GQL.useTagUpdate({
variables: input,
- refetchQueries: ["AllTags", "AllTagsForFilter"],
+ refetchQueries: ["AllTags", "AllTagsForFilter"]
});
}
public static useTagDestroy(input: GQL.TagDestroyInput) {
return GQL.useTagDestroy({
variables: input,
refetchQueries: ["AllTags", "AllTagsForFilter"],
- update: () => StashService.invalidateQueries(StashService.tagMutationImpactedQueries)
+ update: () =>
+ StashService.invalidateQueries(StashService.tagMutationImpactedQueries)
});
}
public static useConfigureGeneral(input: GQL.ConfigGeneralInput) {
- return GQL.useConfigureGeneral({ variables: { input }, refetchQueries: ["Configuration"] });
+ return GQL.useConfigureGeneral({
+ variables: { input },
+ refetchQueries: ["Configuration"]
+ });
}
public static useConfigureInterface(input: GQL.ConfigInterfaceInput) {
- return GQL.useConfigureInterface({ variables: { input }, refetchQueries: ["Configuration"] });
+ return GQL.useConfigureInterface({
+ variables: { input },
+ refetchQueries: ["Configuration"]
+ });
}
public static useMetadataUpdate() {
@@ -395,20 +463,20 @@ export class StashService {
public static useLogs() {
return GQL.useLogs({
- fetchPolicy: 'no-cache'
+ fetchPolicy: "no-cache"
});
}
public static useJobStatus() {
return GQL.useJobStatus({
- fetchPolicy: 'no-cache'
+ fetchPolicy: "no-cache"
});
}
public static queryStopJob() {
return StashService.client.query = (props:
style={getStyleForSprite(index)}
{...dataAttrs}
>
- {TextUtils.secondsToTimestamp(spriteItem.start)} - {TextUtils.secondsToTimestamp(spriteItem.end)}
+
+ {TextUtils.secondsToTimestamp(spriteItem.start)} -{" "}
+ {TextUtils.secondsToTimestamp(spriteItem.end)}
+
);
});
@@ -298,21 +358,32 @@ export const ScenePlayerScrubber: React.FC
-
+
-
+
);
};
diff --git a/ui/v2.5/src/components/scenes/SceneSelectedOptions.tsx b/ui/v2.5/src/components/scenes/SceneSelectedOptions.tsx
index 6b9c592f7..ad463febf 100644
--- a/ui/v2.5/src/components/scenes/SceneSelectedOptions.tsx
+++ b/ui/v2.5/src/components/scenes/SceneSelectedOptions.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
-import { Button, ButtonGroup, Form, Spinner } from 'react-bootstrap';
+import { Button, ButtonGroup, Form, Spinner } from "react-bootstrap";
import _ from "lodash";
import { StashService } from "src/core/StashService";
import * as GQL from "src/core/generated-graphql";
@@ -7,15 +7,19 @@ import { FilterSelect, StudioSelect } from "src/components/Shared";
import { useToast } from "src/hooks";
interface IListOperationProps {
- selected: GQL.SlimSceneDataFragment[],
+ selected: GQL.SlimSceneDataFragment[];
onScenesUpdated: () => void;
}
-export const SceneSelectedOptions: React.FC
-
- {renderTags()}
-
+ {renderTags()}
{renderSprites()}
@@ -262,8 +285,14 @@ const useList = (
otherOperations={otherOperations}
filter={filter}
/>
- {options.renderSelectedOptions && selectedIds.size > 0 ? options.renderSelectedOptions(result, selectedIds) : undefined}
- {result.loading ? (
);
return { filter, template, onSelectChange };
-}
+};
type ScenesQuery = QueryHookResult;
-export const useScenesList = (props:IListHookOptions) => (
+export const useScenesList = (props: IListHookOptions) =>
useList({
...props,
filterMode: FilterMode.Scenes,
useData: StashService.useFindScenes,
- getData: (result:ScenesQuery) => (result?.data?.findScenes?.scenes ?? []),
- getCount: (result:ScenesQuery) => (result?.data?.findScenes?.count ?? 0)
- })
-)
+ getData: (result: ScenesQuery) => result?.data?.findScenes?.scenes ?? [],
+ getCount: (result: ScenesQuery) => result?.data?.findScenes?.count ?? 0
+ });
-type SceneMarkersQuery = QueryHookResult;
-export const useSceneMarkersList = (props:IListHookOptions) => (
+type SceneMarkersQuery = QueryHookResult<
+ FindSceneMarkersQuery,
+ FindSceneMarkersVariables
+>;
+export const useSceneMarkersList = (
+ props: IListHookOptions
+) =>
useList({
...props,
filterMode: FilterMode.SceneMarkers,
useData: StashService.useFindSceneMarkers,
- getData: (result:SceneMarkersQuery) => (result?.data?.findSceneMarkers?.scene_markers?? []),
- getCount: (result:SceneMarkersQuery) => (result?.data?.findSceneMarkers?.count ?? 0)
- })
-)
+ getData: (result: SceneMarkersQuery) =>
+ result?.data?.findSceneMarkers?.scene_markers ?? [],
+ getCount: (result: SceneMarkersQuery) =>
+ result?.data?.findSceneMarkers?.count ?? 0
+ });
-type GalleriesQuery = QueryHookResult;
-export const useGalleriesList = (props:IListHookOptions) => (
+type GalleriesQuery = QueryHookResult<
+ FindGalleriesQuery,
+ FindGalleriesVariables
+>;
+export const useGalleriesList = (props: IListHookOptions) =>
useList({
...props,
filterMode: FilterMode.Galleries,
useData: StashService.useFindGalleries,
- getData: (result:GalleriesQuery) => (result?.data?.findGalleries?.galleries ?? []),
- getCount: (result:GalleriesQuery) => (result?.data?.findGalleries?.count ?? 0)
- })
-)
+ getData: (result: GalleriesQuery) =>
+ result?.data?.findGalleries?.galleries ?? [],
+ getCount: (result: GalleriesQuery) =>
+ result?.data?.findGalleries?.count ?? 0
+ });
type StudiosQuery = QueryHookResult;
-export const useStudiosList = (props:IListHookOptions) => (
+export const useStudiosList = (props: IListHookOptions) =>
useList({
...props,
filterMode: FilterMode.Studios,
useData: StashService.useFindStudios,
- getData: (result:StudiosQuery) => (result?.data?.findStudios?.studios ?? []),
- getCount: (result:StudiosQuery) => (result?.data?.findStudios?.count ?? 0)
- })
-)
+ getData: (result: StudiosQuery) => result?.data?.findStudios?.studios ?? [],
+ getCount: (result: StudiosQuery) => result?.data?.findStudios?.count ?? 0
+ });
-type PerformersQuery = QueryHookResult;
-export const usePerformersList = (props:IListHookOptions) => (
+type PerformersQuery = QueryHookResult<
+ FindPerformersQuery,
+ FindPerformersVariables
+>;
+export const usePerformersList = (props: IListHookOptions) =>
useList({
...props,
filterMode: FilterMode.Performers,
useData: StashService.useFindPerformers,
- getData: (result:PerformersQuery) => (result?.data?.findPerformers?.performers ?? []),
- getCount: (result:PerformersQuery) => (result?.data?.findPerformers?.count ?? 0)
- })
-)
-
-
+ getData: (result: PerformersQuery) =>
+ result?.data?.findPerformers?.performers ?? [],
+ getCount: (result: PerformersQuery) =>
+ result?.data?.findPerformers?.count ?? 0
+ });
diff --git a/ui/v2.5/src/hooks/LocalForage.ts b/ui/v2.5/src/hooks/LocalForage.ts
index 4e34d78ae..56d1dc642 100644
--- a/ui/v2.5/src/hooks/LocalForage.ts
+++ b/ui/v2.5/src/hooks/LocalForage.ts
@@ -2,8 +2,7 @@ import localForage from "localforage";
import _ from "lodash";
import React from "react";
-interface IInterfaceWallConfig {
-}
+interface IInterfaceWallConfig {}
export interface IInterfaceConfig {
wall: IInterfaceWallConfig;
}
@@ -47,10 +46,12 @@ function useLocalForage(item: string): ILocalForage {
runAsync();
});
- return {data: json, setData: setJson, error: err};
+ return { data: json, setData: setJson, error: err };
}
-export function useInterfaceLocalForage(): ILocalForage {
+export function useInterfaceLocalForage(): ILocalForage<
+ IInterfaceConfig | undefined
+> {
const result = useLocalForage("interface");
// Set defaults
React.useEffect(() => {
@@ -58,7 +59,7 @@ export function useInterfaceLocalForage(): ILocalForage void>(() => {});
+const ToastContext = createContext<(item: IToast) => void>(() => {});
-export const ToastProvider: React.FC = ({children}) => {
- const [toasts, setToasts] = useState([]);
+export const ToastProvider: React.FC = ({ children }) => {
+ const [toasts, setToasts] = useState([]);
- const removeToast = (id:number) => (
- setToasts(toasts.filter(item => item.id !== id))
- );
+ const removeToast = (id: number) =>
+ setToasts(toasts.filter(item => item.id !== id));
const toastItems = toasts.map(toast => (
removeToast(toast.id)}
- className={toast.variant ?? 'success'}
+ className={toast.variant ?? "success"}
delay={toast.delay ?? 5000}
>
-
- { toast.header ?? 'Stash' }
-
+ {toast.header ?? "Stash"}
{toast.content}
));
- const addToast = (toast:IToast) => (
- setToasts([...toasts, { ...toast, id: toastID++ }])
- );
+ const addToast = (toast: IToast) =>
+ setToasts([...toasts, { ...toast, id: toastID++ }]);
return (
{children}
-
- )
-}
+ );
+};
-function createHookObject(toastFunc: (toast:IToast) => void) {
+function createHookObject(toastFunc: (toast: IToast) => void) {
return {
success: toastFunc,
error: (error: Error) => {
// eslint-disable-next-line no-console
console.error(error.message);
toastFunc({
- variant: 'danger',
- header: 'Error',
+ variant: "danger",
+ header: "Error",
content: error.message ?? error.toString()
});
}
- }
+ };
}
const useToasts = () => {
const setToast = useContext(ToastContext);
const [hookObject, setHookObject] = useState(createHookObject(setToast));
- useEffect(() => (
- setHookObject(createHookObject(setToast))
- ), [setToast]);
+ useEffect(() => setHookObject(createHookObject(setToast)), [setToast]);
return hookObject;
-}
+};
export default useToasts;
diff --git a/ui/v2.5/src/hooks/VideoHover.ts b/ui/v2.5/src/hooks/VideoHover.ts
index 363f964c4..d57c91b63 100644
--- a/ui/v2.5/src/hooks/VideoHover.ts
+++ b/ui/v2.5/src/hooks/VideoHover.ts
@@ -15,17 +15,24 @@ export interface IVideoHoverHookOptions {
}
export class VideoHoverHook {
- public static useVideoHover(options: IVideoHoverHookOptions): IVideoHoverHookData {
+ public static useVideoHover(
+ options: IVideoHoverHookOptions
+ ): IVideoHoverHookData {
const videoEl = useRef(null);
const isPlaying = useRef(false);
const isHovering = useRef(false);
const config = StashService.useConfiguration();
- const soundEnabled = !!config.data && !!config.data.configuration ? config.data.configuration.interface.soundOnPreview : true;
+ const soundEnabled =
+ !!config.data && !!config.data.configuration
+ ? config.data.configuration.interface.soundOnPreview
+ : true;
useEffect(() => {
const videoTag = videoEl.current;
- if (!videoTag) { return; }
+ if (!videoTag) {
+ return;
+ }
videoTag.onplaying = () => {
if (isHovering.current === true) {
isPlaying.current = true;
@@ -33,25 +40,31 @@ export class VideoHoverHook {
videoTag.pause();
}
};
- videoTag.onpause = () => { isPlaying.current = false };
+ videoTag.onpause = () => {
+ isPlaying.current = false;
+ };
}, [videoEl]);
useEffect(() => {
const videoTag = videoEl.current;
- if (!videoTag) { return; }
+ if (!videoTag) {
+ return;
+ }
videoTag.volume = soundEnabled ? 0.05 : 0;
}, [soundEnabled]);
- return {videoEl, isPlaying, isHovering, options};
+ return { videoEl, isPlaying, isHovering, options };
}
public static onMouseEnter(data: IVideoHoverHookData) {
data.isHovering.current = true;
const videoTag = data.videoEl.current;
- if (!videoTag) { return; }
+ if (!videoTag) {
+ return;
+ }
if (videoTag.paused && !data.isPlaying.current) {
- videoTag.play().catch((error) => {
+ videoTag.play().catch(error => {
console.log(error.message);
});
}
@@ -61,7 +74,9 @@ export class VideoHoverHook {
data.isHovering.current = false;
const videoTag = data.videoEl.current;
- if (!videoTag) { return; }
+ if (!videoTag) {
+ return;
+ }
if (!videoTag.paused && data.isPlaying) {
videoTag.pause();
if (data.options.resetOnMouseLeave) {
diff --git a/ui/v2.5/src/hooks/index.ts b/ui/v2.5/src/hooks/index.ts
index f422e3cf9..68977b403 100644
--- a/ui/v2.5/src/hooks/index.ts
+++ b/ui/v2.5/src/hooks/index.ts
@@ -1,4 +1,10 @@
-export { default as useToast } from './Toast';
-export { useInterfaceLocalForage } from './LocalForage';
-export { VideoHoverHook } from './VideoHover';
-export { useScenesList, useSceneMarkersList, useGalleriesList, useStudiosList, usePerformersList } from './ListHook';
+export { default as useToast } from "./Toast";
+export { useInterfaceLocalForage } from "./LocalForage";
+export { VideoHoverHook } from "./VideoHover";
+export {
+ useScenesList,
+ useSceneMarkersList,
+ useGalleriesList,
+ useStudiosList,
+ usePerformersList
+} from "./ListHook";
diff --git a/ui/v2.5/src/index.tsx b/ui/v2.5/src/index.tsx
index bde16b201..07345a0b9 100755
--- a/ui/v2.5/src/index.tsx
+++ b/ui/v2.5/src/index.tsx
@@ -7,13 +7,14 @@ import { StashService } from "./core/StashService";
import "./index.scss";
import * as serviceWorker from "./serviceWorker";
-ReactDOM.render((
+ReactDOM.render(
-
-), document.getElementById("root"));
+ ,
+ document.getElementById("root")
+);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
diff --git a/ui/v2.5/src/models/list-filter/criteria/criterion.ts b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
index 35dbd006a..30b92ae77 100644
--- a/ui/v2.5/src/models/list-filter/criteria/criterion.ts
+++ b/ui/v2.5/src/models/list-filter/criteria/criterion.ts
@@ -4,68 +4,101 @@ import { CriterionModifier } from "src/core/generated-graphql";
import { ILabeledId, ILabeledValue } from "../types";
export type CriterionType =
- "none" |
- "rating" |
- "resolution" |
- "favorite" |
- "hasMarkers" |
- "isMissing" |
- "tags" |
- "sceneTags" |
- "performers" |
- "studios" |
- "birth_year" |
- "age" |
- "ethnicity" |
- "country" |
- "eye_color" |
- "height" |
- "measurements" |
- "fake_tits" |
- "career_length" |
- "tattoos" |
- "piercings" |
- "aliases";
+ | "none"
+ | "rating"
+ | "resolution"
+ | "favorite"
+ | "hasMarkers"
+ | "isMissing"
+ | "tags"
+ | "sceneTags"
+ | "performers"
+ | "studios"
+ | "birth_year"
+ | "age"
+ | "ethnicity"
+ | "country"
+ | "eye_color"
+ | "height"
+ | "measurements"
+ | "fake_tits"
+ | "career_length"
+ | "tattoos"
+ | "piercings"
+ | "aliases";
export abstract class Criterion
{result.error.message}
: undefined} {options.renderContent(result, filter, selectedIds, zoomIndex)}
- { toastItems }
-
+ {toastItems}