Filter criterion fixes (#4090)

* Reorder * Remove PhashDuplicateCriterion * Improve DurationInput * Register abloop outside of player init function * Remove none criterion * Typing improvements * Move makeCriteria to ListFilterModel * Separate PathCriterionOption * Add makeCriterion arg to StringCriterionOption * Remove unused options args * Add DurationCriterionOption * Use createNumberCriterionOption * Add StringBooleanCriterion
stashapp · Sep 12, 2023 · 9f4d0af · 9f4d0af
1 parent 0d13eec
commit 9f4d0af
Show file tree

Hide file tree

Showing 49 changed files with 682 additions and 773 deletions.
diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryAddPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryAddPanel.tsx
@@ -30,7 +30,7 @@ export const GalleryAddPanel: React.FC<IGalleryAddProps> = ({
     // if galleries is already present, then we modify it, otherwise add
     let galleryCriterion = filter.criteria.find((c) => {
       return c.criterionOption.type === "galleries";
-    }) as GalleriesCriterion;
+    }) as GalleriesCriterion | undefined;
 
     if (
       galleryCriterion &&

diff --git a/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryImagesPanel.tsx b/ui/v2.5/src/components/Galleries/GalleryDetails/GalleryImagesPanel.tsx
@@ -33,7 +33,7 @@ export const GalleryImagesPanel: React.FC<IGalleryDetailsProps> = ({
     // if galleries is already present, then we modify it, otherwise add
     let galleryCriterion = filter.criteria.find((c) => {
       return c.criterionOption.type === "galleries";
-    }) as GalleriesCriterion;
+    }) as GalleriesCriterion | undefined;
 
     if (
       galleryCriterion &&

diff --git a/ui/v2.5/src/components/List/CriterionEditor.tsx b/ui/v2.5/src/components/List/CriterionEditor.tsx
@@ -12,7 +12,6 @@ import {
   DateCriterion,
   TimestampCriterion,
   BooleanCriterion,
-  PathCriterionOption,
 } from "src/models/list-filter/criteria/criterion";
 import { useIntl } from "react-intl";
 import {
@@ -47,6 +46,7 @@ import TagsFilter from "./Filters/TagsFilter";
 import { PhashCriterion } from "src/models/list-filter/criteria/phash";
 import { PhashFilter } from "./Filters/PhashFilter";
 import cx from "classnames";
+import { PathCriterion } from "src/models/list-filter/criteria/path";
 
 interface IGenericCriterionEditor {
   criterion: Criterion<CriterionValue>;
@@ -175,7 +175,7 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
         );
       }
     }
-    if (criterion.criterionOption instanceof PathCriterionOption) {
+    if (criterion instanceof PathCriterion) {
       return (
         <PathFilter criterion={criterion} onValueChanged={onValueChanged} />
       );

diff --git a/ui/v2.5/src/components/List/EditFilterDialog.tsx b/ui/v2.5/src/components/List/EditFilterDialog.tsx
@@ -14,7 +14,6 @@ import {
   Criterion,
   CriterionOption,
 } from "src/models/list-filter/criteria/criterion";
-import { makeCriteria } from "src/models/list-filter/criteria/factory";
 import { FormattedMessage, useIntl } from "react-intl";
 import { ConfigurationContext } from "src/hooks/Config";
 import { ListFilterModel } from "src/models/list-filter/filter";
@@ -243,17 +242,11 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
   }, [currentFilter.mode]);
 
   const criterionOptions = useMemo(() => {
-    const filteredOptions = filterOptions.criterionOptions.filter((o) => {
-      return o.type !== "none";
-    });
-
-    filteredOptions.sort((a, b) => {
+    return [...filterOptions.criterionOptions].sort((a, b) => {
       return intl
         .formatMessage({ id: a.messageID })
         .localeCompare(intl.formatMessage({ id: b.messageID }));
     });
-
-    return filteredOptions;
   }, [intl, filterOptions.criterionOptions]);
 
   const optionSelected = useCallback(
@@ -270,11 +263,11 @@ export const EditFilterDialog: React.FC<IEditFilterProps> = ({
       if (existing) {
         setCriterion(existing);
       } else {
-        const newCriterion = makeCriteria(filter.mode, option.type);
+        const newCriterion = filter.makeCriterion(option.type);
         setCriterion(newCriterion);
       }
     },
-    [filter.mode, criteria]
+    [filter, criteria]
   );
 
   const ui = (configuration?.ui ?? {}) as IUIConfig;

diff --git a/ui/v2.5/src/components/List/Filters/DurationFilter.tsx b/ui/v2.5/src/components/List/Filters/DurationFilter.tsx
@@ -17,67 +17,50 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
 }) => {
   const intl = useIntl();
 
-  function onChanged(valueAsNumber: number, property: "value" | "value2") {
+  function onChanged(v: number | undefined, property: "value" | "value2") {
     const { value } = criterion;
-    value[property] = valueAsNumber;
+    value[property] = v;
     onValueChanged(value);
   }
 
-  let equalsControl: JSX.Element | null = null;
-  if (
-    criterion.modifier === CriterionModifier.Equals ||
-    criterion.modifier === CriterionModifier.NotEquals
-  ) {
-    equalsControl = (
-      <Form.Group>
-        <DurationInput
-          numericValue={criterion.value?.value}
-          onValueChange={(v: number) => onChanged(v, "value")}
-          placeholder={intl.formatMessage({ id: "criterion.value" })}
-        />
-      </Form.Group>
-    );
-  }
+  function renderTop() {
+    let placeholder: string;
+    if (
+      criterion.modifier === CriterionModifier.GreaterThan ||
+      criterion.modifier === CriterionModifier.Between ||
+      criterion.modifier === CriterionModifier.NotBetween
+    ) {
+      placeholder = intl.formatMessage({ id: "criterion.greater_than" });
+    } else if (criterion.modifier === CriterionModifier.LessThan) {
+      placeholder = intl.formatMessage({ id: "criterion.less_than" });
+    } else {
+      placeholder = intl.formatMessage({ id: "criterion.value" });
+    }
 
-  let lowerControl: JSX.Element | null = null;
-  if (
-    criterion.modifier === CriterionModifier.GreaterThan ||
-    criterion.modifier === CriterionModifier.Between ||
-    criterion.modifier === CriterionModifier.NotBetween
-  ) {
-    lowerControl = (
+    return (
       <Form.Group>
         <DurationInput
-          numericValue={criterion.value?.value}
-          onValueChange={(v: number) => onChanged(v, "value")}
-          placeholder={intl.formatMessage({ id: "criterion.greater_than" })}
+          value={criterion.value?.value}
+          setValue={(v) => onChanged(v, "value")}
+          placeholder={placeholder}
         />
       </Form.Group>
     );
   }
 
-  let upperControl: JSX.Element | null = null;
-  if (
-    criterion.modifier === CriterionModifier.LessThan ||
-    criterion.modifier === CriterionModifier.Between ||
-    criterion.modifier === CriterionModifier.NotBetween
-  ) {
-    upperControl = (
+  function renderBottom() {
+    if (
+      criterion.modifier !== CriterionModifier.Between &&
+      criterion.modifier !== CriterionModifier.NotBetween
+    ) {
+      return;
+    }
+
+    return (
       <Form.Group>
         <DurationInput
-          numericValue={
-            criterion.modifier === CriterionModifier.LessThan
-              ? criterion.value?.value
-              : criterion.value?.value2
-          }
-          onValueChange={(v: number) =>
-            onChanged(
-              v,
-              criterion.modifier === CriterionModifier.LessThan
-                ? "value"
-                : "value2"
-            )
-          }
+          value={criterion.value?.value2}
+          setValue={(v) => onChanged(v, "value2")}
           placeholder={intl.formatMessage({ id: "criterion.less_than" })}
         />
       </Form.Group>
@@ -86,9 +69,8 @@ export const DurationFilter: React.FC<IDurationFilterProps> = ({
 
   return (
     <>
-      {equalsControl}
-      {lowerControl}
-      {upperControl}
+      {renderTop()}
+      {renderBottom()}
     </>
   );
 };
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
@@ -135,10 +135,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
     }
 
     if (state.duration) {
-      formik.setFieldValue(
-        "duration",
-        DurationUtils.stringToSeconds(state.duration)
-      );
+      const seconds = DurationUtils.stringToSeconds(state.duration);
+      if (seconds !== undefined) {
+        formik.setFieldValue("duration", seconds);
+      }
     }
 
     if (state.date) {
@@ -402,10 +402,8 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
           </Form.Label>
           <Col xs={fieldXS} xl={fieldXL}>
             <DurationInput
-              numericValue={formik.values.duration ?? undefined}
-              onValueChange={(valueAsNumber) => {
-                formik.setFieldValue("duration", valueAsNumber ?? null);
-              }}
+              value={formik.values.duration ?? undefined}
+              setValue={(v) => formik.setFieldValue("duration", v ?? null)}
             />
           </Col>
         </Form.Group>

diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieScenesPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieScenesPanel.tsx
@@ -18,7 +18,7 @@ export const MovieScenesPanel: React.FC<IMovieScenesPanel> = ({
     // if movie is already present, then we modify it, otherwise add
     let movieCriterion = filter.criteria.find((c) => {
       return c.criterionOption.type === "movies";
-    }) as MoviesCriterion;
+    }) as MoviesCriterion | undefined;
 
     if (
       movieCriterion &&

diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -8,7 +8,6 @@ import React, {
   useState,
 } from "react";
 import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from "video.js";
-import abLoopPlugin from "videojs-abloop";
 import useScript from "src/hooks/useScript";
 import "videojs-contrib-dash";
 import "videojs-mobile-ui";
@@ -24,12 +23,6 @@ import "./big-buttons";
 import "./track-activity";
 import "./vrmode";
 import cx from "classnames";
-// @ts-ignore
-import airplay from "@silvermine/videojs-airplay";
-// @ts-ignore
-import chromecast from "@silvermine/videojs-chromecast";
-airplay(videojs);
-chromecast(videojs);
 import {
   useSceneSaveActivity,
   useSceneIncrementPlayCount,
@@ -47,6 +40,17 @@ import { languageMap } from "src/utils/caption";
 import { VIDEO_PLAYER_ID } from "./util";
 import { IUIConfig } from "src/core/config";
 
+// @ts-ignore
+import airplay from "@silvermine/videojs-airplay";
+// @ts-ignore
+import chromecast from "@silvermine/videojs-chromecast";
+import abLoopPlugin from "videojs-abloop";
+
+// register videojs plugins
+airplay(videojs);
+chromecast(videojs);
+abLoopPlugin(window, videojs);
+
 function handleHotkeys(player: VideoJsPlayer, event: videojs.KeyboardEvent) {
   function seekStep(step: number) {
     const time = player.currentTime() + step;
@@ -378,8 +382,6 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     videoEl.classList.add("vjs-big-play-centered");
     videoRef.current!.appendChild(videoEl);
 
-    abLoopPlugin(window, videojs);
-
     const vjs = videojs(videoEl, options);
 
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMarkerForm.tsx
@@ -145,15 +145,14 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
               </Form.Label>
               <div className="col-sm-8 col-xl-12">
                 <DurationInput
-                  onValueChange={(s) => formik.setFieldValue("seconds", s)}
+                  value={formik.values.seconds ?? 0}
+                  setValue={(v) => formik.setFieldValue("seconds", v ?? null)}
                   onReset={() =>
                     formik.setFieldValue(
                       "seconds",
                       Math.round(getPlayerPosition() ?? 0)
                     )
                   }
-                  numericValue={formik.values.seconds}
-                  mandatory
                 />
               </div>
             </div>

diff --git a/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx b/ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx
@@ -356,8 +356,8 @@ export const SettingsInterfacePanel: React.FC = () => {
           onChange={(v) => saveInterface({ maximumLoopDuration: v })}
           renderField={(value, setValue) => (
             <DurationInput
-              numericValue={value}
-              onValueChange={(duration) => setValue(duration ?? 0)}
+              value={value}
+              setValue={(duration) => setValue(duration ?? 0)}
             />
           )}
           renderValue={(v) => {

diff --git a/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx b/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx
@@ -43,17 +43,13 @@ export const SettingsServicesPanel: React.FC = () => {
   } = React.useContext(SettingStateContext);
 
   // undefined to hide dialog, true for enable, false for disable
-  const [enableDisable, setEnableDisable] = useState<boolean | undefined>(
-    undefined
-  );
+  const [enableDisable, setEnableDisable] = useState<boolean>();
 
   const [enableUntilRestart, setEnableUntilRestart] = useState<boolean>(false);
-  const [enableDuration, setEnableDuration] = useState<number | undefined>(
-    undefined
-  );
+  const [enableDuration, setEnableDuration] = useState<number>(0);
 
   const [ipEntry, setIPEntry] = useState<string>("");
-  const [tempIP, setTempIP] = useState<string | undefined>();
+  const [tempIP, setTempIP] = useState<string>();
 
   const { data: statusData, loading, refetch: statusRefetch } = useDLNAStatus();
 
@@ -273,8 +269,8 @@ export const SettingsServicesPanel: React.FC = () => {
 
         <Form.Group id="temp-enable-duration">
           <DurationInput
-            numericValue={enableDuration ?? 0}
-            onValueChange={(v) => setEnableDuration(v ?? 0)}
+            value={enableDuration}
+            setValue={(v) => setEnableDuration(v ?? 0)}
             disabled={enableUntilRestart}
           />
           <Form.Text className="text-muted">
@@ -315,8 +311,8 @@ export const SettingsServicesPanel: React.FC = () => {
 
         <Form.Group id="temp-enable-duration">
           <DurationInput
-            numericValue={enableDuration ?? 0}
-            onValueChange={(v) => setEnableDuration(v ?? 0)}
+            value={enableDuration}
+            setValue={(v) => setEnableDuration(v ?? 0)}
             disabled={enableUntilRestart}
           />
           <Form.Text className="text-muted">