miscellaneous fixes. enable thumbnail selection on publish page.

src/component/channelSelector/view.js

@@ -27,7 +27,7 @@ export default class ChannelSelector extends React.PureComponent {
 
   componentDidMount() {
     const { channels = [], channelName, fetchChannelListMine, fetchingChannels } = this.props;
-    if (!channels.length && !fetchingChannels) {
+    if ((!channels || channels.length === 0) && !fetchingChannels) {
       fetchChannelListMine();
     }
     this.setState({ currentSelectedValue: channelName });
@@ -37,7 +37,7 @@ export default class ChannelSelector extends React.PureComponent {
     const { channels: prevChannels = [], channelName } = this.props;
     const { channels = [] } = nextProps;
 
-    if (channels.length !== prevChannels.length && channelName !== this.state.currentSelectedValue) {
+    if (channels && channels.length !== prevChannels.length && channelName !== this.state.currentSelectedValue) {
       this.setState({ currentSelectedValue: channelName });
     }
   }
@@ -182,7 +182,9 @@ export default class ChannelSelector extends React.PureComponent {
   render() {
     const channel = this.state.addingChannel ? 'new' : this.props.channel;
     const { enabled, fetchingChannels, channels = [] } = this.props;
-    const pickerItems = [Constants.ITEM_ANONYMOUS, Constants.ITEM_CREATE_A_CHANNEL].concat(channels.map(ch => ch.name));
+    const pickerItems = [Constants.ITEM_ANONYMOUS, Constants.ITEM_CREATE_A_CHANNEL].concat(
+      channels ? channels.map(ch => ch.name) : []
+    );
 
     const {
       newChannelName,

src/component/rewardCard/view.js

@@ -59,7 +59,8 @@ class RewardCard extends React.PureComponent<Props> {
   getDisplayAmount = () => {
     const { reward } = this.props;
     if (reward) {
-      if (reward.reward_range && reward.reward_range.includes('-')) {
+      const claimed = !!reward.transaction_id;
+      if (!claimed && reward.reward_range && reward.reward_range.includes('-')) {
         return reward.reward_range.split('-')[0] + '+'; // ex: 5+
       } else if (reward.reward_amount > 0) {
         return reward.reward_amount;

src/page/channelCreator/view.js

@@ -240,7 +240,7 @@ export default class ChannelCreator extends React.PureComponent {
   componentDidUpdate() {
     const { channels = [] } = this.props;
     const { editChannelUrl } = this.state;
-    if (channels.length > 0) {
+    if (channels && channels.length > 0) {
       if (this.state.autoStyles.length !== channels.length) {
         this.setState({
           autoStyles: this.generateAutoStyles(channels.length),
@@ -825,7 +825,7 @@ export default class ChannelCreator extends React.PureComponent {
                 </TouchableOpacity>
               );
             }}
-            data={channels.filter(channel => !abandoningClaimIds.includes(channel.claim_id))}
+            data={channels ? channels.filter(channel => !abandoningClaimIds.includes(channel.claim_id)) : []}
             keyExtractor={(item, index) => item.claim_id}
           />
         )}

src/page/publish/index.js

@@ -4,7 +4,6 @@ import {
   doResolveUri,
   doToast,
   doUpdatePublishForm,
-  doUploadThumbnail,
   selectBalance,
   selectPublishFormValues,
 } from 'lbry-redux';
@@ -28,7 +27,6 @@ const perform = dispatch => ({
   clearPublishFormState: () => dispatch(doClearPublishFormState()),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
   updatePublishFormState: data => dispatch(doUpdatePublishFormState(data)),
-  uploadThumbnail: (filePath, fsAdapter) => dispatch(doUploadThumbnail(filePath, null, fsAdapter)),
   publish: (success, fail) => dispatch(doPublish(success, fail)),
   resolveUri: uri => dispatch(doResolveUri(uri)),
   pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),

src/page/publish/view.js

@@ -43,7 +43,7 @@ import Tag from 'component/tag';
 import TagSearch from 'component/tagSearch';
 import UriBar from 'component/uriBar';
 import publishStyle from 'styles/publish';
-import { __, navigateToUri } from 'utils/helper';
+import { __, navigateToUri, uploadImageAsset } from 'utils/helper';
 
 const languages = {
   en: 'English',
@@ -129,6 +129,8 @@ class PublishPage extends React.PureComponent {
     uploadedThumbnailUri: null,
     vanityUrlSet: false,
 
+    thumbnailImagePickerOpen: false,
+
     // other
     publishStarted: false,
   };
@@ -407,18 +409,6 @@ class PublishPage extends React.PureComponent {
       this.onComponentFocused();
     }
 
-    if (publishFormValues) {
-      if (publishFormValues.thumbnail && !this.state.uploadedThumbnailUri) {
-        const { thumbnail } = publishFormValues;
-        updatePublishFormState({ currentThumbnailUri: thumbnail, uploadedThumbnailUri: thumbnail });
-        this.setState({
-          currentThumbnailUri: thumbnail,
-          uploadedThumbnailUri: thumbnail,
-          uploadThumbnailStarted: false,
-        });
-      }
-    }
-
     if (
       this.state.currentPhase === Constants.PHASE_DETAILS &&
       prevDrawerStack[prevDrawerStack.length - 1].route === Constants.DRAWER_ROUTE_PUBLISH_FORM &&
@@ -490,6 +480,8 @@ class PublishPage extends React.PureComponent {
         selectedChannel: null,
         uploadedThumbnailUri: null,
 
+        thumbnailImagePickerOpen: false,
+
         vanityUrlSet: false,
       },
       () => {
@@ -526,19 +518,59 @@ class PublishPage extends React.PureComponent {
     );
   };
 
-  onFilePicked = evt => {
-    this.setState({ documentPickerOpen: false }, () => {
-      const currentMedia = {
-        id: -1,
-        filePath: `file://${evt.path}`,
-        duration: 0,
-      };
-      this.setCurrentMedia(currentMedia);
+  handleThumbnailUploadSuccess = ({ url }) => {
+    const { updatePublishFormState } = this.props;
+
+    this.setState({
+      uploadThumbnailStarted: false,
+      currentThumbnailUri: url,
+      uploadedThumbnailUri: url,
     });
+    updatePublishFormState({ currentThumbnailUri: url, uploadedThumbnailUri: url });
+  };
+
+  handleThumbnailUploadFailure = err => {
+    const { notify } = this.props;
+    this.setState({ uploadThumbnailStarted: false });
+    notify({ message: 'The thumbnail could not be uploaded. Please try again.' });
+  };
+
+  onFilePicked = evt => {
+    const { notify } = this.props;
+    if (evt.path && evt.path.length > 0) {
+      const fileUrl = `file://${evt.path}`;
+
+      if (this.state.documentPickerOpen) {
+        this.setState({ documentPickerOpen: false, thumbnailImagePickerOpen: false }, () => {
+          const currentMedia = {
+            id: -1,
+            filePath: fileUrl,
+            duration: 0,
+          };
+          this.setCurrentMedia(currentMedia);
+        });
+      } else if (this.state.thumbnailImagePickerOpen) {
+        this.setState(
+          {
+            documentPickerOpen: false,
+            thumbnailImagePickerOpen: false,
+            uploadThumbnailStarted: true,
+            currentThumbnailUri: fileUrl,
+          },
+          () => {
+            // upload a new thumbnail
+            uploadImageAsset(fileUrl, this.handleThumbnailUploadSuccess, this.handleThumbnailUploadFailure);
+          }
+        );
+      }
+    } else {
+      // could not determine the file path
+      notify({ message: 'The path could not be determined. Please try a different file.' });
+    }
   };
 
   onPickerCanceled = () => {
-    this.setState({ documentPickerOpen: false });
+    this.setState({ documentPickerOpen: false, thumbnailImagePickerOpen: false });
   };
 
   handleCloseCameraPressed = () => {
@@ -701,7 +733,7 @@ class PublishPage extends React.PureComponent {
       return;
     }
 
-    const { notify, uploadThumbnail } = this.props;
+    const { notify } = this.props;
     const { thumbnailPath } = this.state;
 
     this.setState({ updatingThumbnailUri: true });
@@ -716,7 +748,13 @@ class PublishPage extends React.PureComponent {
 
         // upload the thumbnail
         if (!this.state.uploadedThumbnailUri) {
-          this.setState({ uploadThumbnailStarted: true }, () => uploadThumbnail(this.getFilePathFromUri(uri), RNFS));
+          this.setState({ uploadThumbnailStarted: true }, () =>
+            uploadImageAsset(
+              this.getFilePathFromUri(uri),
+              this.handleThumbnailUploadSuccess,
+              this.handleThumbnailUploadFailure
+            )
+          );
         }
       } else if (mediaType === 'image' || mediaType === 'video') {
         const create =
@@ -727,7 +765,9 @@ class PublishPage extends React.PureComponent {
           .then(path => {
             this.setState({ currentThumbnailUri: `file://${path}`, updatingThumbnailUri: false });
             if (!this.state.uploadedThumbnailUri) {
-              this.setState({ uploadThumbnailStarted: true }, () => uploadThumbnail(path, RNFS));
+              this.setState({ uploadThumbnailStarted: true }, () =>
+                uploadImageAsset(path, this.handleThumbnailUploadSuccess, this.handleThumbnailUploadFailure)
+              );
             }
           })
           .catch(err => {
@@ -801,6 +841,25 @@ class PublishPage extends React.PureComponent {
     this.setState({ otherLicenseDescription });
   };
 
+  handleThumbnailPressed = () => {
+    const { notify } = this.props;
+    if (this.state.thumbnailImagePickerOpen || this.state.uploadThumbnailStarted) {
+      if (this.state.uploadThumbnailStarted) {
+        notify({ message: 'A thumbnail is already being uploaded. Please wait for the upload to finish.' });
+      }
+      return;
+    }
+
+    this.setState(
+      {
+        thumbnailImagePickerOpen: true,
+      },
+      () => {
+        NativeModules.UtilityModule.openDocumentPicker('image/*');
+      }
+    );
+  };
+
   render() {
     const { balance, navigation, notify, publishFormValues } = this.props;
     const {
@@ -895,22 +954,24 @@ class PublishPage extends React.PureComponent {
       }
       content = (
         <ScrollView style={publishStyle.publishDetails}>
-          {currentThumbnailUri && currentThumbnailUri.trim().length > 0 && (
-            <View style={publishStyle.mainThumbnailContainer}>
-              <FastImage
-                style={publishStyle.mainThumbnail}
-                resizeMode={FastImage.resizeMode.contain}
-                source={{ uri: currentThumbnailUri }}
-              />
+          <TouchableOpacity style={publishStyle.mainThumbnailContainer} onPress={this.handleThumbnailPressed}>
+            <FastImage
+              style={publishStyle.mainThumbnail}
+              resizeMode={FastImage.resizeMode.contain}
+              source={{ uri: currentThumbnailUri }}
+            />
 
-              {this.state.uploadThumbnailStarted && !this.state.uploadedThumbnailUri && (
-                <View style={publishStyle.thumbnailUploadContainer}>
-                  <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
-                  <Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
-                </View>
-              )}
+            <View style={publishStyle.thumbnailEditOverlay}>
+              <Icon name={'edit'} style={publishStyle.editIcon} />
             </View>
-          )}
+
+            {this.state.uploadThumbnailStarted && (
+              <View style={publishStyle.thumbnailUploadContainer}>
+                <ActivityIndicator size={'small'} color={Colors.NextLbryGreen} />
+                <Text style={publishStyle.thumbnailUploadText}>Uploading thumbnail...</Text>
+              </View>
+            )}
+          </TouchableOpacity>
           {!this.state.canPublish && <PublishRewardsDriver navigation={navigation} />}
 
           <View style={publishStyle.card}>

src/styles/publish.js

@@ -1,6 +1,9 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import Colors from './colors';
 
+const screenDimension = Dimensions.get('window');
+const screenWidth = screenDimension.width;
+
 const publishStyle = StyleSheet.create({
   container: {
     flex: 1,
@@ -443,6 +446,21 @@ const publishStyle = StyleSheet.create({
     backgroundColor: Colors.LbryGreen,
     marginTop: 16,
   },
+  thumbnailEditOverlay: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 24,
+    position: 'absolute',
+    padding: 8,
+    left: screenWidth / 2 - 32 / 2,
+    bottom: 8,
+    backgroundColor: '#00000077',
+  },
+  editIcon: {
+    color: Colors.White,
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 12,
+  },
 });
 
 export default publishStyle;