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:
parent
82d6576324
commit
3443bc8530
2 changed files with 37 additions and 90 deletions
BIN
smart-hut/public/paranormal-activity.mp4
Normal file
BIN
smart-hut/public/paranormal-activity.mp4
Normal file
Binary file not shown.
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue