From 749747aa9c3aa2c3b15ba7b2eb4003d105b4a6f3 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Mon, 18 Oct 2021 19:40:02 +0200
Subject: [PATCH] Add album to media sidebar

---
 .../sidebar/MediaSidebar/MediaSidebar.tsx     |  25 +++
 .../__generated__/sidebarPhoto.ts             | 193 ++++++++++++++++++
 2 files changed, 218 insertions(+)
 create mode 100644 ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts

diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
index bf4d5e8..48dc293 100644
--- a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
+++ b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
@@ -1,7 +1,9 @@
 import { gql, useLazyQuery } from '@apollo/client'
 import React, { useEffect } from 'react'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { authToken } from '../../../helpers/authentication'
+import { isNil } from '../../../helpers/utils'
 import { MediaType } from '../../../__generated__/globalTypes'
 import { SidebarFacesOverlay } from '../../facesOverlay/FacesOverlay'
 import {
@@ -24,6 +26,7 @@ import {
 } from '../__generated__/sidebarPhoto'
 import ExifDetails from './MediaSidebarExif'
 import MediaSidebarMap from './MediaSidebarMap'
+import { sidebarPhoto_media_album } from './__generated__/sidebarPhoto'
 
 const SIDEBAR_MEDIA_QUERY = gql`
   query sidebarPhoto($id: ID!) {
@@ -74,6 +77,10 @@ const SIDEBAR_MEDIA_QUERY = gql`
           longitude
         }
       }
+      album {
+        id
+        title
+      }
       faces {
         id
         rectangle {
@@ -151,6 +158,22 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
     sidebarMap = <MediaSidebarMap coordinates={mediaCoordinates} />
   }
 
+  let albumLink = null
+  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>
+        <Link
+          className="text-blue-900 hover:underline"
+          to={`/album/${mediaAlbum.id}`}
+        >
+          {mediaAlbum.title}
+        </Link>
+      </div>
+    )
+  }
+
   return (
     <div>
       <SidebarHeader title={media.title ?? 'Loading...'} />
@@ -169,6 +192,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
         )}
       </div>
       <ExifDetails media={media} />
+      {albumLink}
       {sidebarMap}
       <SidebarMediaDownload media={media} />
       <SidebarPhotoShare id={media.id} />
@@ -201,6 +225,7 @@ export interface MediaSidebarMedia {
   exif?: sidebarPhoto_media_exif | null
   faces?: sidebarPhoto_media_faces[]
   downloads?: sidebarDownloadQuery_media_downloads[]
+  album?: sidebarPhoto_media_album
 }
 
 type MediaSidebarType = {
diff --git a/ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts b/ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts
new file mode 100644
index 0000000..275fb03
--- /dev/null
+++ b/ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts
@@ -0,0 +1,193 @@
+/* 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_album {
+  __typename: 'Album'
+  id: string
+  title: string
+}
+
+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
+  /**
+   * The album that holds the media
+   */
+  album: sidebarPhoto_media_album
+  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
+}
