onclick to show video for each choice

relates to #9 and #8

Author: Gbaja

client/src/App.js

@@ -6,6 +6,7 @@ import StartTrialCountdown from "./components/Binary/Start_trial_countdown";
 import StartWebcam from "./components/Binary/StartWebcam";
 import BinaryPlus from "./components/Binary/Binary_plus";
 import ChoicesAppear from "./components/Binary/Choices_appear";
+import BinaryReward from "./components/Binary/Binary_reward";
 import StaticForm from "./components/Static/Static_form";
 import StaticTest from "./components/Static/Static_container";
 import Reward from "./components/Static/Reward";
@@ -89,6 +90,13 @@ class App extends Component {
               />
             )}
           />
+          <Route
+            exact
+            path="/binary_trial/:trialId/reward/:letter"
+            render={props => (
+              <BinaryReward displayedAssets={this.displayedAssets} {...props} />
+            )}
+          />
           <Route exact path="/static_form" component={StaticForm} />
           <Route
             exact

client/src/components/Binary/Binary_reward.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import { browserHistory } from "react-router";
+import axios from "axios";
+class BinaryReward extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  videoEnd = () => {
+    const id = this.props.match.params.trialId;
+    this.props.history.push(`/choice_appear/${id}`);
+  };
+
+  render() {
+    const letter = this.props.match.params.letter;
+    const letterChosen = this.props.displayedAssets.filter((data, i) => {
+      if (this.props.displayedAssets[i].letter === letter) {
+        return this.props.displayedAssets[i];
+      }
+    });
+    return (
+      <div>
+        <video
+          width="100%"
+          height="100%"
+          autoPlay
+          onEnded={this.videoEnd}
+          ref={vid => {
+            this.rewardVideo = vid;
+          }}
+        >
+          <source src={letterChosen[0].reward} type="video/mp4" />
+        </video>
+      </div>
+    );
+  }
+}
+
+export default BinaryReward;

client/src/components/Binary/Each_choice.js

@@ -15,31 +15,60 @@ class EachChoice extends Component {
     this.timer = setInterval(() => {
       this.setState({ id: this.state.count, count: this.state.count + 1 });
       console.log("interval count: ", this.state.count);
-    }, 5000);
+    }, 20000);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     console.log(nextProps, nextState);
     if (this.state.count === this.props.trial_choices.length) {
-      console.log("wronggg SHOUDL STOP TIME");
+      console.log("wronggg SHOULD STOP TIME");
       clearInterval(this.timer);
     }
     return true;
   }
-
+  letterChosen = letter =>
+    this.props.displayedAssets.filter((data, i) => {
+      if (this.props.displayedAssets[i].letter === letter) {
+        return this.props.displayedAssets[i];
+      }
+    });
   render() {
-    console.log(this.props.trial_choices.length);
+    const id = this.props.match.params.trialId;
     if (this.props.trial_choices.length === 0) return <h3>Loading...</h3>;
     return (
       <div>
-        {this.props.trial_choices.length > this.state.count ? (
+        {this.props.trial_choices.length >= this.state.count ? (
           <div>
-            <p>{this.props.trial_choices[this.state.id].Choices_left}</p>
-            <p>{this.props.trial_choices[this.state.id].Choices_right}</p>
-            hello
+            <Link
+              to={`/binary_trial/${id}/reward/${
+                this.props.trial_choices[this.state.id].Choices_left
+              }`}
+            >
+              <img
+                src={
+                  this.letterChosen(
+                    this.props.trial_choices[this.state.id].Choices_left
+                  )[0].fractals
+                }
+              />
+            </Link>
+            <span>+</span>
+            <Link
+              to={`/binary_trial/${id}/reward/${
+                this.props.trial_choices[this.state.id].Choices_right
+              }`}
+            >
+              <img
+                src={
+                  this.letterChosen(
+                    this.props.trial_choices[this.state.id].Choices_right
+                  )[0].fractals
+                }
+              />
+            </Link>
           </div>
         ) : (
-          <div> Done! </div>
+          <div>done</div>
         )}
       </div>
     );