From 3ab1b82d8dd8d9eaa052a61f8690be5f0a4f6b80 Mon Sep 17 00:00:00 2001 From: catarak Date: Wed, 17 Aug 2016 18:13:17 -0400 Subject: [PATCH] add fullscreen route and page --- client/modules/IDE/actions/project.js | 2 +- client/modules/IDE/components/PreviewFrame.js | 21 ++++-- client/modules/IDE/pages/FullView.js | 69 +++++++++++++++++++ client/routes.js | 2 + client/styles/layout/_fullscreen.scss | 16 +++++ client/styles/main.scss | 1 + server/routes/server.routes.js | 4 ++ 7 files changed, 107 insertions(+), 8 deletions(-) create mode 100644 client/modules/IDE/pages/FullView.js create mode 100644 client/styles/layout/_fullscreen.scss diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index 926b88b9..a491de48 100644 --- a/client/modules/IDE/actions/project.js +++ b/client/modules/IDE/actions/project.js @@ -24,7 +24,7 @@ export function getProject(id) { return (dispatch, getState) => { axios.get(`${ROOT_URL}/projects/${id}`, { withCredentials: true }) .then(response => { - browserHistory.push(`/projects/${id}`); + // browserHistory.push(`/projects/${id}`); dispatch({ type: ActionTypes.SET_PROJECT, project: response.data, diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index edbfeb0e..a5dce7b3 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -60,11 +60,13 @@ class PreviewFrame extends React.Component { this.renderFrameContents(); } - window.addEventListener('message', (msg) => { - if (msg.data.source === 'sketch') { - this.props.dispatchConsoleEvent(msg); - } - }); + if (this.props.dispatchConsoleEvent) { + window.addEventListener('message', (msg) => { + if (msg.data.source === 'sketch') { + this.props.dispatchConsoleEvent(msg); + } + }); + } } componentDidUpdate(prevProps) { @@ -75,6 +77,11 @@ class PreviewFrame extends React.Component { if (this.props.isPlaying && this.props.content !== prevProps.content) { this.renderSketch(); } + + // I apologize for this, it is a hack. + if (this.props.isPlaying && this.props.files[0].id !== prevProps.files[0].id) { + this.renderSketch(); + } } componentWillUnmount() { @@ -175,14 +182,14 @@ class PreviewFrame extends React.Component { PreviewFrame.propTypes = { isPlaying: PropTypes.bool.isRequired, head: PropTypes.object.isRequired, - content: PropTypes.string.isRequired, + content: PropTypes.string, htmlFile: PropTypes.shape({ content: PropTypes.string.isRequired }), jsFiles: PropTypes.array.isRequired, cssFiles: PropTypes.array.isRequired, files: PropTypes.array.isRequired, - dispatchConsoleEvent: PropTypes.func.isRequired, + dispatchConsoleEvent: PropTypes.func, children: PropTypes.element }; diff --git a/client/modules/IDE/pages/FullView.js b/client/modules/IDE/pages/FullView.js new file mode 100644 index 00000000..dbb2f38a --- /dev/null +++ b/client/modules/IDE/pages/FullView.js @@ -0,0 +1,69 @@ +import React, { PropTypes } from 'react'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import PreviewFrame from '../components/PreviewFrame'; +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); + } + + render() { + return ( +
+

+ {this.props.project.name} {this.props.project.owner ? `by ${this.props.project.owner.username}` : ''} +

+
+ + } + isPlaying + /> +
+
+ ); + } +} + +FullView.propTypes = { + params: PropTypes.shape({ + project_id: PropTypes.string + }), + project: PropTypes.shape({ + name: PropTypes.string, + owner: PropTypes.shape({ + username: PropTypes.string + }) + }).isRequired, + htmlFile: PropTypes.object, + jsFiles: PropTypes.array, + cssFiles: PropTypes.array, + getProject: PropTypes.func.isRequired, + files: PropTypes.array +}; + +function mapStateToProps(state) { + return { + user: state.user, + 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); diff --git a/client/routes.js b/client/routes.js index 051de716..45a5afd8 100644 --- a/client/routes.js +++ b/client/routes.js @@ -2,6 +2,7 @@ import { Route, IndexRoute } from 'react-router'; import React from 'react'; import App from './modules/App/App'; import IDEView from './modules/IDE/pages/IDEView'; +import FullView from './modules/IDE/pages/FullView'; import LoginView from './modules/User/pages/LoginView'; import SignupView from './modules/User/pages/SignupView'; // import SketchListView from './modules/Sketch/pages/SketchListView'; @@ -18,6 +19,7 @@ const routes = (store) => + diff --git a/client/styles/layout/_fullscreen.scss b/client/styles/layout/_fullscreen.scss new file mode 100644 index 00000000..8fef50fa --- /dev/null +++ b/client/styles/layout/_fullscreen.scss @@ -0,0 +1,16 @@ +.fullscreen-preview { + display: flex; + width: 100%; + height: 100%; + flex-flow: column; +} + +.fullscreen-preview__title { + width: 100%; +} + +.fullscreen-preview__frame-wrapper { + width: 100%; + flex: 1 0 0%; + position: relative; +} \ No newline at end of file diff --git a/client/styles/main.scss b/client/styles/main.scss index 3b3a79a3..0e429d8d 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -24,3 +24,4 @@ @import 'layout/ide'; @import 'layout/sketch-list'; +@import 'layout/fullscreen'; diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js index afb596ba..f29c6b39 100644 --- a/server/routes/server.routes.js +++ b/server/routes/server.routes.js @@ -17,6 +17,10 @@ router.route('/projects/:project_id').get((req, res) => { res.sendFile(path.resolve(`${__dirname}/../../index.html`)); }); +router.route('/full/:project_id').get((req, res) => { + res.sendFile(path.resolve(`${__dirname}/../../index.html`)); +}); + router.route('/login').get((req, res) => { res.sendFile(path.resolve(`${__dirname}/../../index.html`)); });