smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added backend source URL for camera

Browse source
This commit is contained in:
Claudio Maggioni 2020-04-23 17:18:43 +02:00
parent a097ee447c
commit a15ec55bb4
3 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
smart-hut/public/paranormal-activity.mp4
View file

Binary file not shown.

8
smart-hut/src/components/dashboard/devices/Videocam.js
View file

@ -4,6 +4,7 @@ import React, { Component } from "react";
import { StyledDivCamera } from "./styleComponents"; import { StyledDivCamera } from "./styleComponents";
import { Grid } from "semantic-ui-react"; import { Grid } from "semantic-ui-react";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
import { endpointURL } from "../../../endpoint";
import { connect } from "react-redux"; import { connect } from "react-redux";
import VideocamModal from "./VideocamModal"; import VideocamModal from "./VideocamModal";
@ -25,13 +26,17 @@ class Videocam extends Component {
}); });
}; };
get url() {
return endpointURL() + this.props.device.path;
}
render() { render() {
const VideocamView = ( const VideocamView = (
<div> <div>
<StyledDivCamera> <StyledDivCamera>
<div onClick={this.openModal}> <div onClick={this.openModal}>
<video autoPlay loop muted width="100%" height="auto"> <video autoPlay loop muted width="100%" height="auto">
<source src="paranormal-activity.mp4" type="video/mp4" /> <source src={this.url} type="video/mp4" />
</video> </video>
</div> </div>
</StyledDivCamera> </StyledDivCamera>
@ -41,6 +46,7 @@ class Videocam extends Component {
<VideocamModal <VideocamModal
selectedVideo={this.state.selectedVideo} selectedVideo={this.state.selectedVideo}
closeModal={this.closeModal} closeModal={this.closeModal}
url={this.url}
/> />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>

32
smart-hut/src/components/dashboard/devices/VideocamModal.js
View file

@ -1,20 +1,19 @@
import React from 'react'; import React from "react";
import Modal from 'react-modal'; import Modal from "react-modal";
import { Button } from "semantic-ui-react"; import { Button } from "semantic-ui-react";
const ModalStyle = { const ModalStyle = {
content: { content: {
top: '20%', top: "20%",
left: '45%', left: "45%",
right: 'auto', right: "auto",
bottom: 'auto', bottom: "auto",
marginRight: '-40%', marginRight: "-40%",
width: '80%', width: "80%",
transform: 'translate(-40%, -10%)', transform: "translate(-40%, -10%)",
}, },
}; };
const VideocamModal = (props) => ( const VideocamModal = (props) => (
<Modal <Modal
isOpen={!!props.selectedVideo} isOpen={!!props.selectedVideo}
@ -22,20 +21,15 @@ const VideocamModal = (props) => (
onRequestClose={props.closeModal} onRequestClose={props.closeModal}
style={ModalStyle} style={ModalStyle}
> >
{props.selectedVideo && {props.selectedVideo && (
<video autoPlay loop muted width="100%" height="auto"> <video autoPlay loop muted width="100%" height="auto">
<source src="paranormal-activity.mp4" type='video/mp4' /> <source src={props.url} type="video/mp4" />
</video> </video>
} )}
<Button <Button fluid primary onClick={props.closeModal}>
fluid
primary
onClick={props.closeModal}
>
Close Close
</Button> </Button>
</Modal> </Modal>
); );
export default VideocamModal; export default VideocamModal;