Merge branch 'master' of github.com:lbryio/spee.ch into 282-thumbnail-selector

react/components/AssetPreview/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+const { claim: { defaultThumbnail } } = require('../../../config/speechConfig.js');
 
-const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
+const AssetPreview = ({ claimData: { name, claimId, fileExt, contentType, thumbnail } }) => {
   const directSourceLink = `${claimId}/${name}.${fileExt}`;
   const showUrlLink = `/${claimId}/${name}`;
   return (
@@ -12,18 +13,21 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
             case 'image/jpeg':
             case 'image/jpg':
             case 'image/png':
-              return (
-                <img className={'asset-preview'} src={directSourceLink} alt={name} />
-              );
             case 'image/gif':
               return (
-                <img className={'asset-preview'} src={directSourceLink} alt={name} />
+                <img
+                  className={'asset-preview'}
+                  src={directSourceLink}
+                  alt={name}
+                />
               );
             case 'video/mp4':
               return (
-                <video className={'asset-preview'}>
+                <img
-                  <source src={directSourceLink} type={contentType} />
+                  className={'asset-preview'}
-                </video>
+                  src={thumbnail || defaultThumbnail}
+                  alt={name}
+                />
               );
             default:
               return (

react/containers/ChannelClaimsDisplay/view.jsx

@@ -28,10 +28,7 @@ class ChannelClaimsDisplay extends React.Component {
         {(claims.length > 0) ? (
           <div>
             {claims.map((claim, index) => <AssetPreview
-              name={claim.name}
+              claimData={claim}
-              claimId={claim.claimId}
-              fileExt={claim.fileExt}
-              contentType={claim.contentType}
               key={`${claim.name}-${index}`}
             />)}
             <div>