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