play button and dropdown

Author: mylee1995

package-lock.json

@@ -49,6 +49,7 @@
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",
     "react": "^16.8.6",
+    "react-16-dropdown": "^0.3.1",
     "react-dom": "^16.8.6",
     "react-json-tree": "^0.11.2",
     "redux-devtools-themes": "^1.0.0",

package.json

@@ -0,0 +1,21 @@
+import React, { Component } from 'React'
+import Dropdown from 'react-16-dropdown';
+
+const options = [{
+  label: 'Prestige 🎩',
+  value: 'prestige',
+}, {
+  label: 'Inception 😴',
+  value: 'inception',
+}];
+
+<Dropdown
+  align='left'
+  className='custom-classname'
+  closeOnEscape={true}
+  options={options}
+  triggerLabel='Movies'
+  onClick={val => console.log(val)}
+/>
+
+export default Dropdown;

src/app/components/Dropdown.jsx

@@ -12,6 +12,7 @@ class MainContainer extends Component {
       snapshotIndex: 0,
       currentIndex: null,
       port: null,
+      pause: false,
     };
     this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
     this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
@@ -65,18 +66,22 @@ class MainContainer extends Component {
   playForward() {
     var play = setInterval(() => {
       const { snapshots, snapshotIndex } = this.state;
-      if (snapshotIndex < snapshots.length - 1) {
-        const newIndex = snapshotIndex + 1;
-        this.handleJumpSnapshot(newIndex);
-        this.setState({ snapshotIndex: newIndex });
-      } else clearInterval(play);
+        if (snapshotIndex < snapshots.length - 1 ) {
+          const newIndex = snapshotIndex + 1;
+          this.handleJumpSnapshot(newIndex);
+          this.setState({ snapshotIndex: newIndex});
+        } else {
+          // this.setState({ playing: false });
+          clearInterval(play);
+        }
     }, 1000)
+
     play();
   }
 
   emptySnapshot() {
-    const { port } = this.state;
-    this.setState({ snapshots: [], snapshotIndex: 0 });
+    const { port, snapshots } = this.state;
+    this.setState({ snapshots: [snapshots[0]], snapshotIndex: 0 });
     port.postMessage({ action: 'emptySnap' });
   }
 
@@ -124,7 +129,7 @@ class MainContainer extends Component {
   }
 
   render() {
-    const { snapshots, snapshotIndex } = this.state;
+    const { snapshots, snapshotIndex, playing } = this.state;
     return (
       <div className="main-container">
         <HeadContainer />
@@ -138,6 +143,7 @@ class MainContainer extends Component {
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
           <TravelContainer
+            playing = {playing}
             snapshotsLength={snapshots.length}
             handleChangeSnapshot={this.handleChangeSnapshot}
             handleJumpSnapshot={this.handleJumpSnapshot}

src/app/containers/MainContainer.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import MainSlider from '../components/MainSlider'
+import React, { Component } from 'react';
+import MainSlider from '../components/MainSlider';
 
 const TravelContainer = ({
   playForward,

src/app/containers/TravelContainer.jsx

@@ -21,7 +21,7 @@ chrome.runtime.onConnect.addListener((port) => {
   port.onMessage.addListener((msg) => {
     console.log('background -> contentScript', msg);
     if (msg.action === 'emptySnap') {
-      snapshotArr = [];
+      snapshotArr.splice(1);
     } else {
       // find active tab
       chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {