Implement timeout to automatically advance slide.

This commit is contained in:
Bill Thiede 2020-02-23 09:00:22 -08:00
parent 7ec3a11037
commit 01c7582ae3
2 changed files with 14 additions and 6 deletions

View File

@ -53,6 +53,7 @@ class Album extends React.Component {
mediaItems: null, mediaItems: null,
idx: 0, idx: 0,
showUI: props.showUI, showUI: props.showUI,
timeout: 0,
}; };
} }
componentDidMount() { componentDidMount() {
@ -84,7 +85,8 @@ class Album extends React.Component {
//let w = roundup(window.innerWidth*window.devicePixelRatio, IMAGE_CHUNK); //let w = roundup(window.innerWidth*window.devicePixelRatio, IMAGE_CHUNK);
//let h = roundup(window.innerHeight*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) { if (error !== null) {
return <h2>Error: {JSON.stringify(error)}</h2>; return <h2>Error: {JSON.stringify(error)}</h2>;
} else if (mediaItems !== null) { } 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" /> src={`/api/image/${nextImage.id}?w=${w}&h=${h}`} alt="prefetch next" />
</div>; </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)=>{ return <div style={style} onClick={(e)=>{
e.stopPropagation(); e.stopPropagation();
this.setState({showUI: !showUI}) 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 // We can use the `useParams` hook here to access
// the dynamic pieces of the URL. // the dynamic pieces of the URL.
let { albumId } = useParams(); let { albumId } = useParams();
return <Album album={albumId} showUI={showUI} />; return <Album album={albumId} showUI={showUI} sleepTimeSeconds={sleepTimeSeconds} />;
} }
const App = () => { const App = () => {
let {showUI} = CONFIG; let {showUI, sleepTimeSeconds} = CONFIG;
return <Router> return <Router>
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
@ -230,7 +238,7 @@ const App = () => {
</div> </div>
</Route> </Route>
<Route exact path="/:albumId"> <Route exact path="/:albumId">
<AlbumRoute showUI={showUI} /> <AlbumRoute showUI={showUI} sleepTimeSeconds={sleepTimeSeconds} />
</Route> </Route>
</Switch> </Switch>
</Router> </Router>

View File

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