diff --git a/ui/src/components/albumGallery/AlbumGallery.js b/ui/src/components/albumGallery/AlbumGallery.js index 734037c2..3e5c0c7b 100644 --- a/ui/src/components/albumGallery/AlbumGallery.js +++ b/ui/src/components/albumGallery/AlbumGallery.js @@ -32,21 +32,22 @@ const AlbumGallery = ({ album, loading = false, customAlbumLink }) => { }, []) // On update - useEffect(() => { - if (presenting) { - window.history.replaceState( - null, - null, - document.location.pathname + '#' + `present=${activeImage}` - ) - } else if (presentIndexFromHash(document.location.hash)) { - window.history.replaceState( - null, - null, - document.location.pathname.split('#')[0] - ) - } - }) + // TODO: Fix hash + // useEffect(() => { + // if (presenting) { + // window.history.replaceState( + // null, + // null, + // document.location.pathname + '#' + `present=${activeImage}` + // ) + // } else if (presentIndexFromHash(document.location.hash)) { + // window.history.replaceState( + // null, + // null, + // document.location.pathname.split('#')[0] + // ) + // } + // }) useEffect(() => { setActiveImage(-1) diff --git a/ui/src/components/photoGallery/PhotoGallery.js b/ui/src/components/photoGallery/PhotoGallery.js index 31c7c192..25af35a8 100644 --- a/ui/src/components/photoGallery/PhotoGallery.js +++ b/ui/src/components/photoGallery/PhotoGallery.js @@ -1,6 +1,4 @@ -import React, { useState, useEffect } from 'react' -import { animated } from 'react-spring' -import { Transition } from 'react-spring/renderprops' +import React, { useEffect } from 'react' import styled from 'styled-components' import { Loader } from 'semantic-ui-react' import { Photo } from './Photo' @@ -42,17 +40,14 @@ const PhotoGallery = ({ } if (e.key == 'ArrowRight') { - setMoveDirection('right') nextImage && nextImage() } if (e.key == 'ArrowLeft') { - setMoveDirection('left') nextImage && previousImage() } if (e.key == 'Escape') { - setMoveDirection(null) setPresenting(false) } } @@ -64,8 +59,6 @@ const PhotoGallery = ({ } }) - const [moveDirection, setMoveDirection] = useState(null) - const activeImage = photos && activeIndex != -1 && photos[activeIndex] const getPhotoElements = updateSidebar => { @@ -103,60 +96,24 @@ const PhotoGallery = ({ return photoElements } - let transformDirectionIndex = 0 - if (moveDirection == 'right') transformDirectionIndex = 1 - if (moveDirection == 'left') transformDirectionIndex = 2 - - const presentViewTransitionConfig = { - items: activeImage, - keys: x => x, - config: { - tension: 220, - }, - from: { - opacity: 0, - transform: [ - 'translate(0%, 0)', - 'translate(12%, 0)', - 'translate(-12%, 0)', - ][transformDirectionIndex], - }, - enter: { - opacity: 1, - transform: 'translate(0%, 0)', - }, - } - - const AnimatedPresentPhoto = animated(PresentPhoto) - return ( {({ updateSidebar }) => (
- {!presenting ? ( - - Loading images - {getPhotoElements(updateSidebar)} - - - ) : ( + + Loading images + {getPhotoElements(updateSidebar)} + + + {presenting && ( - - {photo => props => ( - - )} - + )}
)}
) - // } } PhotoGallery.propTypes = { diff --git a/ui/src/components/photoGallery/PresentView.js b/ui/src/components/photoGallery/PresentView.js index fc9fd0a5..e7213eec 100644 --- a/ui/src/components/photoGallery/PresentView.js +++ b/ui/src/components/photoGallery/PresentView.js @@ -1,8 +1,6 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import PropTypes from 'prop-types' import styled, { createGlobalStyle } from 'styled-components' -import { Query } from 'react-apollo' -import gql from 'graphql-tag' import ProtectedImage from './ProtectedImage' export const PresentContainer = ({ children, ...otherProps }) => { @@ -26,7 +24,7 @@ export const PresentContainer = ({ children, ...otherProps }) => { } PresentContainer.propTypes = { - children: PropTypes.element, + children: PropTypes.any, } const PreventScroll = createGlobalStyle` @@ -36,101 +34,33 @@ const PreventScroll = createGlobalStyle` } ` -const imageQuery = gql` - query presentImage($id: ID!) { - photo(id: $id) { - id - title - original { - width - height - url - } - } - } -` - const StyledPhoto = styled(ProtectedImage)` + position: absolute; + top: 0; + left: 0; width: 100vw; height: 100vh; object-fit: contain; object-position: center; ` -export const PresentPhoto = ({ - photo, - thumbnail, - imageLoaded, - ...otherProps -}) => { - let [originalPhoto, setOriginalPhoto] = useState(null) - useEffect(() => { - if (!(photo && photo.id)) return - - function loadOriginalPhoto() { - let originalPhoto = null - - if (photo && photo.original && photo.original.url) { - originalPhoto = ( - { - e.target.style.display = 'initial' - imageLoaded && imageLoaded() - }} - /> - ) - } else { - originalPhoto = ( - - {({ loading, error, data }) => { - if (error) { - alert(error) - return null - } - - if (data && data.photo) { - const photo = data.photo - - return ( - { - e.target.style.display = 'initial' - imageLoaded && imageLoaded() - }} - /> - ) - } - - return null - }} - - ) - } - - setOriginalPhoto(originalPhoto) - } - - const timeoutHandle = setTimeout(loadOriginalPhoto, 500) - - return function cleanup() { - clearTimeout(timeoutHandle) - } - }, []) - +export const PresentPhoto = ({ photo, imageLoaded, ...otherProps }) => { return (
- {originalPhoto} - + + { + e.target.style.display = 'initial' + imageLoaded && imageLoaded() + }} + />
) } PresentPhoto.propTypes = { photo: PropTypes.object, - thumbnail: PropTypes.string, imageLoaded: PropTypes.func, }