From c4218d9f8ba9eb7a574d7973e9ba05054b45a3ed Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Wed, 11 Sep 2019 08:22:56 +0100 Subject: [PATCH] channel creator updates after review --- package-lock.json | 5 +++++ package.json | 3 ++- src/component/channelIconItem/view.js | 6 ++++++ src/page/channelCreator/view.js | 25 +++++++++++++++++-------- src/page/file/view.js | 12 ++++++++---- src/styles/autothumb.js | 18 ++++++++++++++++++ 6 files changed, 56 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index bbeb72d..a4d8aeb 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 55ad680..89c12a7 100644 --- a/package.json +++ b/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", diff --git a/src/component/channelIconItem/view.js b/src/component/channelIconItem/view.js index f1c1ce6..0e39c22 100644 --- a/src/component/channelIconItem/view.js +++ b/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 = { diff --git a/src/page/channelCreator/view.js b/src/page/channelCreator/view.js index fafe6a5..956c613 100644 --- a/src/page/channelCreator/view.js +++ b/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 { {(this.state.channelNameFocused || (this.state.newChannelName != null && this.state.newChannelName.trim().length > 0)) && ( - Channel name + Channel )} @ @@ -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 })} diff --git a/src/page/file/view.js b/src/page/file/view.js index 132e67b..236b452 100644 --- a/src/page/file/view.js +++ b/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 { {ownedClaim && ( - 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.'} )} {!ownedClaim && There's nothing at this location.} @@ -616,7 +620,7 @@ class FilePage extends React.PureComponent { } if (claim) { - if (claim && claim.name.length && claim.name[0] === '@') { + if (isChannel) { return ; } diff --git a/src/styles/autothumb.js b/src/styles/autothumb.js index 86ac835..7853646 100644 --- a/src/styles/autothumb.js +++ b/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;