firx videocamera turn on/off

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

@@ -172,7 +172,11 @@ class Device extends React.Component {
               )}
             </Card.Header>
 
-            <Card.Description style={centerComponent}>
+            <Card.Description
+              style={
+                this.props.device.kind !== "curtains" ? centerComponent : null
+              }
+            >
               {this.renderDeviceComponent()}
             </Card.Description>
           </Card.Content>

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

@@ -27,7 +27,6 @@ class Thermostats extends Component {
     console.log(this.state);
     this.setMode = this.setMode.bind(this);
     this.setTargetTemperature = this.setTargetTemperature.bind(this);
-    this.setTargetTemperature = this.setTargetTemperature.bind(this);
   }
 
   setMode(mode) {
@@ -144,7 +143,7 @@ class Thermostats extends Component {
                 ? this.props.device.mode !== "OFF"
                 : this.props.stateOrDevice.on
             }
-            slider
+            toggle
             style={toggle}
             onChange={(e, val) => this.setMode(val.checked)}
           />

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

@@ -2,7 +2,7 @@
 
 import React, { Component } from "react";
 import { StyledDivCamera } from "./styleComponents";
-import { Grid } from "semantic-ui-react";
+import { Grid, Checkbox } from "semantic-ui-react";
 import { RemoteService } from "../../../remote";
 import { endpointURL } from "../../../endpoint";
 import { connect } from "react-redux";
@@ -12,6 +12,8 @@ class Videocam extends Component {
   constructor(props) {
     super(props);
     this.state = { selectedVideo: undefined };
+
+    this.setOnOff = this.setOnOff.bind(this);
   }
 
   openModal = () => {
@@ -26,6 +28,23 @@ class Videocam extends Component {
     });
   };
 
+  setOnOff(onOff) {
+    const turn = onOff;
+    if (this.props.tab === "Devices") {
+      this.props
+        .saveDevice({ ...this.props.device, on: turn })
+        .then((res) =>
+          turn ? this.refs.vidRef.play() : this.refs.vidRef.pause()
+        )
+        .catch((err) => console.error("videocamera update error", err));
+    } else {
+      this.props.updateState(
+        { id: this.props.state.id, on: turn },
+        this.props.state.kind
+      );
+    }
+  }
+
   get url() {
     return endpointURL() + this.props.device.path;
   }
@@ -35,7 +54,7 @@ class Videocam extends Component {
       <div>
         <StyledDivCamera>
           <div onClick={this.openModal}>
-            <video autoPlay loop muted width="100%" height="auto">
+            <video ref="vidRef" autoPlay loop muted width="100%" height="auto">
               <source src={this.url} type="video/mp4" />
             </video>
           </div>
@@ -51,6 +70,15 @@ class Videocam extends Component {
             </Grid.Column>
           </Grid.Row>
         </Grid>
+        <Checkbox
+          checked={
+            this.props.tab === "Devices"
+              ? this.props.device.on
+              : this.props.state.on
+          }
+          toggle
+          onChange={(e, val) => this.setOnOff(val.checked)}
+        />
       </div>
     );