Preload images in present view

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -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]

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -18,6 +18,9 @@ const photoQuery = gql`
           width
           height
         }
+        original {
+          url
+        }
       }
     }
   }

ui/src/components/photoGallery/PhotoGallery.js

@@ -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>
     )

ui/src/components/photoGallery/PresentView.js

@@ -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>
             )
           }}

ui/src/components/sidebar/PhotoSidebar.js

@@ -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