for the rebase, now you can find the code of the videocam under devices/Videocam.js

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

@@ -10,14 +10,29 @@
 
 import React, { Component } from "react";
 import {
-  StyledDiv,hAbRNe
+  iconStyle,
-} from "./VideocmStyle";
+  StyledDiv,
-import { Checkbox, Embed } from "semantic-ui-react";
+  BottomPanel,
-
+  ThumbText,
+} from "./styleComponents";
+import { Image } from "semantic-ui-react";
+import {
+  CircularInput,
+  CircularProgress,
+  CircularThumb,
+} from "react-circular-input";
+import {
+  LightDimmerContainer,
+  LightDimmerStyle,
+  textStyle,
+  nameStyle,
+  KnobProgress,
+  CircularThumbStyle,
+  knobIcon,
+} from "./LightStyle";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 
-
 class Light extends Component {
   constructor(props) {
     super(props);
@@ -25,12 +40,17 @@ class Light extends Component {
 
     this.iconOn = "/img/lightOn.svg";
     this.iconOff = "/img/lightOff.svg";
+
+    this.setIntensity = this.setIntensity.bind(this);
   }
 
   get turnedOn() {
     return this.props.device.on;
   }
 
+  get intensity() {
+    return this.props.device.intensity || 0;
+  }
 
   onClickDevice = () => {
     const on = !this.turnedOn;
@@ -43,36 +63,79 @@ class Light extends Component {
     return this.turnedOn ? this.iconOn : this.iconOff;
   };
 
+  setIntensity(intensity) {
+    intensity *= 100;
+
+    if (this.state.timeout) {
+      clearTimeout(this.state.timeout);
+    }
+
+    this.setState({
+      intensity,
+      timeout: setTimeout(() => {
+        this.saveIntensity();
+        this.setState({
+          intensity: this.state.intensity,
+          timeout: null,
+        });
+      }, 100),
+    });
+  }
+
+  saveIntensity = () => {
+    const intensity = Math.round(this.state.intensity);
+    this.props
+      .saveDevice({ ...this.props.device, intensity })
+      .catch((err) => console.error("intensity light update error", err));
+  };
 
   render() {
+    const intensityLightView = (
+      <div style={LightDimmerContainer}>
+        <CircularInput
+          style={LightDimmerStyle}
+          value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
+          onChange={this.setIntensity}
+          onMouseUp={this.saveIntensity}
+        >
+          <text
+            style={textStyle}
+            x={100}
+            y={120}
+            textAnchor="middle"
+            dy="0.3em"
+            fontWeight="bold"
+          >
+            Intensity light
+          </text>
+          <CircularProgress
+            style={{
+              ...KnobProgress,
+              opacity: this.state.intensity / 100 + 0.3,
+            }}
+          />
+          <CircularThumb style={CircularThumbStyle} />
+          <ThumbText color={"#ffd31d"} />
+        </CircularInput>
+        <Image style={knobIcon} src="/img/intensityLightIcon.svg" />
+      </div>
+    );
 
     const normalLightView = (
-      <div>
+      <StyledDiv>
-          <StyledDiv>
+        <div onClick={this.onClickDevice}>
-            <div onClick={this.onClickDevice}>
+          <Image src={this.getIcon()} style={iconStyle} />
-              <Embed
+          <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
-                autoplay={true}
+            <h5 style={nameStyle}>Light</h5>
-                brandedUI
+          </BottomPanel>
-                color='white'
+        </div>
-                hd={false}                id='D0WnZyxp_Wo'
+      </StyledDiv>
-                placeholder='/images/image-16by9.png'
-                source='youtube'
-                style={{ width: "200rem", height: "0.5rem" }}
-                centered
-            />
-          </div>
-          </StyledDiv>
-        <Checkbox toggle 
-          padding = '0.5rem'
-          margin-left = '5rem'
-        />
-    </div>
     );
 
     return (
       <div>
         {this.props.device.kind === "dimmableLight"
-          ? console.log('err')
+          ? intensityLightView
           : normalLightView}
       </div>
     );

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

@@ -10,47 +10,27 @@
 
 import React, { Component } from "react";
 import {
-  iconStyle,
+  StyledDiv,hAbRNe
-  StyledDiv,
+} from "./VideocmStyle";
-  BottomPanel,
+import { Checkbox, Embed } from "semantic-ui-react";
-  ThumbText,
+
-} from "./styleComponents";
-import { Image } from "semantic-ui-react";
-import {
-  CircularInput,
-  CircularProgress,
-  CircularThumb,
-} from "react-circular-input";
-import {
-  LightDimmerContainer,
-  LightDimmerStyle,
-  textStyle,
-  nameStyle,
-  KnobProgress,
-  CircularThumbStyle,
-  knobIcon,
-} from "./LightStyle";
 import { RemoteService } from "../../../remote";
 import { connect } from "react-redux";
 
-class Videocm extends Component {
+
+class Light extends Component {
   constructor(props) {
     super(props);
     this.state = { intensity: this.props.device.intensity, timeout: null };
 
     this.iconOn = "/img/lightOn.svg";
     this.iconOff = "/img/lightOff.svg";
-
-    this.setIntensity = this.setIntensity.bind(this);
   }
 
   get turnedOn() {
     return this.props.device.on;
   }
 
-  get intensity() {
-    return this.props.device.intensity || 0;
-  }
  
   onClickDevice = () => {
     const on = !this.turnedOn;
@@ -63,79 +43,36 @@ class Videocm extends Component {
     return this.turnedOn ? this.iconOn : this.iconOff;
   };
 
-  setIntensity(intensity) {
-    intensity *= 100;
-
-    if (this.state.timeout) {
-      clearTimeout(this.state.timeout);
-    }
-
-    this.setState({
-      intensity,
-      timeout: setTimeout(() => {
-        this.saveIntensity();
-        this.setState({
-          intensity: this.state.intensity,
-          timeout: null,
-        });
-      }, 100),
-    });
-  }
-
-  saveIntensity = () => {
-    const intensity = Math.round(this.state.intensity);
-    this.props
-      .saveDevice({ ...this.props.device, intensity })
-      .catch((err) => console.error("intensity light update error", err));
-  };
 
   render() {
-    const intensityLightView = (
-      <div style={LightDimmerContainer}>
-        <CircularInput
-          style={LightDimmerStyle}
-          value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
-          onChange={this.setIntensity}
-          onMouseUp={this.saveIntensity}
-        >
-          <text
-            style={textStyle}
-            x={100}
-            y={120}
-            textAnchor="middle"
-            dy="0.3em"
-            fontWeight="bold"
-          >
-            Intensity light
-          </text>
-          <CircularProgress
-            style={{
-              ...KnobProgress,
-              opacity: this.state.intensity / 100 + 0.3,
-            }}
-          />
-          <CircularThumb style={CircularThumbStyle} />
-          <ThumbText color={"#ffd31d"} />
-        </CircularInput>
-        <Image style={knobIcon} src="/img/intensityLightIcon.svg" />
-      </div>
-    );
 
     const normalLightView = (
-      <StyledDiv>
+      <div>
-        <div onClick={this.onClickDevice}>
+          <StyledDiv>
-          <Image src={this.getIcon()} style={iconStyle} />
+            <div onClick={this.onClickDevice}>
-          <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
+              <Embed
-            <h5 style={nameStyle}>Light</h5>
+                autoplay={true}
-          </BottomPanel>
+                brandedUI
-        </div>
+                color='white'
-      </StyledDiv>
+                hd={false}                id='D0WnZyxp_Wo'
+                placeholder='/images/image-16by9.png'
+                source='youtube'
+                style={{ width: "200rem", height: "0.5rem" }}
+                centered
+            />
+          </div>
+          </StyledDiv>
+        <Checkbox toggle 
+          padding = '0.5rem'
+          margin-left = '5rem'
+        />
+    </div>
     );
 
     return (
       <div>
         {this.props.device.kind === "dimmableLight"
-          ? intensityLightView
+          ? console.log('err')
           : normalLightView}
       </div>
     );
@@ -145,5 +82,5 @@ class Videocm extends Component {
 const mapStateToProps = (state, ownProps) => ({
   device: state.devices[ownProps.id],
 });
-const LightContainer = connect(mapStateToProps, RemoteService)(Videocm);
+const LightContainer = connect(mapStateToProps, RemoteService)(Light);
 export default LightContainer;