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

Remove present view animations

This commit is contained in:
viktorstrate 2019-08-23 23:56:50 +02:00
parent c8d02392f2
commit eb653b66c3
3 changed files with 39 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/components/albumGallery/AlbumGallery.js
View File

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

59
ui/src/components/photoGallery/PhotoGallery.js
View File

@ -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 (
<SidebarConsumer>
{({ updateSidebar }) => (
<div>
{!presenting ? (
<Gallery>
<Loader active={loading}>Loading images</Loader>
{getPhotoElements(updateSidebar)}
<PhotoFiller />
</Gallery>
) : (
<Gallery>
<Loader active={loading}>Loading images</Loader>
{getPhotoElements(updateSidebar)}
<PhotoFiller />
</Gallery>
{presenting && (
<PresentContainer>
<Transition {...presentViewTransitionConfig}>
{photo => props => (
<PresentPhoto
thumbnail={photo && photo.thumbnail.url}
photo={photo}
style={props}
/>
)}
</Transition>
<PresentPhoto photo={activeImage} />
</PresentContainer>
)}
</div>
)}
</SidebarConsumer>
)
// }
}
PhotoGallery.propTypes = {

100
ui/src/components/photoGallery/PresentView.js
View File

@ -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 = (
<StyledPhoto
style={{ display: 'none' }}
src={photo.original.url}
onLoad={e => {
e.target.style.display = 'initial'
imageLoaded && imageLoaded()
}}
/>
)
} else {
originalPhoto = (
<Query query={imageQuery} variables={{ id: photo.id }}>
{({ loading, error, data }) => {
if (error) {
alert(error)
return null
}
if (data && data.photo) {
const photo = data.photo
return (
<StyledPhoto
style={{ display: 'none' }}
src={photo.original.url}
onLoad={e => {
e.target.style.display = 'initial'
imageLoaded && imageLoaded()
}}
/>
)
}
return null
}}
</Query>
)
}
setOriginalPhoto(originalPhoto)
}
const timeoutHandle = setTimeout(loadOriginalPhoto, 500)
return function cleanup() {
clearTimeout(timeoutHandle)
}
}, [])
export const PresentPhoto = ({ photo, imageLoaded, ...otherProps }) => {
return (
<div {...otherProps}>
{originalPhoto}
<StyledPhoto src={thumbnail} />
<StyledPhoto src={photo.thumbnail.url} />
<StyledPhoto
style={{ display: 'none' }}
src={photo.original.url}
onLoad={e => {
e.target.style.display = 'initial'
imageLoaded && imageLoaded()
}}
/>
</div>
)
}
PresentPhoto.propTypes = {
photo: PropTypes.object,
thumbnail: PropTypes.string,
imageLoaded: PropTypes.func,
}