Merge branch 'dev' into '72-7-users-can-invite-guests'

# Conflicts:
#   smart-hut/src/components/dashboard/devices/Device.js

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

@@ -126,7 +126,10 @@ class Device extends React.Component {
             <Header as="h4">{this.props.roomName}</Header>
           </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

@@ -105,7 +105,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";
@@ -13,6 +13,8 @@ class Videocam extends Component {
   constructor(props) {
     super(props);
     this.state = { selectedVideo: undefined };
+
+    this.setOnOff = this.setOnOff.bind(this);
   }
 
   openModal = () => {
@@ -27,6 +29,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;
   }
@@ -36,7 +55,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>
@@ -52,6 +71,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>
     );