Mobile Sketch Preview Screen

client/common/icons.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { remSize, prop } from '../theme';
+import { prop } from '../theme';
 import SortArrowUp from '../images/sort-arrow-up.svg';
 import SortArrowDown from '../images/sort-arrow-down.svg';
 import Github from '../images/github.svg';

client/components/mobile/Footer.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+
+const background = prop('Button.default.background');
+const textColor = prop('primaryTextColor');
+
+const Footer = styled.div`
+  position: fixed;
+  width: 100%;
+  background: ${background};
+  color: ${textColor};
+  padding: ${remSize(12)};
+  padding-left: ${remSize(32)};
+  z-index: 1;
+
+  bottom: 0;
+`;
+
+export default Footer;

client/components/mobile/Header.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+
+const background = prop('Button.default.background');
+const textColor = prop('primaryTextColor');
+
+const Header = styled.div`
+  position: fixed;
+  width: 100%;
+  background: ${background};
+  color: ${textColor};
+  padding: ${remSize(12)};
+  padding-left: ${remSize(32)};
+  padding-right: ${remSize(32)};
+  z-index: 1;
+
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+export default Header;

client/components/mobile/IDEWrapper.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
+
+export default styled.div`
+  z-index: 0;
+  margin-top: ${remSize(16)};
+`;

client/components/mobile/IconButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+import { prop, remSize } from '../../theme';
+
+const textColor = prop('primaryTextColor');
+
+const IconButton = styled.button`
+width: 3rem;
+> svg {
+  width: 100%;
+  height: auto;
+  fill: ${textColor};
+  stroke: ${textColor};
+}
+`;
+
+export default IconButton;

client/components/mobile/MobileScreen.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Screen = ({ children }) => (
+  <div className="fullscreen-preview">
+    {children}
+  </div>
+);
+Screen.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default Screen;

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);
@@ -30,46 +48,17 @@ class PreviewFrame extends React.Component {
 
   componentDidMount() {
     window.addEventListener('message', this.handleConsoleEvent);
+
+    const props = {
+      ...this.props,
+      previewIsRefreshing: this.props.previewIsRefreshing,
+      isAccessibleOutputPlaying: this.props.isAccessibleOutputPlaying
+    };
+    if (shouldRenderSketch(props)) this.renderSketch();
   }
 
   componentDidUpdate(prevProps) {
-    // 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
   }
@@ -212,6 +201,12 @@ class PreviewFrame extends React.Component {
     this.addLoopProtect(sketchDoc);
     sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
 
+    if (this.props.forceFullWidth) {
+      const resizeScript = sketchDoc.createElement('style');
+      resizeScript.innerHTML = '.p5Canvas { width: 100% !important; height: auto !important }';
+      sketchDoc.head.appendChild(resizeScript);
+    }
+
     return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
   }
 
@@ -342,6 +337,7 @@ class PreviewFrame extends React.Component {
       if (this.props.endSketchRefresh) {
         this.props.endSketchRefresh();
       }
+      // debugger; // eslint-disable-line
     } else {
       doc.srcdoc = '';
       srcDoc.set(doc, '  ');
@@ -395,11 +391,13 @@ PreviewFrame.propTypes = {
   clearConsole: PropTypes.func.isRequired,
   cmController: PropTypes.shape({
     getContent: PropTypes.func
-  })
+  }),
+  forceFullWidth: PropTypes.bool
 };
 
 PreviewFrame.defaultProps = {
   fullView: false,
+  forceFullWidth: false,
   cmController: {}
 };
 

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -20,80 +21,34 @@ import { getHTMLFile } from '../reducers/files';
 
 // Local Imports
 import Editor from '../components/Editor';
-import { prop, remSize } from '../../../theme';
 import { ExitIcon } from '../../../common/icons';
 
-const background = prop('Button.default.background');
-const textColor = prop('primaryTextColor');
-
-
-const Header = styled.div`
-  position: fixed;
-  width: 100%;
-  background: ${background};
-  color: ${textColor};
-  padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
-  padding-right: ${remSize(32)};
-  z-index: 1;
-
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const Footer = styled.div`
-  position: fixed;
-  width: 100%;
-  background: ${background};
-  color: ${textColor};
-  padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
-  z-index: 1;
-
-  bottom: 0;
-`;
+import PreferencesIcon from '../../../images/preferences.svg';
+import PlayIcon from '../../../images/triangle-arrow-right.svg';
 
-const Content = styled.div`
-  z-index: 0;
-  margin-top: ${remSize(16)};
-`;
-
-const Icon = styled.a`
-  > svg {
-    fill: ${textColor};
-    color: ${textColor};
-    margin-left: ${remSize(16)};
-  }
-`;
+import IconButton from '../../../components/mobile/IconButton';
+import Header from '../../../components/mobile/Header';
+import Screen from '../../../components/mobile/MobileScreen';
+import Footer from '../../../components/mobile/Footer';
+import IDEWrapper from '../../../components/mobile/IDEWrapper';
 
 const IconLinkWrapper = styled(Link)`
   width: 3rem;
   margin-right: 1.25rem;
   margin-left: none;
 `;
 
-
-const Screen = ({ children }) => (
-  <div className="fullscreen-preview">
-    {children}
-  </div>
-);
-Screen.propTypes = {
-  children: PropTypes.node.isRequired
-};
-
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
 
 const IDEViewMobile = (props) => {
   const {
-    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning
+    preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage, selectedFile, updateFileContent, files, closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges, startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console, showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
   } = props;
 
   const [tmController, setTmController] = useState(null);
 
+  const [overlay, setOverlay] = useState(null);
+
   return (
     <Screen>
       <Header>
@@ -104,9 +59,26 @@ const IDEViewMobile = (props) => {
           <h2>{project.name}</h2>
           <h3>{selectedFile.name}</h3>
         </div>
+
+        <div style={{ marginLeft: '2rem' }}>
+          <IconButton onClick={() => setOverlay('preferences')}>
+            <PreferencesIcon focusable="false" aria-hidden="true" />
+          </IconButton>
+          <Link
+            to="/mobile/preview"
+            onClick={() => {
+              // alert('starting sketch');
+              startSketch();
+            }}
+          >
+            <IconButton>
+              <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
+            </IconButton>
+          </Link>
+        </div>
       </Header>
 
-      <Content>
+      <IDEWrapper>
         <Editor
           lintWarning={preferences.lintWarning}
           linewrap={preferences.linewrap}
@@ -141,7 +113,7 @@ const IDEViewMobile = (props) => {
           runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
           provideController={setTmController}
         />
-      </Content>
+      </IDEWrapper>
       <Footer><h2>Bottom Bar</h2></Footer>
     </Screen>
   );
@@ -205,6 +177,8 @@ IDEViewMobile.propTypes = {
     updatedAt: PropTypes.string
   }).isRequired,
 
+  startSketch: PropTypes.func.isRequired,
+
   updateLintMessage: PropTypes.func.isRequired,
 
   clearLintMessage: PropTypes.func.isRequired,