Add MediaGalleryFields fragment
This commit is contained in:
parent
4177b4fb33
commit
b0512d7128
|
@ -10,8 +10,11 @@ import { albumQuery, albumQueryVariables } from './__generated__/albumQuery'
|
|||
import useOrderingParams from '../../hooks/useOrderingParams'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { isNil } from '../../helpers/utils'
|
||||
import { MEDIA_GALLERY_FRAGMENT } from '../../components/photoGallery/MediaGallery'
|
||||
|
||||
const ALBUM_QUERY = gql`
|
||||
${MEDIA_GALLERY_FRAGMENT}
|
||||
|
||||
query albumQuery(
|
||||
$id: ID!
|
||||
$onlyFavorites: Boolean
|
||||
|
@ -40,21 +43,7 @@ const ALBUM_QUERY = gql`
|
|||
order: { order_by: $mediaOrderBy, order_direction: $orderDirection }
|
||||
onlyFavorites: $onlyFavorites
|
||||
) {
|
||||
id
|
||||
type
|
||||
blurhash
|
||||
thumbnail {
|
||||
url
|
||||
width
|
||||
height
|
||||
}
|
||||
highRes {
|
||||
url
|
||||
}
|
||||
videoWeb {
|
||||
url
|
||||
}
|
||||
favorite
|
||||
...MediaGalleryFields
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,35 +8,35 @@
|
|||
// ====================================================
|
||||
|
||||
export interface getMyAlbums_myAlbums_thumbnail_thumbnail {
|
||||
__typename: "MediaURL";
|
||||
__typename: 'MediaURL'
|
||||
/**
|
||||
* URL for previewing the image
|
||||
*/
|
||||
url: string;
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface getMyAlbums_myAlbums_thumbnail {
|
||||
__typename: "Media";
|
||||
id: string;
|
||||
__typename: 'Media'
|
||||
id: string
|
||||
/**
|
||||
* URL to display the media in a smaller resolution
|
||||
*/
|
||||
thumbnail: getMyAlbums_myAlbums_thumbnail_thumbnail | null;
|
||||
thumbnail: getMyAlbums_myAlbums_thumbnail_thumbnail | null
|
||||
}
|
||||
|
||||
export interface getMyAlbums_myAlbums {
|
||||
__typename: "Album";
|
||||
id: string;
|
||||
title: string;
|
||||
__typename: 'Album'
|
||||
id: string
|
||||
title: string
|
||||
/**
|
||||
* An image in this album used for previewing this album
|
||||
*/
|
||||
thumbnail: getMyAlbums_myAlbums_thumbnail | null;
|
||||
thumbnail: getMyAlbums_myAlbums_thumbnail | null
|
||||
}
|
||||
|
||||
export interface getMyAlbums {
|
||||
/**
|
||||
* List of albums owned by the logged in user.
|
||||
*/
|
||||
myAlbums: getMyAlbums_myAlbums[];
|
||||
myAlbums: getMyAlbums_myAlbums[]
|
||||
}
|
||||
|
|
|
@ -8,13 +8,13 @@
|
|||
// ====================================================
|
||||
|
||||
export interface CheckInitialSetup_siteInfo {
|
||||
__typename: "SiteInfo";
|
||||
__typename: 'SiteInfo'
|
||||
/**
|
||||
* Whether or not the initial setup wizard should be shown
|
||||
*/
|
||||
initialSetup: boolean;
|
||||
initialSetup: boolean
|
||||
}
|
||||
|
||||
export interface CheckInitialSetup {
|
||||
siteInfo: CheckInitialSetup_siteInfo;
|
||||
siteInfo: CheckInitialSetup_siteInfo
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@ import { gql, useQuery } from '@apollo/client'
|
|||
import React, { useEffect, useReducer } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import PaginateLoader from '../../../components/PaginateLoader'
|
||||
import PhotoGallery from '../../../components/photoGallery/PhotoGallery'
|
||||
import MediaGallery from '../../../components/photoGallery/MediaGallery'
|
||||
import { photoGalleryReducer } from '../../../components/photoGallery/photoGalleryReducer'
|
||||
import useScrollPagination from '../../../hooks/useScrollPagination'
|
||||
import FaceGroupTitle from './FaceGroupTitle'
|
||||
|
@ -91,7 +91,7 @@ const SingleFaceGroup = ({ faceGroupID }: SingleFaceGroupProps) => {
|
|||
<div ref={containerElem}>
|
||||
<FaceGroupTitle faceGroup={faceGroup} />
|
||||
<div>
|
||||
<PhotoGallery
|
||||
<MediaGallery
|
||||
loading={loading}
|
||||
dispatchMedia={dispatchMedia}
|
||||
mediaState={mediaState}
|
||||
|
|
|
@ -8,18 +8,18 @@
|
|||
// ====================================================
|
||||
|
||||
export interface combineFaces_combineFaceGroups {
|
||||
__typename: "FaceGroup";
|
||||
id: string;
|
||||
__typename: 'FaceGroup'
|
||||
id: string
|
||||
}
|
||||
|
||||
export interface combineFaces {
|
||||
/**
|
||||
* Merge two face groups into a single one, all ImageFaces from source will be moved to destination
|
||||
*/
|
||||
combineFaceGroups: combineFaces_combineFaceGroups;
|
||||
combineFaceGroups: combineFaces_combineFaceGroups
|
||||
}
|
||||
|
||||
export interface combineFacesVariables {
|
||||
destID: string;
|
||||
srcID: string;
|
||||
destID: string
|
||||
srcID: string
|
||||
}
|
||||
|
|
|
@ -8,24 +8,24 @@
|
|||
// ====================================================
|
||||
|
||||
export interface moveImageFaces_moveImageFaces_imageFaces {
|
||||
__typename: "ImageFace";
|
||||
id: string;
|
||||
__typename: 'ImageFace'
|
||||
id: string
|
||||
}
|
||||
|
||||
export interface moveImageFaces_moveImageFaces {
|
||||
__typename: "FaceGroup";
|
||||
id: string;
|
||||
imageFaces: moveImageFaces_moveImageFaces_imageFaces[];
|
||||
__typename: 'FaceGroup'
|
||||
id: string
|
||||
imageFaces: moveImageFaces_moveImageFaces_imageFaces[]
|
||||
}
|
||||
|
||||
export interface moveImageFaces {
|
||||
/**
|
||||
* Move a list of ImageFaces to another face group
|
||||
*/
|
||||
moveImageFaces: moveImageFaces_moveImageFaces;
|
||||
moveImageFaces: moveImageFaces_moveImageFaces
|
||||
}
|
||||
|
||||
export interface moveImageFacesVariables {
|
||||
faceIDs: string[];
|
||||
destFaceGroupID: string;
|
||||
faceIDs: string[]
|
||||
destFaceGroupID: string
|
||||
}
|
||||
|
|
|
@ -8,13 +8,13 @@
|
|||
// ====================================================
|
||||
|
||||
export interface recognizeUnlabeledFaces_recognizeUnlabeledFaces {
|
||||
__typename: "ImageFace";
|
||||
id: string;
|
||||
__typename: 'ImageFace'
|
||||
id: string
|
||||
}
|
||||
|
||||
export interface recognizeUnlabeledFaces {
|
||||
/**
|
||||
* Check all unlabeled faces to see if they match a labeled FaceGroup, and move them if they match
|
||||
*/
|
||||
recognizeUnlabeledFaces: recognizeUnlabeledFaces_recognizeUnlabeledFaces[];
|
||||
recognizeUnlabeledFaces: recognizeUnlabeledFaces_recognizeUnlabeledFaces[]
|
||||
}
|
||||
|
|
|
@ -8,17 +8,17 @@
|
|||
// ====================================================
|
||||
|
||||
export interface scanUser_scanUser {
|
||||
__typename: "ScannerResult";
|
||||
success: boolean;
|
||||
__typename: 'ScannerResult'
|
||||
success: boolean
|
||||
}
|
||||
|
||||
export interface scanUser {
|
||||
/**
|
||||
* Scan a single user for new media
|
||||
*/
|
||||
scanUser: scanUser_scanUser;
|
||||
scanUser: scanUser_scanUser
|
||||
}
|
||||
|
||||
export interface scanUserVariables {
|
||||
userId: string;
|
||||
userId: string
|
||||
}
|
||||
|
|
|
@ -12,9 +12,9 @@ export interface changeScanIntervalMutation {
|
|||
* Set how often, in seconds, the server should automatically scan for new media,
|
||||
* a value of 0 will disable periodic scans
|
||||
*/
|
||||
setPeriodicScanInterval: number;
|
||||
setPeriodicScanInterval: number
|
||||
}
|
||||
|
||||
export interface changeScanIntervalMutationVariables {
|
||||
interval: number;
|
||||
interval: number
|
||||
}
|
||||
|
|
|
@ -8,13 +8,13 @@
|
|||
// ====================================================
|
||||
|
||||
export interface concurrentWorkersQuery_siteInfo {
|
||||
__typename: "SiteInfo";
|
||||
__typename: 'SiteInfo'
|
||||
/**
|
||||
* How many max concurrent scanner jobs that should run at once
|
||||
*/
|
||||
concurrentWorkers: number;
|
||||
concurrentWorkers: number
|
||||
}
|
||||
|
||||
export interface concurrentWorkersQuery {
|
||||
siteInfo: concurrentWorkersQuery_siteInfo;
|
||||
siteInfo: concurrentWorkersQuery_siteInfo
|
||||
}
|
||||
|
|
|
@ -8,14 +8,14 @@
|
|||
// ====================================================
|
||||
|
||||
export interface scanAllMutation_scanAll {
|
||||
__typename: "ScannerResult";
|
||||
success: boolean;
|
||||
message: string | null;
|
||||
__typename: 'ScannerResult'
|
||||
success: boolean
|
||||
message: string | null
|
||||
}
|
||||
|
||||
export interface scanAllMutation {
|
||||
/**
|
||||
* Scan all users for new media
|
||||
*/
|
||||
scanAll: scanAllMutation_scanAll;
|
||||
scanAll: scanAllMutation_scanAll
|
||||
}
|
||||
|
|
|
@ -8,13 +8,13 @@
|
|||
// ====================================================
|
||||
|
||||
export interface scanIntervalQuery_siteInfo {
|
||||
__typename: "SiteInfo";
|
||||
__typename: 'SiteInfo'
|
||||
/**
|
||||
* How often automatic scans should be initiated in seconds
|
||||
*/
|
||||
periodicScanInterval: number;
|
||||
periodicScanInterval: number
|
||||
}
|
||||
|
||||
export interface scanIntervalQuery {
|
||||
siteInfo: scanIntervalQuery_siteInfo;
|
||||
siteInfo: scanIntervalQuery_siteInfo
|
||||
}
|
||||
|
|
|
@ -11,9 +11,9 @@ export interface setConcurrentWorkers {
|
|||
/**
|
||||
* Set max number of concurrent scanner jobs running at once
|
||||
*/
|
||||
setScannerConcurrentWorkers: number;
|
||||
setScannerConcurrentWorkers: number
|
||||
}
|
||||
|
||||
export interface setConcurrentWorkersVariables {
|
||||
workers: number;
|
||||
workers: number
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useEffect, useReducer } from 'react'
|
||||
import AlbumTitle from '../album/AlbumTitle'
|
||||
import PhotoGallery from '../photoGallery/PhotoGallery'
|
||||
import MediaGallery from '../photoGallery/MediaGallery'
|
||||
import AlbumBoxes from './AlbumBoxes'
|
||||
import AlbumFilter from '../album/AlbumFilter'
|
||||
import {
|
||||
|
@ -114,7 +114,7 @@ const AlbumGallery = React.forwardRef(
|
|||
)}
|
||||
<AlbumTitle album={album} disableLink />
|
||||
{subAlbumElement}
|
||||
<PhotoGallery
|
||||
<MediaGallery
|
||||
loading={loading}
|
||||
mediaState={mediaState}
|
||||
dispatchMedia={dispatchMedia}
|
||||
|
|
|
@ -8,13 +8,13 @@
|
|||
// ====================================================
|
||||
|
||||
export interface faceDetectionEnabled_siteInfo {
|
||||
__typename: "SiteInfo";
|
||||
__typename: 'SiteInfo'
|
||||
/**
|
||||
* Whether or not face detection is enabled and working
|
||||
*/
|
||||
faceDetectionEnabled: boolean;
|
||||
faceDetectionEnabled: boolean
|
||||
}
|
||||
|
||||
export interface faceDetectionEnabled {
|
||||
siteInfo: faceDetectionEnabled_siteInfo;
|
||||
siteInfo: faceDetectionEnabled_siteInfo
|
||||
}
|
||||
|
|
|
@ -11,5 +11,5 @@ export interface mapboxEnabledQuery {
|
|||
/**
|
||||
* Get the mapbox api token, returns null if mapbox is not enabled
|
||||
*/
|
||||
mapboxToken: string | null;
|
||||
mapboxToken: string | null
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
|
|||
|
||||
import React from 'react'
|
||||
import { MediaType } from '../../__generated__/globalTypes'
|
||||
import PhotoGallery from './PhotoGallery'
|
||||
import MediaGallery from './MediaGallery'
|
||||
import { PhotoGalleryState } from './photoGalleryReducer'
|
||||
|
||||
vi.mock('./photoGalleryMutations', () => ({
|
||||
|
@ -55,7 +55,7 @@ test('photo gallery with media', () => {
|
|||
}
|
||||
|
||||
render(
|
||||
<PhotoGallery
|
||||
<MediaGallery
|
||||
dispatchMedia={dispatchMedia}
|
||||
mediaState={mediaState}
|
||||
loading={false}
|
||||
|
@ -78,7 +78,7 @@ describe('photo gallery presenting', () => {
|
|||
}
|
||||
|
||||
render(
|
||||
<PhotoGallery
|
||||
<MediaGallery
|
||||
dispatchMedia={dispatchMedia}
|
||||
loading={false}
|
||||
mediaState={mediaStateNoPresent}
|
||||
|
@ -112,7 +112,7 @@ describe('photo gallery presenting', () => {
|
|||
}
|
||||
|
||||
render(
|
||||
<PhotoGallery
|
||||
<MediaGallery
|
||||
dispatchMedia={dispatchMedia}
|
||||
loading={false}
|
||||
mediaState={mediaStatePresent}
|
|
@ -2,7 +2,6 @@ import React, { useContext } from 'react'
|
|||
import styled from 'styled-components'
|
||||
import { MediaThumbnail, MediaPlaceholder } from './MediaThumbnail'
|
||||
import PresentView from './presentView/PresentView'
|
||||
import { PresentMediaProps_Media } from './presentView/PresentMedia'
|
||||
import {
|
||||
openPresentModeAction,
|
||||
PhotoGalleryAction,
|
||||
|
@ -14,7 +13,7 @@ import {
|
|||
} from './photoGalleryMutations'
|
||||
import MediaSidebar from '../sidebar/MediaSidebar/MediaSidebar'
|
||||
import { SidebarContext } from '../sidebar/Sidebar'
|
||||
import { sidebarMediaQuery_media_thumbnail } from '../sidebar/MediaSidebar/__generated__/sidebarMediaQuery'
|
||||
import { gql } from '@apollo/client'
|
||||
|
||||
const Gallery = styled.div`
|
||||
display: flex;
|
||||
|
@ -35,28 +34,42 @@ export const PhotoFiller = styled.div`
|
|||
flex-grow: 999999;
|
||||
`
|
||||
|
||||
export interface PhotoGalleryProps_Media extends PresentMediaProps_Media {
|
||||
thumbnail: sidebarMediaQuery_media_thumbnail | null
|
||||
blurhash: string | null
|
||||
favorite?: boolean
|
||||
export const MEDIA_GALLERY_FRAGMENT = gql`
|
||||
fragment MediaGalleryFields on Media {
|
||||
id
|
||||
type
|
||||
blurhash
|
||||
thumbnail {
|
||||
url
|
||||
width
|
||||
height
|
||||
}
|
||||
highRes {
|
||||
url
|
||||
}
|
||||
videoWeb {
|
||||
url
|
||||
}
|
||||
favorite
|
||||
}
|
||||
`
|
||||
|
||||
type PhotoGalleryProps = {
|
||||
type MediaGalleryProps = {
|
||||
loading: boolean
|
||||
mediaState: PhotoGalleryState
|
||||
dispatchMedia: React.Dispatch<PhotoGalleryAction>
|
||||
}
|
||||
|
||||
const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
|
||||
const MediaGallery = ({ mediaState, dispatchMedia }: MediaGalleryProps) => {
|
||||
const [markFavorite] = useMarkFavoriteMutation()
|
||||
|
||||
const { media, activeIndex, presenting } = mediaState
|
||||
|
||||
const { updateSidebar } = useContext(SidebarContext)
|
||||
|
||||
let photoElements = []
|
||||
let mediaElements = []
|
||||
if (media) {
|
||||
photoElements = media.map((media, index) => {
|
||||
mediaElements = media.map((media, index) => {
|
||||
const active = activeIndex == index
|
||||
|
||||
return (
|
||||
|
@ -85,14 +98,14 @@ const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
|
|||
})
|
||||
} else {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
photoElements.push(<MediaPlaceholder key={i} />)
|
||||
mediaElements.push(<MediaPlaceholder key={i} />)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Gallery data-testid="photo-gallery-wrapper">
|
||||
{photoElements}
|
||||
{mediaElements}
|
||||
<PhotoFiller />
|
||||
</Gallery>
|
||||
{presenting && (
|
||||
|
@ -105,4 +118,4 @@ const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
|
|||
)
|
||||
}
|
||||
|
||||
export default PhotoGallery
|
||||
export default MediaGallery
|
|
@ -3,6 +3,7 @@ import styled from 'styled-components'
|
|||
import { ProtectedImage } from './ProtectedMedia'
|
||||
import { MediaType } from '../../__generated__/globalTypes'
|
||||
import { ReactComponent as VideoThumbnailIconSVG } from './icons/videoThumbnailIcon.svg'
|
||||
import { MediaGalleryFields } from './__generated__/MediaGalleryFields'
|
||||
|
||||
const MediaContainer = styled.div`
|
||||
flex-grow: 1;
|
||||
|
@ -136,17 +137,7 @@ const VideoThumbnailIcon = styled(VideoThumbnailIconSVG)`
|
|||
`
|
||||
|
||||
type MediaThumbnailProps = {
|
||||
media: {
|
||||
id: string
|
||||
type: MediaType
|
||||
blurhash: string | null
|
||||
favorite?: boolean
|
||||
thumbnail: null | {
|
||||
url: string
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
}
|
||||
media: MediaGalleryFields
|
||||
active: boolean
|
||||
selectImage(): void
|
||||
clickPresent(): void
|
||||
|
|
|
@ -0,0 +1,65 @@
|
|||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { MediaType } from './../../../__generated__/globalTypes'
|
||||
|
||||
// ====================================================
|
||||
// GraphQL fragment: MediaGalleryFields
|
||||
// ====================================================
|
||||
|
||||
export interface MediaGalleryFields_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 MediaGalleryFields_highRes {
|
||||
__typename: 'MediaURL'
|
||||
/**
|
||||
* URL for previewing the image
|
||||
*/
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface MediaGalleryFields_videoWeb {
|
||||
__typename: 'MediaURL'
|
||||
/**
|
||||
* URL for previewing the image
|
||||
*/
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface MediaGalleryFields {
|
||||
__typename: 'Media'
|
||||
id: string
|
||||
type: MediaType
|
||||
/**
|
||||
* A short string that can be used to generate a blured version of the media, to show while the original is loading
|
||||
*/
|
||||
blurhash: string | null
|
||||
/**
|
||||
* URL to display the media in a smaller resolution
|
||||
*/
|
||||
thumbnail: MediaGalleryFields_thumbnail | null
|
||||
/**
|
||||
* URL to display the photo in full resolution, will be null for videos
|
||||
*/
|
||||
highRes: MediaGalleryFields_highRes | null
|
||||
/**
|
||||
* URL to get the video in a web format that can be played in the browser, will be null for photos
|
||||
*/
|
||||
videoWeb: MediaGalleryFields_videoWeb | null
|
||||
favorite: boolean
|
||||
}
|
|
@ -8,19 +8,19 @@
|
|||
// ====================================================
|
||||
|
||||
export interface markMediaFavorite_favoriteMedia {
|
||||
__typename: "Media";
|
||||
id: string;
|
||||
favorite: boolean;
|
||||
__typename: 'Media'
|
||||
id: string
|
||||
favorite: boolean
|
||||
}
|
||||
|
||||
export interface markMediaFavorite {
|
||||
/**
|
||||
* Mark or unmark a media as being a favorite
|
||||
*/
|
||||
favoriteMedia: markMediaFavorite_favoriteMedia;
|
||||
favoriteMedia: markMediaFavorite_favoriteMedia
|
||||
}
|
||||
|
||||
export interface markMediaFavoriteVariables {
|
||||
mediaId: string;
|
||||
favorite: boolean;
|
||||
mediaId: string
|
||||
favorite: boolean
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { gql, MutationFunction, useMutation } from '@apollo/client'
|
||||
import { PhotoGalleryProps_Media } from './PhotoGallery'
|
||||
import { PhotoGalleryProps_Media } from './MediaGallery'
|
||||
import {
|
||||
markMediaFavorite,
|
||||
markMediaFavoriteVariables,
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import { PhotoGalleryProps_Media } from './PhotoGallery'
|
||||
import { MediaGalleryFields } from './__generated__/MediaGalleryFields'
|
||||
|
||||
export interface PhotoGalleryState {
|
||||
presenting: boolean
|
||||
activeIndex: number
|
||||
media: PhotoGalleryProps_Media[]
|
||||
media: MediaGalleryFields[]
|
||||
}
|
||||
|
||||
export type GalleryAction =
|
||||
|
@ -16,7 +16,7 @@ export type PhotoGalleryAction =
|
|||
| GalleryAction
|
||||
| { type: 'openPresentMode'; activeIndex: number }
|
||||
| { type: 'selectImage'; index: number }
|
||||
| { type: 'replaceMedia'; media: PhotoGalleryProps_Media[] }
|
||||
| { type: 'replaceMedia'; media: MediaGalleryFields[] }
|
||||
|
||||
export function photoGalleryReducer(
|
||||
state: PhotoGalleryState,
|
||||
|
|
|
@ -2,17 +2,23 @@ import { render, screen } from '@testing-library/react'
|
|||
|
||||
import React from 'react'
|
||||
import { MediaType } from '../../../__generated__/globalTypes'
|
||||
import PresentMedia, { PresentMediaProps_Media } from './PresentMedia'
|
||||
import { MediaGalleryFields } from '../__generated__/MediaGalleryFields'
|
||||
import PresentMedia from './PresentMedia'
|
||||
|
||||
test('render present image', () => {
|
||||
const media: PresentMediaProps_Media = {
|
||||
const media: MediaGalleryFields = {
|
||||
__typename: 'Media',
|
||||
id: '123',
|
||||
type: MediaType.Photo,
|
||||
highRes: null,
|
||||
blurhash: null,
|
||||
videoWeb: null,
|
||||
favorite: false,
|
||||
thumbnail: {
|
||||
__typename: 'MediaURL',
|
||||
url: '/sample_image.jpg',
|
||||
width: 300,
|
||||
height: 200,
|
||||
},
|
||||
}
|
||||
|
||||
|
@ -28,11 +34,13 @@ test('render present image', () => {
|
|||
})
|
||||
|
||||
test('render present video', () => {
|
||||
const media: PresentMediaProps_Media = {
|
||||
const media: MediaGalleryFields = {
|
||||
__typename: 'Media',
|
||||
id: '123',
|
||||
type: MediaType.Video,
|
||||
highRes: null,
|
||||
blurhash: null,
|
||||
favorite: false,
|
||||
videoWeb: {
|
||||
__typename: 'MediaURL',
|
||||
url: '/sample_video.mp4',
|
||||
|
@ -40,6 +48,8 @@ test('render present video', () => {
|
|||
thumbnail: {
|
||||
__typename: 'MediaURL',
|
||||
url: '/sample_video_thumb.jpg',
|
||||
width: 300,
|
||||
height: 200,
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
@ -2,11 +2,8 @@ import React from 'react'
|
|||
import styled from 'styled-components'
|
||||
import { MediaType } from '../../../__generated__/globalTypes'
|
||||
import { exhaustiveCheck } from '../../../helpers/utils'
|
||||
import {
|
||||
ProtectedImage,
|
||||
ProtectedVideo,
|
||||
ProtectedVideoProps_Media,
|
||||
} from '../ProtectedMedia'
|
||||
import { ProtectedImage, ProtectedVideo } from '../ProtectedMedia'
|
||||
import { MediaGalleryFields } from '../__generated__/MediaGalleryFields'
|
||||
|
||||
const StyledPhoto = styled(ProtectedImage)`
|
||||
position: absolute;
|
||||
|
@ -26,16 +23,8 @@ const StyledVideo = styled(ProtectedVideo)`
|
|||
height: 100vh;
|
||||
`
|
||||
|
||||
export interface PresentMediaProps_Media extends ProtectedVideoProps_Media {
|
||||
type: MediaType
|
||||
highRes: null | {
|
||||
__typename: 'MediaURL'
|
||||
url: string
|
||||
}
|
||||
}
|
||||
|
||||
type PresentMediaProps = {
|
||||
media: PresentMediaProps_Media
|
||||
media: MediaGalleryFields
|
||||
imageLoaded?(): void
|
||||
}
|
||||
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import styled, { createGlobalStyle } from 'styled-components'
|
||||
import PresentNavigationOverlay from './PresentNavigationOverlay'
|
||||
import PresentMedia, { PresentMediaProps_Media } from './PresentMedia'
|
||||
import PresentMedia from './PresentMedia'
|
||||
import { closePresentModeAction, GalleryAction } from '../photoGalleryReducer'
|
||||
import { MediaGalleryFields } from '../__generated__/MediaGalleryFields'
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
position: fixed;
|
||||
|
@ -24,7 +25,7 @@ const PreventScroll = createGlobalStyle`
|
|||
type PresentViewProps = {
|
||||
className?: string
|
||||
imageLoaded?(): void
|
||||
activeMedia: PresentMediaProps_Media
|
||||
activeMedia: MediaGalleryFields
|
||||
dispatchMedia: React.Dispatch<GalleryAction>
|
||||
disableSaveCloseInHistory?: boolean
|
||||
}
|
||||
|
|
|
@ -8,9 +8,9 @@
|
|||
// ====================================================
|
||||
|
||||
export interface getAlbumSidebar_album {
|
||||
__typename: "Album";
|
||||
id: string;
|
||||
title: string;
|
||||
__typename: 'Album'
|
||||
id: string
|
||||
title: string
|
||||
}
|
||||
|
||||
export interface getAlbumSidebar {
|
||||
|
@ -18,9 +18,9 @@ export interface getAlbumSidebar {
|
|||
* 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: getAlbumSidebar_album;
|
||||
album: getAlbumSidebar_album
|
||||
}
|
||||
|
||||
export interface getAlbumSidebarVariables {
|
||||
id: string;
|
||||
id: string
|
||||
}
|
||||
|
|
|
@ -8,38 +8,38 @@
|
|||
// ====================================================
|
||||
|
||||
export interface resetAlbumCover_resetAlbumCover_thumbnail_thumbnail {
|
||||
__typename: "MediaURL";
|
||||
__typename: 'MediaURL'
|
||||
/**
|
||||
* URL for previewing the image
|
||||
*/
|
||||
url: string;
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface resetAlbumCover_resetAlbumCover_thumbnail {
|
||||
__typename: "Media";
|
||||
id: string;
|
||||
__typename: 'Media'
|
||||
id: string
|
||||
/**
|
||||
* URL to display the media in a smaller resolution
|
||||
*/
|
||||
thumbnail: resetAlbumCover_resetAlbumCover_thumbnail_thumbnail | null;
|
||||
thumbnail: resetAlbumCover_resetAlbumCover_thumbnail_thumbnail | null
|
||||
}
|
||||
|
||||
export interface resetAlbumCover_resetAlbumCover {
|
||||
__typename: "Album";
|
||||
id: string;
|
||||
__typename: 'Album'
|
||||
id: string
|
||||
/**
|
||||
* An image in this album used for previewing this album
|
||||
*/
|
||||
thumbnail: resetAlbumCover_resetAlbumCover_thumbnail | null;
|
||||
thumbnail: resetAlbumCover_resetAlbumCover_thumbnail | null
|
||||
}
|
||||
|
||||
export interface resetAlbumCover {
|
||||
/**
|
||||
* Reset the assigned cover photo for an album
|
||||
*/
|
||||
resetAlbumCover: resetAlbumCover_resetAlbumCover;
|
||||
resetAlbumCover: resetAlbumCover_resetAlbumCover
|
||||
}
|
||||
|
||||
export interface resetAlbumCoverVariables {
|
||||
albumID: string;
|
||||
albumID: string
|
||||
}
|
||||
|
|
|
@ -8,38 +8,38 @@
|
|||
// ====================================================
|
||||
|
||||
export interface setAlbumCover_setAlbumCover_thumbnail_thumbnail {
|
||||
__typename: "MediaURL";
|
||||
__typename: 'MediaURL'
|
||||
/**
|
||||
* URL for previewing the image
|
||||
*/
|
||||
url: string;
|
||||
url: string
|
||||
}
|
||||
|
||||
export interface setAlbumCover_setAlbumCover_thumbnail {
|
||||
__typename: "Media";
|
||||
id: string;
|
||||
__typename: 'Media'
|
||||
id: string
|
||||
/**
|
||||
* URL to display the media in a smaller resolution
|
||||
*/
|
||||
thumbnail: setAlbumCover_setAlbumCover_thumbnail_thumbnail | null;
|
||||
thumbnail: setAlbumCover_setAlbumCover_thumbnail_thumbnail | null
|
||||
}
|
||||
|
||||
export interface setAlbumCover_setAlbumCover {
|
||||
__typename: "Album";
|
||||
id: string;
|
||||
__typename: 'Album'
|
||||
id: string
|
||||
/**
|
||||
* An image in this album used for previewing this album
|
||||
*/
|
||||
thumbnail: setAlbumCover_setAlbumCover_thumbnail | null;
|
||||
thumbnail: setAlbumCover_setAlbumCover_thumbnail | null
|
||||
}
|
||||
|
||||
export interface setAlbumCover {
|
||||
/**
|
||||
* Assign a cover photo to an album
|
||||
*/
|
||||
setAlbumCover: setAlbumCover_setAlbumCover;
|
||||
setAlbumCover: setAlbumCover_setAlbumCover
|
||||
}
|
||||
|
||||
export interface setAlbumCoverVariables {
|
||||
coverID: string;
|
||||
coverID: string
|
||||
}
|
||||
|
|
|
@ -8,19 +8,19 @@
|
|||
// ====================================================
|
||||
|
||||
export interface sidebarAlbumAddShare_shareAlbum {
|
||||
__typename: "ShareToken";
|
||||
token: string;
|
||||
__typename: 'ShareToken'
|
||||
token: string
|
||||
}
|
||||
|
||||
export interface sidebarAlbumAddShare {
|
||||
/**
|
||||
* Generate share token for album
|
||||
*/
|
||||
shareAlbum: sidebarAlbumAddShare_shareAlbum;
|
||||
shareAlbum: sidebarAlbumAddShare_shareAlbum
|
||||
}
|
||||
|
||||
export interface sidebarAlbumAddShareVariables {
|
||||
id: string;
|
||||
password?: string | null;
|
||||
expire?: any | null;
|
||||
id: string
|
||||
password?: string | null
|
||||
expire?: any | null
|
||||
}
|
||||
|
|
|
@ -8,19 +8,19 @@
|
|||
// ====================================================
|
||||
|
||||
export interface sidebarPhotoAddShare_shareMedia {
|
||||
__typename: "ShareToken";
|
||||
token: string;
|
||||
__typename: 'ShareToken'
|
||||
token: string
|
||||
}
|
||||
|
||||
export interface sidebarPhotoAddShare {
|
||||
/**
|
||||
* Generate share token for media
|
||||
*/
|
||||
shareMedia: sidebarPhotoAddShare_shareMedia;
|
||||
shareMedia: sidebarPhotoAddShare_shareMedia
|
||||
}
|
||||
|
||||
export interface sidebarPhotoAddShareVariables {
|
||||
id: string;
|
||||
password?: string | null;
|
||||
expire?: any | null;
|
||||
id: string
|
||||
password?: string | null
|
||||
expire?: any | null
|
||||
}
|
||||
|
|
|
@ -8,22 +8,22 @@
|
|||
// ====================================================
|
||||
|
||||
export interface sidebarProtectShare_protectShareToken {
|
||||
__typename: "ShareToken";
|
||||
token: string;
|
||||
__typename: 'ShareToken'
|
||||
token: string
|
||||
/**
|
||||
* Whether or not a password is needed to access the share
|
||||
*/
|
||||
hasPassword: boolean;
|
||||
hasPassword: boolean
|
||||
}
|
||||
|
||||
export interface sidebarProtectShare {
|
||||
/**
|
||||
* Set a password for a token, if null is passed for the password argument, the password will be cleared
|
||||
*/
|
||||
protectShareToken: sidebarProtectShare_protectShareToken;
|
||||
protectShareToken: sidebarProtectShare_protectShareToken
|
||||
}
|
||||
|
||||
export interface sidebarProtectShareVariables {
|
||||
token: string;
|
||||
password?: string | null;
|
||||
token: string
|
||||
password?: string | null
|
||||
}
|
||||
|
|
|
@ -8,17 +8,17 @@
|
|||
// ====================================================
|
||||
|
||||
export interface sidebareDeleteShare_deleteShareToken {
|
||||
__typename: "ShareToken";
|
||||
token: string;
|
||||
__typename: 'ShareToken'
|
||||
token: string
|
||||
}
|
||||
|
||||
export interface sidebareDeleteShare {
|
||||
/**
|
||||
* Delete a share token by it's token value
|
||||
*/
|
||||
deleteShareToken: sidebareDeleteShare_deleteShareToken;
|
||||
deleteShareToken: sidebareDeleteShare_deleteShareToken
|
||||
}
|
||||
|
||||
export interface sidebareDeleteShareVariables {
|
||||
token: string;
|
||||
token: string
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useContext } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { MediaThumbnail } from '../photoGallery/MediaThumbnail'
|
||||
import { PhotoFiller } from '../photoGallery/PhotoGallery'
|
||||
import { PhotoFiller } from '../photoGallery/MediaGallery'
|
||||
import {
|
||||
toggleFavoriteAction,
|
||||
useMarkFavoriteMutation,
|
||||
|
|
Loading…
Reference in New Issue