video now plays in loop. muted, in a responsive way: still to do: modal, enlarge full screen, communication with the backend - lost quite a lot of time testing both Embed from semantic and the simple video tag, Embed would have been good since it acts as a youtube player, but certain important tags like autoplay, loop etc did not seem to work. Also added the button 'enlarge', toggle now automatically set to on

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

@@ -10,26 +10,9 @@
 
 import React, { Component } from "react";
 import {
-  iconStyle,
+  StyledDiv,hAbRNe
-  StyledDiv,
+} from "./VideocmStyle";
-  BottomPanel,
+import { Checkbox, Embed, Button, Grid, Responsive, Segment } 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";
 
@@ -40,17 +23,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 +41,48 @@ 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>
             <div onClick={this.onClickDevice}>
-          <Image src={this.getIcon()} style={iconStyle} />
+            <video autoPlay loop muted  width= "100%" height="auto">
-          <BottomPanel style={{ backgroundColor: "#ffa41b" }}>
+              <source src="paranormal-activity.mp4" type='video/mp4' />
-            <h5 style={nameStyle}>Light</h5>
+            </video>
-          </BottomPanel>
           </div>
           </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'> 
+                  Enlarge 
+                </Button>
+              </Grid.Column>
+              <Grid.Column width={4} height={0.5}>
+              </Grid.Column>
+            </ Grid.Row>
+            </Grid>
+
+    </div>
     );
 
     return (
       <div>
         {this.props.device.kind === "dimmableLight"
-          ? intensityLightView
+          ? console.log('err')
           : normalLightView}
       </div>
     );