p5.js-web-editor/client/modules/IDE/pages/FullView.jsx
Basile Pesin 996a1b988a Fixes #692 (#713)
* Got the basis covered, now I need to style all this

* Corrected and upgraded Share window

* Changed the routes again, and set correct design

* Made some of the requested changes

* Removed PreviewFrame errors

* Redesigned Preview Header

* Corrected style of the FullView

* Corrected most of the css mistakes

* Corrected logo size
2018-10-18 14:10:37 -04:00

113 lines
3.4 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
import Helmet from 'react-helmet';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PreviewFrame from '../components/PreviewFrame';
import PreviewNav from '../../../components/PreviewNav';
import { getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
import * as ProjectActions from '../actions/project';
class FullView extends React.Component {
componentDidMount() {
this.props.getProject(this.props.params.project_id);
document.body.className = this.props.theme;
}
componentWillUpdate(nextProps) {
if (nextProps.theme !== this.props.theme) {
document.body.className = nextProps.theme;
}
}
ident = () => {}
render() {
return (
<div className="fullscreen-preview">
<Helmet>
<title>{this.props.project.name}</title>
</Helmet>
<PreviewNav
owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }}
project={{ name: this.props.project.name, id: this.props.params.project_id }}
/>
<div className="preview-frame-holder">
<PreviewFrame
htmlFile={this.props.htmlFile}
jsFiles={this.props.jsFiles}
cssFiles={this.props.cssFiles}
files={this.props.files}
head={
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
}
fullView
isPlaying
isAccessibleOutputPlaying={false}
textOutput={false}
gridOutput={false}
soundOutput={false}
dispatchConsoleEvent={this.ident}
endSketchRefresh={this.ident}
previewIsRefreshing={false}
setBlobUrl={this.ident}
stopSketch={this.ident}
expandConsole={this.ident}
/>
</div>
</div>
);
}
}
FullView.propTypes = {
theme: PropTypes.string.isRequired,
params: PropTypes.shape({
project_id: PropTypes.string
}).isRequired,
project: PropTypes.shape({
name: PropTypes.string,
owner: PropTypes.shape({
username: PropTypes.string
})
}).isRequired,
htmlFile: PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
}).isRequired,
jsFiles: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
})).isRequired,
cssFiles: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
})).isRequired,
getProject: PropTypes.func.isRequired,
files: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
})).isRequired,
};
function mapStateToProps(state) {
return {
user: state.user,
theme: state.preferences.theme,
htmlFile: getHTMLFile(state.files),
jsFiles: getJSFiles(state.files),
cssFiles: getCSSFiles(state.files),
project: state.project,
files: state.files
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ProjectActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(FullView);