Set TimeOut function to react
I have the following list of objects:
mediaList[
{id:1, url:"www.example.com/image1", adType:"image/jpeg"},
{id:2, url:"www.example.com/image2", adType:"image/jpg"},
{id:3, url:"www.example.com/video1", adType: "video/mp4"}
]
I need to create a slideshow with custom duration (1, 5, 10). As long as I can create a list of media frommediaList
renderSlideshow(ad){
let adType =ad.adType;
if(type.includes("image")){
return(
<div className="imagePreview">
<img src={ad.url} />
</div>
);
}else if (adType.includes("video")){
return(
<video className="videoPreview" controls>
<source src={ad.url} type={adType}/>
Your browser does not support the video tag.
</video>
)
}
}
render(){
return(
<div>
{this.props.mediaList.map(this.renderSlideshow.bind(this))}
</div>
)
}
What I want to do is generate media one at a time with configurable duration for autoplay.
I know that I need to use some form of setTimeout function, like this example:
setTimeout(function(){
this.setState({submitted:false});
}.bind(this),5000); // wait 5 seconds, then reset to false
I just don't know how to implement it for this scenario. (I believe I will need to use css for the fade transitions, but I just don't understand how to create the transition in the first place)
source to share
If you want to change the media every 5 seconds, you will need to update the state to reprocess your components. You can also use setInterval
instead setTimeout
. setTimeout
will run only once, setInterval
will run every X milliseconds. This is how it looks:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { activeMediaIndex: 0 };
}
componentDidMount() {
setInterval(this.changeActiveMedia.bind(this), 5000);
}
changeActiveMedia() {
const mediaListLength = this.props.medias.length;
let nextMediaIndex = this.state.activeMediaIndex + 1;
if(nextMediaIndex >= mediaListLength) {
nextMediaIndex = 0;
}
this.setState({ activeMediaIndex:nextMediaIndex });
}
renderSlideshow(){
const ad = this.props.medias[this.state.activeMediaIndex];
let adType = ad.adType;
if(type.includes("image")){
return(
<div className="imagePreview">
<img src={ad.url} />
</div>
);
}else if (adType.includes("video")){
return(
<video className="videoPreview" controls>
<source src={ad.url} type={adType}/>
Your browser does not support the video tag.
</video>
)
}
}
render(){
return(
<div>
{this.renderSlideshow()}
</div>
)
}
}
Basically what the code does is that every 5 seconds the activeMediaIndex action will change to the next one. By updating the state, you invoke a re-render. When rendering media, just draw one media (you can also render the previous and next like a classic slideshow). Thus, every 5 seconds you will create a new medium.
source to share