More robust timer for autoadvancing image.

react-slideshow/src/App.css

@@ -2,41 +2,14 @@ body, html, #root {
   height: 100%;
 }
 
-.App {
+#ui {
+  background-color: white;
+  bottom: 0;
+  line-height: 3em;
+  position: 'absolute';
+  width: 100%;
+}
+
+#ui .meta {
   text-align: center;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

react-slideshow/src/App.js

@@ -61,10 +61,23 @@ class Album extends React.Component {
     fetch(process.env.PUBLIC_URL + `/api/album/${album}`)
       .then(res => res.json())
       .then(
-        (result) =>  this.setState({mediaItems: result}),
+        (result) => {
+          this.setState({mediaItems: result});
+          let {sleepTimeSeconds} = this.props;
+          this.timerID = setInterval(()=>{
+            let {idx} = this.state;
+            this.setState({idx: idx+1})
+            console.log('timer fired');
+          }, sleepTimeSeconds*1000);
+        },
         (error) => this.setState({error}),
       );
   }
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+  nextPhoto() {
+  }
   render() {
     // TODO(wathiede): fade transition.
     // TODO(wathiede): pair-up portrait orientation images.
@@ -115,6 +128,7 @@ class Album extends React.Component {
       photos = shuffle(photos);
 
       let numImages = photos.length;
+      idx = idx % numImages;
       let nextIdx = (idx+1)%numImages;
       let prevIdx = (numImages+idx-1)%numImages;
       let image = photos[idx];
@@ -145,7 +159,7 @@ class Album extends React.Component {
       };
       let ui;
       if (showUI) {
-        ui = <div>
+        ui = <div id="ui">
           <img
           style={leftPrefetchStyle}
           onClick={(e)=>{
@@ -153,6 +167,7 @@ class Album extends React.Component {
             this.setState({idx: prevIdx})
           }}
           src={`/api/image/${prevImage.id}?w=${w}&h=${h}`} alt="prefetch prev" />
+          <div className="meta">{image.filename}</div>
           <img
           style={rightPrefetchStyle}
           onClick={(e)=>{
@@ -162,12 +177,6 @@ class Album extends React.Component {
           src={`/api/image/${nextImage.id}?w=${w}&h=${h}`} alt="prefetch next" />
         </div>;
       }
-      if (timeout !== 0) {
-        console.log(`clearing timeout ${timeout}`)
-        window.clearTimeout(timeout);
-      }
-      console.log(`setting timeout to ${sleepTimeSeconds} seconds`)
-      window.setTimeout(()=>this.setState({idx: nextIdx}), sleepTimeSeconds*1000);
       return <div style={style} onClick={(e)=>{
         e.stopPropagation();
         this.setState({showUI: !showUI})