Preload images in present view
This commit is contained in:
parent
c70cc402b0
commit
54929d6739
|
@ -28,6 +28,9 @@ const albumQuery = gql`
|
|||
width
|
||||
height
|
||||
}
|
||||
original {
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -82,13 +85,13 @@ class AlbumPage extends Component {
|
|||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (this.state.presenting) {
|
||||
document.history.replaceState(
|
||||
window.history.replaceState(
|
||||
null,
|
||||
null,
|
||||
document.location.pathname + '#' + `present=${this.state.activeImage}`
|
||||
)
|
||||
} else if (presentIndexFromHash(document.location.hash)) {
|
||||
document.history.replaceState(
|
||||
window.history.replaceState(
|
||||
null,
|
||||
null,
|
||||
document.location.pathname.split('#')[0]
|
||||
|
|
|
@ -18,6 +18,9 @@ const photoQuery = gql`
|
|||
width
|
||||
height
|
||||
}
|
||||
original {
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -42,6 +42,8 @@ class PhotoGallery extends React.Component {
|
|||
this.props.setPresenting(false)
|
||||
}
|
||||
}
|
||||
|
||||
this.preloadImages = this.preloadImages.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -52,8 +54,39 @@ class PhotoGallery extends React.Component {
|
|||
document.removeEventListener('keydown', this.keyDownEvent)
|
||||
}
|
||||
|
||||
preloadImages() {
|
||||
function preloadImage(url) {
|
||||
var img = new Image()
|
||||
img.src = url
|
||||
}
|
||||
|
||||
const { activeIndex = -1, photos } = this.props
|
||||
|
||||
if (activeIndex != -1 && photos) {
|
||||
let previousIndex = null
|
||||
let nextIndex = null
|
||||
|
||||
if (activeIndex > 0) {
|
||||
previousIndex = activeIndex - 1
|
||||
} else {
|
||||
previousIndex = photos.length - 1
|
||||
}
|
||||
|
||||
nextIndex = (activeIndex + 1) % photos.length
|
||||
|
||||
preloadImage(photos[nextIndex].original.url)
|
||||
preloadImage(photos[previousIndex].original.url)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { activeIndex = -1, photos, loading, onSelectImage } = this.props
|
||||
const {
|
||||
activeIndex = -1,
|
||||
photos,
|
||||
loading,
|
||||
onSelectImage,
|
||||
presenting,
|
||||
} = this.props
|
||||
|
||||
const activeImage = photos && activeIndex != -1 && photos[activeIndex]
|
||||
|
||||
|
@ -91,8 +124,9 @@ class PhotoGallery extends React.Component {
|
|||
<PhotoFiller />
|
||||
</Gallery>
|
||||
<PresentView
|
||||
presenting={this.props.presenting}
|
||||
presenting={presenting}
|
||||
image={activeImage && activeImage.id}
|
||||
imageLoaded={this.preloadImages()}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -63,7 +63,10 @@ export default class PresentView extends React.Component {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<PresentImage src={photo && photo.original.url} />
|
||||
<PresentImage
|
||||
src={photo && photo.original.url}
|
||||
onLoad={this.props.imageLoaded && this.props.imageLoaded()}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
|
|
|
@ -99,7 +99,9 @@ class AlbumSidebar extends Component {
|
|||
{}
|
||||
)
|
||||
|
||||
exif.dateShot = exif.dateShot.formatted
|
||||
exif.dateShot = new Date(
|
||||
exif.dateShot.formatted
|
||||
).toLocaleString()
|
||||
|
||||
exifItems = exifKeys.map(key => (
|
||||
<SidebarItem
|
||||
|
|
Loading…
Reference in New Issue