From 89037b6b2444a954a6759386a008504ddb17f277 Mon Sep 17 00:00:00 2001
From: Bill Thiede <git@xinu.tv>
Date: Sun, 8 Mar 2020 11:56:07 -0700
Subject: [PATCH] Prefetch images for next slide.

---
 react-slideshow/src/App.tsx | 54 ++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/react-slideshow/src/App.tsx b/react-slideshow/src/App.tsx
index 1a0ed38..b2ac9e5 100644
--- a/react-slideshow/src/App.tsx
+++ b/react-slideshow/src/App.tsx
@@ -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})