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

Sidebar: people section + album path

This commit is contained in:
viktorstrate 2021-10-19 23:28:23 +02:00
parent ca9bb092f9
commit 06fd166483
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
13 changed files with 182 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/gqlgen.yml
View File

@ -60,6 +60,8 @@ models:
fields:
faceGroup:
resolver: true
media:
resolver: true
FaceRectangle:
model: github.com/photoview/photoview/api/graphql/models.FaceRectangle
SiteInfo:

30
api/graphql/generated.go
View File

@ -288,6 +288,8 @@ type FaceGroupResolver interface {
ImageFaceCount(ctx context.Context, obj *models.FaceGroup) (int, error)
}
type ImageFaceResolver interface {
Media(ctx context.Context, obj *models.ImageFace) (*models.Media, error)
FaceGroup(ctx context.Context, obj *models.ImageFace) (*models.FaceGroup, error)
}
type MediaResolver interface {
@ -2054,6 +2056,7 @@ type MediaEXIF {
flash: Int
"An index describing the mode for adjusting the exposure of the image"
exposureProgram: Int
"GPS coordinates of where the image was taken"
coordinates: Coordinates
}
@ -3892,14 +3895,14 @@ func (ec *executionContext) _ImageFace_media(ctx context.Context, field graphql.
Object: "ImageFace",
Field: field,
Args: nil,
IsMethod: false,
IsResolver: false,
IsMethod: true,
IsResolver: true,
}
ctx = graphql.WithFieldContext(ctx, fc)
resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
ctx = rctx // use context from middleware stack in children
return obj.Media, nil
return ec.resolvers.ImageFace().Media(rctx, obj)
})
if err != nil {
ec.Error(ctx, err)
@ -3911,9 +3914,9 @@ func (ec *executionContext) _ImageFace_media(ctx context.Context, field graphql.
}
return graphql.Null
}
res := resTmp.(models.Media)
res := resTmp.(*models.Media)
fc.Result = res
return ec.marshalNMedia2githubᚗcomᚋphotoviewᚋphotoviewᚋapiᚋgraphqlᚋmodelsᚐMedia(ctx, field.Selections, res)
return ec.marshalNMedia2ᚖgithubᚗcomᚋphotoviewᚋphotoviewᚋapiᚋgraphqlᚋmodelsᚐMedia(ctx, field.Selections, res)
}
func (ec *executionContext) _ImageFace_rectangle(ctx context.Context, field graphql.CollectedField, obj *models.ImageFace) (ret graphql.Marshaler) {
@ -10692,10 +10695,19 @@ func (ec *executionContext) _ImageFace(ctx context.Context, sel ast.SelectionSet
atomic.AddUint32(&invalids, 1)
}
case "media":
out.Values[i] = ec._ImageFace_media(ctx, field, obj)
if out.Values[i] == graphql.Null {
atomic.AddUint32(&invalids, 1)
}
field := field
out.Concurrently(i, func() (res graphql.Marshaler) {
defer func() {
if r := recover(); r != nil {
ec.Error(ctx, ec.Recover(ctx, r))
}
}()
res = ec._ImageFace_media(ctx, field, obj)
if res == graphql.Null {
atomic.AddUint32(&invalids, 1)
}
return res
})
case "rectangle":
out.Values[i] = ec._ImageFace_rectangle(ctx, field, obj)
if out.Values[i] == graphql.Null {

13
api/graphql/models/face_detection.go
View File

@ -31,6 +31,19 @@ type ImageFace struct {
Rectangle FaceRectangle `gorm:"not null"`
}
func (f *ImageFace) FillMedia(db *gorm.DB) error {
if f.Media.ID != 0 {
// media already exists
return nil
}
if err := db.Model(&f).Association("Media").Find(&f.Media); err != nil {
return err
}
return nil
}
type FaceDescriptor face.Descriptor
// GormDataType datatype used in database

8
api/graphql/resolvers/faces.go
View File

@ -46,6 +46,14 @@ func (r imageFaceResolver) FaceGroup(ctx context.Context, obj *models.ImageFace)
return &faceGroup, nil
}
func (r imageFaceResolver) Media(ctx context.Context, obj *models.ImageFace) (*models.Media, error) {
if err := obj.FillMedia(r.Database); err != nil {
return nil, err
}
return &obj.Media, nil
}
func (r faceGroupResolver) ImageFaces(ctx context.Context, obj *models.FaceGroup, paginate *models.Pagination) ([]*models.ImageFace, error) {
user := auth.UserFromContext(ctx)
if user == nil {

11
ui/package-lock.json generated
View File

@ -49,6 +49,7 @@
"react-test-renderer": "^17.0.2",
"styled-components": "^5.3.0",
"subscriptions-transport-ws": "^0.9.19",
"tailwind-override": "^0.2.3",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
"typescript": "^4.3.5",
"url-join": "^4.0.1"
@ -24041,6 +24042,11 @@
"url": "https://github.com/chalk/slice-ansi?sponsor=1"
}
},
"node_modules/tailwind-override": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/tailwind-override/-/tailwind-override-0.2.3.tgz",
"integrity": "sha512-psWRqXL3TiI2h/YtzRq7dwKO6N7CrsEs4v99rNHgqEclfx4IioM0cHZ9O6pzerV3E6bZi6DhCbeq0z67Xs5PIQ=="
},
"node_modules/tailwindcss": {
"name": "@tailwindcss/postcss7-compat",
"version": "2.2.4",
@ -46037,6 +46043,11 @@
}
}
},
"tailwind-override": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/tailwind-override/-/tailwind-override-0.2.3.tgz",
"integrity": "sha512-psWRqXL3TiI2h/YtzRq7dwKO6N7CrsEs4v99rNHgqEclfx4IioM0cHZ9O6pzerV3E6bZi6DhCbeq0z67Xs5PIQ=="
},
"tailwindcss": {
"version": "npm:@tailwindcss/postcss7-compat@2.2.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.2.4.tgz",

7
ui/package.json
View File

@ -49,6 +49,7 @@
"react-test-renderer": "^17.0.2",
"styled-components": "^5.3.0",
"subscriptions-transport-ws": "^0.9.19",
"tailwind-override": "^0.2.3",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
"typescript": "^4.3.5",
"url-join": "^4.0.1"
@ -71,12 +72,12 @@
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.1.9",
"apollo": "2.33.4",
"apollo-language-server": "1.26.3",
"husky": "^6.0.0",
"i18next-parser": "^4.2.0",
"lint-staged": "^11.0.1",
"tsc-files": "^1.1.2",
"apollo": "2.33.4",
"apollo-language-server": "1.26.3"
"tsc-files": "^1.1.2"
},
"prettier": {
"trailingComma": "es5",

6
ui/src/components/album/AlbumTitle.tsx
View File

@ -10,8 +10,10 @@ import useDelay from '../../hooks/useDelay'
import { ReactComponent as GearIcon } from './icons/gear.svg'
const BreadcrumbList = styled.ol`
& li::after {
export const BreadcrumbList = styled.ol<{ hideLastArrow?: boolean }>`
&
${({ hideLastArrow }) =>
hideLastArrow ? 'li:not(:last-child)::after' : 'li::after'} {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5px' height='6px' viewBox='0 0 5 6'%3E%3Cpolyline fill='none' stroke='%23979797' points='0.74 0.167710644 3.57228936 3 0.74 5.83228936' /%3E%3C/svg%3E");
width: 5px;

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

@ -23,12 +23,13 @@ import MediaSidebarMap from './MediaSidebarMap'
import {
sidebarMediaQuery,
sidebarMediaQueryVariables,
sidebarMediaQuery_media_album,
sidebarMediaQuery_media_album_path,
sidebarMediaQuery_media_exif,
sidebarMediaQuery_media_faces,
sidebarMediaQuery_media_thumbnail,
sidebarMediaQuery_media_videoMetadata,
} from './__generated__/sidebarMediaQuery'
import { BreadcrumbList } from '../../album/AlbumTitle'
const SIDEBAR_MEDIA_QUERY = gql`
query sidebarMediaQuery($id: ID!) {
@ -82,6 +83,10 @@ const SIDEBAR_MEDIA_QUERY = gql`
album {
id
title
path {
id
title
}
}
faces {
id
@ -95,6 +100,15 @@ const SIDEBAR_MEDIA_QUERY = gql`
id
label
}
media {
id
title
thumbnail {
url
width
height
}
}
}
}
}
@ -162,20 +176,26 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
sidebarMap = <MediaSidebarMap coordinates={mediaCoordinates} />
}
let albumLink = null
let albumPath = null
const mediaAlbum = media.album
if (!isNil(mediaAlbum)) {
albumLink = (
<div className="mx-4 my-4">
<h2 className="uppercase text-xs text-gray-900 font-semibold">
{t('sidebar.media.album', 'Album')}
</h2>
const pathElms = [...(mediaAlbum.path ?? []), mediaAlbum].map(album => (
<li key={album.id} className="inline-block hover:underline">
<Link
className="text-blue-900 hover:underline"
to={`/album/${mediaAlbum.id}`}
to={`/album/${album.id}`}
>
{mediaAlbum.title}
{album.title}
</Link>
</li>
))
albumPath = (
<div className="mx-4 my-4">
<h2 className="uppercase text-xs text-gray-900 font-semibold">
{t('sidebar.media.album_path', 'Album path')}
</h2>
<BreadcrumbList hideLastArrow={true}>{pathElms}</BreadcrumbList>
</div>
)
}
@ -198,7 +218,7 @@ const SidebarContent = ({ media, hidePreview }: SidebarContentProps) => {
)}
</div>
<ExifDetails media={media} />
{albumLink}
{albumPath}
<MediaSidebarPeople media={media} />
{sidebarMap}
<SidebarMediaDownload media={media} />
@ -232,7 +252,12 @@ export interface MediaSidebarMedia {
exif?: sidebarMediaQuery_media_exif | null
faces?: sidebarMediaQuery_media_faces[]
downloads?: sidebarDownloadQuery_media_downloads[]
album?: sidebarMediaQuery_media_album
album?: {
__typename: 'Album'
id: string
title: string
path?: sidebarMediaQuery_media_album_path[]
}
}
type MediaSidebarType = {

33
ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx
View File

@ -1,15 +1,39 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import FaceCircleImage from '../../../Pages/PeoplePage/FaceCircleImage'
import { Button } from '../../../primitives/form/Input'
import { SidebarSection, SidebarSectionTitle } from '../SidebarComponents'
import { MediaSidebarMedia } from './MediaSidebar'
import { sidebarMediaQuery_media_faces } from './__generated__/sidebarMediaQuery'
import { ReactComponent as PeopleDotsIcon } from './icons/peopleDotsIcon.svg'
type MediaSidebarFaceProps = {
face: sidebarMediaQuery_media_faces
}
const MediaSidebarPerson = ({ face }: MediaSidebarFaceProps) => {
return <div>{face.faceGroup.label ?? 'unlabeled'}</div>
const { t } = useTranslation()
return (
<li className="inline-block">
<Link to={`/people/${face.faceGroup.id}`}>
<FaceCircleImage imageFace={face} selectable={true} size="100px" />
</Link>
<div
className={`text-center ${
face.faceGroup.label ? 'text-black' : 'text-gray-600'
}`}
>
{face.faceGroup.label ??
t('people_page.face_group.unlabeled', 'Unlabeled')}
<Button className="px-2 py-1.5 align-middle ml-1">
<PeopleDotsIcon className="text-gray-500" />
</Button>
</div>
</li>
)
}
type MediaSidebarFacesProps = {
@ -18,16 +42,21 @@ type MediaSidebarFacesProps = {
const MediaSidebarPeople = ({ media }: MediaSidebarFacesProps) => {
const { t } = useTranslation()
const faceElms = (media.faces ?? []).map(face => (
<MediaSidebarPerson key={face.id} face={face} />
))
if (faceElms.length == 0) return null
return (
<SidebarSection>
<SidebarSectionTitle>
{t('sidebar.people.title', 'People')}
</SidebarSectionTitle>
<div>{faceElms}</div>
<div className="overflow-x-auto">
<ul className="flex gap-4 mx-4">{faceElms}</ul>
</div>
</SidebarSection>
)
}

34
ui/src/components/sidebar/MediaSidebar/__generated__/sidebarMediaQuery.ts generated
View File

@ -128,10 +128,17 @@ export interface sidebarMediaQuery_media_exif {
coordinates: sidebarMediaQuery_media_exif_coordinates | null
}
export interface sidebarMediaQuery_media_album_path {
__typename: 'Album'
id: string
title: string
}
export interface sidebarMediaQuery_media_album {
__typename: 'Album'
id: string
title: string
path: sidebarMediaQuery_media_album_path[]
}
export interface sidebarMediaQuery_media_faces_rectangle {
@ -148,11 +155,38 @@ export interface sidebarMediaQuery_media_faces_faceGroup {
label: string | null
}
export interface sidebarMediaQuery_media_faces_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 sidebarMediaQuery_media_faces_media {
__typename: 'Media'
id: string
title: string
/**
* URL to display the media in a smaller resolution
*/
thumbnail: sidebarMediaQuery_media_faces_media_thumbnail | null
}
export interface sidebarMediaQuery_media_faces {
__typename: 'ImageFace'
id: string
rectangle: sidebarMediaQuery_media_faces_rectangle
faceGroup: sidebarMediaQuery_media_faces_faceGroup
media: sidebarMediaQuery_media_faces_media
}
export interface sidebarMediaQuery_media {

3
ui/src/components/sidebar/MediaSidebar/icons/peopleDotsIcon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="12px" height="3px" viewBox="0 0 8 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M1,0 C1.55228475,0 2,0.44771525 2,1 C2,1.55228475 1.55228475,2 1,2 C0.44771525,2 0,1.55228475 0,1 C0,0.44771525 0.44771525,0 1,0 Z M4,0 C4.55228475,0 5,0.44771525 5,1 C5,1.55228475 4.55228475,2 4,2 C3.44771525,2 3,1.55228475 3,1 C3,0.44771525 3.44771525,0 4,0 Z M7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 Z" fill="currentColor"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 583 B

6
ui/src/helpers/utils.ts
View File

@ -1,3 +1,5 @@
import classNames, { Argument as ClassNamesArg } from 'classnames'
import { overrideTailwindClasses } from 'tailwind-override'
/* eslint-disable @typescript-eslint/no-explicit-any */
export interface DebouncedFn<F extends (...args: any[]) => any> {
@ -41,3 +43,7 @@ export function isNil(value: any): value is undefined | null {
export function exhaustiveCheck(value: never) {
throw new Error(`Exhaustive check failed with value: ${value}`)
}
export function tailwindClassNames(...args: ClassNamesArg[]) {
return overrideTailwindClasses(classNames(args))
}

11
ui/src/primitives/form/Input.tsx
View File

@ -3,6 +3,7 @@ import classNames, { Argument as ClassNamesArg } from 'classnames'
import { ReactComponent as ActionArrowIcon } from './icons/textboxActionArrow.svg'
import { ReactComponent as LoadingSpinnerIcon } from './icons/textboxLoadingSpinner.svg'
import styled from 'styled-components'
import { tailwindClassNames } from '../../helpers/utils'
type TextFieldProps = {
label?: string
@ -164,7 +165,10 @@ export const Submit = ({
...props
}: SubmitProps & React.ButtonHTMLAttributes<HTMLInputElement>) => (
<input
className={classNames(buttonStyles({ variant, background }), className)}
className={tailwindClassNames(
buttonStyles({ variant, background }),
className
)}
type="submit"
value={children}
{...props}
@ -179,7 +183,10 @@ export const Button = ({
...props
}: ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => (
<button
className={classNames(buttonStyles({ variant, background }), className)}
className={tailwindClassNames(
buttonStyles({ variant, background }),
className
)}
{...props}
>
{children}