Merge branch 'camera-fix' into 'dev'

Added backend source URL for camera

See merge request sa4-2020/the-sanmarinoes/frontend!92

smart-hut/src/components/dashboard/devices/Videocam.js

@@ -4,6 +4,7 @@ import React, { Component } from "react";
 import { StyledDivCamera } from "./styleComponents";
 import { Grid } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
+import { endpointURL } from "../../../endpoint";
 import { connect } from "react-redux";
 import VideocamModal from "./VideocamModal";
 
@@ -25,13 +26,17 @@ class Videocam extends Component {
     });
   };
 
+  get url() {
+    return endpointURL() + this.props.device.path;
+  }
+
   render() {
     const VideocamView = (
       <div>
         <StyledDivCamera>
           <div onClick={this.openModal}>
             <video autoPlay loop muted width="100%" height="auto">
-              <source src="paranormal-activity.mp4" type="video/mp4" />
+              <source src={this.url} type="video/mp4" />
             </video>
           </div>
         </StyledDivCamera>
@@ -41,6 +46,7 @@ class Videocam extends Component {
               <VideocamModal
                 selectedVideo={this.state.selectedVideo}
                 closeModal={this.closeModal}
+                url={this.url}
               />
             </Grid.Column>
           </Grid.Row>

smart-hut/src/components/dashboard/devices/VideocamModal.js

@@ -1,41 +1,35 @@
-import React from 'react';
-import Modal from 'react-modal';
+import React from "react";
+import Modal from "react-modal";
 import { Button } from "semantic-ui-react";
 
 const ModalStyle = {
-    content: {
-      top: '20%',
-      left: '45%',
-      right: 'auto',
-      bottom: 'auto',
-      marginRight: '-40%',
-      width: '80%',
-      transform: 'translate(-40%, -10%)',
-    },
-  };
-
+  content: {
+    top: "20%",
+    left: "45%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-40%",
+    width: "80%",
+    transform: "translate(-40%, -10%)",
+  },
+};
 
 const VideocamModal = (props) => (
-        <Modal
-            isOpen={!!props.selectedVideo}
-            contentLabel="Live Cam"
-            onRequestClose={props.closeModal}  
-            style={ModalStyle}
-        >
-            {props.selectedVideo && 
-            <video autoPlay loop muted  width= "100%" height="auto">
-                <source src="paranormal-activity.mp4" type='video/mp4' />
-             </video>
-            }
-            <Button 
-                fluid
-                primary
-                onClick={props.closeModal}
-            >
-                Close
-            </Button>
-        </Modal>
-    );
-
+  <Modal
+    isOpen={!!props.selectedVideo}
+    contentLabel="Live Cam"
+    onRequestClose={props.closeModal}
+    style={ModalStyle}
+  >
+    {props.selectedVideo && (
+      <video autoPlay loop muted width="100%" height="auto">
+        <source src={props.url} type="video/mp4" />
+      </video>
+    )}
+    <Button fluid primary onClick={props.closeModal}>
+      Close
+    </Button>
+  </Modal>
+);
 
 export default VideocamModal;