small fixes

This commit is contained in:
Jacob Salvi 2020-04-25 09:21:48 +02:00
commit 272b0dc330
3 changed files with 36 additions and 36 deletions

View file

@ -4,6 +4,7 @@ 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";
@ -25,13 +26,17 @@ class Videocam extends Component {
});
};
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="paranormal-activity.mp4" type="video/mp4" />
<source src={this.url} type="video/mp4" />
</video>
</div>
</StyledDivCamera>
@ -41,6 +46,7 @@ class Videocam extends Component {
<VideocamModal
selectedVideo={this.state.selectedVideo}
closeModal={this.closeModal}
url={this.url}
/>
</Grid.Column>
</Grid.Row>

View file

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