Live previews of BOS shaders

Author: jmwohl

cfg/dev.js

@@ -38,7 +38,8 @@ config.module.loaders.push({
   loader: 'babel-loader',
   include: [].concat(
     config.additionalPaths,
-    [ path.join(__dirname, '/../src') ]
+    [ path.join(__dirname, '/../src') ],
+    [ path.join(__dirname, '/../node_modules/glslCanvas') ]
   )
 });
 

src/containers/ArtworkDetailContainer.js

@@ -35,12 +35,17 @@ class ArtworkDetailContainer extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('nextProps', nextProps);
     this.setState({
       thumb_url: nextProps.singleArtwork && nextProps.singleArtwork.thumb_url || noThumbImg
     });
   }
 
+  componentDidUpdate() {
+    if (this.canvas && !this.glslCanvas) {
+      this.glslCanvas = new GlslCanvas(this.canvas);
+    }
+  }
+
   _formatDisplayName(format) {
     switch (format) {
         case 'openframe-glslviewer':
@@ -50,6 +55,23 @@ class ArtworkDetailContainer extends Component {
     }
   }
 
+  _getPreviewElement() {
+    const url = this.props.singleArtwork.url;
+    const re = /thebookofshaders\.com/i;
+    const bos = url.match(re);
+    if (bos) {
+      return (<canvas
+        ref={(canvas) => { this.canvas = canvas; }}
+        className="artwork-detail__canvas"
+        data-fragment-url={url}
+        width="1000"
+        height="1000"></canvas>);
+
+    } else {
+      return (<img className="artwork-detail__img" src={this.state.thumb_url} onError={::this._imageError} />);
+    }
+  }
+
   _handlePushClick(e) {
     e.preventDefault();
     let {params, actions, isAuthenticated} = this.props;
@@ -111,7 +133,9 @@ class ArtworkDetailContainer extends Component {
                 <div className="artwork-detail__author">by {singleArtwork.author_name}</div>
               </div>
 
-              <img className="artwork-detail__img" src={this.state.thumb_url} onError={::this._imageError} />
+              {
+                ::this._getPreviewElement(this.state.thumb_url)
+              }
 
               <div className="artwork-detail__info">
 

src/index.js

@@ -21,6 +21,8 @@ import FeatureFlagsContainer from './containers/FeatureFlagsContainer';
 import VerifiedEmailContainer from './containers/VerifiedEmailContainer';
 import ResetPasswordContainer from './containers/ResetPasswordContainer';
 
+import GlslCanvas from '../node_modules/glslCanvas/src/GlslCanvas.js';
+
 require('./images/touch-icon-iphone.png');
 require('./images/touch-icon-ipad.png');
 require('./images/touch-icon-iphone-retina.png');

src/styles/artwork/ArtworkDetail.scss

@@ -41,6 +41,12 @@
     margin: 20px 0;
   }
 
+  &__canvas {
+    width: 100%;
+    margin: 20px 0;
+    border: none;
+  }
+
   &__label {
     font-size: 14px;
     color: #aaa;