add separate rects button

packages/webapp/src/single/MediaNav.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import * as icons from '@fortawesome/free-solid-svg-icons'
 
@@ -10,6 +10,9 @@ import { usePreviewSize } from "./usePreviewSize";
 import { classNames } from '../utils/class-names'
 
 export const MediaNav = ({current, prev, next, listLocation, showNavigation, dispatch}) => {
+  const [faceRects] = useState([]);
+  const [objectRects] = useState([]);
+
   const query = useSearchStore(state => state.query);
   const previewSize = usePreviewSize()
 
@@ -94,6 +97,11 @@ export const MediaNav = ({current, prev, next, listLocation, showNavigation, dis
             <FontAwesomeIcon icon={icons.faClock} className={iconClass}/>
           </a>
         }
+        { (faceRects || objectRects) &&
+          <a onClick={() => dispatch({type: 'toggleRects'})} className={classNames(buttonClass, buttonBgClass, itemClass)} title="Show objects (o)">
+            <FontAwesomeIcon icon={icons.faUsersViewfinder} className={iconClass}/>
+          </a>
+        }
         { current &&
           <a onClick={() => dispatch({type: 'toggleDetails'})} className={classNames(buttonClass, buttonBgClass, itemClass)} title="Show detail info (i)">
             <FontAwesomeIcon icon={icons.faInfo} className={iconClass}/>

packages/webapp/src/single/MediaView.tsx

@@ -61,6 +61,7 @@ const hotkeysToAction = {
   'end': 'last',
   'esc': 'list',
   'i': 'toggleDetails',
+  'o': 'toggleRects',
   's': 'similar',
   'c': 'chronology',
   't': 'toggleNavigation',
@@ -77,11 +78,13 @@ export const MediaView = () => {
   const entries = useEntryStore(state => state.entries);
   const lastIndex = useSingleViewStore(state => state.lastIndex);
   const showDetails = useSingleViewStore(state => state.showDetails);
+  const showRects = useSingleViewStore(state => state.showRects);
   const showNavigation = useSingleViewStore(state => state.showNavigation);
   const setLastId = useSingleViewStore(state => state.setLastId);
   const setLastIndex = useSingleViewStore(state => state.setLastIndex);
   const search = useSearchStore(state => state.search);
   const setShowDetails = useSingleViewStore(actions => actions.setShowDetails);
+  const setShowRects = useSingleViewStore(actions => actions.setShowRects);
   const setShowNavigation = useSingleViewStore(actions => actions.setShowNavigation);
 
   const [hideNavigation, setHideNavigation] = useState(false)
@@ -123,6 +126,8 @@ export const MediaView = () => {
       navigate(`/similar/${current.shortId}`);
     } else if (type === 'toggleDetails') {
       setShowDetails(!showDetails);
+    } else if (type === 'toggleRects') {
+      setShowRects(!showRects);
     } else if (type === 'toggleNavigation') {
       setShowNavigation(!showNavigation);
     } else if (type == 'first' && entries.length) {
@@ -177,7 +182,7 @@ export const MediaView = () => {
     dispatch({type: 'list'})
   }
 
-  console.log('Media object', current, showDetails);
+  console.log('Media object:', current, 'showDetails:', showDetails, 'showRects:', showRects);
 
   return (
     <>
@@ -190,7 +195,7 @@ export const MediaView = () => {
               }
               {isImage &&
                 <Zoomable key={key} childWidth={current.width} childHeight={current.height} onSwipe={onSwipe}>
-                  <MediaViewImage key={key} media={current} next={next} prev={prev} showDetails={showDetails}/>
+                  <MediaViewImage key={key} media={current} next={next} prev={prev} showRects={showRects}/>
                 </Zoomable>
               }
               {isVideo &&

packages/webapp/src/single/MediaViewImage.tsx

@@ -11,8 +11,8 @@ export const MediaViewImage = (props) => {
   const imgRect = useClientRect(imgRef);
   const [faceRects, setFaceRects] = useState([]);
   const [objectRects, setObjectRects] = useState([]);
-  const { showDetails } = props;
-  const { id, shortId, previews, faces, objects } = props.media;
+  const { showRects } = props;
+  const { shortId, previews, faces, objects } = props.media;
   const navigate = useNavigate();
   const previewSize = usePreviewSize()
 
@@ -38,7 +38,7 @@ export const MediaViewImage = (props) => {
 
   useEffect(() => {
     const e = imgRef.current;
-    if (!e || !imgRect || !showDetails) {
+    if (!e || !imgRect || !showRects) {
       return;
     }
     let { x, y, width, height } = imgRect;
@@ -85,15 +85,15 @@ export const MediaViewImage = (props) => {
         </div>
       );
     }))
-  }, [imgRef, imgRect, src, showDetails])
+  }, [imgRef, imgRect, src, showRects])
 
   return (
     <>
       <div className="relative w-full h-full">
         <img ref={imgRef} className="absolute object-contain w-full h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" src={smallUrl} />
         <img className="absolute object-contain w-full h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" src={src} />
-        {showDetails && objectRects}
-        {showDetails && faceRects}
+        {showRects && objectRects}
+        {showRects && faceRects}
       </div>
     </>
   )

packages/webapp/src/single/Zoomable.tsx

@@ -21,7 +21,8 @@ const containsSize = (containerWidth, containerHeight, childWidth, childHeight)
 type ZoomableProps = {
   childWidth: number;
   childHeight: number;
-  onSwipe?: (ev: HammerInput) => void
+  onSwipe?: (ev: HammerInput) => void;
+  children?: React.JSX.Element
 }
 
 export const Zoomable: FunctionComponent<ZoomableProps> = ({childWidth, childHeight, onSwipe, children}) => {

packages/webapp/src/store/single-view-store.ts

@@ -5,11 +5,13 @@ export interface SingleViewStore {
   lastId: string
   lastIndex: number
   showDetails: boolean
+  showRects: boolean
   showNavigation: boolean
 
   setLastId(lastId: string): void
   setLastIndex(lastIndex: number): void
   setShowDetails(show: boolean): void
+  setShowRects(show: boolean): void
   setShowNavigation(show: boolean): void
 }
 
@@ -26,11 +28,13 @@ export const useSingleViewStore = create<
   lastId: '',
   lastIndex: -1,
   showDetails: false,
+  showRects: false,
   showNavigation: true,
 
   setLastId: (lastId: string) => set((state: SingleViewStore) => ({...state, lastId})),
   setLastIndex: (lastIndex: number) => set((state: SingleViewStore) => ({...state, lastIndex})),
   setShowDetails: (show: boolean) => set((state: SingleViewStore) => ({...state, showDetails: show})),
+  setShowRects: (show: boolean) => set((state: SingleViewStore) => ({...state, showRects: show})),
   setShowNavigation: (show: boolean) => set((state: SingleViewStore) => ({...state, showNavigation: show})),
 }), {
   name: 'gallery-single-view',