70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
// vim: set ts=2 sw=2 et tw=80:
|
|
|
|
import React, { Component } from "react";
|
|
import { StyledDivCamera } from "./styleComponents";
|
|
import { Grid } from "semantic-ui-react";
|
|
import { RemoteService } from "../../../remote";
|
|
import { endpointURL } from "../../../endpoint";
|
|
import { connect } from "react-redux";
|
|
import VideocamModal from "./VideocamModal";
|
|
|
|
class Videocam extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { selectedVideo: undefined };
|
|
}
|
|
|
|
openModal = () => {
|
|
this.setState((state) => {
|
|
return { selectedVideo: true };
|
|
});
|
|
};
|
|
|
|
closeModal = () => {
|
|
this.setState((state) => {
|
|
return { selectedVideo: undefined };
|
|
});
|
|
};
|
|
|
|
get url() {
|
|
return endpointURL() + this.props.device.path;
|
|
}
|
|
|
|
render() {
|
|
const VideocamView = (
|
|
<div>
|
|
<StyledDivCamera>
|
|
<div onClick={this.openModal}>
|
|
<video autoPlay loop muted width="100%" height="auto">
|
|
<source src={this.url} type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
</StyledDivCamera>
|
|
<Grid columns="equal" padded>
|
|
<Grid.Row textAlign="center">
|
|
<Grid.Column>
|
|
<VideocamModal
|
|
selectedVideo={this.state.selectedVideo}
|
|
closeModal={this.closeModal}
|
|
url={this.url}
|
|
/>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</div>
|
|
);
|
|
|
|
return <div>{VideocamView}</div>;
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
device:
|
|
ownProps.tab === "Devices"
|
|
? state.devices[ownProps.id]
|
|
: state.devices[state.sceneStates[ownProps.id].deviceId],
|
|
state: state.sceneStates[ownProps.id],
|
|
});
|
|
const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam);
|
|
export default VideocamContainer;
|