update state if current video has finished

This commit is contained in:
Ismael Padilla 2022-03-12 18:31:20 -03:00
parent aa0c976cdf
commit 823f7f52eb
3 changed files with 30 additions and 7 deletions

View File

@ -32,6 +32,10 @@ const layout = (props) => {
slideClasses.push('hideCursor');
}
const currentEndedPlayingHandler = () => {
props.currentEndedPlaying();
}
return (
<div className="layout" onTouchStart={props.touchStart} onTouchEnd={props.touchEnd}>
@ -78,7 +82,7 @@ const layout = (props) => {
</a>
</div>
{ link ? <Slide url={ link } classes={ slideClasses.concat(['current']) } key={ id }/> : null }
{ link ? <Slide url={ link } classes={ slideClasses.concat(['current']) } key={ id } currentEndedPLaying = { currentEndedPlayingHandler }/> : null }
{ props.prev !== props.post ? <Slide url={ prevLink } classes={ slideClasses.concat(['prev']) } key={ prevId } /> : null }
</div>
);

View File

@ -1,8 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import './Slide.css'
const slide = (props) => {
const Slide = (props) => {
// how many time has the video played?
const [loopCount, setLoopCount] = useState(0);
// get file extension
const extPattern = /\.[0-9a-z]+$/i;
@ -20,17 +22,26 @@ const slide = (props) => {
// const afterDomain = props.url.match(/[.0-9a-zA-Z]+$/)[0];
// console.log('afterdomain', afterDomain);
const endedHandler = () => {
if (props.classes.includes('current')) {
if (loopCount === 1 && props.currentEndedPLaying) {
props.currentEndedPLaying();
}
setLoopCount(loopCount + 1)
}
}
if (fileExt) {
// Imgur videos can be linked by using .mp4 extension instead of .gifv
if ( fileExt === ".gifv" ) {
return (
<video autoPlay muted loop className= { props.classes.join(' ') + ' video' }>
<video autoPlay loop muted className= { props.classes.join(' ') + ' video' } onPlaying= {endedHandler} >
<source src={ props.url.replace(".gifv", ".mp4") } type="video/mp4"/>
</video>
);
} else if ( fileExt === ".mp4" ) {
return (
<video autoPlay muted loop className= { props.classes.join(' ') + ' video' }>
<video autoPlay loop muted className= { props.classes.join(' ') + ' video' } onPlaying= {endedHandler} >
<source src={ props.url.replace('.mp4', '.webm') } type="video/webm"/>
<source src={ props.url } type="video/mp4"/>
</video>
@ -46,4 +57,4 @@ const slide = (props) => {
);
};
export default slide;
export default Slide;

View File

@ -12,6 +12,7 @@ class App extends Component {
posts: [],
currentPost: -1,
prevPost: 0,
currentEndedPlaying: false,
after: '', // to be sent as a part of a request, see reddit api docs
awaitingResponse: false,
showTitle: true, // show image title at top left
@ -217,7 +218,7 @@ class App extends Component {
/**
* Go to next slide.
*/
nextSlideHandler = () => {
nextSlideHandler = (e) => {
if ( this.state.currentPost < this.state.posts.length -1 ) {
this.setState( (prevState, props) => {
return {
@ -257,6 +258,7 @@ class App extends Component {
});
}
}
this.setState({ currentEndedPlaying: false });
console.log("Next");
};
@ -366,6 +368,11 @@ class App extends Component {
}
}
currentEndedPlayingHandler = () => {
console.log("current ended playing")
this.setState({ currentEndedPlaying: true });
}
render() {
return (
<div className="App">
@ -387,6 +394,7 @@ class App extends Component {
nsfwChecked={ this.state.showNSWF }
touchStart={ this.touchStartHandler }
touchEnd={ this.touchEndHandler }
currentEndedPlaying={ this.currentEndedPlayingHandler }
/>
</div>
);