diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index edbd68bc..a3f5abfb 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -22,6 +22,24 @@ import { import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets } from '../../../utils/consoleUtils'; + +// Kept inside class just for linter's +const shouldRenderSketch = (props, prevProps = undefined) => { + const { isPlaying, previewIsRefreshing, fullView } = props; + + // if the user explicitly clicks on the play button + if (isPlaying && previewIsRefreshing) return true; + + if (!prevProps) return false; + + return (props.isPlaying !== prevProps.isPlaying // if sketch starts or stops playing, want to rerender + || props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying // if user switches textoutput preferences + || props.textOutput !== prevProps.textOutput + || props.gridOutput !== prevProps.gridOutput + || props.soundOutput !== prevProps.soundOutput + || (fullView && props.files[0].id !== prevProps.files[0].id)); +}; + class PreviewFrame extends React.Component { constructor(props) { super(props); @@ -29,54 +47,18 @@ class PreviewFrame extends React.Component { } componentDidMount() { - console.log(`componentDidMount: ${this.props.isPlaying}`); window.addEventListener('message', this.handleConsoleEvent); - // TODO: maybe encapsulate this into a function (together with code from componentDidUpdate) - if (this.props.isPlaying && this.props.previewIsRefreshing) { - this.renderSketch(); - } + const props = { + ...this.props, + previewIsRefreshing: this.props.previewIsRefreshing, + isAccessibleOutputPlaying: this.props.isAccessibleOutputPlaying + }; + if (shouldRenderSketch(props)) this.renderSketch(); } componentDidUpdate(prevProps) { - console.log(`componentDidUpdate: ${this.props.isPlaying}`); - // if sketch starts or stops playing, want to rerender - if (this.props.isPlaying !== prevProps.isPlaying) { - this.renderSketch(); - return; - } - - // if the user explicitly clicks on the play button - if (this.props.isPlaying && this.props.previewIsRefreshing) { - this.renderSketch(); - return; - } - - // if user switches textoutput preferences - if (this.props.isAccessibleOutputPlaying !== prevProps.isAccessibleOutputPlaying) { - this.renderSketch(); - return; - } - - if (this.props.textOutput !== prevProps.textOutput) { - this.renderSketch(); - return; - } - - if (this.props.gridOutput !== prevProps.gridOutput) { - this.renderSketch(); - return; - } - - if (this.props.soundOutput !== prevProps.soundOutput) { - this.renderSketch(); - return; - } - - if (this.props.fullView && this.props.files[0].id !== prevProps.files[0].id) { - this.renderSketch(); - } - + if (shouldRenderSketch(this.props, prevProps)) this.renderSketch(); // small bug - if autorefresh is on, and the usr changes files // in the sketch, preview will reload } diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx index fcc2b400..a84cb12b 100644 --- a/client/modules/Mobile/MobileSketchView.jsx +++ b/client/modules/Mobile/MobileSketchView.jsx @@ -1,3 +1,4 @@ +/* eslint-disable */ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; @@ -13,8 +14,6 @@ import * as PreferencesActions from '../IDE/actions/preferences'; import * as ConsoleActions from '../IDE/actions/console'; import * as FilesActions from '../IDE/actions/files'; -import FullView from '../IDE/pages/FullView'; - import { getHTMLFile } from '../IDE/reducers/files'; @@ -24,7 +23,7 @@ import { remSize } from '../../theme'; const Content = styled.div` z-index: 0; - margin-top: ${remSize(48)}; + margin-top: ${remSize(68)}; `; const IconLinkWrapper = styled(Link)` @@ -41,7 +40,7 @@ const MobileSketchView = (props) => { // const files = useSelector(state => state.files); const { - htmlFile, files, selectedFile + htmlFile, files, selectedFile, projectName } = props; // Actions @@ -66,43 +65,37 @@ const MobileSketchView = (props) => {
-

Hello

+

{projectName}


-

Hello

-
- - } + } - content={selectedFile.content} + content={selectedFile.content} - fullView - isPlaying - isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} - previewIsRefreshing={ide.previewIsRefreshing} + isPlaying + isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying} + previewIsRefreshing={ide.previewIsRefreshing} - textOutput={preferences.textOutput} - gridOutput={preferences.gridOutput} - soundOutput={preferences.soundOutput} - autorefresh={preferences.autorefresh} + textOutput={preferences.textOutput} + gridOutput={preferences.gridOutput} + soundOutput={preferences.soundOutput} + autorefresh={preferences.autorefresh} - setTextOutput={setTextOutput} - setGridOutput={setGridOutput} - setSoundOutput={setSoundOutput} - dispatchConsoleEvent={dispatchConsoleEvent} - endSketchRefresh={endSketchRefresh} - stopSketch={stopSketch} - setBlobUrl={setBlobUrl} - expandConsole={expandConsole} - clearConsole={clearConsole} - /> -
+ setTextOutput={setTextOutput} + setGridOutput={setGridOutput} + setSoundOutput={setSoundOutput} + dispatchConsoleEvent={dispatchConsoleEvent} + endSketchRefresh={endSketchRefresh} + stopSketch={stopSketch} + setBlobUrl={setBlobUrl} + expandConsole={expandConsole} + clearConsole={clearConsole} + />
); }; @@ -171,6 +164,8 @@ MobileSketchView.propTypes = { uploadFileModalVisible: PropTypes.bool.isRequired }).isRequired, + projectName: PropTypes.func.isRequired, + setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, setSoundOutput: PropTypes.func.isRequired, @@ -185,7 +180,7 @@ MobileSketchView.propTypes = { function mapStateToProps(state) { return { htmlFile: getHTMLFile(state.files), - project: state.project, + projectName: state.project.name, files: state.files, ide: state.ide, preferences: state.preferences,