react/components/AssetPreview/index.js

@@ -1,11 +1,48 @@
 import React from 'react';
 
-const AssetPreview = ({ name, claimId, contentType }) => {
-  return (
-    <div>
-      <p>name: {name}, claimId: {claimId}, contentType: {contentType}</p>
-    </div>
-  );
+const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
+  const directSourceLink = `${claimId}/${name}.${fileExt}`;
+  const previewHolderStyle = {
+    clear: 'both',
+    display: 'inline-block',
+    width: '31%',
+    padding: '0px',
+    margin: '1%',
+    backgroundColor: 'black',
+  };
+  const assetStyle = {
+    width: '100%',
+    padding: '0px',
+    margin: '0px',
+  };
+  switch (contentType) {
+    case 'image/jpeg':
+    case 'image/jpg':
+    case 'image/png':
+      return (
+        <div style={previewHolderStyle}>
+          <img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name} />
+        </div>
+      );
+    case 'image/gif':
+      return (
+        <div style={previewHolderStyle}>
+          <img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name} />
+        </div>
+      );
+    case 'video/mp4':
+      return (
+        <div style={previewHolderStyle}>
+          <video style={assetStyle}>
+            <source src={directSourceLink} type={contentType} />
+          </video>
+        </div>
+      );
+    default:
+      return (
+        <p>unsupported file type</p>
+      );
+  }
 };
 
 export default AssetPreview;

react/components/ShowChannel/index.js

@@ -21,19 +21,18 @@ class ShowChannel extends React.Component {
     this.updateChannelData = this.updateChannelData.bind(this);
   }
   componentDidMount () {
-    console.log(this.props);
     this.updateChannelData(1);
   }
   updateChannelData (page) {
-    const that = this;
     const channelName = this.props.channelName;
     const channelClaimId = this.props.channelClaimId || 'none';
     const url = `/api/channel-get-content/${channelName}/${channelClaimId}/${page}`;
+    const that = this;
     return request(url)
       .then(({ success, message, data }) => {
         console.log('get channel data response:', data);
         if (!success) {
-          return this.setState({error: message});
+          return that.setState({error: message});
         }
         that.setState({
           channelName        : data.channelName,
@@ -67,7 +66,7 @@ class ShowChannel extends React.Component {
               <h2>channel name: {this.props.channelName}</h2>
               <p>full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}</p>
               <p>short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}</p>
-              <p># of claims in channel: {this.state.totalResults ? this.state.totalResults : 'loading...' }</p>
+              <p># of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }</p>
             </div>
             <div className="column column--10">
               <div>