✨ strech preview canvas to full-width on demand

ghalestrilo · ghalestrilo · commit 597cb9baf9c2 · 2020-06-19T17:50:21.000-03:00
diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
@@ -201,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}`;
   }
 
@@ -331,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, '  ');
@@ -384,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: {}
 };
 
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
@@ -53,10 +53,10 @@ const MobileSketchView = (props) => {
 
   const { preferences, ide } = props;
 
-  // useEffect(() => {
+  useEffect(() => {
   //   console.log(params);
   //   getProject(params.project_id, params.username);
-  // }, []);
+  });
 
   return (
     <Screen>
@@ -78,6 +78,7 @@ const MobileSketchView = (props) => {
           content={selectedFile.content}
 
           isPlaying
+          forceFullWidth
           isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
           previewIsRefreshing={ide.previewIsRefreshing}
 
