Add title, rating, o-counter to image lightbox

ui/v2.5/src/components/Changelog/versions/v0130.md

@@ -1,4 +1,5 @@
 ### ✨ New Features
+* Added title, rating and o-counter in image lightbox. ([#2274](https://github.com/stashapp/stash/pull/2274))
 * Added option to hide scene scrubber by default. ([#2325](https://github.com/stashapp/stash/pull/2325))
 * Added support for bulk-editing movies. ([#2283](https://github.com/stashapp/stash/pull/2283))
 * Added support for filtering scenes, images and galleries featuring favourite performers and performer age at time of production. ([#2257](https://github.com/stashapp/stash/pull/2257))

ui/v2.5/src/components/Images/ImageDetails/Image.tsx

@@ -34,7 +34,6 @@ export const Image: React.FC = () => {
 
   const { data, error, loading } = useFindImage(id);
   const image = data?.findImage;
-  const [oLoading, setOLoading] = useState(false);
   const [incrementO] = useImageIncrementO(image?.id ?? "0");
   const [decrementO] = useImageDecrementO(image?.id ?? "0");
   const [resetO] = useImageResetO(image?.id ?? "0");
@@ -87,34 +86,25 @@ export const Image: React.FC = () => {
 
   const onIncrementClick = async () => {
     try {
-      setOLoading(true);
       await incrementO();
     } catch (e) {
       Toast.error(e);
-    } finally {
-      setOLoading(false);
     }
   };
 
   const onDecrementClick = async () => {
     try {
-      setOLoading(true);
       await decrementO();
     } catch (e) {
       Toast.error(e);
-    } finally {
-      setOLoading(false);
     }
   };
 
   const onResetClick = async () => {
     try {
-      setOLoading(true);
       await resetO();
     } catch (e) {
       Toast.error(e);
-    } finally {
-      setOLoading(false);
     }
   };
 
@@ -196,7 +186,6 @@ export const Image: React.FC = () => {
             </Nav.Item>
             <Nav.Item className="ml-auto">
               <OCounterButton
-                loading={oLoading}
                 value={image.o_counter || 0}
                 onIncrement={onIncrementClick}
                 onDecrement={onDecrementClick}

ui/v2.5/src/components/Scenes/SceneDetails/OCounterButton.tsx

@@ -1,34 +1,45 @@
-import React from "react";
-import {
-  Button,
-  ButtonGroup,
-  Dropdown,
-  DropdownButton,
-  Spinner,
-} from "react-bootstrap";
+import React, { useState } from "react";
+import { Button, ButtonGroup, Dropdown, DropdownButton } from "react-bootstrap";
 import { useIntl } from "react-intl";
-import { Icon, SweatDrops } from "src/components/Shared";
+import { Icon, LoadingIndicator, SweatDrops } from "src/components/Shared";
 
 export interface IOCounterButtonProps {
-  loading: boolean;
   value: number;
-  onIncrement: () => void;
-  onDecrement: () => void;
-  onReset: () => void;
-  onMenuOpened?: () => void;
-  onMenuClosed?: () => void;
+  onIncrement: () => Promise<void>;
+  onDecrement: () => Promise<void>;
+  onReset: () => Promise<void>;
 }
 
 export const OCounterButton: React.FC<IOCounterButtonProps> = (
   props: IOCounterButtonProps
 ) => {
   const intl = useIntl();
-  if (props.loading) return <Spinner animation="border" role="status" />;
+  const [loading, setLoading] = useState(false);
+
+  async function increment() {
+    setLoading(true);
+    await props.onIncrement();
+    setLoading(false);
+  }
+
+  async function decrement() {
+    setLoading(true);
+    await props.onDecrement();
+    setLoading(false);
+  }
+
+  async function reset() {
+    setLoading(true);
+    await props.onReset();
+    setLoading(false);
+  }
+
+  if (loading) return <LoadingIndicator message="" inline small />;
 
   const renderButton = () => (
     <Button
       className="minimal pr-1"
-      onClick={props.onIncrement}
+      onClick={increment}
       variant="secondary"
       title={intl.formatMessage({ id: "o_counter" })}
     >
@@ -46,11 +57,11 @@ export const OCounterButton: React.FC<IOCounterButtonProps> = (
           variant="secondary"
           className="pl-0 show-carat"
         >
-          <Dropdown.Item onClick={props.onDecrement}>
+          <Dropdown.Item onClick={decrement}>
             <Icon icon="minus" />
             <span>Decrement</span>
           </Dropdown.Item>
-          <Dropdown.Item onClick={props.onReset}>
+          <Dropdown.Item onClick={reset}>
             <Icon icon="ban" />
             <span>Reset</span>
           </Dropdown.Item>

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -70,7 +70,6 @@ const ScenePage: React.FC<IProps> = ({ scene, refetch }) => {
     loading: streamableLoading,
   } = useSceneStreams(scene.id);
 
-  const [oLoading, setOLoading] = useState(false);
   const [incrementO] = useSceneIncrementO(scene.id);
   const [decrementO] = useSceneDecrementO(scene.id);
   const [resetO] = useSceneResetO(scene.id);
@@ -172,34 +171,25 @@ const ScenePage: React.FC<IProps> = ({ scene, refetch }) => {
 
   const onIncrementClick = async () => {
     try {
-      setOLoading(true);
       await incrementO();
     } catch (e) {
       Toast.error(e);
-    } finally {
-      setOLoading(false);
     }
   };
 
   const onDecrementClick = async () => {
     try {
-      setOLoading(true);
       await decrementO();
     } catch (e) {
       Toast.error(e);
-    } finally {
-      setOLoading(false);
     }
   };
 
   const onResetClick = async () => {
     try {
-      setOLoading(true);
       await resetO();
     } catch (e) {
       Toast.error(e);
-    } finally {
-      setOLoading(false);
     }
   };
 
@@ -485,7 +475,6 @@ const ScenePage: React.FC<IProps> = ({ scene, refetch }) => {
             </Nav.Item>
             <Nav.Item className="ml-auto">
               <OCounterButton
-                loading={oLoading}
                 value={scene.o_counter || 0}
                 onIncrement={onIncrementClick}
                 onDecrement={onDecrementClick}

ui/v2.5/src/core/StashService.ts

@@ -541,21 +541,64 @@ const updateImageO = (
 export const useImageIncrementO = (id: string) =>
   GQL.useImageIncrementOMutation({
     variables: { id },
-    update: (cache, data) =>
-      updateImageO(id, cache, data.data?.imageIncrementO),
+    update: (cache, data) => {
+      updateImageO(id, cache, data.data?.imageIncrementO);
+      // impacts FindImages as well as FindImage
+      deleteCache([GQL.FindImagesDocument])(cache);
+    },
+  });
+
+export const mutateImageIncrementO = (id: string) =>
+  client.mutate<GQL.ImageIncrementOMutation>({
+    mutation: GQL.ImageIncrementODocument,
+    variables: { id },
+    update: (cache, data) => {
+      updateImageO(id, cache, data.data?.imageIncrementO);
+      // impacts FindImages as well as FindImage
+      deleteCache([GQL.FindImagesDocument])(cache);
+    },
   });
 
 export const useImageDecrementO = (id: string) =>
   GQL.useImageDecrementOMutation({
     variables: { id },
-    update: (cache, data) =>
-      updateImageO(id, cache, data.data?.imageDecrementO),
+    update: (cache, data) => {
+      updateImageO(id, cache, data.data?.imageDecrementO);
+      // impacts FindImages as well as FindImage
+      deleteCache([GQL.FindImagesDocument])(cache);
+    },
+  });
+
+export const mutateImageDecrementO = (id: string) =>
+  client.mutate<GQL.ImageDecrementOMutation>({
+    mutation: GQL.ImageDecrementODocument,
+    variables: { id },
+    update: (cache, data) => {
+      updateImageO(id, cache, data.data?.imageDecrementO);
+      // impacts FindImages as well as FindImage
+      deleteCache([GQL.FindImagesDocument])(cache);
+    },
   });
 
 export const useImageResetO = (id: string) =>
   GQL.useImageResetOMutation({
     variables: { id },
-    update: (cache, data) => updateImageO(id, cache, data.data?.imageResetO),
+    update: (cache, data) => {
+      updateImageO(id, cache, data.data?.imageResetO);
+      // impacts FindImages as well as FindImage
+      deleteCache([GQL.FindImagesDocument])(cache);
+    },
+  });
+
+export const mutateImageResetO = (id: string) =>
+  client.mutate<GQL.ImageResetOMutation>({
+    mutation: GQL.ImageResetODocument,
+    variables: { id },
+    update: (cache, data) => {
+      updateImageO(id, cache, data.data?.imageResetO);
+      // impacts FindImages as well as FindImage
+      deleteCache([GQL.FindImagesDocument])(cache);
+    },
   });
 
 const galleryMutationImpactedQueries = [