✨ render sketch

Author: ghalestrilo

client/modules/IDE/components/PreviewFrame.jsx

@@ -29,10 +29,17 @@ 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();
+    }
   }
 
   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();

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';
@@ -66,7 +67,7 @@ const IDEViewMobile = (props) => {
           <Link
             to="/mobile/preview"
             onClick={() => {
-              alert('starting sketch');
+              // alert('starting sketch');
               startSketch();
             }}
           >

client/modules/Mobile/MobileSketchView.jsx

@@ -13,6 +13,8 @@ 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';
 
 
@@ -71,15 +73,17 @@ const MobileSketchView = (props) => {
       <Content>
         <h1>Hello</h1>
         <section className="preview-frame-holder">
-
           <PreviewFrame
             htmlFile={htmlFile}
             files={files}
-            fullView
+            head={
+              <link type="text/css" rel="stylesheet" href="/preview-styles.css" />
+            }
 
             content={selectedFile.content}
 
-            isPlaying={ide.isPlaying}
+            fullView
+            isPlaying
             isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
             previewIsRefreshing={ide.previewIsRefreshing}