Implement timeout to automatically advance slide.

react-slideshow/src/App.js

@@ -53,6 +53,7 @@ class Album extends React.Component {
       mediaItems: null,
       idx: 0,
       showUI: props.showUI,
+      timeout: 0,
     };
   }
   componentDidMount() {
@@ -84,7 +85,8 @@ class Album extends React.Component {
 
     //let w = roundup(window.innerWidth*window.devicePixelRatio, IMAGE_CHUNK);
     //let h = roundup(window.innerHeight*window.devicePixelRatio, IMAGE_CHUNK);
-    let {idx, error, mediaItems, showUI} = this.state;
+    let {idx, error, mediaItems, showUI, timeout} = this.state;
+    let {sleepTimeSeconds} = this.props;
     if (error !== null) {
       return <h2>Error: {JSON.stringify(error)}</h2>;
     } else if (mediaItems !== null) {
@@ -160,6 +162,12 @@ 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})
@@ -213,15 +221,15 @@ class AlbumIndex extends React.Component {
   }
 }
 
-const AlbumRoute = ({showUI}) => {
+const AlbumRoute = ({sleepTimeSeconds, showUI}) => {
   // We can use the `useParams` hook here to access
   // the dynamic pieces of the URL.
   let { albumId } = useParams();
-  return <Album album={albumId} showUI={showUI} />;
+  return <Album album={albumId} showUI={showUI} sleepTimeSeconds={sleepTimeSeconds} />;
 }
 
 const App = () => {
-  let {showUI} = CONFIG;
+  let {showUI, sleepTimeSeconds} = CONFIG;
   return <Router>
       <Switch>
         <Route exact path="/">
@@ -230,7 +238,7 @@ const App = () => {
           </div>
         </Route>
         <Route exact path="/:albumId">
-          <AlbumRoute showUI={showUI} />
+          <AlbumRoute showUI={showUI} sleepTimeSeconds={sleepTimeSeconds} />
         </Route>
       </Switch>
     </Router>

src/library.rs

@@ -48,7 +48,7 @@ where
     let (w, h) = match (width_hint, height_hint) {
         (Some(w), Some(h)) => {
             let got = decoder.scale(w as u16, h as u16)?;
-            info!("Hinted at {}x{}, got {}x{}", w, h, got.0, got.1);
+            //info!("Hinted at {}x{}, got {}x{}", w, h, got.0, got.1);
             (got.0 as u32, got.1 as u32)
         }
         // TODO(wathiede): handle partial hints by grabbing info and then computing the absent