first version of the videocamera, temporarily under the device light.js, for testing

smart-hut/package.json

@@ -19,6 +19,7 @@
     "react-circular-slider-svg": "^0.1.5",
     "react-device-detect": "^1.11.14",
     "react-dom": "^16.12.0",
+    "react-modal": "2.2.2",
     "react-redux": "^7.2.0",
     "react-round-slider": "^1.0.1",
     "react-router": "^5.1.2",

smart-hut/src/App.js

@@ -11,6 +11,7 @@ import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword";
 import ConfirmRegistration from "./views/ConfirmRegistration";
 import ConfirmResetPassword from "./views/ConfirmResetPassword";
 import Instruction from "./views/Instruction";
+import Videocam from "./views/Videocam";
 import queryString from "query-string";
 import { RemoteService } from "./remote";
 import { connect } from "react-redux";
@@ -66,6 +67,9 @@ class App extends Component {
           <Route path="/conf-reset-pass">
             <ConfirmResetPassword />
           </Route>
+          <Route path="/videocam">
+            <Videocam />
+        </Route>
           <Route component={FourOhFour} />
         </Switch>
       </BrowserRouter>

smart-hut/src/components/VideoTest.js

@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+import DevicePanel from "./dashboard/DevicePanel";
+
+
+export default class VideoTest extends React.Component {
+  render() {
+    return (
+      <div>
+        <DevicePanel />
+      </div>
+    );
+  }
+}

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

@@ -10,29 +10,14 @@
 
 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 Light extends Component {
   constructor(props) {
     super(props);
@@ -40,17 +25,12 @@ 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;
@@ -63,79 +43,36 @@ 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 = (
-      <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>
     );

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

@@ -0,0 +1,149 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+/**
+ * Users can add lights in their rooms.
+ * Lights are devices like bulbs, LED strip lights, lamps.
+ * Lights may support an intensity level (from 0% to 100%).
+ * Lights have an internal state that can be changed and it must
+ * be shown accordingly in the SmartHut views (house view and room views).
+ */
+
+import React, { Component } from "react";
+import {
+  iconStyle,
+  StyledDiv,
+  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 Videocm 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;
+    this.props
+      .saveDevice({ ...this.props.device, on })
+      .catch((err) => console.error("regular light update error", err));
+  };
+
+  getIcon = () => {
+    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 onClick={this.onClickDevice}>
+          <Image src={this.getIcon()} style={iconStyle} />
+          <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
+            <h5 style={nameStyle}>Light</h5>
+          </BottomPanel>
+        </div>
+      </StyledDiv>
+    );
+
+    return (
+      <div>
+        {this.props.device.kind === "dimmableLight"
+          ? intensityLightView
+          : normalLightView}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  device: state.devices[ownProps.id],
+});
+const LightContainer = connect(mapStateToProps, RemoteService)(Videocm);
+export default LightContainer;

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

@@ -0,0 +1,89 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+/**
+ * Users can add lights in their rooms.
+ * Lights are devices like bulbs, LED strip lights, lamps.
+ * Lights may support an intensity level (from 0% to 100%).
+ * Lights have an internal state that can be changed and it must
+ * be shown accordingly in the SmartHut views (house view and room views).
+ */
+
+import React, { Component } from "react";
+import {
+  StyledDiv,hAbRNe
+} from "./VideocmStyle";
+import Modal from "react-modal";
+import { Checkbox, Embed } from "semantic-ui-react";
+
+import { RemoteService } from "../../../remote";
+import { connect } from "react-redux";
+
+
+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";
+  }
+
+  get turnedOn() {
+    return this.props.device.on;
+  }
+
+ 
+  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>
+        <Modal 
+          isOpen={true}
+          contentLable = "Selected Video"
+        >
+          <StyledDiv>
+            <div onClick={this.onClickDevice}>
+              <Embed
+                autoplay={true}
+                brandedUI
+                color='white'
+                hd={false}
+                id='D0WnZyxp_Wo'
+                placeholder='/images/image-16by9.png'
+                source='youtube'
+                style={{ width: "200rem", height: "0.5rem" }}
+                centered
+              />
+            </div>
+          </StyledDiv>
+        </Modal>
+    </div>
+    );
+
+    return (
+      <div>
+        {this.props.device.kind === "dimmableLight"
+          ? console.log('err')
+          : normalLightView}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  device: state.devices[ownProps.id],
+});
+const LightContainer = connect(mapStateToProps, RemoteService)(Light);
+export default LightContainer;

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

@@ -0,0 +1,232 @@
+import styled from "styled-components";
+import { useCircularInputContext } from "react-circular-input";
+import { ValueStyle } from "./DimmerStyle";
+import React from "react";
+
+export const editButtonStyle = {
+  position: "absolute",
+  top: "0",
+  right: "0",
+  backgroundColor: "#505bda",
+  borderRadius: "0 0 0 20px",
+  border: "none",
+  padding: ".4rem 1.2rem",
+  outline: "none",
+  color: "white",
+  fontFamily: "Lato",
+  textTransform: "uppercase",
+};
+
+export const panelStyle = {
+  position: "relative",
+  backgroundColor: "#fafafa",
+  height: "100vh",
+  width: "auto",
+  padding: "0rem 3rem",
+};
+
+export const editModeStyle = {
+  position: "absolute",
+  top: "15%",
+  right: "0",
+  width: "1.5rem",
+  height: "1.5rem",
+  backgroundColor: "black",
+  borderRadius: "100%",
+  zIndex: "1000",
+  cursor: "pointer",
+};
+
+export const editModeStyleLeft = {
+  position: "absolute",
+  top: "15%",
+  left: "0",
+  width: "1.5rem",
+  height: "1.5rem",
+  backgroundColor: "white",
+  borderRadius: "100%",
+  zIndex: "1000",
+  cursor: "pointer",
+};
+
+export const editModeIconStyle = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "0.75rem",
+  height: "0.75rem",
+  borderRadius: "20%",
+  zIndex: "101",
+};
+
+export const iconStyle = {
+  width: "3.5rem",
+  height: "auto",
+  position: "absolute",
+  top: "10%",
+  left: "50%",
+  transform: "translateX(-50%)",
+};
+export const nameStyle = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translateX(-50%)",
+};
+
+export const formStyle = {
+  position: "absolute",
+  zIndex: "1000",
+  width: "80rem",
+  height: "10rem",
+  padding: "1rem",
+  margin: "1rem",
+  borderRadius: "10%",
+  boxShadow: "1px 1px 5px 2px #5d5d5d",
+  backgroundColor: "#3e99ff",
+};
+
+export const addDeviceFormStyle = {
+  maxWidth: "400px",
+  background: "#3e99ff",
+  paddingRight: "5rem",
+};
+
+export const StyledDiv = styled.div`
+  cursor: pointer;
+  background-color: white;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  border: none;
+  position: relative;
+  box-shadow: 3px 2px 10px 5px #ccc;
+  transition: all 0.3s ease-out;
+  text-align: center;
+  :hover {
+    background-color: #f2f2f2;
+  }
+  :active {
+    transform: translate(0.3px, 0.8px);
+    box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
+  }
+`;
+
+export const ButtonDimmerContainer = styled.div`
+  background-color: white;
+  padding: 3rem;
+  width: 10rem;
+  height: 10rem;
+  border-radius: 100%;
+  border: none;
+  position: relative;
+  box-shadow: 3px 2px 10px 5px #ccc;
+  transition: all 0.3s ease-out;
+  text-align: center;
+  display: inline-block;
+  .knob {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 10rem;
+    color: #1a2849;
+  }
+  img {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+`;
+
+export const PlusPanel = styled.div`
+  position: absolute;
+  cursor: pointer;
+  bottom: 0;
+  left: 5rem;
+  background-color: #1a2849;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 0 0 5rem 0;
+  :hover {
+    background-color: #505bda;
+  }
+  :active {
+    transform: translate(0.3px, 0.8px);
+  }
+  span {
+    color: white;
+    position: absolute;
+    top: 40%;
+    left: 45%;
+    font-size: 3rem;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+export const MinusPanel = styled.div`
+  cursor: pointer;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: #1a2849;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 0 0 0 5rem;
+  :hover {
+    background-color: #505bda;
+  }
+  :active {
+    transform: translate(0.3px, 0.8px);
+  }
+  span {
+    color: white;
+    position: absolute;
+    top: 40%;
+    left: 45%;
+    font-size: 3rem;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+export const BottomPanel = styled.div`
+  position: absolute;
+  cursor: pointer;
+  bottom: 0;
+  left: 0rem;
+  width: 20rem;
+  height: 10rem;
+  span {
+    color: white;
+    position: absolute;
+    top: 40%;
+    left: 45%;
+    font-size: 3rem;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+
+export const hAbRNe = styled.div`
+    cursor: pointer;
+    padding: 1rem;
+    border: none;
+    position: relative;
+    box-shadow: 3px 2px 10px 5px #ccc;
+    transition: all 0.3s ease-out;
+    text-align: center;
+  }
+`;
+
+export const ThumbText = (props) => {
+  const { getPointFromValue, value } = useCircularInputContext();
+  const { x, y } = getPointFromValue();
+
+  return (
+    <text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}>
+      {Math.round(value * 100)}
+    </text>
+  );
+};

smart-hut/src/views/Videocam.js

@@ -0,0 +1,13 @@
+import _ from "lodash";
+import React from "react";
+import VideoTest from "../components/VideoTest";
+
+export default class TestHeaderController extends React.Component {
+  render() {
+    return (
+        <div>
+            <VideoTest />;
+        </div>
+    )
+  }
+}

smart-hut/yarn.lock

@@ -4243,6 +4243,11 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
+  integrity sha1-ODXxJ6vwdb/ggtCu1EhAV8eOPIk=
+
 exenv@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
@@ -8518,7 +8523,7 @@ prop-types@15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8736,6 +8741,11 @@ react-device-detect@^1.11.14:
   dependencies:
     ua-parser-js "^0.7.20"
 
+react-dom-factories@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0"
+  integrity sha1-63cFxNs2+1AbOqOP91lhaqD/luA=
+
 react-dom@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
@@ -8766,6 +8776,15 @@ react-is@^16.9.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-modal@2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.2.tgz#4bbf98bc506e61c446c9f57329c7a488ea7d504b"
+  integrity sha512-tdgyEyfbyfzDUj40XtWldAQe7e+yhJDUtVSlsQ9AQCGifzWck6v1XTtIVGViVftOsEA3cBWCZCjF3rq6FPJzMg==
+  dependencies:
+    exenv "1.2.0"
+    prop-types "^15.5.10"
+    react-dom-factories "^1.0.0"
+
 react-popper@^1.3.4:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"