Trigger interactive sync when clicking on interactive status

stashapp · Dec 27, 2024 · 967ac8b · 967ac8b
1 parent 0621d87
commit 967ac8b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/ui/v2.5/src/hooks/Interactive/interactive.scss b/ui/v2.5/src/hooks/Interactive/interactive.scss
@@ -2,6 +2,7 @@ div.scene-interactive-status {
   opacity: 0.75;
   padding: 0.75rem;
   position: absolute;
+  cursor: pointer;
 
   &.interactive-status-disconnected,
   &.interactive-status-error svg {

diff --git a/ui/v2.5/src/hooks/Interactive/status.tsx b/ui/v2.5/src/hooks/Interactive/status.tsx
@@ -9,7 +9,7 @@ import {
 } from "./context";
 
 export const SceneInteractiveStatus: React.FC = ({}) => {
-  const { state, error } = React.useContext(InteractiveContext);
+  const { state, error, sync } = React.useContext(InteractiveContext);
 
   function getStateClass() {
     switch (state) {
@@ -35,11 +35,15 @@ export const SceneInteractiveStatus: React.FC = ({}) => {
   }
 
   return (
-    <div className={`scene-interactive-status ${getStateClass()}`}>
+    <div
+      className={`scene-interactive-status ${getStateClass()}`}
+      onClick={() => sync()}
+    >
       <FontAwesomeIcon pulse icon={faCircle} size="xs" />
       <span className="status-text">
         <FormattedMessage id={connectionStateLabel(state)} />
         {error && <span>: {error}</span>}
+        &nbsp;({serverOffset.toFixed()}ms)
       </span>
     </div>
   );