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

This commit is contained in:
Fil Cesana 2020-04-20 16:19:21 +02:00
parent 82d6576324
commit 3443bc8530
2 changed files with 37 additions and 90 deletions

Binary file not shown.

View file

@ -10,26 +10,9 @@
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";
StyledDiv,hAbRNe
} from "./VideocmStyle";
import { Checkbox, Embed, Button, Grid, Responsive, Segment } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
@ -40,18 +23,13 @@ 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;
this.props
@ -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 = (
<StyledDiv>
<div onClick={this.onClickDevice}>
<Image src={this.getIcon()} style={iconStyle} />
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
<h5 style={nameStyle}>Light</h5>
</BottomPanel>
</div>
</StyledDiv>
<div>
<StyledDiv>
<div onClick={this.onClickDevice}>
<video autoPlay loop muted width= "100%" height="auto">
<source src="paranormal-activity.mp4" type='video/mp4' />
</video>
</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>
);