added preview for sketches

client/modules/IDE/components/SketchList.jsx

@@ -24,6 +24,7 @@ import getConfig from '../../../utils/getConfig';
 
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
+import ExamplePreview from '../../User/components/ExamplePreview';
 
 const ROOT_URL = getConfig('API_URL');
 
@@ -35,7 +36,8 @@ class SketchListRowBase extends React.Component {
     super(props);
     this.state = {
       renameOpen: false,
-      renameValue: props.sketch.name
+      renameValue: props.sketch.name,
+      preview: false
     };
     this.renameInput = React.createRef();
   }
@@ -144,6 +146,15 @@ class SketchListRowBase extends React.Component {
           >
             {this.props.t('SketchList.DropdownAddToCollection')}
           </MenuItem>
+          <MenuItem
+            onClick={() => {
+              this.setState({
+                preview: !this.state.preview
+              });
+            }}
+          >
+            Preview
+          </MenuItem>
 
           {/*
           <MenuItem onClick={this.handleSketchShare}>
@@ -194,6 +205,18 @@ class SketchListRowBase extends React.Component {
           <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
         </tr>
+        {this.state.preview && (
+          <tr key={`${sketch.id}-preview`}>
+            <td colSpan={4}>
+              <ExamplePreview
+                setSketch={() =>
+                  this.setState({ preview: !this.state.preview })
+                }
+                sketch={this.props.sketch}
+              />
+            </td>
+          </tr>
+        )}
       </React.Fragment>
     );
   }

client/modules/User/components/ExamplePreview.jsx

@@ -0,0 +1,74 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import EmbedFrame from '../../Preview/EmbedFrame';
+
+function ExamplePreview({ sketch, setSketch }) {
+  const [hover, setHover] = useState(false);
+  const sketchHeight = useMemo(() => {
+    const jsFile = (sketch?.files || []).find(
+      (file) => file.name === 'sketch.js'
+    );
+    return jsFile?.content?.match(/createCanvas\(\d+, ?(\d+)/)[1];
+  }, [sketch]);
+
+  const { files = [] } = sketch;
+
+  return (
+    <React.Fragment>
+      {files.length > 0 ? (
+        <>
+          <button
+            onClick={() => setSketch()}
+            onMouseOver={() => setHover(true)}
+            onMouseOut={() => setHover(false)}
+            onFocus={() => setHover(true)}
+            onBlur={() => setHover(false)}
+            style={{
+              width: '100%',
+              height: `50px`,
+              cursor: 'pointer',
+              transition: 'background-color 0.3s ease',
+              backgroundColor: hover ? '#ed225d' : 'transparent',
+              fontWeight: 'bold',
+              fontSize: '2rem',
+              color: 'black'
+            }}
+          >
+            X
+          </button>
+          <div
+            style={{
+              position: 'relative',
+              width: '100%',
+              height: `${sketchHeight || 400}px`
+            }}
+          >
+            <EmbedFrame
+              files={files}
+              basePath={window.location.pathname}
+              textOutput={false}
+              gridOutput={false}
+              isPlaying
+            />
+          </div>
+        </>
+      ) : (
+        <div>loading</div>
+      )}
+    </React.Fragment>
+  );
+}
+
+ExamplePreview.propTypes = {
+  sketch: PropTypes.shape({
+    files: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        content: PropTypes.string
+      })
+    )
+  }).isRequired,
+  setSketch: PropTypes.func.isRequired
+};
+
+export default ExamplePreview;