Merge pull request #1647 from processing/chore/connect-previewframe

[#1590] Connect PreviewFrame in FullView

Author: catarak

client/modules/IDE/components/PreviewFrame.jsx

@@ -359,22 +359,38 @@ PreviewFrame.defaultProps = {
   cmController: {}
 };
 
-const mapStateToProps = state => ({
-  files: state.files,
-  htmlFile: getHTMLFile(state.files),
-  content:
-    (state.files.find(file => file.isSelectedFile) ||
-    state.files.find(file => file.name === 'sketch.js') ||
-    state.files.find(file => file.name !== 'root')).content,
-  isPlaying: state.ide.isPlaying,
-  isAccessibleOutputPlaying: state.ide.isAccessibleOutputPlaying,
-  previewIsRefreshing: state.ide.previewIsRefreshing,
-  textOutput: state.preferences.textOutput,
-  gridOutput: state.preferences.gridOutput,
-  soundOutput: state.preferences.soundOutput,
-  language: state.preferences.language,
-  autorefresh: state.preferences.autorefresh,
-});
+function mapStateToProps(state, ownProps) {
+  if (ownProps.fullView) {
+    return {
+      files: state.files,
+      htmlFile: getHTMLFile(state.files),
+      isPlaying: true,
+      isAccessibleOutputPlaying: false,
+      textOutput: false,
+      gridOutput: false,
+      soundOutput: false,
+      language: state.preferences.language,
+      autorefresh: false,
+      previewIsRefreshing: false
+    };
+  }
+  return {
+    files: state.files,
+    htmlFile: getHTMLFile(state.files),
+    content:
+      (state.files.find(file => file.isSelectedFile) ||
+      state.files.find(file => file.name === 'sketch.js') ||
+      state.files.find(file => file.name !== 'root')).content,
+    isPlaying: state.ide.isPlaying,
+    isAccessibleOutputPlaying: state.ide.isAccessibleOutputPlaying,
+    previewIsRefreshing: state.ide.previewIsRefreshing,
+    textOutput: state.preferences.textOutput,
+    gridOutput: state.preferences.gridOutput,
+    soundOutput: state.preferences.soundOutput,
+    language: state.preferences.language,
+    autorefresh: state.preferences.autorefresh
+  };
+}
 
 
 const mapDispatchToProps = {

client/modules/IDE/pages/FullView.jsx

@@ -5,16 +5,13 @@ 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, this.props.params.username);
   }
 
-  ident = () => {}
-
   render() {
     return (
       <div className="fullscreen-preview">
@@ -27,26 +24,7 @@ class FullView extends React.Component {
         />
         <main 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}
-            clearConsole={this.ident}
           />
         </main>
       </div>
@@ -65,37 +43,12 @@ FullView.propTypes = {
       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,
+  getProject: PropTypes.func.isRequired
 };
 
 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
+    project: state.project
   };
 }