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) => {