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,20 +1,19 @@
-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%)',
+    top: "20%",
+    left: "45%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-40%",
+    width: "80%",
+    transform: "translate(-40%, -10%)",
   },
 };
 
-
 const VideocamModal = (props) => (
   <Modal
     isOpen={!!props.selectedVideo}
@@ -22,20 +21,15 @@ const VideocamModal = (props) => (
     onRequestClose={props.closeModal}
     style={ModalStyle}
   >
-            {props.selectedVideo && 
+    {props.selectedVideo && (
       <video autoPlay loop muted width="100%" height="auto">
-                <source src="paranormal-activity.mp4" type='video/mp4' />
+        <source src={props.url} type="video/mp4" />
       </video>
-            }
-            <Button 
-                fluid
-                primary
-                onClick={props.closeModal}
-            >
+    )}
+    <Button fluid primary onClick={props.closeModal}>
       Close
     </Button>
   </Modal>
 );
 
-
 export default VideocamModal;