mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Start on media sidebar people section

This commit is contained in:
viktorstrate 2021-10-18 22:35:18 +02:00
parent 749747aa9c
commit ca9bb092f9
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
20 changed files with 131 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/facesOverlay/FacesOverlay.tsx
View File

@ -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) => {

4
ui/src/components/photoGallery/PhotoGallery.tsx
View File

@ -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
}

45
ui/src/components/sidebar/MediaSidebar/MediaSidebar.tsx
View File

@ -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(() => {

4
ui/src/components/sidebar/MediaSidebar/MediaSidebarMap.tsx
View File

@ -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) => {

35
ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx Normal file
View File

@ -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

51
ui/src/components/sidebar/MediaSidebar/__generated__/sidebarPhoto.ts → ui/src/components/sidebar/MediaSidebar/__generated__/sidebarMediaQuery.ts generated
View File

@ -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
}

4
ui/src/components/sidebar/Sharing.tsx
View File

@ -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
}

26
ui/src/components/sidebar/__generated__/setAlbumCoverID.ts generated
View File

@ -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
}

36
ui/src/components/sidebar/__generated__/sidbarGetAlbumShares.ts generated
View File

@ -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;
}

36
ui/src/components/sidebar/__generated__/sidbarGetPhotoShares.ts generated
View File

@ -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;
}

183
ui/src/components/sidebar/__generated__/sidebarPhoto.ts generated
View File

@ -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
}

4
ui/src/extractedTranslations/da/translation.json
View File

@ -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",

4
ui/src/extractedTranslations/de/translation.json
View File

@ -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",

4
ui/src/extractedTranslations/en/translation.json
View File

@ -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",

4
ui/src/extractedTranslations/es/translation.json
View File

@ -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",

4
ui/src/extractedTranslations/fr/translation.json
View File

@ -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",

4
ui/src/extractedTranslations/it/translation.json
View File

@ -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",

4
ui/src/extractedTranslations/pl/translation.json
View File

@ -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",

4
ui/src/extractedTranslations/ru/translation.json
View File

@ -268,6 +268,7 @@
"title": ""
},
"media": {
"album": "",
"exif": {
"exposure_program": {
"action_program": "Действие программа",
@ -308,6 +309,9 @@
}
}
},
"people": {
"title": ""
},
"sharing": {
"add_share": "Поделится",
"copy_link": "Скопировать ссылку",

4
ui/src/extractedTranslations/sv/translation.json
View File

@ -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",