Implement timeout to automatically advance slide.
This commit is contained in:
parent
7ec3a11037
commit
01c7582ae3
18
react-slideshow/src/App.js
vendored
18
react-slideshow/src/App.js
vendored
@ -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>
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user