Add caching of protected images
This commit is contained in:
parent
0496a65f9c
commit
58b1a07340
|
@ -4,6 +4,7 @@ import { Loader } from 'semantic-ui-react'
|
||||||
import { Photo } from './Photo'
|
import { Photo } from './Photo'
|
||||||
import PresentView from './PresentView'
|
import PresentView from './PresentView'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
|
import { fetchProtectedImage } from './ProtectedImage'
|
||||||
|
|
||||||
const Gallery = styled.div`
|
const Gallery = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -55,9 +56,9 @@ class PhotoGallery extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
preloadImages() {
|
preloadImages() {
|
||||||
function preloadImage(url) {
|
async function preloadImage(url) {
|
||||||
var img = new Image()
|
var img = new Image()
|
||||||
img.src = url
|
img.src = await fetchProtectedImage(url)
|
||||||
}
|
}
|
||||||
|
|
||||||
const { activeIndex = -1, photos } = this.props
|
const { activeIndex = -1, photos } = this.props
|
||||||
|
|
|
@ -1,5 +1,34 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
let imageCache = {}
|
||||||
|
|
||||||
|
export async function fetchProtectedImage(src) {
|
||||||
|
if (src) {
|
||||||
|
if (imageCache[src]) {
|
||||||
|
console.log('Found image from cache', src)
|
||||||
|
return imageCache[src]
|
||||||
|
}
|
||||||
|
|
||||||
|
let image = await fetch(src, {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${localStorage.getItem('token')}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
image = await image.blob()
|
||||||
|
const url = URL.createObjectURL(image)
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`Saved image to cache, ${src}. New cache size: ${
|
||||||
|
Object.keys(imageCache).length
|
||||||
|
}`
|
||||||
|
)
|
||||||
|
imageCache[src] = url
|
||||||
|
|
||||||
|
return url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An image that needs a authorization header to load
|
* An image that needs a authorization header to load
|
||||||
*/
|
*/
|
||||||
|
@ -20,28 +49,17 @@ class ProtectedImage extends React.Component {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
async fetchImage() {
|
render() {
|
||||||
if (this.props.src && this.shouldRefresh) {
|
if (this.shouldRefresh) {
|
||||||
this.shouldRefresh = false
|
this.shouldRefresh = false
|
||||||
|
|
||||||
let image = await fetch(this.props.src, {
|
fetchProtectedImage(this.props.src).then(imgSrc => {
|
||||||
headers: {
|
this.setState({
|
||||||
Authorization: `Bearer ${localStorage.getItem('token')}`,
|
imgSrc,
|
||||||
},
|
})
|
||||||
})
|
|
||||||
|
|
||||||
image = await image.blob()
|
|
||||||
const url = URL.createObjectURL(image)
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
imgSrc: url,
|
|
||||||
loadedSrc: this.props.src,
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
this.fetchImage()
|
|
||||||
return <img {...this.props} src={this.state.imgSrc} />
|
return <img {...this.props} src={this.state.imgSrc} />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue