Rewrite and fix FacesOverlay

ui/src/Pages/PeoplePage/SingleFaceGroup/__generated__/singleFaceGroup.ts

@@ -3,80 +3,80 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MediaType } from "./../../../../../__generated__/globalTypes";
+import { MediaType } from './../../../../../__generated__/globalTypes'
 
 // ====================================================
 // GraphQL query operation: singleFaceGroup
 // ====================================================
 
 export interface singleFaceGroup_faceGroup_imageFaces_rectangle {
-  __typename: "FaceRectangle";
-  minX: number;
-  maxX: number;
-  minY: number;
-  maxY: number;
+  __typename: 'FaceRectangle'
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
 }
 
 export interface singleFaceGroup_faceGroup_imageFaces_media_thumbnail {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
   /**
    * Width of the image in pixels
    */
-  width: number;
+  width: number
   /**
    * Height of the image in pixels
    */
-  height: number;
+  height: number
 }
 
 export interface singleFaceGroup_faceGroup_imageFaces_media_highRes {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
 }
 
 export interface singleFaceGroup_faceGroup_imageFaces_media {
-  __typename: "Media";
-  id: string;
-  type: MediaType;
-  title: string;
+  __typename: 'Media'
+  id: string
+  type: MediaType
+  title: string
   /**
    * URL to display the media in a smaller resolution
    */
-  thumbnail: singleFaceGroup_faceGroup_imageFaces_media_thumbnail | null;
+  thumbnail: singleFaceGroup_faceGroup_imageFaces_media_thumbnail | null
   /**
    * URL to display the photo in full resolution, will be null for videos
    */
-  highRes: singleFaceGroup_faceGroup_imageFaces_media_highRes | null;
-  favorite: boolean;
+  highRes: singleFaceGroup_faceGroup_imageFaces_media_highRes | null
+  favorite: boolean
 }
 
 export interface singleFaceGroup_faceGroup_imageFaces {
-  __typename: "ImageFace";
-  id: string;
-  rectangle: singleFaceGroup_faceGroup_imageFaces_rectangle | null;
-  media: singleFaceGroup_faceGroup_imageFaces_media;
+  __typename: 'ImageFace'
+  id: string
+  rectangle: singleFaceGroup_faceGroup_imageFaces_rectangle
+  media: singleFaceGroup_faceGroup_imageFaces_media
 }
 
 export interface singleFaceGroup_faceGroup {
-  __typename: "FaceGroup";
-  id: string;
-  label: string | null;
-  imageFaces: singleFaceGroup_faceGroup_imageFaces[];
+  __typename: 'FaceGroup'
+  id: string
+  label: string | null
+  imageFaces: singleFaceGroup_faceGroup_imageFaces[]
 }
 
 export interface singleFaceGroup {
-  faceGroup: singleFaceGroup_faceGroup;
+  faceGroup: singleFaceGroup_faceGroup
 }
 
 export interface singleFaceGroupVariables {
-  id: string;
-  limit: number;
-  offset: number;
+  id: string
+  limit: number
+  offset: number
 }

ui/src/Pages/PeoplePage/__generated__/myFaces.ts

@@ -8,58 +8,58 @@
 // ====================================================
 
 export interface myFaces_myFaceGroups_imageFaces_rectangle {
-  __typename: "FaceRectangle";
-  minX: number;
-  maxX: number;
-  minY: number;
-  maxY: number;
+  __typename: 'FaceRectangle'
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
 }
 
 export interface myFaces_myFaceGroups_imageFaces_media_thumbnail {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
   /**
    * Width of the image in pixels
    */
-  width: number;
+  width: number
   /**
    * Height of the image in pixels
    */
-  height: number;
+  height: number
 }
 
 export interface myFaces_myFaceGroups_imageFaces_media {
-  __typename: "Media";
-  id: string;
+  __typename: 'Media'
+  id: string
   /**
    * URL to display the media in a smaller resolution
    */
-  thumbnail: myFaces_myFaceGroups_imageFaces_media_thumbnail | null;
+  thumbnail: myFaces_myFaceGroups_imageFaces_media_thumbnail | null
 }
 
 export interface myFaces_myFaceGroups_imageFaces {
-  __typename: "ImageFace";
-  id: string;
-  rectangle: myFaces_myFaceGroups_imageFaces_rectangle | null;
-  media: myFaces_myFaceGroups_imageFaces_media;
+  __typename: 'ImageFace'
+  id: string
+  rectangle: myFaces_myFaceGroups_imageFaces_rectangle
+  media: myFaces_myFaceGroups_imageFaces_media
 }
 
 export interface myFaces_myFaceGroups {
-  __typename: "FaceGroup";
-  id: string;
-  label: string | null;
-  imageFaceCount: number;
-  imageFaces: myFaces_myFaceGroups_imageFaces[];
+  __typename: 'FaceGroup'
+  id: string
+  label: string | null
+  imageFaceCount: number
+  imageFaces: myFaces_myFaceGroups_imageFaces[]
 }
 
 export interface myFaces {
-  myFaceGroups: myFaces_myFaceGroups[];
+  myFaceGroups: myFaces_myFaceGroups[]
 }
 
 export interface myFacesVariables {
-  limit?: number | null;
-  offset?: number | null;
+  limit?: number | null
+  offset?: number | null
 }

ui/src/components/facesOverlay/FacesOverlay.tsx

@@ -1,19 +1,32 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
+import { MediaType } from '../../../__generated__/globalTypes'
+import { MediaSidebarMedia } from '../sidebar/MediaSidebar'
+import { sidebarPhoto_media_faces } from '../sidebar/__generated__/sidebarPhoto'
+
+interface FaceBoxStyleProps {
+  $minY: number
+  $maxY: number
+  $minX: number
+  $maxX: number
+}
 
 const FaceBoxStyle = styled(Link)`
   box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgb(255, 255, 255);
   border-radius: 50%;
   position: absolute;
-  top: ${({ $minY }) => $minY * 100}%;
-  bottom: ${({ $maxY }) => (1 - $maxY) * 100}%;
-  left: ${({ $minX }) => $minX * 100}%;
-  right: ${({ $maxX }) => (1 - $maxX) * 100}%;
+  top: ${({ $minY }: FaceBoxStyleProps) => $minY * 100}%;
+  bottom: ${({ $maxY }: FaceBoxStyleProps) => (1 - $maxY) * 100}%;
+  left: ${({ $minX }: FaceBoxStyleProps) => $minX * 100}%;
+  right: ${({ $maxX }: FaceBoxStyleProps) => (1 - $maxX) * 100}%;
 `
 
-const FaceBox = ({ face /*media*/ }) => {
+type FaceBoxProps = {
+  face: sidebarPhoto_media_faces
+}
+
+const FaceBox = ({ face /*media*/ }: FaceBoxProps) => {
   return (
     <FaceBoxStyle
       to={`/people/${face.faceGroup.id}`}
@@ -25,12 +38,7 @@ const FaceBox = ({ face /*media*/ }) => {
   )
 }
 
-FaceBox.propTypes = {
-  face: PropTypes.object.isRequired,
-  media: PropTypes.object.isRequired,
-}
-
-const SidebarFacesOverlayWrapper = styled.div`
+const SidebarFacesOverlayWrapper = styled.div<{ width: number }>`
   position: absolute;
   width: ${({ width }) => width * 100}%;
   left: ${({ width }) => (100 - width * 100) / 2}%;
@@ -46,11 +54,17 @@ const SidebarFacesOverlayWrapper = styled.div`
   }
 `
 
-export const SidebarFacesOverlay = ({ media }) => {
-  if (media.type != 'photo') return null
+type SidebarFaceOverlayProps = {
+  media: MediaSidebarMedia
+}
+
+export const SidebarFacesOverlay = ({ media }: SidebarFaceOverlayProps) => {
+  console.log('Faces overlay', media)
+  if (media.type != MediaType.Photo) return null
+  if (media.thumbnail == null) return null
 
   const faceBoxes = media.faces?.map(face => (
-    <FaceBox key={face.id} face={face} media={media} />
+    <FaceBox key={face.id} face={face} />
   ))
 
   let wrapperWidth = 1
@@ -64,7 +78,3 @@ export const SidebarFacesOverlay = ({ media }) => {
     </SidebarFacesOverlayWrapper>
   )
 }
-
-SidebarFacesOverlay.propTypes = {
-  media: PropTypes.object.isRequired,
-}

ui/src/components/sidebar/MediaSidebar.test.js

@@ -11,7 +11,7 @@ describe('MetadataInfo', () => {
     const media = {
       id: '1730',
       title: 'media_name.jpg',
-      type: 'photo',
+      type: 'Photo',
       exif: {
         id: '0',
         camera: null,
@@ -47,7 +47,7 @@ describe('MetadataInfo', () => {
     const media = {
       id: '1730',
       title: 'media_name.jpg',
-      type: 'photo',
+      type: 'Photo',
       exif: {
         id: '1666',
         camera: 'Canon EOS R',

ui/src/components/sidebar/MediaSidebar.tsx

@@ -382,7 +382,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
   )
 }
 
-interface MediaSidebarMedia {
+export interface MediaSidebarMedia {
   __typename: 'Media'
   id: string
   title?: string

ui/src/components/sidebar/__generated__/sidebarPhoto.ts

@@ -3,155 +3,155 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { MediaType } from "./../../../../__generated__/globalTypes";
+import { MediaType } from './../../../../__generated__/globalTypes'
 
 // ====================================================
 // GraphQL query operation: sidebarPhoto
 // ====================================================
 
 export interface sidebarPhoto_media_highRes {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
   /**
    * Width of the image in pixels
    */
-  width: number;
+  width: number
   /**
    * Height of the image in pixels
    */
-  height: number;
+  height: number
 }
 
 export interface sidebarPhoto_media_thumbnail {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
   /**
    * Width of the image in pixels
    */
-  width: number;
+  width: number
   /**
    * Height of the image in pixels
    */
-  height: number;
+  height: number
 }
 
 export interface sidebarPhoto_media_videoWeb {
-  __typename: "MediaURL";
+  __typename: 'MediaURL'
   /**
    * URL for previewing the image
    */
-  url: string;
+  url: string
   /**
    * Width of the image in pixels
    */
-  width: number;
+  width: number
   /**
    * Height of the image in pixels
    */
-  height: number;
+  height: number
 }
 
 export interface sidebarPhoto_media_videoMetadata {
-  __typename: "VideoMetadata";
-  id: string;
-  width: number;
-  height: number;
-  duration: number;
-  codec: string | null;
-  framerate: number | null;
-  bitrate: string | null;
-  colorProfile: string | null;
-  audio: string | null;
+  __typename: 'VideoMetadata'
+  id: string
+  width: number
+  height: number
+  duration: number
+  codec: string | null
+  framerate: number | null
+  bitrate: string | null
+  colorProfile: string | null
+  audio: string | null
 }
 
 export interface sidebarPhoto_media_exif {
-  __typename: "MediaEXIF";
-  id: string;
+  __typename: 'MediaEXIF'
+  id: string
   /**
    * The model name of the camera
    */
-  camera: string | null;
+  camera: string | null
   /**
    * The maker of the camera
    */
-  maker: string | null;
+  maker: string | null
   /**
    * The name of the lens
    */
-  lens: string | null;
-  dateShot: any | null;
+  lens: string | null
+  dateShot: any | null
   /**
    * The exposure time of the image
    */
-  exposure: number | null;
+  exposure: number | null
   /**
    * The aperature stops of the image
    */
-  aperture: number | null;
+  aperture: number | null
   /**
    * The ISO setting of the image
    */
-  iso: number | null;
+  iso: number | null
   /**
    * The focal length of the lens, when the image was taken
    */
-  focalLength: number | null;
+  focalLength: number | null
   /**
    * A formatted description of the flash settings, when the image was taken
    */
-  flash: number | null;
+  flash: number | null
   /**
    * An index describing the mode for adjusting the exposure of the image
    */
-  exposureProgram: number | null;
+  exposureProgram: number | null
 }
 
 export interface sidebarPhoto_media_faces_rectangle {
-  __typename: "FaceRectangle";
-  minX: number;
-  maxX: number;
-  minY: number;
-  maxY: number;
+  __typename: 'FaceRectangle'
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
 }
 
 export interface sidebarPhoto_media_faces_faceGroup {
-  __typename: "FaceGroup";
-  id: string;
+  __typename: 'FaceGroup'
+  id: string
 }
 
 export interface sidebarPhoto_media_faces {
-  __typename: "ImageFace";
-  id: string;
-  rectangle: sidebarPhoto_media_faces_rectangle | null;
-  faceGroup: sidebarPhoto_media_faces_faceGroup;
+  __typename: 'ImageFace'
+  id: string
+  rectangle: sidebarPhoto_media_faces_rectangle
+  faceGroup: sidebarPhoto_media_faces_faceGroup
 }
 
 export interface sidebarPhoto_media {
-  __typename: "Media";
-  id: string;
-  title: string;
-  type: MediaType;
+  __typename: 'Media'
+  id: string
+  title: string
+  type: MediaType
   /**
    * URL to display the photo in full resolution, will be null for videos
    */
-  highRes: sidebarPhoto_media_highRes | null;
+  highRes: sidebarPhoto_media_highRes | null
   /**
    * URL to display the media in a smaller resolution
    */
-  thumbnail: sidebarPhoto_media_thumbnail | null;
+  thumbnail: sidebarPhoto_media_thumbnail | null
   /**
    * URL to get the video in a web format that can be played in the browser, will be null for photos
    */
-  videoWeb: sidebarPhoto_media_videoWeb | null;
-  videoMetadata: sidebarPhoto_media_videoMetadata | null;
-  exif: sidebarPhoto_media_exif | null;
-  faces: sidebarPhoto_media_faces[];
+  videoWeb: sidebarPhoto_media_videoWeb | null
+  videoMetadata: sidebarPhoto_media_videoMetadata | null
+  exif: sidebarPhoto_media_exif | null
+  faces: sidebarPhoto_media_faces[]
 }
 
 export interface sidebarPhoto {
@@ -159,9 +159,9 @@ export interface sidebarPhoto {
    * Get media by id, user must own the media or be admin.
    * If valid tokenCredentials are provided, the media may be retrived without further authentication
    */
-  media: sidebarPhoto_media;
+  media: sidebarPhoto_media
 }
 
 export interface sidebarPhotoVariables {
-  id: string;
+  id: string
 }