PublishPreview: Add chan icon; fix "anonymous" label

## Issue
Closes 5721: Publish-Preview updates

## Changes
(1) Match the recent "incognito" change that sets the channel to `undefined` via `updatePublishForm`. This change would also cover `null` -- I don't think it's being used to represent something else, so showing "Anonymous" for `null` should be fine.

(2) Added channel icons, so it'll be more obvious to the user if they accidentally selected the wrong channel.

ui/modal/modalPublishPreview/index.js

@@ -5,24 +5,26 @@ import {
   makeSelectPublishFormValue,
   selectPublishFormValues,
   selectIsStillEditing,
+  selectMyChannelClaims,
   SETTINGS,
 } from 'lbry-redux';
 import { selectFfmpegStatus, makeSelectClientSetting } from 'redux/selectors/settings';
 import { doPublishDesktop } from 'redux/actions/publish';
 import { doSetClientSetting } from 'redux/actions/settings';
 
-const select = state => ({
+const select = (state) => ({
   ...selectPublishFormValues(state),
+  myChannels: selectMyChannelClaims(state),
   isVid: makeSelectPublishFormValue('fileVid')(state),
   isStillEditing: selectIsStillEditing(state),
   ffmpegStatus: selectFfmpegStatus(state),
   enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
   publish: (filePath, preview) => dispatch(doPublishDesktop(filePath, preview)),
   closeModal: () => dispatch(doHideModal()),
-  setEnablePublishPreview: value => dispatch(doSetClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW, value)),
+  setEnablePublishPreview: (value) => dispatch(doSetClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW, value)),
 });
 
 export default connect(select, perform)(ModalPublishPreview);

ui/modal/modalPublishPreview/view.jsx

@@ -8,6 +8,9 @@ import Tag from 'component/tag';
 import MarkdownPreview from 'component/common/markdown-preview';
 import { COPYRIGHT, OTHER } from 'constants/licenses';
 import LbcSymbol from 'component/common/lbc-symbol';
+import ChannelThumbnail from 'component/channelThumbnail';
+import * as ICONS from 'constants/icons';
+import Icon from 'component/common/icon';
 
 type Props = {
   filePath: string | WebFile,
@@ -36,6 +39,7 @@ type Props = {
   enablePublishPreview: boolean,
   setEnablePublishPreview: (boolean) => void,
   isStillEditing: boolean,
+  myChannels: ?Array<ChannelClaim>,
 };
 
 class ModalPublishPreview extends React.PureComponent<Props> {
@@ -96,6 +100,7 @@ class ModalPublishPreview extends React.PureComponent<Props> {
       enablePublishPreview,
       setEnablePublishPreview,
       isStillEditing,
+      myChannels,
     } = this.props;
 
     const modalTitle = isStillEditing ? __('Confirm Edit') : __('Confirm Upload');
@@ -137,6 +142,21 @@ class ModalPublishPreview extends React.PureComponent<Props> {
       }
     }
 
+    const channelValue = (channel) => {
+      const channelClaim = myChannels && myChannels.find((x) => x.name === channel);
+      return channel ? (
+        <div className="channel-value">
+          {channelClaim && <ChannelThumbnail uri={channelClaim.permanent_url} />}
+          {channel}
+        </div>
+      ) : (
+        <div className="channel-value">
+          <Icon sectionIcon icon={ICONS.ANONYMOUS} />
+          <i>{__('Anonymous')}</i>
+        </div>
+      );
+    };
+
     return (
       <Modal isOpen contentLabel={modalTitle} type="card" onAborted={closeModal}>
         <Form onSubmit={() => this.onConfirmed()}>
@@ -151,7 +171,7 @@ class ModalPublishPreview extends React.PureComponent<Props> {
                       {isOptimizeAvail && this.createRow(__('Transcode'), optimize ? __('Yes') : __('No'))}
                       {this.createRow(__('Title'), title)}
                       {this.createRow(__('Description'), descriptionValue)}
-                      {this.createRow(__('Channel'), channel)}
+                      {this.createRow(__('Channel'), channelValue(channel))}
                       {this.createRow(__('URL'), uri)}
                       {this.createRow(__('Deposit'), depositValue)}
                       {this.createRow(__('Price'), priceValue)}

ui/scss/component/_table.scss

@@ -226,4 +226,23 @@ th {
     white-space: normal;
     max-width: 70%;
   }
+
+  .channel-value {
+    display: flex;
+    align-items: center;
+
+    .channel-thumbnail {
+      height: 1.3rem;
+      width: 1.3rem;
+      margin-right: var(--spacing-s);
+    }
+
+    .icon__wrapper {
+      padding: 0;
+      height: 1.3rem;
+      width: 1.3rem;
+      margin-right: var(--spacing-s);
+      border-radius: var(--border-radius);
+    }
+  }
 }