video component is finished and ready for those who want to be tested in the file light.js; tomorrow I will move everything back in Videocam.js (in devices) and with Andrea we will perform the connection with the backend. If you test it, enjoy the video I put in loop ;)

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

@@ -10,44 +10,39 @@
 
 import React, { Component } from "react";
 import {
-  StyledDiv,hAbRNe
+  StyledDiv
 } from "./VideocmStyle";
 import { Checkbox, Embed, Button, Grid, Responsive, Segment } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
+import  VideocamModal from "./VideocamModal";
+
 
 class Light extends Component {
   constructor(props) {
     super(props);
-    this.state = { intensity: this.props.device.intensity, timeout: null };
+    this.state = { selectedVideo: undefined};
-
-    this.iconOn = "/img/lightOn.svg";
-    this.iconOff = "/img/lightOff.svg";
   }
 
-  get turnedOn() {
+  openModal = () => {
-    return this.props.device.on;
+    this.setState((state) => {
+      return {selectedVideo: true}
+
+    });
+  };
+
+  closeModal = () => {
+    this.setState((state) => {
+      return {selectedVideo:undefined}
+    })
   }
 
- 
-  onClickDevice = () => {
-    const on = !this.turnedOn;
-    this.props
-      .saveDevice({ ...this.props.device, on })
-      .catch((err) => console.error("regular light update error", err));
-  };
-
-  getIcon = () => {
-    return this.turnedOn ? this.iconOn : this.iconOff;
-  };
-
-
   render() {
 
     const normalLightView = (
       <div>
           <StyledDiv>
-            <div onClick={this.onClickDevice}>
+            <div onClick={this.openModal}>
             <video autoPlay loop muted  width= "100%" height="auto">
               <source src="paranormal-activity.mp4" type='video/mp4' />
             </video>
@@ -55,27 +50,14 @@ class Light extends Component {
           </StyledDiv>
           <Grid columns="equal" divide padded>
             <Grid.Row  textAlign="center">
-            <Grid.Column width={2} height={0.5}>
-            </Grid.Column>
-              <Grid.Column width={2} height={0.5}>
-                <Checkbox toggle 
-                  padding = '0.5rem'
-                  margin-left = '5rem'
-                  defaultChecked
-                />
-              </Grid.Column>
-              <Grid.Column width={3} height={0.5}>
-              </Grid.Column>
               <Grid.Column>
-                <Button size='mini' color='blue'> 
+                <VideocamModal 
-                  Enlarge 
+                  selectedVideo = {this.state.selectedVideo}
-                </Button>
+                  closeModal = {this.closeModal}
-              </Grid.Column>
+                />
-              <Grid.Column width={4} height={0.5}>
               </Grid.Column>
             </ Grid.Row>
             </Grid>
-
     </div>
     );
 

smart-hut/src/components/dashboard/devices/VideoModalStyle.css..js

@@ -0,0 +1,33 @@
+
+
+
+.ReactModalPortal > div {
+    opacity: 0;
+}
+
+.ReactModalPortal .ReactModal__Overlay {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    transition: opacity 200ms ease-in-out;
+}
+
+.ReactModalPortal .ReactModal__Overlay--after-open {
+    opacity: 1;
+}
+
+
+.ReactModalPortal .ReactModal__Overlay--before-close {
+    opacity: 0;
+}
+
+.modal {
+    color: white;
+    max-width: 30rem;
+    outline: none;
+    text-align: center;
+}
+
+.modal__body {
+    margin: 0 0 0 0;
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import Modal from 'react-modal';
+import { Button } from "semantic-ui-react";
+
+const customStyles = {
+    content: {
+      top: '35%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      width: '60%',
+      transform: 'translate(-40%, -10%)',
+    },
+  };
+
+
+const VideocamModal = (props) => (
+        <Modal
+            isOpen={!!props.selectedVideo}
+            contentLabel="Live Cam"
+            onRequestClose={props.closeModal}  
+            style={customStyles}
+        >
+            {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>
+    );
+
+
+export default VideocamModal;