From ca9bb092f9836428bb9ce437f04b0d422d0992f5 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Mon, 18 Oct 2021 22:35:18 +0200
Subject: [PATCH] Start on media sidebar people section

---
 .../components/facesOverlay/FacesOverlay.tsx  |   4 +-
 .../components/photoGallery/PhotoGallery.tsx  |   4 +-
 .../sidebar/MediaSidebar/MediaSidebar.tsx     |  45 +++--
 .../sidebar/MediaSidebar/MediaSidebarMap.tsx  |   4 +-
 .../MediaSidebar/MediaSidebarPeople.tsx       |  35 ++++
 .../{sidebarPhoto.ts => sidebarMediaQuery.ts} |  51 ++---
 ui/src/components/sidebar/Sharing.tsx         |   4 +-
 .../sidebar/__generated__/setAlbumCoverID.ts  |  26 ---
 .../__generated__/sidbarGetAlbumShares.ts     |  36 ----
 .../__generated__/sidbarGetPhotoShares.ts     |  36 ----
 .../sidebar/__generated__/sidebarPhoto.ts     | 183 ------------------
 .../extractedTranslations/da/translation.json |   4 +
 .../extractedTranslations/de/translation.json |   4 +
 .../extractedTranslations/en/translation.json |   4 +
 .../extractedTranslations/es/translation.json |   4 +
 .../extractedTranslations/fr/translation.json |   4 +
 .../extractedTranslations/it/translation.json |   4 +
 .../extractedTranslations/pl/translation.json |   4 +
 .../extractedTranslations/ru/translation.json |   4 +
 .../extractedTranslations/sv/translation.json |   4 +
 20 files changed, 131 insertions(+), 333 deletions(-)
 create mode 100644 ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx
 rename ui/src/components/sidebar/MediaSidebar/__generated__/{sidebarPhoto.ts => sidebarMediaQuery.ts} (70%)
 delete mode 100644 ui/src/components/sidebar/__generated__/setAlbumCoverID.ts
 delete mode 100644 ui/src/components/sidebar/__generated__/sidbarGetAlbumShares.ts
 delete mode 100644 ui/src/components/sidebar/__generated__/sidbarGetPhotoShares.ts
 delete mode 100644 ui/src/components/sidebar/__generated__/sidebarPhoto.ts

diff --git a/ui/src/components/facesOverlay/FacesOverlay.tsx b/ui/src/components/facesOverlay/FacesOverlay.tsx
index a8130bbd..d60066ef 100644
--- a/ui/src/components/facesOverlay/FacesOverlay.tsx
+++ b/ui/src/components/facesOverlay/FacesOverlay.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { MediaType } from '../../__generated__/globalTypes'
 import { MediaSidebarMedia } from '../sidebar/MediaSidebar/MediaSidebar'
-import { sidebarPhoto_media_faces } from '../sidebar/__generated__/sidebarPhoto'
+import { sidebarMediaQuery_media_faces } from '../sidebar/MediaSidebar/__generated__/sidebarMediaQuery'
 
 interface FaceBoxStyleProps {
   $minY: number
@@ -23,7 +23,7 @@ const FaceBoxStyle = styled(Link)`
 `
 
 type FaceBoxProps = {
-  face: sidebarPhoto_media_faces
+  face: sidebarMediaQuery_media_faces
 }
 
 const FaceBox = ({ face /*media*/ }: FaceBoxProps) => {
diff --git a/ui/src/components/photoGallery/PhotoGallery.tsx b/ui/src/components/photoGallery/PhotoGallery.tsx
index 3d4dd258..3521f71f 100644
--- a/ui/src/components/photoGallery/PhotoGallery.tsx
+++ b/ui/src/components/photoGallery/PhotoGallery.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import { MediaThumbnail, MediaPlaceholder } from './MediaThumbnail'
 import PresentView from './presentView/PresentView'
 import { PresentMediaProps_Media } from './presentView/PresentMedia'
-import { sidebarPhoto_media_thumbnail } from '../sidebar/__generated__/sidebarPhoto'
 import {
   openPresentModeAction,
   PhotoGalleryAction,
@@ -15,6 +14,7 @@ import {
 } from './photoGalleryMutations'
 import MediaSidebar from '../sidebar/MediaSidebar/MediaSidebar'
 import { SidebarContext } from '../sidebar/Sidebar'
+import { sidebarMediaQuery_media_thumbnail } from '../sidebar/MediaSidebar/__generated__/sidebarMediaQuery'
 
 const Gallery = styled.div`
   display: flex;
@@ -36,7 +36,7 @@ export const PhotoFiller = styled.div`
 `
 
 export interface PhotoGalleryProps_Media extends PresentMediaProps_Media {
-  thumbnail: sidebarPhoto_media_thumbnail | null
+  thumbnail: sidebarMediaQuery_media_thumbnail | null
   favorite?: boolean
 }
 
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
index 48dc2930..059e5050 100644
--- a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
+++ b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
@@ -1,5 +1,6 @@
 import { gql, useLazyQuery } from '@apollo/client'
 import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { authToken } from '../../../helpers/authentication'
@@ -16,20 +17,21 @@ import { SidebarPhotoShare } from '../Sharing'
 import SidebarMediaDownload from '../SidebarDownloadMedia'
 import SidebarHeader from '../SidebarHeader'
 import { sidebarDownloadQuery_media_downloads } from '../__generated__/sidebarDownloadQuery'
-import {
-  sidebarPhoto,
-  sidebarPhotoVariables,
-  sidebarPhoto_media_exif,
-  sidebarPhoto_media_faces,
-  sidebarPhoto_media_thumbnail,
-  sidebarPhoto_media_videoMetadata,
-} from '../__generated__/sidebarPhoto'
 import ExifDetails from './MediaSidebarExif'
+import MediaSidebarPeople from './MediaSidebarPeople'
 import MediaSidebarMap from './MediaSidebarMap'
-import { sidebarPhoto_media_album } from './__generated__/sidebarPhoto'
+import {
+  sidebarMediaQuery,
+  sidebarMediaQueryVariables,
+  sidebarMediaQuery_media_album,
+  sidebarMediaQuery_media_exif,
+  sidebarMediaQuery_media_faces,
+  sidebarMediaQuery_media_thumbnail,
+  sidebarMediaQuery_media_videoMetadata,
+} from './__generated__/sidebarMediaQuery'
 
 const SIDEBAR_MEDIA_QUERY = gql`
-  query sidebarPhoto($id: ID!) {
+  query sidebarMediaQuery($id: ID!) {
     media(id: $id) {
       id
       title
@@ -91,6 +93,7 @@ const SIDEBAR_MEDIA_QUERY = gql`
         }
         faceGroup {
           id
+          label
         }
       }
     }
@@ -143,6 +146,7 @@ type SidebarContentProps = {
 }
 
 const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
+  const { t } = useTranslation()
   let previewImage = null
   if (media.highRes) previewImage = media.highRes
   else if (media.thumbnail) previewImage = media.thumbnail
@@ -162,8 +166,10 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
   const mediaAlbum = media.album
   if (!isNil(mediaAlbum)) {
     albumLink = (
-      <div className="lg:mx-4 my-4">
-        <h2 className="uppercase text-sm text-gray-900 font-semibold">Album</h2>
+      <div className="mx-4 my-4">
+        <h2 className="uppercase text-xs text-gray-900 font-semibold">
+          {t('sidebar.media.album', 'Album')}
+        </h2>
         <Link
           className="text-blue-900 hover:underline"
           to={`/album/${mediaAlbum.id}`}
@@ -193,6 +199,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
       </div>
       <ExifDetails media={media} />
       {albumLink}
+      <MediaSidebarPeople media={media} />
       {sidebarMap}
       <SidebarMediaDownload media={media} />
       <SidebarPhotoShare id={media.id} />
@@ -214,18 +221,18 @@ export interface MediaSidebarMedia {
     width?: number
     height?: number
   }
-  thumbnail?: sidebarPhoto_media_thumbnail | null
+  thumbnail?: sidebarMediaQuery_media_thumbnail | null
   videoWeb?: null | {
     __typename: 'MediaURL'
     url: string
     width?: number
     height?: number
   }
-  videoMetadata?: sidebarPhoto_media_videoMetadata | null
-  exif?: sidebarPhoto_media_exif | null
-  faces?: sidebarPhoto_media_faces[]
+  videoMetadata?: sidebarMediaQuery_media_videoMetadata | null
+  exif?: sidebarMediaQuery_media_exif | null
+  faces?: sidebarMediaQuery_media_faces[]
   downloads?: sidebarDownloadQuery_media_downloads[]
-  album?: sidebarPhoto_media_album
+  album?: sidebarMediaQuery_media_album
 }
 
 type MediaSidebarType = {
@@ -235,8 +242,8 @@ type MediaSidebarType = {
 
 const MediaSidebar = ({ media, hidePreview }: MediaSidebarType) => {
   const [loadMedia, { loading, error, data }] = useLazyQuery<
-    sidebarPhoto,
-    sidebarPhotoVariables
+    sidebarMediaQuery,
+    sidebarMediaQueryVariables
   >(SIDEBAR_MEDIA_QUERY)
 
   useEffect(() => {
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebarMap.tsx b/ui/src/components/sidebar/MediaSidebar/MediaSidebarMap.tsx
index 5bdb0e39..1fa0f2cb 100644
--- a/ui/src/components/sidebar/MediaSidebar/MediaSidebarMap.tsx
+++ b/ui/src/components/sidebar/MediaSidebar/MediaSidebarMap.tsx
@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next'
 import { isNil } from '../../../helpers/utils'
 import useMapboxMap from '../../mapbox/MapboxMap'
 import { SidebarSection, SidebarSectionTitle } from '../SidebarComponents'
-import { sidebarPhoto_media_exif_coordinates } from '../__generated__/sidebarPhoto'
+import { sidebarMediaQuery_media_exif_coordinates } from './__generated__/sidebarMediaQuery'
 
 type MediaSidebarMapProps = {
-  coordinates: sidebarPhoto_media_exif_coordinates
+  coordinates: sidebarMediaQuery_media_exif_coordinates
 }
 
 const MediaSidebarMap = ({ coordinates }: MediaSidebarMapProps) => {
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx b/ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx
new file mode 100644
index 00000000..3371b2cc
--- /dev/null
+++ b/ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { SidebarSection, SidebarSectionTitle } from '../SidebarComponents'
+import { MediaSidebarMedia } from './MediaSidebar'
+import { sidebarMediaQuery_media_faces } from './__generated__/sidebarMediaQuery'
+
+type MediaSidebarFaceProps = {
+  face: sidebarMediaQuery_media_faces
+}
+
+const MediaSidebarPerson = ({ face }: MediaSidebarFaceProps) => {
+  return <div>{face.faceGroup.label ?? 'unlabeled'}</div>
+}
+
+type MediaSidebarFacesProps = {
+  media: MediaSidebarMedia
+}
+
+const MediaSidebarPeople = ({ media }: MediaSidebarFacesProps) => {
+  const { t } = useTranslation()
+  const faceElms = (media.faces ?? []).map(face => (
+    <MediaSidebarPerson key={face.id} face={face} />
+  ))
+
+  return (
+    <SidebarSection>
+      <SidebarSectionTitle>
+        {t('sidebar.people.title', 'People')}
+      </SidebarSectionTitle>
+      <div>{faceElms}</div>
+    </SidebarSection>
+  )
+}
+
+export default MediaSidebarPeople
diff --git a/ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts b/ui/src/components/sidebar/MediaSidebar/__generated__/sidebarMediaQuery.ts
similarity index 70%
rename from ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts
rename to ui/src/components/sidebar/MediaSidebar/__generated__/sidebarMediaQuery.ts
index 275fb038..93882393 100644
--- a/ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts
+++ b/ui/src/components/sidebar/MediaSidebar/__generated__/sidebarMediaQuery.ts
@@ -6,10 +6,10 @@
 import { MediaType } from './../../../../__generated__/globalTypes'
 
 // ====================================================
-// GraphQL query operation: sidebarPhoto
+// GraphQL query operation: sidebarMediaQuery
 // ====================================================
 
-export interface sidebarPhoto_media_highRes {
+export interface sidebarMediaQuery_media_highRes {
   __typename: 'MediaURL'
   /**
    * URL for previewing the image
@@ -25,7 +25,7 @@ export interface sidebarPhoto_media_highRes {
   height: number
 }
 
-export interface sidebarPhoto_media_thumbnail {
+export interface sidebarMediaQuery_media_thumbnail {
   __typename: 'MediaURL'
   /**
    * URL for previewing the image
@@ -41,7 +41,7 @@ export interface sidebarPhoto_media_thumbnail {
   height: number
 }
 
-export interface sidebarPhoto_media_videoWeb {
+export interface sidebarMediaQuery_media_videoWeb {
   __typename: 'MediaURL'
   /**
    * URL for previewing the image
@@ -57,7 +57,7 @@ export interface sidebarPhoto_media_videoWeb {
   height: number
 }
 
-export interface sidebarPhoto_media_videoMetadata {
+export interface sidebarMediaQuery_media_videoMetadata {
   __typename: 'VideoMetadata'
   id: string
   width: number
@@ -70,7 +70,7 @@ export interface sidebarPhoto_media_videoMetadata {
   audio: string | null
 }
 
-export interface sidebarPhoto_media_exif_coordinates {
+export interface sidebarMediaQuery_media_exif_coordinates {
   __typename: 'Coordinates'
   /**
    * GPS latitude in degrees
@@ -82,7 +82,7 @@ export interface sidebarPhoto_media_exif_coordinates {
   longitude: number
 }
 
-export interface sidebarPhoto_media_exif {
+export interface sidebarMediaQuery_media_exif {
   __typename: 'MediaEXIF'
   id: string
   /**
@@ -125,16 +125,16 @@ export interface sidebarPhoto_media_exif {
   /**
    * GPS coordinates of where the image was taken
    */
-  coordinates: sidebarPhoto_media_exif_coordinates | null
+  coordinates: sidebarMediaQuery_media_exif_coordinates | null
 }
 
-export interface sidebarPhoto_media_album {
+export interface sidebarMediaQuery_media_album {
   __typename: 'Album'
   id: string
   title: string
 }
 
-export interface sidebarPhoto_media_faces_rectangle {
+export interface sidebarMediaQuery_media_faces_rectangle {
   __typename: 'FaceRectangle'
   minX: number
   maxX: number
@@ -142,19 +142,20 @@ export interface sidebarPhoto_media_faces_rectangle {
   maxY: number
 }
 
-export interface sidebarPhoto_media_faces_faceGroup {
+export interface sidebarMediaQuery_media_faces_faceGroup {
   __typename: 'FaceGroup'
   id: string
+  label: string | null
 }
 
-export interface sidebarPhoto_media_faces {
+export interface sidebarMediaQuery_media_faces {
   __typename: 'ImageFace'
   id: string
-  rectangle: sidebarPhoto_media_faces_rectangle
-  faceGroup: sidebarPhoto_media_faces_faceGroup
+  rectangle: sidebarMediaQuery_media_faces_rectangle
+  faceGroup: sidebarMediaQuery_media_faces_faceGroup
 }
 
-export interface sidebarPhoto_media {
+export interface sidebarMediaQuery_media {
   __typename: 'Media'
   id: string
   title: string
@@ -162,32 +163,32 @@ export interface sidebarPhoto_media {
   /**
    * URL to display the photo in full resolution, will be null for videos
    */
-  highRes: sidebarPhoto_media_highRes | null
+  highRes: sidebarMediaQuery_media_highRes | null
   /**
    * URL to display the media in a smaller resolution
    */
-  thumbnail: sidebarPhoto_media_thumbnail | null
+  thumbnail: sidebarMediaQuery_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
+  videoWeb: sidebarMediaQuery_media_videoWeb | null
+  videoMetadata: sidebarMediaQuery_media_videoMetadata | null
+  exif: sidebarMediaQuery_media_exif | null
   /**
    * The album that holds the media
    */
-  album: sidebarPhoto_media_album
-  faces: sidebarPhoto_media_faces[]
+  album: sidebarMediaQuery_media_album
+  faces: sidebarMediaQuery_media_faces[]
 }
 
-export interface sidebarPhoto {
+export interface sidebarMediaQuery {
   /**
    * 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: sidebarMediaQuery_media
 }
 
-export interface sidebarPhotoVariables {
+export interface sidebarMediaQueryVariables {
   id: string
 }
diff --git a/ui/src/components/sidebar/Sharing.tsx b/ui/src/components/sidebar/Sharing.tsx
index c2ccb800..b2826277 100644
--- a/ui/src/components/sidebar/Sharing.tsx
+++ b/ui/src/components/sidebar/Sharing.tsx
@@ -13,7 +13,6 @@ import {
   sidebareDeleteShare,
   sidebareDeleteShareVariables,
 } from './__generated__/sidebareDeleteShare'
-import { sidbarGetPhotoShares_media_shares } from './__generated__/sidbarGetPhotoShares'
 import {
   sidebarPhotoAddShare,
   sidebarPhotoAddShareVariables,
@@ -25,6 +24,7 @@ import {
 import {
   sidebarGetPhotoShares,
   sidebarGetPhotoSharesVariables,
+  sidebarGetPhotoShares_media_shares,
 } from './__generated__/sidebarGetPhotoShares'
 import {
   sidebarGetAlbumShares,
@@ -358,7 +358,7 @@ type SidebarShareProps = {
   id: string
   isPhoto: boolean
   loading: boolean
-  shares?: sidbarGetPhotoShares_media_shares[]
+  shares?: sidebarGetPhotoShares_media_shares[]
   shareItem(item: { variables: { id: string } }): void
 }
 
diff --git a/ui/src/components/sidebar/__generated__/setAlbumCoverID.ts b/ui/src/components/sidebar/__generated__/setAlbumCoverID.ts
deleted file mode 100644
index f623c123..00000000
--- a/ui/src/components/sidebar/__generated__/setAlbumCoverID.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL mutation operation: setAlbumCoverID
-// ====================================================
-
-export interface setAlbumCoverID_setAlbumCoverID {
-  __typename: 'Album'
-  id: string
-  coverID: string
-}
-
-export interface setAlbumCoverID {
-  /**
-   * Assign a cover image to an album, set coverID to -1 to remove the current one
-   */
-  setAlbumCoverID: setAlbumCoverID_setAlbumCoverID
-}
-
-export interface setAlbumCoverIDVariables {
-  albumID: string
-  coverID: string
-}
diff --git a/ui/src/components/sidebar/__generated__/sidbarGetAlbumShares.ts b/ui/src/components/sidebar/__generated__/sidbarGetAlbumShares.ts
deleted file mode 100644
index 7e7fa27c..00000000
--- a/ui/src/components/sidebar/__generated__/sidbarGetAlbumShares.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: sidbarGetAlbumShares
-// ====================================================
-
-export interface sidbarGetAlbumShares_album_shares {
-  __typename: "ShareToken";
-  id: string;
-  token: string;
-  /**
-   * Whether or not a password is needed to access the share
-   */
-  hasPassword: boolean;
-}
-
-export interface sidbarGetAlbumShares_album {
-  __typename: "Album";
-  id: string;
-  shares: (sidbarGetAlbumShares_album_shares | null)[] | null;
-}
-
-export interface sidbarGetAlbumShares {
-  /**
-   * Get album by id, user must own the album or be admin
-   * If valid tokenCredentials are provided, the album may be retrived without further authentication
-   */
-  album: sidbarGetAlbumShares_album;
-}
-
-export interface sidbarGetAlbumSharesVariables {
-  id: string;
-}
diff --git a/ui/src/components/sidebar/__generated__/sidbarGetPhotoShares.ts b/ui/src/components/sidebar/__generated__/sidbarGetPhotoShares.ts
deleted file mode 100644
index 400e27d9..00000000
--- a/ui/src/components/sidebar/__generated__/sidbarGetPhotoShares.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: sidbarGetPhotoShares
-// ====================================================
-
-export interface sidbarGetPhotoShares_media_shares {
-  __typename: "ShareToken";
-  id: string;
-  token: string;
-  /**
-   * Whether or not a password is needed to access the share
-   */
-  hasPassword: boolean;
-}
-
-export interface sidbarGetPhotoShares_media {
-  __typename: "Media";
-  id: string;
-  shares: sidbarGetPhotoShares_media_shares[];
-}
-
-export interface sidbarGetPhotoShares {
-  /**
-   * 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: sidbarGetPhotoShares_media;
-}
-
-export interface sidbarGetPhotoSharesVariables {
-  id: string;
-}
diff --git a/ui/src/components/sidebar/__generated__/sidebarPhoto.ts b/ui/src/components/sidebar/__generated__/sidebarPhoto.ts
deleted file mode 100644
index 8d99075e..00000000
--- a/ui/src/components/sidebar/__generated__/sidebarPhoto.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MediaType } from './../../../__generated__/globalTypes'
-
-// ====================================================
-// GraphQL query operation: sidebarPhoto
-// ====================================================
-
-export interface sidebarPhoto_media_highRes {
-  __typename: 'MediaURL'
-  /**
-   * URL for previewing the image
-   */
-  url: string
-  /**
-   * Width of the image in pixels
-   */
-  width: number
-  /**
-   * Height of the image in pixels
-   */
-  height: number
-}
-
-export interface sidebarPhoto_media_thumbnail {
-  __typename: 'MediaURL'
-  /**
-   * URL for previewing the image
-   */
-  url: string
-  /**
-   * Width of the image in pixels
-   */
-  width: number
-  /**
-   * Height of the image in pixels
-   */
-  height: number
-}
-
-export interface sidebarPhoto_media_videoWeb {
-  __typename: 'MediaURL'
-  /**
-   * URL for previewing the image
-   */
-  url: string
-  /**
-   * Width of the image in pixels
-   */
-  width: number
-  /**
-   * Height of the image in pixels
-   */
-  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
-}
-
-export interface sidebarPhoto_media_exif_coordinates {
-  __typename: 'Coordinates'
-  /**
-   * GPS latitude in degrees
-   */
-  latitude: number
-  /**
-   * GPS longitude in degrees
-   */
-  longitude: number
-}
-
-export interface sidebarPhoto_media_exif {
-  __typename: 'MediaEXIF'
-  id: string
-  /**
-   * The model name of the camera
-   */
-  camera: string | null
-  /**
-   * The maker of the camera
-   */
-  maker: string | null
-  /**
-   * The name of the lens
-   */
-  lens: string | null
-  dateShot: any | null
-  /**
-   * The exposure time of the image
-   */
-  exposure: number | null
-  /**
-   * The aperature stops of the image
-   */
-  aperture: number | null
-  /**
-   * The ISO setting of the image
-   */
-  iso: number | null
-  /**
-   * The focal length of the lens, when the image was taken
-   */
-  focalLength: number | null
-  /**
-   * A formatted description of the flash settings, when the image was taken
-   */
-  flash: number | null
-  /**
-   * An index describing the mode for adjusting the exposure of the image
-   */
-  exposureProgram: number | null
-  /**
-   * GPS coordinates of where the image was taken
-   */
-  coordinates: sidebarPhoto_media_exif_coordinates | null
-}
-
-export interface sidebarPhoto_media_faces_rectangle {
-  __typename: 'FaceRectangle'
-  minX: number
-  maxX: number
-  minY: number
-  maxY: number
-}
-
-export interface sidebarPhoto_media_faces_faceGroup {
-  __typename: 'FaceGroup'
-  id: string
-}
-
-export interface sidebarPhoto_media_faces {
-  __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
-  /**
-   * URL to display the photo in full resolution, will be null for videos
-   */
-  highRes: sidebarPhoto_media_highRes | null
-  /**
-   * URL to display the media in a smaller resolution
-   */
-  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[]
-}
-
-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
-}
-
-export interface sidebarPhotoVariables {
-  id: string
-}
diff --git a/ui/src/extractedTranslations/da/translation.json b/ui/src/extractedTranslations/da/translation.json
index dc8dbcd9..d6fd2dbe 100644
--- a/ui/src/extractedTranslations/da/translation.json
+++ b/ui/src/extractedTranslations/da/translation.json
@@ -263,6 +263,7 @@
       "title": "Lokation"
     },
     "media": {
+      "album": "Album",
       "exif": {
         "exposure_program": {
           "action_program": "Actionprogram",
@@ -303,6 +304,9 @@
         }
       }
     },
+    "people": {
+      "title": "Personer"
+    },
     "sharing": {
       "add_share": "Tilføj deling",
       "copy_link": "Kopier link",
diff --git a/ui/src/extractedTranslations/de/translation.json b/ui/src/extractedTranslations/de/translation.json
index 0e0335c5..368abda5 100644
--- a/ui/src/extractedTranslations/de/translation.json
+++ b/ui/src/extractedTranslations/de/translation.json
@@ -263,6 +263,7 @@
       "title": ""
     },
     "media": {
+      "album": "",
       "exif": {
         "exposure_program": {
           "action_program": "Action (kurze Verschlusszeit)",
@@ -303,6 +304,9 @@
         }
       }
     },
+    "people": {
+      "title": ""
+    },
     "sharing": {
       "add_share": "Freigabe hinzufügen",
       "copy_link": "Link kopieren",
diff --git a/ui/src/extractedTranslations/en/translation.json b/ui/src/extractedTranslations/en/translation.json
index 0feba477..932cfa6e 100644
--- a/ui/src/extractedTranslations/en/translation.json
+++ b/ui/src/extractedTranslations/en/translation.json
@@ -263,6 +263,7 @@
       "title": "Location"
     },
     "media": {
+      "album": "Album",
       "exif": {
         "exposure_program": {
           "action_program": "Action program",
@@ -303,6 +304,9 @@
         }
       }
     },
+    "people": {
+      "title": "People"
+    },
     "sharing": {
       "add_share": "Add shares",
       "copy_link": "Copy Link",
diff --git a/ui/src/extractedTranslations/es/translation.json b/ui/src/extractedTranslations/es/translation.json
index 289f4ff6..4ba5391f 100644
--- a/ui/src/extractedTranslations/es/translation.json
+++ b/ui/src/extractedTranslations/es/translation.json
@@ -263,6 +263,7 @@
       "title": ""
     },
     "media": {
+      "album": "",
       "exif": {
         "exposure_program": {
           "action_program": "Programa de acción",
@@ -303,6 +304,9 @@
         }
       }
     },
+    "people": {
+      "title": ""
+    },
     "sharing": {
       "add_share": "Añadir compartido",
       "copy_link": "Copiar enlace",
diff --git a/ui/src/extractedTranslations/fr/translation.json b/ui/src/extractedTranslations/fr/translation.json
index 966d4a97..4e07e73b 100644
--- a/ui/src/extractedTranslations/fr/translation.json
+++ b/ui/src/extractedTranslations/fr/translation.json
@@ -263,6 +263,7 @@
       "title": ""
     },
     "media": {
+      "album": "",
       "exif": {
         "exposure_program": {
           "action_program": "Programme d'action",
@@ -303,6 +304,9 @@
         }
       }
     },
+    "people": {
+      "title": ""
+    },
     "sharing": {
       "add_share": "Ajouter un partage",
       "copy_link": "Copier le lien",
diff --git a/ui/src/extractedTranslations/it/translation.json b/ui/src/extractedTranslations/it/translation.json
index 12ca27f3..17d79842 100644
--- a/ui/src/extractedTranslations/it/translation.json
+++ b/ui/src/extractedTranslations/it/translation.json
@@ -263,6 +263,7 @@
       "title": ""
     },
     "media": {
+      "album": "",
       "exif": {
         "exposure_program": {
           "action_program": "Programma sport",
@@ -303,6 +304,9 @@
         }
       }
     },
+    "people": {
+      "title": ""
+    },
     "sharing": {
       "add_share": "Aggiungi condivisione",
       "copy_link": "Copia il link",
diff --git a/ui/src/extractedTranslations/pl/translation.json b/ui/src/extractedTranslations/pl/translation.json
index 14603059..d15d9215 100644
--- a/ui/src/extractedTranslations/pl/translation.json
+++ b/ui/src/extractedTranslations/pl/translation.json
@@ -268,6 +268,7 @@
       "title": ""
     },
     "media": {
+      "album": "",
       "exif": {
         "exposure_program": {
           "action_program": "Program działania",
@@ -308,6 +309,9 @@
         }
       }
     },
+    "people": {
+      "title": ""
+    },
     "sharing": {
       "add_share": "Dodaj udział",
       "copy_link": "Skopiuj link",
diff --git a/ui/src/extractedTranslations/ru/translation.json b/ui/src/extractedTranslations/ru/translation.json
index 6a2499fe..ecfa6c91 100644
--- a/ui/src/extractedTranslations/ru/translation.json
+++ b/ui/src/extractedTranslations/ru/translation.json
@@ -268,6 +268,7 @@
       "title": ""
     },
     "media": {
+      "album": "",
       "exif": {
         "exposure_program": {
           "action_program": "Действие программа",
@@ -308,6 +309,9 @@
         }
       }
     },
+    "people": {
+      "title": ""
+    },
     "sharing": {
       "add_share": "Поделится",
       "copy_link": "Скопировать ссылку",
diff --git a/ui/src/extractedTranslations/sv/translation.json b/ui/src/extractedTranslations/sv/translation.json
index 64cfb919..bf4eed72 100644
--- a/ui/src/extractedTranslations/sv/translation.json
+++ b/ui/src/extractedTranslations/sv/translation.json
@@ -263,6 +263,7 @@
       "title": ""
     },
     "media": {
+      "album": "",
       "exif": {
         "exposure_program": {
           "action_program": "Actionprogram",
@@ -303,6 +304,9 @@
         }
       }
     },
+    "people": {
+      "title": ""
+    },
     "sharing": {
       "add_share": "Dela",
       "copy_link": "Kopiera länk",