Adds basic Picture-in-picture video playback and useful metadata to drives

Author: jfrux

app/actions/eon_detail_actions.js

@@ -1,20 +1,20 @@
 import * as types from '../constants/eon_detail_action_types';
 
-export function CONNECT() {
-  return {
-    type: types.CONNECT
-  };
-}
-export function CONNECTED() {
-  return {
-    type: types.CONNECTED
-  };
-}
-export function CONNECT_FAILED() {
-  return {
-    type: types.CONNECT_FAILED
-  };
-}
+// export function CONNECT() {
+//   return {
+//     type: types.CONNECT
+//   };
+// }
+// export function CONNECTED() {
+//   return {
+//     type: types.CONNECTED
+//   };
+// }
+// export function CONNECT_FAILED() {
+//   return {
+//     type: types.CONNECT_FAILED
+//   };
+// }
 export function CHANGE_TAB(tab) {
   return {
     type: types.CHANGE_TAB,

app/components/EonDetail/Console/RouteModal.js

@@ -7,11 +7,14 @@ import LoadingOverlay from '../../LoadingOverlay';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Row, Col, Button, ButtonGroup, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
 import { Media } from 'reactstrap';
+import Video from '../../Video';
 const propTypes = {
   open: PropTypes.bool,
   loading: PropTypes.bool,
   route: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
+  git_repo: PropTypes.string,
+  git_commit_short: PropTypes.string
 };
 
 class RouteModal extends React.Component {
@@ -34,7 +37,7 @@ class RouteModal extends React.Component {
     this.props.HIDE_ROUTE();
   }
   render() {
-    const { open, loading, route, className } = this.props;
+    const { open, loading, git_repo,git_commit_short, route, className } = this.props;
     let modalHeader = "Opening...";
     let modalBody = <div></div>;
     let segmentsList;
@@ -62,7 +65,24 @@ class RouteModal extends React.Component {
       <h3>{modalHeader}</h3>
       <Button onClick={(evt) => { this.close(); }} className={"command-close"}><FontAwesomeIcon icon="times"></FontAwesomeIcon></Button>
       <div className={"command-body"}>
-        {segmentsList}
+        <div className={"video-outer"}>
+          <div className={"route-metadata"}>
+            <div>{git_repo}</div>
+            <div>{route.git_branch} {git_commit_short} {route.git_dirty && "modified"}</div>
+            <div>{route.version}</div>
+          </div>
+          <Video />
+        </div>
+        <div className={"cabana-url"}>
+          <FormGroup>
+            <Label for={"cabana-link"}>Sharable Cabana Link</Label>
+            <Input type={"textarea"} value={route.sharable_cabana_url} />
+          </FormGroup>
+          <FormGroup>
+            <Label for={"segments"}>Segments</Label>
+            {segmentsList}
+          </FormGroup>
+        </div>
       </div>
       <ButtonGroup className={"command-button-bar"}>
         <Button onClick={(evt) => { this.close(); }}>Close</Button>
@@ -79,8 +99,17 @@ function mapDispatchToProps(dispatch) {
 
 const mapStateToProps = ({ eonDetail }) => {
   const { activeRouteId, activeRouteLoading, activeRouteError, routes } = eonDetail;
+  let activeRoute;
+
+  if (activeRouteId) {
+    activeRoute = routes[activeRouteId]
+  }
+  const git_repo = activeRoute.git_remote.replace('[email protected]:','').replace('https://github.com/').replace(".git","");
+  const git_commit_short = activeRoute.git_commit.slice(0,7);
   return {
-    route: activeRouteId ? routes[activeRouteId] : null,
+    route: activeRoute,
+    git_repo,
+    git_commit_short,
     loading: activeRouteLoading,
     error: activeRouteError,
     open: (activeRouteId && activeRouteId.length > 0)

app/components/EonDetail/Console/SegmentsTab.js

@@ -37,6 +37,9 @@ class SegmentsTab extends React.Component {
           </div>
           <div className="drive-title">
             <span>{drive.label}</span>
+            <span className={"meta"}>
+              <span>{drive.git_repo}</span><span>{drive.git_branch}</span><span>{drive.version}</span>
+            </span>
           </div>
         </div>
       );