Add album to media sidebar
This commit is contained in:
parent
c357532613
commit
749747aa9c
|
@ -1,7 +1,9 @@
|
||||||
import { gql, useLazyQuery } from '@apollo/client'
|
import { gql, useLazyQuery } from '@apollo/client'
|
||||||
import React, { useEffect } from 'react'
|
import React, { useEffect } from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import { authToken } from '../../../helpers/authentication'
|
import { authToken } from '../../../helpers/authentication'
|
||||||
|
import { isNil } from '../../../helpers/utils'
|
||||||
import { MediaType } from '../../../__generated__/globalTypes'
|
import { MediaType } from '../../../__generated__/globalTypes'
|
||||||
import { SidebarFacesOverlay } from '../../facesOverlay/FacesOverlay'
|
import { SidebarFacesOverlay } from '../../facesOverlay/FacesOverlay'
|
||||||
import {
|
import {
|
||||||
|
@ -24,6 +26,7 @@ import {
|
||||||
} from '../__generated__/sidebarPhoto'
|
} from '../__generated__/sidebarPhoto'
|
||||||
import ExifDetails from './MediaSidebarExif'
|
import ExifDetails from './MediaSidebarExif'
|
||||||
import MediaSidebarMap from './MediaSidebarMap'
|
import MediaSidebarMap from './MediaSidebarMap'
|
||||||
|
import { sidebarPhoto_media_album } from './__generated__/sidebarPhoto'
|
||||||
|
|
||||||
const SIDEBAR_MEDIA_QUERY = gql`
|
const SIDEBAR_MEDIA_QUERY = gql`
|
||||||
query sidebarPhoto($id: ID!) {
|
query sidebarPhoto($id: ID!) {
|
||||||
|
@ -74,6 +77,10 @@ const SIDEBAR_MEDIA_QUERY = gql`
|
||||||
longitude
|
longitude
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
album {
|
||||||
|
id
|
||||||
|
title
|
||||||
|
}
|
||||||
faces {
|
faces {
|
||||||
id
|
id
|
||||||
rectangle {
|
rectangle {
|
||||||
|
@ -151,6 +158,22 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
|
||||||
sidebarMap = <MediaSidebarMap coordinates={mediaCoordinates} />
|
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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<SidebarHeader title={media.title ?? 'Loading...'} />
|
<SidebarHeader title={media.title ?? 'Loading...'} />
|
||||||
|
@ -169,6 +192,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ExifDetails media={media} />
|
<ExifDetails media={media} />
|
||||||
|
{albumLink}
|
||||||
{sidebarMap}
|
{sidebarMap}
|
||||||
<SidebarMediaDownload media={media} />
|
<SidebarMediaDownload media={media} />
|
||||||
<SidebarPhotoShare id={media.id} />
|
<SidebarPhotoShare id={media.id} />
|
||||||
|
@ -201,6 +225,7 @@ export interface MediaSidebarMedia {
|
||||||
exif?: sidebarPhoto_media_exif | null
|
exif?: sidebarPhoto_media_exif | null
|
||||||
faces?: sidebarPhoto_media_faces[]
|
faces?: sidebarPhoto_media_faces[]
|
||||||
downloads?: sidebarDownloadQuery_media_downloads[]
|
downloads?: sidebarDownloadQuery_media_downloads[]
|
||||||
|
album?: sidebarPhoto_media_album
|
||||||
}
|
}
|
||||||
|
|
||||||
type MediaSidebarType = {
|
type MediaSidebarType = {
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
Loading…
Reference in New Issue