channel creator updates after review

package-lock.json

@@ -9119,6 +9119,11 @@
                 "object-assign": "^4.1.1"
             }
         },
+        "seedrandom": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.3.tgz",
+            "integrity": "sha512-PJLhhxIMjlMJaiIRtqiVW061EZn3cS+waZkbFe7eCa2R3g88HbNdWmw4NTFG1w5unxd0GeNaUUxZJP7gPAzSDQ=="
+        },
         "semver": {
             "version": "5.7.1",
             "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",

package.json

@@ -43,7 +43,8 @@
         "redux-persist-transform-compress": "^4.2.0",
         "redux-persist-transform-filter": "0.0.18",
         "redux-thunk": "^2.3.0",
-        "rn-fetch-blob": "0.10.15"
+        "rn-fetch-blob": "0.10.15",
+        "seedrandom": "3.0.3"
     },
     "devDependencies": {
         "@babel/core": "^7.5.4",

src/component/channelIconItem/view.js

@@ -16,6 +16,12 @@ export default class ChannelIconItem extends React.PureComponent {
     autothumbStyle.autothumbGreen,
     autothumbStyle.autothumbYellow,
     autothumbStyle.autothumbOrange,
+    autothumbStyle.autothumbDeepPurple,
+    autothumbStyle.autothumbAmber,
+    autothumbStyle.autothumbLime,
+    autothumbStyle.autothumbLightGreen,
+    autothumbStyle.autothumbDeepOrange,
+    autothumbStyle.autothumbBrown,
   ];
 
   state = {

src/page/channelCreator/view.js

@@ -27,6 +27,7 @@ import TagSearch from 'component/tagSearch';
 import UriBar from 'component/uriBar';
 import channelCreatorStyle from 'styles/channelCreator';
 import channelIconStyle from 'styles/channelIcon';
+import seedrandom from 'seedrandom';
 
 export default class ChannelCreator extends React.PureComponent {
   state = {
@@ -97,11 +98,13 @@ export default class ChannelCreator extends React.PureComponent {
   }
 
   generateAutoStyles = size => {
+    const { channels = [] } = this.props;
     const autoStyles = [];
-    for (let i = 0; i < size; i++) {
-      autoStyles.push(
-        ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)]
-      );
+    for (let i = 0; i < size && i < channels.length; i++) {
+      // seed generator using the claim_id
+      const rng = seedrandom(channels[i].permanent_url); // is this efficient?
+      const index = Math.floor(rng.quick() * ChannelIconItem.AUTO_THUMB_STYLES.length);
+      autoStyles.push(ChannelIconItem.AUTO_THUMB_STYLES[index]);
     }
     return autoStyles;
   };
@@ -170,13 +173,19 @@ export default class ChannelCreator extends React.PureComponent {
       // should only be one or the other, so just default to cover
       const isCover = this.state.coverImagePickerOpen;
       const fileUrl = `file://${evt.path}`;
+
+      // set the path to local url first, before uploading
+      if (isCover) {
+        this.setState({ coverImageUrl: fileUrl });
+      } else {
+        this.setState({ thumbnailUrl: fileUrl });
+      }
+
       this.setState(
         {
           uploadingImage: true,
           avatarImagePickerOpen: false,
           coverImagePickerOpen: false,
-          coverImageUrl: isCover ? fileUrl : '', // set the path to local url first, before uploading
-          thumbnailUrl: isCover ? '' : fileUrl, // same as above
         },
         () => {
           uploadImageAsset(
@@ -835,7 +844,7 @@ export default class ChannelCreator extends React.PureComponent {
               <View style={channelCreatorStyle.channelInputLayout}>
                 {(this.state.channelNameFocused ||
                   (this.state.newChannelName != null && this.state.newChannelName.trim().length > 0)) && (
-                  <Text style={channelCreatorStyle.textInputTitle}>Channel name</Text>
+                  <Text style={channelCreatorStyle.textInputTitle}>Channel</Text>
                 )}
                 <View>
                   <Text style={channelCreatorStyle.channelAt}>@</Text>
@@ -844,7 +853,7 @@ export default class ChannelCreator extends React.PureComponent {
                     style={channelCreatorStyle.channelNameInput}
                     value={this.state.newChannelName}
                     onChangeText={value => this.handleNewChannelNameChange(value, true)}
-                    placeholder={this.state.channelNameFocused ? '' : 'Channel name'}
+                    placeholder={this.state.channelNameFocused ? '' : 'Channel'}
                     underlineColorAndroid={Colors.NextLbryGreen}
                     onFocus={() => this.setState({ channelNameFocused: true })}
                     onBlur={() => this.setState({ channelNameFocused: false })}

src/page/file/view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Lbry, normalizeURI } from 'lbry-redux';
+import { Lbry, normalizeURI, parseURI } from 'lbry-redux';
 import { Lbryio } from 'lbryinc';
 import {
   ActivityIndicator,
@@ -587,9 +587,11 @@ class FilePage extends React.PureComponent {
     } = this.props;
     const { uri, autoplay } = navigation.state.params;
 
-    console.log(channels);
     const myChannelUris = channels ? channels.map(channel => channel.permanent_url) : [];
     const ownedClaim = myClaimUris.includes(uri) || myChannelUris.includes(uri);
+    const { claimName } = parseURI(uri);
+    const isChannel = claimName && claimName[0] === '@';
+
     let innerContent = null;
     if ((isResolvingUri && !claim) || !claim) {
       return (
@@ -604,7 +606,9 @@ class FilePage extends React.PureComponent {
             <View style={filePageStyle.container}>
               {ownedClaim && (
                 <Text style={filePageStyle.emptyClaimText}>
-                  It looks like you just claimed this address! Your content will appear in a few minutes.
+                  {isChannel
+                    ? 'It looks like you just created this channel. It will appear in a few minutes.'
+                    : 'It looks you just published this content. It will appear in a few minutes.'}
                 </Text>
               )}
               {!ownedClaim && <Text style={filePageStyle.emptyClaimText}>There's nothing at this location.</Text>}
@@ -616,7 +620,7 @@ class FilePage extends React.PureComponent {
     }
 
     if (claim) {
-      if (claim && claim.name.length && claim.name[0] === '@') {
+      if (isChannel) {
         return <ChannelPage uri={uri} navigation={navigation} />;
       }
 

src/styles/autothumb.js

@@ -4,6 +4,9 @@ const autothumbStyle = StyleSheet.create({
   autothumbPurple: {
     backgroundColor: '#9c27b0',
   },
+  autothumbDeepPurple: {
+    backgroundColor: '#5e35b1',
+  },
   autothumbRed: {
     backgroundColor: '#e53935',
   },
@@ -34,6 +37,21 @@ const autothumbStyle = StyleSheet.create({
   autothumbOrange: {
     backgroundColor: '#ffa726',
   },
+  autothumbAmber: {
+    backgroundColor: '#ffb300',
+  },
+  autothumbLime: {
+    backgroundColor: '#c0ca33',
+  },
+  autothumbLightGreen: {
+    backgroundColor: '#7cb342',
+  },
+  autothumbDeepOrange: {
+    backgroundColor: '#f4511e',
+  },
+  autothumbBrown: {
+    backgroundColor: '#6d4c41',
+  },
 });
 
 export default autothumbStyle;