update state if current video has finished

src/components/Layout/Layout.js

@@ -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>
   );

src/components/Slide/Slide.js

@@ -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;

src/containers/App.js

@@ -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>
     );