2020-04-22 11:34:10 +00:00
|
|
|
// vim: set ts=2 sw=2 et tw=80:
|
|
|
|
|
|
|
|
import React, { Component } from "react";
|
2020-04-22 18:14:18 +00:00
|
|
|
import { StyledDivCamera } from "./styleComponents";
|
2020-05-03 12:39:44 +00:00
|
|
|
import { Grid, Checkbox } from "semantic-ui-react";
|
2020-04-22 11:34:10 +00:00
|
|
|
import { RemoteService } from "../../../remote";
|
2020-04-23 15:18:43 +00:00
|
|
|
import { endpointURL } from "../../../endpoint";
|
2020-04-22 11:34:10 +00:00
|
|
|
import { connect } from "react-redux";
|
2020-04-22 18:14:18 +00:00
|
|
|
import VideocamModal from "./VideocamModal";
|
2020-05-03 16:09:53 +00:00
|
|
|
import mapStateToProps from "../../../deviceProps";
|
2020-04-22 11:34:10 +00:00
|
|
|
|
2020-04-22 12:25:24 +00:00
|
|
|
class Videocam extends Component {
|
2020-04-22 11:34:10 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-04-22 18:14:18 +00:00
|
|
|
this.state = { selectedVideo: undefined };
|
2020-05-03 12:39:44 +00:00
|
|
|
|
|
|
|
this.setOnOff = this.setOnOff.bind(this);
|
2020-04-22 11:34:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
openModal = () => {
|
|
|
|
this.setState((state) => {
|
2020-04-22 18:14:18 +00:00
|
|
|
return { selectedVideo: true };
|
2020-04-22 11:34:10 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
closeModal = () => {
|
|
|
|
this.setState((state) => {
|
2020-04-22 18:14:18 +00:00
|
|
|
return { selectedVideo: undefined };
|
|
|
|
});
|
|
|
|
};
|
2020-04-22 11:34:10 +00:00
|
|
|
|
2020-05-03 12:39:44 +00:00
|
|
|
setOnOff(onOff) {
|
|
|
|
const turn = onOff;
|
2020-05-05 13:53:07 +00:00
|
|
|
if (this.props.tab === "Devices" || this.props.tab === "Hosts") {
|
2020-05-03 12:39:44 +00:00
|
|
|
this.props
|
|
|
|
.saveDevice({ ...this.props.device, on: turn })
|
|
|
|
.then((res) =>
|
|
|
|
turn ? this.refs.vidRef.play() : this.refs.vidRef.pause()
|
|
|
|
)
|
|
|
|
.catch((err) => console.error("videocamera update error", err));
|
|
|
|
} else {
|
|
|
|
this.props.updateState(
|
2020-05-04 14:09:56 +00:00
|
|
|
{ id: this.props.stateOrDevice.id, on: turn },
|
|
|
|
this.props.stateOrDevice.kind
|
2020-05-03 12:39:44 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-23 15:18:43 +00:00
|
|
|
get url() {
|
|
|
|
return endpointURL() + this.props.device.path;
|
|
|
|
}
|
|
|
|
|
2020-04-22 11:34:10 +00:00
|
|
|
render() {
|
2020-04-22 12:25:24 +00:00
|
|
|
const VideocamView = (
|
2020-04-22 11:34:10 +00:00
|
|
|
<div>
|
2020-04-22 18:14:18 +00:00
|
|
|
<StyledDivCamera>
|
|
|
|
<div onClick={this.openModal}>
|
2020-05-03 12:39:44 +00:00
|
|
|
<video ref="vidRef" autoPlay loop muted width="100%" height="auto">
|
2020-04-23 15:18:43 +00:00
|
|
|
<source src={this.url} type="video/mp4" />
|
2020-04-22 11:34:10 +00:00
|
|
|
</video>
|
|
|
|
</div>
|
2020-04-22 18:14:18 +00:00
|
|
|
</StyledDivCamera>
|
2020-04-26 11:38:54 +00:00
|
|
|
<Grid columns="equal" padded>
|
2020-04-22 18:14:18 +00:00
|
|
|
<Grid.Row textAlign="center">
|
|
|
|
<Grid.Column>
|
|
|
|
<VideocamModal
|
|
|
|
selectedVideo={this.state.selectedVideo}
|
|
|
|
closeModal={this.closeModal}
|
2020-04-23 15:18:43 +00:00
|
|
|
url={this.url}
|
2020-04-22 18:14:18 +00:00
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
2020-05-07 11:13:02 +00:00
|
|
|
<Grid.Row textAlign="center">
|
|
|
|
<Grid.Column>
|
|
|
|
<Checkbox
|
|
|
|
checked={this.props.stateOrDevice.on}
|
|
|
|
toggle
|
|
|
|
onChange={(e, val) => this.setOnOff(val.checked)}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
2020-04-22 18:14:18 +00:00
|
|
|
</Grid>
|
2020-04-22 11:34:10 +00:00
|
|
|
</div>
|
|
|
|
);
|
2020-04-22 18:14:18 +00:00
|
|
|
|
|
|
|
return <div>{VideocamView}</div>;
|
2020-04-22 11:34:10 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-22 12:25:24 +00:00
|
|
|
const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam);
|
|
|
|
export default VideocamContainer;
|