Adds comment thumbnails

ui/component/comment/index.js

@@ -1,7 +1,28 @@
 import { connect } from 'react-redux';
+import {
+  doResolveUri,
+  makeSelectClaimIsPending,
+  makeSelectClaimForUri,
+  makeSelectThumbnailForUri,
+  makeSelectIsUriResolving,
+  selectChannelIsBlocked,
+} from 'lbry-redux';
+
 import Comment from './view';
 
+const select = (state, props) => ({
+  pending: props.authorUri && makeSelectClaimIsPending(props.authorUri)(state),
+  claim: props.authorUri && makeSelectClaimForUri(props.authorUri)(state),
+  isResolvingUri: props.authorUri && makeSelectIsUriResolving(props.authorUri)(state),
+  thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
+  channelIsBlocked: props.authorUri && selectChannelIsBlocked(props.authorUri)(state),
+});
+
+const perform = dispatch => ({
+  resolveUri: uri => dispatch(doResolveUri(uri)),
+});
+
 export default connect(
-  null,
-  null
+  select,
+  perform
 )(Comment);

ui/component/comment/view.jsx

@@ -1,33 +1,57 @@
 // @flow
-import React from 'react';
+import React, { useEffect } from 'react';
+import { isEmpty } from 'util/object';
 import relativeDate from 'tiny-relative-date';
 import Button from 'component/button';
 import Expandable from 'component/expandable';
 import MarkdownPreview from 'component/common/markdown-preview';
+import ChannelThumbnail from 'component/channelThumbnail';
 
 type Props = {
   author: string,
   authorUri: string,
   message: string,
   timePosted: number,
+  claim: ?Claim,
+  pending?: boolean,
+  resolveUri: string => void,
+  isResolvingUri: boolean,
+  channelIsBlocked: boolean,
 };
 
 function Comment(props: Props) {
-  const { author, authorUri, timePosted, message } = props;
+  const {
+    author,
+    authorUri,
+    timePosted,
+    message,
+    pending,
+    claim,
+    isResolvingUri,
+    resolveUri,
+    channelIsBlocked,
+  } = props;
+  // to debounce subsequent requests
+  const shouldFetch =
+    claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
+  useEffect(() => {
+    // If author was extracted from the URI, then it must be valid.
+    if (authorUri && author && !isResolvingUri && shouldFetch) {
+      resolveUri(authorUri);
+    }
+  }, [isResolvingUri, shouldFetch, author, authorUri, resolveUri]);
 
   return (
     <li className="comment">
-      <div className="comment__meta">
-        {!author ? (
-          <span className="comment__author">{__('Anonymous')}</span>
-        ) : (
-          <Button
-            className="button--uri-indicator truncated-text comment__author"
-            navigate={authorUri}
-            label={author}
-          />
-        )}
-
+      <div className="comment__author">
+        <div className="comment__author-thumbnail">
+          {authorUri ? <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} /> : <ChannelThumbnail />}
+        </div>
+        <Button
+          className="button--uri-indicator truncated-text comment__author-name"
+          navigate={authorUri}
+          label={author || __('Anonymous')}
+        />
         <time className="comment__time" dateTime={timePosted}>
           {relativeDate(timePosted)}
         </time>

ui/scss/component/_comments.scss

@@ -33,13 +33,29 @@
 }
 
 .comment__author {
+  display: inherit;
+  justify-content: left;
+  vertical-align: center;
+  flex: initial;
+  padding-bottom: inherit;
+}
+
+.comment__author-thumbnail {
+  flex-shrink: 1;
+}
+
+.comment__author-name {
+  margin-bottom: 1rem;
   text-overflow: ellipsis; // This is where the magic happens
   flex-basis: 400px;
   flex-shrink: 1;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-size: medium;
 }
 
 .comment__time {
+  flex: 1;
+  align-self: flex-start;
   flex-basis: 200px;
   text-align: right;
 }