From 95af3374d440550b2ba5618da1b7985bb353aeff Mon Sep 17 00:00:00 2001
From: stephen grider <ste.grider@gmail.com>
Date: Sun, 5 Jul 2015 16:32:43 -0700
Subject: [PATCH] Flux - 31 - Rendering an Image Detail

---
 imgur-client/src/components/image-detail.jsx | 26 +++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/imgur-client/src/components/image-detail.jsx b/imgur-client/src/components/image-detail.jsx
index 0812530..27d9e99 100644
--- a/imgur-client/src/components/image-detail.jsx
+++ b/imgur-client/src/components/image-detail.jsx
@@ -17,9 +17,33 @@ module.exports = React.createClass({
   },
   render: function() {
     return <div>
-      {this.state.image}
+      {this.state.image ? this.renderContent() : null}
     </div>
   },
+  renderContent: function() {
+    return <div>
+      <div className="panel panel-default">
+        <div className="panel-heading">
+          <h4>{this.state.image.title}</h4>
+        </div>
+        <div className="panel-body">
+          {this.renderImage()}
+        </div>
+        <div className="panel-footer">
+          <h5>{this.state.image.description}</h5>
+        </div>
+      </div>
+    </div>
+  },
+  renderImage: function() {
+    if(this.state.image.animated) {
+      return <video preload="auto" autoPlay="autoplay" loop="loop" webkit-playsinline>
+        <source src={this.state.image.mp4} type="video/mp4"></source>
+      </video>
+    } else {
+      return <img src={this.state.image.link} />
+    }
+  },
   onChange: function() {
     this.setState({
       image: ImageStore.find(this.props.params.id)