wathiede/photosync
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Prefetch images for next slide.

Browse Source
This commit is contained in:
Bill Thiede 2020-03-08 11:56:07 -07:00
parent 9e4fdf7644
commit 89037b6b24
1 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
react-slideshow/src/App.tsx
View File

@ -5,6 +5,8 @@ import {
Route,
useParams
} from "react-router-dom";
import 'animate.css';
import Random from './rand';
import './App.css';
@ -60,7 +62,11 @@ class Slide {
constructor(items: Array<MediaItem>) {
this.items = items;
}
render() {
prefetchImages() {
console.log(`prefetchImages, I have ${this.imageUrls.length} images`);
this.imageUrls.map(url => new Image().src = url);
}
get imageUrls(): Array<string> {
let w = window.innerWidth * window.devicePixelRatio;
let h = window.innerHeight * window.devicePixelRatio;
let ratio = w/h;
@ -68,23 +74,32 @@ class Slide {
// Landscape image
w = roundup(w, IMAGE_CHUNK);
h = Math.round(w/ratio);
} else {
// Portrait image
h = roundup(h, IMAGE_CHUNK);
w = Math.round(h/ratio);
}
console.log(`Window size ${window.innerWidth}x${window.innerHeight} with a devicePixelRatio of ${window.devicePixelRatio} for a total size of ${w}x${h}`);
let style: React.CSSProperties = {
height: '100%',
width: '100%',
backgroundColor: 'black',
// TODO(wathiede): make this handle multiple items.
backgroundImage: `url(/api/image/${this.items[0].id}?w=${w}&h=${h})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: 'cover',
};
return <div style={style}></div>
} else {
// Portrait image
h = roundup(h, IMAGE_CHUNK);
w = Math.round(h/ratio);
}
//console.log(`Window size ${window.innerWidth}x${window.innerHeight} with a devicePixelRatio of ${window.devicePixelRatio} for a total size of ${w}x${h}`);
return this.items.map(img => `/api/image/${img.id}?w=${w}&h=${h}`);
}
render() {
const imgs = this.imageUrls.map(url => {
let style: React.CSSProperties = {
height: '100%',
width: '100%',
backgroundColor: 'black',
backgroundImage: `url(${url})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: 'cover',
};
return <div key={url} style={style}></div>;
});
// TODO(wathiede): make sure the style handles multiple items.
return <div style={{
height: '100%',
width: '100%',
}}>{imgs}</div>;
}
};
@ -183,7 +198,7 @@ class Album extends React.Component<AlbumProps, AlbumState> {
render() {
// TODO(wathiede): fade transition.
// TODO(wathiede): pair-up portrait orientation images.
let {curSlide, error, mediaItems, showUI} = this.state;
let {curSlide, error, showUI} = this.state;
if (error !== null) {
return <h2>Error: {JSON.stringify(error)}</h2>;
} else if (curSlide) {
@ -224,6 +239,7 @@ class Album extends React.Component<AlbumProps, AlbumState> {
}}>{ nextSlide?.render() }</div>
</div>;
}
nextSlide?.prefetchImages();
return <div id="slide" onClick={(e)=>{
e.stopPropagation();
this.setState({showUI: !showUI})