From 92444b3ea5b0bf1f89669ccb8c1e2333e2f2256d Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Thu, 12 May 2016 15:43:09 -0400
Subject: [PATCH] toggling the play button toggles the sketch

---
 shared/components/Preview/PreviewFrame.jsx | 26 +++++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/shared/components/Preview/PreviewFrame.jsx b/shared/components/Preview/PreviewFrame.jsx
index 7a58f186..3bf8e90c 100644
--- a/shared/components/Preview/PreviewFrame.jsx
+++ b/shared/components/Preview/PreviewFrame.jsx
@@ -4,13 +4,15 @@ import ReactDOM from 'react-dom';
 class PreviewFrame extends React.Component {
 	
 	componentDidMount() {
-		this.renderFrameContents();
+		if (this.props.isPlaying) {
+			this.renderFrameContents();
+		}
 	}
 
 	renderFrameContents() {
 		let doc = ReactDOM.findDOMNode(this).contentDocument;
     if(doc.readyState === 'complete') {
-    	this.renderSketch();
+    	renderSketch();
     } else {
        setTimeout(this.renderFrameContents, 0);
     }
@@ -18,8 +20,7 @@ class PreviewFrame extends React.Component {
 
 	renderSketch() {
 		let doc = ReactDOM.findDOMNode(this).contentDocument;
-		doc.write('');
-		doc.close();
+		this.clearPreview();
 		ReactDOM.render(this.props.head, doc.head);
 		let p5Script = doc.createElement('script');
 		p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
@@ -30,8 +31,21 @@ class PreviewFrame extends React.Component {
 		doc.body.appendChild(sketchScript);
 	}
 
-	componentDidUpdate() {
-		this.renderFrameContents();
+	clearPreview() {
+		let doc = ReactDOM.findDOMNode(this).contentDocument;
+		doc.write('');
+		doc.close();
+	}
+
+	componentDidUpdate(prevProps, prevState) {
+		if (this.props.isPlaying != prevProps.isPlaying) {
+			if (this.props.isPlaying) {
+				this.renderSketch();
+			}
+			else {
+				this.clearPreview();
+			}
+		}
 	}
 
 	componentWillUnmount() {