Use formik for scene edit (#1429)

* Use formik for scene edit panel * Fix unsetting rating * Disable save if not dirty * Movie image fixes
2025-12-18 12:54:38 +03:00 · 2021-06-02 08:33:38 +10:00
parent 975343d2e9
commit 1bb5de12e3
9 changed files with 484 additions and 409 deletions
--- a/ui/v2.5/src/components/Changelog/versions/v080.md
+++ b/ui/v2.5/src/components/Changelog/versions/v080.md
@@ -7,6 +7,7 @@
 * Added [DLNA server](/settings?tab=dlna). ([#1364](https://github.com/stashapp/stash/pull/1364))

 ### 🎨 Improvements
+* Prompt when leaving scene edit page with unsaved changed. ([#1429](https://github.com/stashapp/stash/pull/1429))
 * Make multi-set mode buttons more obvious in multi-edit dialog. ([#1435](https://github.com/stashapp/stash/pull/1435))
 * Filter modifiers and sort by options are now sorted alphabetically. ([#1406](https://github.com/stashapp/stash/pull/1406))
 * Add `CreatedAt` and `UpdatedAt` (and `FileModTime` where applicable) to API objects. ([#1421](https://github.com/stashapp/stash/pull/1421))
@@ -16,6 +17,7 @@
 * Add button to remove studio stash ID. ([#1378](https://github.com/stashapp/stash/pull/1378))

 ### 🐛 Bug fixes
+* Fix clearing Performer and Movie ratings not working. ([#1429](https://github.com/stashapp/stash/pull/1429))
 * Fix scraper date parser failing when parsing time. ([#1431](https://github.com/stashapp/stash/pull/1431))
 * Fix quotes in filter labels causing UI errors. ([#1425](https://github.com/stashapp/stash/pull/1425))
 * Fix post-processing not running when scraping by performer fragment. ([#1387](https://github.com/stashapp/stash/pull/1387))
--- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -15,8 +15,6 @@ import {
  Modal,
 } from "src/components/Shared";
 import { useToast } from "src/hooks";
-import { Modal as BSModal, Button } from "react-bootstrap";
-import { ImageUtils } from "src/utils";
 import { MovieScenesPanel } from "./MovieScenesPanel";
 import { MovieDetailsPanel } from "./MovieDetailsPanel";
 import { MovieEditPanel } from "./MovieEditPanel";
@@ -34,7 +32,6 @@ export const Movie: React.FC = () => {
  // Editing state
  const [isEditing, setIsEditing] = useState<boolean>(isNew);
  const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
-  const [isImageAlertOpen, setIsImageAlertOpen] = useState<boolean>(false);

  // Editing movie state
  const [frontImage, setFrontImage] = useState<string | undefined | null>(
@@ -43,11 +40,7 @@ export const Movie: React.FC = () => {
  const [backImage, setBackImage] = useState<string | undefined | null>(
    undefined
  );
-
-  // Movie state
-  const [imageClipboard, setImageClipboard] = useState<string | undefined>(
-    undefined
-  );
+  const [encodingImage, setEncodingImage] = useState<boolean>(false);

  // Network state
  const { data, error, loading } = useFindMovie(id);
@@ -69,23 +62,7 @@ export const Movie: React.FC = () => {
    };
  });

-  function showImageAlert(imageData: string) {
-    setImageClipboard(imageData);
-    setIsImageAlertOpen(true);
-  }
-
-  function setImageFromClipboard(isFrontImage: boolean) {
-    if (isFrontImage) {
-      setFrontImage(imageClipboard);
-    } else {
-      setBackImage(imageClipboard);
-    }
-
-    setImageClipboard(undefined);
-    setIsImageAlertOpen(false);
-  }
-
-  const encodingImage = ImageUtils.usePasteImage(showImageAlert, isEditing);
+  const onImageEncoding = (isEncoding = false) => setEncodingImage(isEncoding);

  if (!isNew && !isEditing) {
    if (!data || !data.findMovie || loading) return <LoadingIndicator />;
@@ -99,8 +76,6 @@ export const Movie: React.FC = () => {
  ) {
    const ret: Partial<GQL.MovieCreateInput | GQL.MovieUpdateInput> = {
      ...input,
-      front_image: frontImage,
-      back_image: backImage,
    };

    if (!isNew) {
@@ -174,43 +149,6 @@ export const Movie: React.FC = () => {
    );
  }

-  function renderImageAlert() {
-    return (
-      <BSModal
-        show={isImageAlertOpen}
-        onHide={() => setIsImageAlertOpen(false)}
-      >
-        <BSModal.Body>
-          <p>Select image to set</p>
-        </BSModal.Body>
-        <BSModal.Footer>
-          <div>
-            <Button
-              className="mr-2"
-              variant="secondary"
-              onClick={() => setIsImageAlertOpen(false)}
-            >
-              Cancel
-            </Button>
-
-            <Button
-              className="mr-2"
-              onClick={() => setImageFromClipboard(false)}
-            >
-              Back Image
-            </Button>
-            <Button
-              className="mr-2"
-              onClick={() => setImageFromClipboard(true)}
-            >
-              Front Image
-            </Button>
-          </div>
-        </BSModal.Footer>
-      </BSModal>
-    );
-  }
-
  function renderFrontImage() {
    let image = movie?.front_image_path;
    if (isEditing) {
@@ -292,6 +230,7 @@ export const Movie: React.FC = () => {
            onDelete={onDelete}
            setFrontImage={setFrontImage}
            setBackImage={setBackImage}
+            onImageEncoding={onImageEncoding}
          />
        )}
      </div>
@@ -302,7 +241,6 @@ export const Movie: React.FC = () => {
        </div>
      )}
      {renderDeleteAlert()}
-      {renderImageAlert()}
    </div>
  );
 };
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx
@@ -14,7 +14,14 @@ import {
  DurationInput,
 } from "src/components/Shared";
 import { useToast } from "src/hooks";
-import { Form, Button, Col, Row, InputGroup } from "react-bootstrap";
+import {
+  Modal as BSModal,
+  Form,
+  Button,
+  Col,
+  Row,
+  InputGroup,
+} from "react-bootstrap";
 import { DurationUtils, ImageUtils } from "src/utils";
 import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars";
 import { useFormik } from "formik";
@@ -30,6 +37,7 @@ interface IMovieEditPanel {
  onDelete: () => void;
  setFrontImage: (image?: string | null) => void;
  setBackImage: (image?: string | null) => void;
+  onImageEncoding: (loading?: boolean) => void;
 }

 export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
@@ -39,12 +47,18 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
  onDelete,
  setFrontImage,
  setBackImage,
+  onImageEncoding,
 }) => {
  const Toast = useToast();

  const isNew = movie === undefined;

  const [isLoading, setIsLoading] = useState(false);
+  const [isImageAlertOpen, setIsImageAlertOpen] = useState<boolean>(false);
+
+  const [imageClipboard, setImageClipboard] = useState<string | undefined>(
+    undefined
+  );

  const Scrapers = useListMovieScrapers();
  const [scrapedMovie, setScrapedMovie] = useState<
@@ -70,6 +84,8 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
    director: yup.string().optional().nullable(),
    synopsis: yup.string().optional().nullable(),
    url: yup.string().optional().nullable(),
+    front_image: yup.string().optional().nullable(),
+    back_image: yup.string().optional().nullable(),
  });

  const initialValues = {
@@ -77,11 +93,13 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
    aliases: movie?.aliases,
    duration: movie?.duration,
    date: movie?.date,
-    rating: movie?.rating,
+    rating: movie?.rating ?? null,
    studio_id: movie?.studio?.id,
    director: movie?.director,
    synopsis: movie?.synopsis,
    url: movie?.url,
+    front_image: undefined,
+    back_image: undefined,
  };

  type InputValues = typeof initialValues;
@@ -92,6 +110,21 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
    onSubmit: (values) => onSubmit(getMovieInput(values)),
  });

+  const encodingImage = ImageUtils.usePasteImage(showImageAlert);
+
+  useEffect(() => {
+    setFrontImage(formik.values.front_image);
+  }, [formik.values.front_image, setFrontImage]);
+
+  useEffect(() => {
+    setBackImage(formik.values.back_image);
+  }, [formik.values.back_image, setBackImage]);
+
+  useEffect(() => onImageEncoding(encodingImage), [
+    onImageEncoding,
+    encodingImage,
+  ]);
+
  function setRating(v: number) {
    formik.setFieldValue("rating", v);
  }
@@ -122,6 +155,22 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
    };
  });

+  function showImageAlert(imageData: string) {
+    setImageClipboard(imageData);
+    setIsImageAlertOpen(true);
+  }
+
+  function setImageFromClipboard(isFrontImage: boolean) {
+    if (isFrontImage) {
+      formik.setFieldValue("front_image", imageClipboard);
+    } else {
+      formik.setFieldValue("back_image", imageClipboard);
+    }
+
+    setImageClipboard(undefined);
+    setIsImageAlertOpen(false);
+  }
+
  function getMovieInput(values: InputValues) {
    const input: Partial<GQL.MovieCreateInput | GQL.MovieUpdateInput> = {
      ...values,
@@ -172,10 +221,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
    }

    const imageStr = (state as GQL.ScrapedMovieDataFragment).front_image;
-    setFrontImage(imageStr ?? undefined);
+    formik.setFieldValue("front_image", imageStr ?? undefined);

    const backImageStr = (state as GQL.ScrapedMovieDataFragment).back_image;
-    setBackImage(backImageStr ?? undefined);
+    formik.setFieldValue("back_image", backImageStr ?? undefined);
  }

  async function onScrapeMovieURL() {
@@ -256,11 +305,52 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
  }

  function onFrontImageChange(event: React.FormEvent<HTMLInputElement>) {
-    ImageUtils.onImageChange(event, setFrontImage);
+    ImageUtils.onImageChange(event, (data) =>
+      formik.setFieldValue("front_image", data)
+    );
  }

  function onBackImageChange(event: React.FormEvent<HTMLInputElement>) {
-    ImageUtils.onImageChange(event, setBackImage);
+    ImageUtils.onImageChange(event, (data) =>
+      formik.setFieldValue("back_image", data)
+    );
+  }
+
+  function renderImageAlert() {
+    return (
+      <BSModal
+        show={isImageAlertOpen}
+        onHide={() => setIsImageAlertOpen(false)}
+      >
+        <BSModal.Body>
+          <p>Select image to set</p>
+        </BSModal.Body>
+        <BSModal.Footer>
+          <div>
+            <Button
+              className="mr-2"
+              variant="secondary"
+              onClick={() => setIsImageAlertOpen(false)}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              className="mr-2"
+              onClick={() => setImageFromClipboard(false)}
+            >
+              Back Image
+            </Button>
+            <Button
+              className="mr-2"
+              onClick={() => setImageFromClipboard(true)}
+            >
+              Front Image
+            </Button>
+          </div>
+        </BSModal.Footer>
+      </BSModal>
+    );
  }

  if (isLoading) return <LoadingIndicator />;
@@ -357,7 +447,9 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
          <Col sm={fieldXS} xl={fieldXL}>
            <RatingStars
              value={formik.values.rating ?? undefined}
-              onSetRating={(value) => formik.setFieldValue("rating", value)}
+              onSetRating={(value) =>
+                formik.setFieldValue("rating", value ?? null)
+              }
            />
          </Col>
        </Form.Group>
@@ -399,20 +491,22 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
        isEditing={isEditing}
        onToggleEdit={onCancel}
        onSave={() => formik.handleSubmit()}
+        saveDisabled={!formik.dirty}
        onImageChange={onFrontImageChange}
-        onImageChangeURL={setFrontImage}
+        onImageChangeURL={(i) => formik.setFieldValue("front_image", i)}
        onClearImage={() => {
-          setFrontImage(null);
+          formik.setFieldValue("front_image", null);
        }}
        onBackImageChange={onBackImageChange}
-        onBackImageChangeURL={setBackImage}
+        onBackImageChangeURL={(i) => formik.setFieldValue("back_image", i)}
        onClearBackImage={() => {
-          setBackImage(null);
+          formik.setFieldValue("back_image", null);
        }}
        onDelete={onDelete}
      />

      {maybeRenderScrapeDialog()}
+      {renderImageAlert()}
    </div>
  );
 };
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerEditPanel.tsx
@@ -144,7 +144,7 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
    tag_ids: (performer.tags ?? []).map((t) => t.id),
    stash_ids: performer.stash_ids ?? undefined,
    image: undefined,
-    rating: performer.rating ?? undefined,
+    rating: performer.rating ?? null,
    details: performer.details ?? "",
    death_date: performer.death_date ?? "",
    hair_color: performer.hair_color ?? "",
@@ -691,6 +691,7 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
          <Button
            className="mr-2"
            variant="primary"
+            disabled={!formik.dirty}
            onClick={() => formik.submitForm()}
          >
            Save
@@ -994,7 +995,9 @@ export const PerformerEditPanel: React.FC<IPerformerDetails> = ({
          <Col xs={fieldXS} xl={fieldXL}>
            <RatingStars
              value={formik.values.rating ?? undefined}
-              onSetRating={(value) => formik.setFieldValue("rating", value)}
+              onSetRating={(value) =>
+                formik.setFieldValue("rating", value ?? null)
+              }
            />
          </Col>
        </Form.Group>
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -50,7 +50,7 @@ export const Scene: React.FC = () => {
  const [timestamp, setTimestamp] = useState<number>(getInitialTimestamp());
  const [collapsed, setCollapsed] = useState(false);

-  const { data, error, loading } = useFindScene(id);
+  const { data, error, loading, refetch } = useFindScene(id);
  const scene = data?.findScene;
  const {
    data: sceneStreams,
@@ -505,6 +505,7 @@ export const Scene: React.FC = () => {
              isVisible={activeTabKey === "scene-edit-panel"}
              scene={scene}
              onDelete={() => setIsDeleteAlertOpen(true)}
+              onUpdate={() => refetch()}
            />
          </Tab.Pane>
        </Tab.Content>
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx
@@ -9,6 +9,7 @@ import {
 } from "react-bootstrap";
 import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
+import * as yup from "yup";
 import {
  queryScrapeScene,
  queryScrapeSceneURL,
@@ -28,9 +29,11 @@ import {
  ImageInput,
 } from "src/components/Shared";
 import { useToast } from "src/hooks";
-import { ImageUtils, FormUtils, EditableTextUtils, TextUtils } from "src/utils";
+import { ImageUtils, FormUtils, TextUtils } from "src/utils";
 import { MovieSelect } from "src/components/Shared/Select";
-import { SceneMovieTable, MovieSceneIndexMap } from "./SceneMovieTable";
+import { useFormik } from "formik";
+import { Prompt } from "react-router";
+import { SceneMovieTable } from "./SceneMovieTable";
 import { RatingStars } from "./RatingStars";
 import { SceneScrapeDialog } from "./SceneScrapeDialog";

@@ -38,6 +41,7 @@ interface IProps {
  scene: GQL.SceneDataFragment;
  isVisible: boolean;
  onDelete: () => void;
+  onUpdate?: () => void;
 }

 export const SceneEditPanel: React.FC<IProps> = ({
@@ -46,37 +50,12 @@ export const SceneEditPanel: React.FC<IProps> = ({
  onDelete,
 }) => {
  const Toast = useToast();
-  const [title, setTitle] = useState<string>(scene.title ?? "");
-  const [details, setDetails] = useState<string>(scene.details ?? "");
-  const [url, setUrl] = useState<string>(scene.url ?? "");
-  const [date, setDate] = useState<string>(scene.date ?? "");
-  const [rating, setRating] = useState<number | undefined>(
-    scene.rating ?? undefined
-  );
  const [galleries, setGalleries] = useState<{ id: string; title: string }[]>(
    scene.galleries.map((g) => ({
      id: g.id,
      title: g.title ?? TextUtils.fileNameFromPath(g.path ?? ""),
    }))
  );
-  const [studioId, setStudioId] = useState<string | undefined>(
-    scene.studio?.id
-  );
-  const [performerIds, setPerformerIds] = useState<string[]>(
-    scene.performers.map((p) => p.id)
-  );
-  const [movieIds, setMovieIds] = useState<string[]>(
-    scene.movies.map((m) => m.movie.id)
-  );
-  const [
-    movieSceneIndexes,
-    setMovieSceneIndexes,
-  ] = useState<MovieSceneIndexMap>(
-    new Map(scene.movies.map((m) => [m.movie.id, m.scene_index ?? undefined]))
-  );
-  const [tagIds, setTagIds] = useState<string[]>(scene.tags.map((t) => t.id));
-  const [coverImage, setCoverImage] = useState<string>();
-  const [stashIDs, setStashIDs] = useState<GQL.StashIdInput[]>(scene.stash_ids);

  const Scrapers = useListSceneScrapers();
  const [queryableScrapers, setQueryableScrapers] = useState<GQL.Scraper[]>([]);
@@ -94,10 +73,60 @@ export const SceneEditPanel: React.FC<IProps> = ({

  const [updateScene] = useSceneUpdate();

+  const schema = yup.object({
+    title: yup.string().optional().nullable(),
+    details: yup.string().optional().nullable(),
+    url: yup.string().optional().nullable(),
+    date: yup.string().optional().nullable(),
+    rating: yup.number().optional().nullable(),
+    gallery_ids: yup.array(yup.string().required()).optional().nullable(),
+    studio_id: yup.string().optional().nullable(),
+    performer_ids: yup.array(yup.string().required()).optional().nullable(),
+    movies: yup
+      .object({
+        movie_id: yup.string().required(),
+        scene_index: yup.string().optional().nullable(),
+      })
+      .optional()
+      .nullable(),
+    tag_ids: yup.array(yup.string().required()).optional().nullable(),
+    cover_image: yup.string().optional().nullable(),
+    stash_ids: yup.mixed<GQL.StashIdInput>().optional().nullable(),
+  });
+
+  const initialValues = {
+    title: scene.title ?? "",
+    details: scene.details ?? "",
+    url: scene.url ?? "",
+    date: scene.date ?? "",
+    rating: scene.rating ?? null,
+    gallery_ids: (scene.galleries ?? []).map((g) => g.id),
+    studio_id: scene.studio?.id,
+    performer_ids: (scene.performers ?? []).map((p) => p.id),
+    movies: (scene.movies ?? []).map((m) => {
+      return { movie_id: m.movie.id, scene_index: m.scene_index };
+    }),
+    tag_ids: (scene.tags ?? []).map((t) => t.id),
+    cover_image: undefined,
+    stash_ids: scene.stash_ids ?? undefined,
+  };
+
+  type InputValues = typeof initialValues;
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema: schema,
+    onSubmit: (values) => onSave(getSceneInput(values)),
+  });
+
+  function setRating(v: number) {
+    formik.setFieldValue("rating", v);
+  }
+
  useEffect(() => {
    if (isVisible) {
      Mousetrap.bind("s s", () => {
-        onSave();
+        formik.handleSubmit();
      });
      Mousetrap.bind("d d", () => {
        onDelete();
@@ -146,86 +175,47 @@ export const SceneEditPanel: React.FC<IProps> = ({
    setQueryableScrapers(newQueryableScrapers);
  }, [Scrapers, stashConfig]);

-  useEffect(() => {
-    let changed = false;
-    const newMap: MovieSceneIndexMap = new Map();
-    if (movieIds) {
-      movieIds.forEach((id) => {
-        if (!movieSceneIndexes.has(id)) {
-          changed = true;
-          newMap.set(id, undefined);
-        } else {
-          newMap.set(id, movieSceneIndexes.get(id));
-        }
-      });
-
-      if (!changed) {
-        movieSceneIndexes.forEach((_v, id) => {
-          if (!newMap.has(id)) {
-            // id was removed
-            changed = true;
-          }
-        });
-      }
-
-      if (changed) {
-        setMovieSceneIndexes(newMap);
-      }
-    }
-  }, [movieIds, movieSceneIndexes]);
-
  const imageEncoding = ImageUtils.usePasteImage(onImageLoad, true);

-  function getSceneInput(): GQL.SceneUpdateInput {
+  function getSceneInput(input: InputValues): GQL.SceneUpdateInput {
    return {
      id: scene.id,
-      title,
-      details,
-      url,
-      date,
-      rating: rating ?? null,
-      gallery_ids: galleries.map((g) => g.id),
-      studio_id: studioId ?? null,
-      performer_ids: performerIds,
-      movies: makeMovieInputs(),
-      tag_ids: tagIds,
-      cover_image: coverImage,
-      stash_ids: stashIDs.map((s) => ({
-        stash_id: s.stash_id,
-        endpoint: s.endpoint,
-      })),
+      ...input,
    };
  }

-  function makeMovieInputs(): GQL.SceneMovieInput[] | undefined {
-    if (!movieIds) {
-      return undefined;
-    }
+  function setMovieIds(movieIds: string[]) {
+    const existingMovies = formik.values.movies;

-    let ret = movieIds.map((id) => {
-      const r: GQL.SceneMovieInput = {
-        movie_id: id,
+    const newMovies = movieIds.map((m) => {
+      const existing = existingMovies.find((mm) => mm.movie_id === m);
+      if (existing) {
+        return existing;
+      }
+
+      return {
+        movie_id: m,
      };
-      return r;
    });

-    ret = ret.map((r) => {
-      return { scene_index: movieSceneIndexes.get(r.movie_id), ...r };
-    });
-
-    return ret;
+    formik.setFieldValue("movies", newMovies);
  }

-  async function onSave() {
+  async function onSave(input: GQL.SceneUpdateInput) {
    setIsLoading(true);
    try {
      const result = await updateScene({
        variables: {
-          input: getSceneInput(),
+          input: {
+            ...input,
+            rating: input.rating ?? null,
+          },
        },
      });
      if (result.data?.sceneUpdate) {
        Toast.success({ content: "Updated scene" });
+        // clear the cover image so that it doesn't appear dirty
+        formik.resetForm({ values: formik.values });
      }
    } catch (e) {
      Toast.error(e);
@@ -234,8 +224,9 @@ export const SceneEditPanel: React.FC<IProps> = ({
  }

  const removeStashID = (stashID: GQL.StashIdInput) => {
-    setStashIDs(
-      stashIDs.filter(
+    formik.setFieldValue(
+      "stash_ids",
+      formik.values.stash_ids.filter(
        (s) =>
          !(s.endpoint === stashID.endpoint && s.stash_id === stashID.stash_id)
      )
@@ -245,9 +236,9 @@ export const SceneEditPanel: React.FC<IProps> = ({
  function renderTableMovies() {
    return (
      <SceneMovieTable
-        movieSceneIndexes={movieSceneIndexes}
+        movieScenes={formik.values.movies}
        onUpdate={(items) => {
-          setMovieSceneIndexes(items);
+          formik.setFieldValue("movies", items);
        }}
      />
    );
@@ -255,7 +246,7 @@ export const SceneEditPanel: React.FC<IProps> = ({

  function onImageLoad(imageData: string) {
    setCoverImagePreview(imageData);
-    setCoverImage(imageData);
+    formik.setFieldValue("cover_image", imageData);
  }

  function onCoverImageChange(event: React.FormEvent<HTMLInputElement>) {
@@ -287,7 +278,10 @@ export const SceneEditPanel: React.FC<IProps> = ({
  async function onScrapeClicked(scraper: GQL.Scraper) {
    setIsLoading(true);
    try {
-      const result = await queryScrapeScene(scraper.id, getSceneInput());
+      const result = await queryScrapeScene(
+        scraper.id,
+        getSceneInput(formik.values)
+      );
      if (!result.data || !result.data.scrapeScene) {
        Toast.success({
          content: "No scenes found",
@@ -328,7 +322,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
      return;
    }

-    const currentScene = getSceneInput();
+    const currentScene = getSceneInput(formik.values);
    if (!currentScene.cover_image) {
      currentScene.cover_image = scene.paths.screenshot;
    }
@@ -423,23 +417,23 @@ export const SceneEditPanel: React.FC<IProps> = ({
    updatedScene: GQL.ScrapedSceneDataFragment
  ) {
    if (updatedScene.title) {
-      setTitle(updatedScene.title);
+      formik.setFieldValue("title", updatedScene.title);
    }

    if (updatedScene.details) {
-      setDetails(updatedScene.details);
+      formik.setFieldValue("details", updatedScene.details);
    }

    if (updatedScene.date) {
-      setDate(updatedScene.date);
+      formik.setFieldValue("date", updatedScene.date);
    }

    if (updatedScene.url) {
-      setUrl(updatedScene.url);
+      formik.setFieldValue("url", updatedScene.url);
    }

    if (updatedScene.studio && updatedScene.studio.stored_id) {
-      setStudioId(updatedScene.studio.stored_id);
+      formik.setFieldValue("studio_id", updatedScene.studio.stored_id);
    }

    if (updatedScene.performers && updatedScene.performers.length > 0) {
@@ -449,7 +443,7 @@ export const SceneEditPanel: React.FC<IProps> = ({

      if (idPerfs.length > 0) {
        const newIds = idPerfs.map((p) => p.stored_id);
-        setPerformerIds(newIds as string[]);
+        formik.setFieldValue("performer_ids", newIds as string[]);
      }
    }

@@ -471,24 +465,24 @@ export const SceneEditPanel: React.FC<IProps> = ({

      if (idTags.length > 0) {
        const newIds = idTags.map((p) => p.stored_id);
-        setTagIds(newIds as string[]);
+        formik.setFieldValue("tag_ids", newIds as string[]);
      }
    }

    if (updatedScene.image) {
      // image is a base64 string
-      setCoverImage(updatedScene.image);
+      formik.setFieldValue("cover_image", updatedScene.image);
      setCoverImagePreview(updatedScene.image);
    }
  }

  async function onScrapeSceneURL() {
-    if (!url) {
+    if (!formik.values.url) {
      return;
    }
    setIsLoading(true);
    try {
-      const result = await queryScrapeSceneURL(url);
+      const result = await queryScrapeSceneURL(formik.values.url);
      if (!result.data || !result.data.scrapeSceneURL) {
        return;
      }
@@ -501,7 +495,7 @@ export const SceneEditPanel: React.FC<IProps> = ({
  }

  function maybeRenderScrapeButton() {
-    if (!url || !urlScrapable(url)) {
+    if (!formik.values.url || !urlScrapable(formik.values.url)) {
      return undefined;
    }
    return (
@@ -515,219 +509,253 @@ export const SceneEditPanel: React.FC<IProps> = ({
    );
  }

+  function renderTextField(field: string, title: string, placeholder?: string) {
+    return (
+      <Form.Group controlId={title} as={Row}>
+        {FormUtils.renderLabel({
+          title,
+        })}
+        <Col xs={9}>
+          <Form.Control
+            className="text-input"
+            placeholder={placeholder ?? title}
+            {...formik.getFieldProps(field)}
+            isInvalid={!!formik.getFieldMeta(field).error}
+          />
+        </Col>
+      </Form.Group>
+    );
+  }
+
  if (isLoading) return <LoadingIndicator />;

  return (
    <div id="scene-edit-details">
+      <Prompt
+        when={formik.dirty}
+        message="Unsaved changes. Are you sure you want to leave?"
+      />
+
      {maybeRenderScrapeDialog()}
-      <div className="form-container row px-3 pt-3">
-        <div className="col-6 edit-buttons mb-3 pl-0">
-          <Button className="edit-button" variant="primary" onClick={onSave}>
-            Save
-          </Button>
-          <Button
-            className="edit-button"
-            variant="danger"
-            onClick={() => onDelete()}
-          >
-            Delete
-          </Button>
+      <Form noValidate onSubmit={formik.handleSubmit}>
+        <div className="form-container row px-3 pt-3">
+          <div className="col-6 edit-buttons mb-3 pl-0">
+            <Button
+              className="edit-button"
+              variant="primary"
+              disabled={!formik.dirty}
+              onClick={() => formik.submitForm()}
+            >
+              Save
+            </Button>
+            <Button
+              className="edit-button"
+              variant="danger"
+              onClick={() => onDelete()}
+            >
+              Delete
+            </Button>
+          </div>
+          <Col xs={6} className="text-right">
+            {maybeRenderStashboxQueryButton()}
+            {renderScraperMenu()}
+          </Col>
        </div>
-        <Col xs={6} className="text-right">
-          {maybeRenderStashboxQueryButton()}
-          {renderScraperMenu()}
-        </Col>
-      </div>
-      <div className="form-container row px-3">
-        <div className="col-12 col-lg-6 col-xl-12">
-          {FormUtils.renderInputGroup({
-            title: "Title",
-            value: title,
-            onChange: setTitle,
-            isEditing: true,
-          })}
-          <Form.Group controlId="url" as={Row}>
-            <Col xs={3} className="pr-0 url-label">
-              <Form.Label className="col-form-label">URL</Form.Label>
-              <div className="float-right scrape-button-container">
-                {maybeRenderScrapeButton()}
-              </div>
-            </Col>
-            <Col xs={9}>
-              {EditableTextUtils.renderInputGroup({
-                title: "URL",
-                value: url,
-                onChange: setUrl,
-                isEditing: true,
-              })}
-            </Col>
-          </Form.Group>
-          {FormUtils.renderInputGroup({
-            title: "Date",
-            value: date,
-            isEditing: true,
-            onChange: setDate,
-            placeholder: "YYYY-MM-DD",
-          })}
-          <Form.Group controlId="rating" as={Row}>
-            {FormUtils.renderLabel({
-              title: "Rating",
-            })}
-            <Col xs={9}>
-              <RatingStars
-                value={rating}
-                onSetRating={(value) => setRating(value)}
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group controlId="galleries" as={Row}>
-            {FormUtils.renderLabel({
-              title: "Galleries",
-            })}
-            <Col xs={9}>
-              <GallerySelect
-                galleries={galleries}
-                onSelect={(items) => setGalleries(items)}
-              />
-            </Col>
-          </Form.Group>
-
-          <Form.Group controlId="studio" as={Row}>
-            {FormUtils.renderLabel({
-              title: "Studio",
-            })}
-            <Col xs={9}>
-              <StudioSelect
-                onSelect={(items) =>
-                  setStudioId(items.length > 0 ? items[0]?.id : undefined)
-                }
-                ids={studioId ? [studioId] : []}
-              />
-            </Col>
-          </Form.Group>
-
-          <Form.Group controlId="performers" as={Row}>
-            {FormUtils.renderLabel({
-              title: "Performers",
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <PerformerSelect
-                isMulti
-                onSelect={(items) =>
-                  setPerformerIds(items.map((item) => item.id))
-                }
-                ids={performerIds}
-              />
-            </Col>
-          </Form.Group>
-
-          <Form.Group controlId="moviesScenes" as={Row}>
-            {FormUtils.renderLabel({
-              title: "Movies/Scenes",
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <MovieSelect
-                isMulti
-                onSelect={(items) => setMovieIds(items.map((item) => item.id))}
-                ids={movieIds}
-              />
-              {renderTableMovies()}
-            </Col>
-          </Form.Group>
-
-          <Form.Group controlId="tags" as={Row}>
-            {FormUtils.renderLabel({
-              title: "Tags",
-              labelProps: {
-                column: true,
-                sm: 3,
-                xl: 12,
-              },
-            })}
-            <Col sm={9} xl={12}>
-              <TagSelect
-                isMulti
-                onSelect={(items) => setTagIds(items.map((item) => item.id))}
-                ids={tagIds}
-              />
-            </Col>
-          </Form.Group>
-          <Form.Group controlId="details">
-            <Form.Label>StashIDs</Form.Label>
-            <ul className="pl-0">
-              {stashIDs.map((stashID) => {
-                const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
-                const link = base ? (
-                  <a
-                    href={`${base}scenes/${stashID.stash_id}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {stashID.stash_id}
-                  </a>
-                ) : (
-                  stashID.stash_id
-                );
-                return (
-                  <li key={stashID.stash_id} className="row no-gutters">
-                    <Button
-                      variant="danger"
-                      className="mr-2 py-0"
-                      title="Delete StashID"
-                      onClick={() => removeStashID(stashID)}
-                    >
-                      <Icon icon="trash-alt" />
-                    </Button>
-                    {link}
-                  </li>
-                );
-              })}
-            </ul>
-          </Form.Group>
-        </div>
-        <div className="col-12 col-lg-6 col-xl-12">
-          <Form.Group controlId="details">
-            <Form.Label>Details</Form.Label>
-            <Form.Control
-              as="textarea"
-              className="scene-description text-input"
-              onChange={(newValue: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setDetails(newValue.currentTarget.value)
-              }
-              value={details}
-            />
-          </Form.Group>
-          <div>
-            <Form.Group controlId="cover">
-              <Form.Label>Cover Image</Form.Label>
-              {imageEncoding ? (
-                <LoadingIndicator message="Encoding image..." />
-              ) : (
-                <img
-                  className="scene-cover"
-                  src={coverImagePreview}
-                  alt="Scene cover"
+        <div className="form-container row px-3">
+          <div className="col-12 col-lg-6 col-xl-12">
+            {renderTextField("title", "Title")}
+            <Form.Group controlId="url" as={Row}>
+              <Col xs={3} className="pr-0 url-label">
+                <Form.Label className="col-form-label">URL</Form.Label>
+                <div className="float-right scrape-button-container">
+                  {maybeRenderScrapeButton()}
+                </div>
+              </Col>
+              <Col xs={9}>
+                <Form.Control
+                  className="text-input"
+                  placeholder="URL"
+                  {...formik.getFieldProps("url")}
+                  isInvalid={!!formik.getFieldMeta("url").error}
                />
-              )}
-              <ImageInput
-                isEditing
-                onImageChange={onCoverImageChange}
-                onImageURL={onImageLoad}
-              />
+              </Col>
+            </Form.Group>
+            {renderTextField("date", "Date", "YYYY-MM-DD")}
+            <Form.Group controlId="rating" as={Row}>
+              {FormUtils.renderLabel({
+                title: "Rating",
+              })}
+              <Col xs={9}>
+                <RatingStars
+                  value={formik.values.rating ?? undefined}
+                  onSetRating={(value) =>
+                    formik.setFieldValue("rating", value ?? null)
+                  }
+                />
+              </Col>
+            </Form.Group>
+            <Form.Group controlId="galleries" as={Row}>
+              {FormUtils.renderLabel({
+                title: "Galleries",
+              })}
+              <Col xs={9}>
+                <GallerySelect
+                  galleries={galleries}
+                  onSelect={(items) => setGalleries(items)}
+                />
+              </Col>
+            </Form.Group>
+
+            <Form.Group controlId="studio" as={Row}>
+              {FormUtils.renderLabel({
+                title: "Studio",
+              })}
+              <Col xs={9}>
+                <StudioSelect
+                  onSelect={(items) =>
+                    formik.setFieldValue(
+                      "studio_id",
+                      items.length > 0 ? items[0]?.id : undefined
+                    )
+                  }
+                  ids={formik.values.studio_id ? [formik.values.studio_id] : []}
+                />
+              </Col>
+            </Form.Group>
+
+            <Form.Group controlId="performers" as={Row}>
+              {FormUtils.renderLabel({
+                title: "Performers",
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <PerformerSelect
+                  isMulti
+                  onSelect={(items) =>
+                    formik.setFieldValue(
+                      "performer_ids",
+                      items.map((item) => item.id)
+                    )
+                  }
+                  ids={formik.values.performer_ids}
+                />
+              </Col>
+            </Form.Group>
+
+            <Form.Group controlId="moviesScenes" as={Row}>
+              {FormUtils.renderLabel({
+                title: "Movies/Scenes",
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <MovieSelect
+                  isMulti
+                  onSelect={(items) =>
+                    setMovieIds(items.map((item) => item.id))
+                  }
+                  ids={formik.values.movies.map((m) => m.movie_id)}
+                />
+                {renderTableMovies()}
+              </Col>
+            </Form.Group>
+
+            <Form.Group controlId="tags" as={Row}>
+              {FormUtils.renderLabel({
+                title: "Tags",
+                labelProps: {
+                  column: true,
+                  sm: 3,
+                  xl: 12,
+                },
+              })}
+              <Col sm={9} xl={12}>
+                <TagSelect
+                  isMulti
+                  onSelect={(items) =>
+                    formik.setFieldValue(
+                      "tag_ids",
+                      items.map((item) => item.id)
+                    )
+                  }
+                  ids={formik.values.tag_ids}
+                />
+              </Col>
+            </Form.Group>
+            <Form.Group controlId="details">
+              <Form.Label>StashIDs</Form.Label>
+              <ul className="pl-0">
+                {formik.values.stash_ids.map((stashID) => {
+                  const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0];
+                  const link = base ? (
+                    <a
+                      href={`${base}scenes/${stashID.stash_id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {stashID.stash_id}
+                    </a>
+                  ) : (
+                    stashID.stash_id
+                  );
+                  return (
+                    <li key={stashID.stash_id} className="row no-gutters">
+                      <Button
+                        variant="danger"
+                        className="mr-2 py-0"
+                        title="Delete StashID"
+                        onClick={() => removeStashID(stashID)}
+                      >
+                        <Icon icon="trash-alt" />
+                      </Button>
+                      {link}
+                    </li>
+                  );
+                })}
+              </ul>
            </Form.Group>
          </div>
+          <div className="col-12 col-lg-6 col-xl-12">
+            <Form.Group controlId="details">
+              <Form.Label>Details</Form.Label>
+              <Form.Control
+                as="textarea"
+                className="scene-description text-input"
+                onChange={(newValue: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  formik.setFieldValue("details", newValue.currentTarget.value)
+                }
+                value={formik.values.details}
+              />
+            </Form.Group>
+            <div>
+              <Form.Group controlId="cover">
+                <Form.Label>Cover Image</Form.Label>
+                {imageEncoding ? (
+                  <LoadingIndicator message="Encoding image..." />
+                ) : (
+                  <img
+                    className="scene-cover"
+                    src={coverImagePreview}
+                    alt="Scene cover"
+                  />
+                )}
+                <ImageInput
+                  isEditing
+                  onImageChange={onCoverImageChange}
+                  onImageURL={onImageLoad}
+                />
+              </Form.Group>
+            </div>
+          </div>
        </div>
-      </div>
+      </Form>
    </div>
  );
 };
--- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneMovieTable.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneMovieTable.tsx
@@ -6,8 +6,8 @@ import { Form, Row, Col } from "react-bootstrap";
 export type MovieSceneIndexMap = Map<string, number | undefined>;

 export interface IProps {
-  movieSceneIndexes: MovieSceneIndexMap;
-  onUpdate: (value: MovieSceneIndexMap) => void;
+  movieScenes: GQL.SceneMovieInput[];
+  onUpdate: (value: GQL.SceneMovieInput[]) => void;
 }

 export const SceneMovieTable: React.FunctionComponent<IProps> = (
@@ -16,40 +16,43 @@ export const SceneMovieTable: React.FunctionComponent<IProps> = (
  const { data } = useAllMoviesForFilter();

  const items = !!data && !!data.allMovies ? data.allMovies : [];
-  let itemsFilter: GQL.SlimMovieDataFragment[] = [];

-  if (!!props.movieSceneIndexes && !!items) {
-    props.movieSceneIndexes.forEach((_index, movieId) => {
-      itemsFilter = itemsFilter.concat(items.filter((x) => x.id === movieId));
-    });
-  }
-
-  const storeIdx = itemsFilter.map((movie) => {
-    return props.movieSceneIndexes.get(movie.id);
+  const movieEntries = props.movieScenes.map((m) => {
+    return {
+      movie: items.find((mm) => m.movie_id === mm.id),
+      ...m,
+    };
  });

  const updateFieldChanged = (movieId: string, value: number) => {
-    const newMap = new Map(props.movieSceneIndexes);
-    newMap.set(movieId, value);
-    props.onUpdate(newMap);
+    const newValues = props.movieScenes.map((ms) => {
+      if (ms.movie_id === movieId) {
+        return {
+          movie_id: movieId,
+          scene_index: value,
+        };
+      }
+      return ms;
+    });
+    props.onUpdate(newValues);
  };

  function renderTableData() {
    return (
      <>
-        {itemsFilter!.map((item, index: number) => (
-          <Row key={item.toString()}>
+        {movieEntries.map((m) => (
+          <Row key={m.movie_id}>
            <Form.Label column xs={9}>
-              {item.name}
+              {m.movie?.name ?? ""}
            </Form.Label>
            <Col xs={3}>
              <Form.Control
                className="text-input"
                type="number"
-                value={storeIdx[index] ? storeIdx[index]?.toString() : ""}
+                value={m.scene_index ?? ""}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  updateFieldChanged(
-                    item.id,
+                    m.movie_id,
                    Number.parseInt(
                      e.currentTarget.value ? e.currentTarget.value : "0",
                      10
@@ -64,7 +67,7 @@ export const SceneMovieTable: React.FunctionComponent<IProps> = (
    );
  }

-  if (props.movieSceneIndexes.size > 0) {
+  if (props.movieScenes.length > 0) {
    return (
      <div className="movie-table">
        <Row>
--- a/ui/v2.5/src/components/Settings/SettingsDLNAPanel.tsx
+++ b/ui/v2.5/src/components/Settings/SettingsDLNAPanel.tsx
@@ -480,7 +480,7 @@ export const SettingsDLNAPanel: React.FC = () => {

        <hr />

-        <Button variant="primary" type="submit">
+        <Button variant="primary" type="submit" disabled={!dirty}>
          Save
        </Button>
      </Form>
--- a/ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx
+++ b/ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx
@@ -8,6 +8,7 @@ interface IProps {
  isEditing: boolean;
  onToggleEdit: () => void;
  onSave: () => void;
+  saveDisabled?: boolean;
  onDelete: () => void;
  onAutoTag?: () => void;
  onImageChange: (event: React.FormEvent<HTMLInputElement>) => void;
@@ -39,7 +40,12 @@ export const DetailsEditNavbar: React.FC<IProps> = (props: IProps) => {
    if (!props.isEditing) return;

    return (
-      <Button variant="success" className="save" onClick={() => props.onSave()}>
+      <Button
+        variant="success"
+        className="save"
+        disabled={props.saveDisabled}
+        onClick={() => props.onSave()}
+      >
        Save
      </Button>
    );