Add album to media sidebar
This commit is contained in:
viktorstrate
parent
c357532613
commit
749747aa9c
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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