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

Improve photos page

This commit is contained in:
viktorstrate 2019-07-23 23:10:18 +02:00
parent 7c714449f9
commit fc87fabab5
3 changed files with 154 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/src/Pages/AlbumPage/AlbumPage.js
View File

@ -43,31 +43,6 @@ class AlbumPage extends Component {
this.setActiveImage = this.setActiveImage.bind(this)
this.photoAmount = 1
this.keyDownEvent = e => {
const activeImage = this.state.activeImage
if (activeImage != -1) {
if (e.key == 'ArrowRight') {
this.setActiveImage((activeImage + 1) % this.photoAmount)
}
if (e.key == 'ArrowLeft') {
if (activeImage <= 0) {
this.setActiveImage(this.photoAmount - 1)
} else {
this.setActiveImage(activeImage - 1)
}
}
}
}
}
componentDidMount() {
document.addEventListener('keydown', this.keyDownEvent)
}
componentWillUnmount() {
document.removeEventListener('keydown', this.keyDownEvent)
}
setActiveImage(index, id) {

71
ui/src/Pages/PhotosPage/PhotosPage.js
View File

@ -3,22 +3,43 @@ import Layout from '../../Layout'
import gql from 'graphql-tag'
import { Query } from 'react-apollo'
import PhotoGallery from '../../PhotoGallery'
import AlbumSidebar from '../AlbumPage/AlbumSidebar'
const photoQuery = gql`
query allPhotosPage {
myPhotos(orderBy: title_desc) {
id
myAlbums(orderBy: title_asc) {
title
thumbnail {
url
width
height
id
photos(orderBy: title_desc) {
id
title
thumbnail {
url
width
height
}
}
}
}
`
class PhotosPage extends Component {
constructor(props) {
super(props)
this.state = {
activeAlbum: null,
activeIndex: null,
}
}
setActiveImage(album, index) {
this.setState({
activeIndex: index,
activeAlbum: album,
})
}
render() {
return (
<Layout>
@ -26,12 +47,40 @@ class PhotosPage extends Component {
{({ loading, error, data }) => {
if (error) return error
let galleryGroups = []
if (data.myAlbums) {
galleryGroups = data.myAlbums.map(album => (
<div key={album.id}>
<h1>{album.title}</h1>
<PhotoGallery
onSelectImage={index => {
this.setActiveImage(album.id, index)
}}
activeIndex={
this.state.activeAlbum == album.id
? this.state.activeIndex
: -1
}
loading={loading}
photos={album.photos}
/>
</div>
))
}
let activeImage = null
if (this.state.activeAlbum) {
activeImage = data.myAlbums.find(
album => album.id == this.state.activeAlbum
).photos[this.state.activeIndex].id
}
return (
<PhotoGallery
loading={loading}
title="All photos"
photos={data.myPhotos}
/>
<div>
{galleryGroups}
<AlbumSidebar imageId={activeImage} />
</div>
)
}}
</Query>

141
ui/src/PhotoGallery.js
View File

@ -18,7 +18,7 @@ const PhotoContainer = styled.div`
position: relative;
`
const Photo = photoProps => {
const PhotoImg = photoProps => {
const StyledPhoto = styled(animated.img)`
height: 200px;
min-width: 100%;
@ -29,18 +29,30 @@ const Photo = photoProps => {
const [props, set, stop] = useSpring(() => ({ opacity: 0 }))
return (
<LazyLoad>
<StyledPhoto
{...photoProps}
style={props}
onLoad={() => {
set({ opacity: 1 })
}}
/>
</LazyLoad>
<StyledPhoto
{...photoProps}
style={props}
onLoad={() => {
set({ opacity: 1 })
}}
/>
)
}
class Photo extends React.Component {
shouldComponentUpdate(nextProps) {
return nextProps.src != this.props.src
}
render() {
return (
<LazyLoad>
<PhotoImg {...this.props} />
</LazyLoad>
)
}
}
const PhotoOverlay = styled.div`
width: 100%;
height: 100%;
@ -60,46 +72,81 @@ const PhotoFiller = styled.div`
flex-grow: 999999;
`
const PhotoGallery = ({ activeIndex = -1, photos, loading, onSelectImage }) => {
let photoElements = null
if (photos) {
photoElements = photos.map((photo, index) => {
const active = activeIndex == index
class PhotoGallery extends React.Component {
constructor(props) {
super(props)
let minWidth = 100
if (photo.thumbnail) {
minWidth = Math.floor(
(photo.thumbnail.width / photo.thumbnail.height) * 200
)
}
// this.keyDownEvent = e => {
// if (!this.props.onSelectImage) {
// return
// }
return (
<PhotoContainer
key={photo.id}
style={{
cursor: onSelectImage ? 'pointer' : null,
minWidth: `${minWidth}px`,
}}
onClick={() => {
onSelectImage && onSelectImage(index)
}}
>
<Photo src={photo.thumbnail.url} />
<PhotoOverlay active={active} />
</PhotoContainer>
)
})
// const activeImage = this.state.activeImage
// if (activeImage != -1) {
// if (e.key == 'ArrowRight') {
// this.setActiveImage((activeImage + 1) % this.photoAmount)
// }
// if (e.key == 'ArrowLeft') {
// if (activeImage <= 0) {
// this.setActiveImage(this.photoAmount - 1)
// } else {
// this.setActiveImage(activeImage - 1)
// }
// }
// }
// }
}
return (
<div>
<Gallery>
<Loader active={loading}>Loading images</Loader>
{photoElements}
<PhotoFiller />
</Gallery>
</div>
)
}
// componentDidMount() {
// document.addEventListener('keydown', this.keyDownEvent)
// }
// componentWillUnmount() {
// document.removeEventListener('keydown', this.keyDownEvent)
// }
render() {
const { activeIndex = -1, photos, loading, onSelectImage } = this.props
let photoElements = null
if (photos) {
photoElements = photos.map((photo, index) => {
const active = activeIndex == index
let minWidth = 100
if (photo.thumbnail) {
minWidth = Math.floor(
(photo.thumbnail.width / photo.thumbnail.height) * 200
)
}
return (
<PhotoContainer
key={photo.id}
style={{
cursor: onSelectImage ? 'pointer' : null,
minWidth: `${minWidth}px`,
}}
onClick={() => {
onSelectImage && onSelectImage(index)
}}
>
<Photo src={photo.thumbnail.url} />
<PhotoOverlay active={active} />
</PhotoContainer>
)
})
}
return (
<div>
<Gallery>
<Loader active={loading}>Loading images</Loader>
{photoElements}
<PhotoFiller />
</Gallery>
</div>
)
}
}
export default PhotoGallery