app/package-lock.json

@@ -5553,8 +5553,8 @@
             }
         },
         "lbry-redux": {
-            "version": "github:lbryio/lbry-redux#03998a2acf1a9e6c1b0818821612d137b31ebea3",
+            "version": "github:lbryio/lbry-redux#71586660b61c5e98c9f183e06d9c881e33a38e5e",
-            "from": "github:lbryio/lbry-redux#03998a2acf1a9e6c1b0818821612d137b31ebea3",
+            "from": "github:lbryio/lbry-redux#publishing",
             "requires": {
                 "proxy-polyfill": "0.1.6",
                 "reselect": "^3.0.0",
@@ -7617,6 +7617,14 @@
                 }
             }
         },
+        "react-native-camera": {
+            "version": "2.11.0",
+            "resolved": "https://registry.npmjs.org/react-native-camera/-/react-native-camera-2.11.0.tgz",
+            "integrity": "sha512-ay8te4nvL5mGzRjb2QMTOyJX+JfaIW/9oFjFVIkXOB9DzFipfeVTPMdwNx9GMpdmQ0muSXkuF16pa7K/1QLHlQ==",
+            "requires": {
+                "prop-types": "^15.6.2"
+            }
+        },
         "react-native-country-picker-modal": {
             "version": "0.6.2",
             "resolved": "https://registry.npmjs.org/react-native-country-picker-modal/-/react-native-country-picker-modal-0.6.2.tgz",
@@ -7666,6 +7674,11 @@
                 }
             }
         },
+        "react-native-document-picker": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-2.3.0.tgz",
+            "integrity": "sha512-bHMyAOzFl+II0ZdfzobKsZKvTErmXfmQGalpxpGbeN8+/uhfhUcdp4WuIMecZhFyX6rbj3h3XXLdA12hVlGgmw=="
+        },
         "react-native-exception-handler": {
             "version": "2.9.0",
             "resolved": "https://registry.npmjs.org/react-native-exception-handler/-/react-native-exception-handler-2.9.0.tgz",

app/package.json

@@ -10,7 +10,7 @@
     "dependencies": {
         "base-64": "^0.1.0",
         "@expo/vector-icons": "^8.1.0",
-        "lbry-redux": "lbryio/lbry-redux#03998a2acf1a9e6c1b0818821612d137b31ebea3",
+        "lbry-redux": "lbryio/lbry-redux#publishing",
         "lbryinc": "lbryio/lbryinc",
         "lodash": ">=4.17.11",
         "merge": ">=1.2.1",
@@ -18,7 +18,9 @@
         "react": "16.8.6",
         "react-native": "0.59.3",
         "@react-native-community/async-storage": "^1.2.2",
+        "react-native-camera": "^2.11.0",
         "react-native-country-picker-modal": "^0.6.2",
+        "react-native-document-picker": "^2.3.0",
         "react-native-exception-handler": "2.9.0",
         "react-native-fast-image": "^5.0.3",
         "react-native-fs": "^2.13.3",

app/src/component/button/index.js

@@ -1,7 +1,4 @@
 import { connect } from 'react-redux';
 import Button from './view';
 
-export default connect(
+export default connect()(Button);
-  null,
-  null
-)(Button);

app/src/component/button/view.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, TouchableOpacity } from 'react-native';
-import buttonStyle from '../../styles/button';
+import buttonStyle from 'styles/button';
-import Colors from '../../styles/colors';
+import Colors from 'styles/colors';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 
 export default class Button extends React.PureComponent {

app/src/component/channelSelector/index.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectMyChannelClaims,
+  selectFetchingMyChannels,
+  doFetchChannelListMine,
+  doCreateChannel,
+  doToast,
+} from 'lbry-redux';
+import ChannelSelector from './view';
+
+const select = state => ({
+  channels: selectMyChannelClaims(state),
+  fetchingChannels: selectFetchingMyChannels(state),
+  balance: selectBalance(state),
+});
+
+const perform = dispatch => ({
+  notify: data => dispatch(doToast(data)),
+  createChannel: (name, amount) => dispatch(doCreateChannel(name, amount)),
+  fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
+});
+
+export default connect(select, perform)(ChannelSelector);

app/src/component/channelSelector/view.js

@@ -0,0 +1,234 @@
+import React from 'react';
+import { CLAIM_VALUES, isNameValid } from 'lbry-redux';
+import { ActivityIndicator, Picker, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import Button from 'component/button';
+import Colors from 'styles/colors';
+import Constants from 'constants';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import Link from 'component/link';
+import channelSelectorStyle from 'styles/channelSelector';
+
+export default class ChannelSelector extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentSelectedValue: Constants.ITEM_ANONYMOUS,
+      newChannelName: '',
+      newChannelBid: 0.1,
+      addingChannel: false,
+      creatingChannel: false,
+      newChannelNameError: '',
+      newChannelBidError: '',
+      createChannelError: undefined,
+      showCreateChannel: false,
+    };
+  }
+
+  componentDidMount() {
+    const { channels, fetchChannelListMine, fetchingChannels } = this.props;
+    if (!channels.length && !fetchingChannels) {
+      fetchChannelListMine();
+    }
+  }
+
+  handleCreateCancel = () => {
+    this.setState({ showCreateChannel: false, newChannelName: '', newChannelBid: 0.1 });
+  }
+
+  handlePickerValueChange = (itemValue, itemIndex) => {
+    if (Constants.ITEM_CREATE_A_CHANNEL === itemValue) {
+      this.setState({ showCreateChannel: true });
+    } else {
+      this.handleCreateCancel();
+      this.handleChannelChange((Constants.ITEM_ANONYMOUS === itemValue) ? CLAIM_VALUES.CHANNEL_ANONYMOUS : itemValue);
+    }
+    this.setState({ currentSelectedValue: itemValue });
+  }
+
+  handleChannelChange = (value) => {
+    const { onChannelChange } = this.props;
+    const { newChannelBid } = this.state;
+    const channel = value;
+
+    if (channel === CLAIM_VALUES.CHANNEL_NEW) {
+      this.setState({ addingChannel: true });
+      if (onChannelChange) {
+        onChannelChange(channel);
+      }
+      this.handleNewChannelBidChange(newChannelBid);
+    } else {
+      this.setState({ addingChannel: false });
+      if (onChannelChange) {
+        onChannelChange(channel);
+      }
+    }
+  }
+
+  handleNewChannelNameChange = (value) => {
+    const { notify } = this.props;
+
+    let newChannelName = value;
+
+    if (newChannelName.startsWith('@')) {
+      newChannelName = newChannelName.slice(1);
+    }
+
+    let newChannelNameError;
+    if (newChannelName.length > 1 && !isNameValid(newChannelName.substr(1), false)) {
+      notify({ message: 'LBRY channel names must contain only letters, numbers and dashes.' });
+    }
+
+    this.setState({
+      newChannelNameError,
+      newChannelName,
+    });
+  }
+
+  handleNewChannelBidChange = (newChannelBid) => {
+    const { balance, notify } = this.props;
+    let newChannelBidError;
+    if (newChannelBid === 0) {
+      newChannelBidError = __('Your deposit cannot be 0');
+    } else if (newChannelBid === balance) {
+      newChannelBidError = __('Please decrease your deposit to account for transaction fees');
+    } else if (newChannelBid > balance) {
+      newChannelBidError = __('Deposit cannot be higher than your balance');
+    }
+
+    notify({ message: newChannelBidError });
+
+    this.setState({
+      newChannelBid,
+      newChannelBidError,
+    });
+  }
+
+  handleCreateChannelClick = () => {
+    const { balance, createChannel, onChannelChange, notify } = this.props;
+    const { newChannelBid, newChannelName } = this.state;
+
+    if (newChannelName.trim().length === 0 || !isNameValid(newChannelName.substr(1), false)) {
+      notify({ message: 'LBRY channel names must contain only letters, numbers and dashes.' });
+      return;
+    }
+
+    if (this.channelExists(newChannelName)) {
+      notify({ message: 'You have already created a channel with the same name.'});
+      return;
+    }
+
+
+    if (newChannelBid > balance) {
+      notify({ message: 'Deposit cannot be higher than your balance' });
+      return;
+    }
+
+    const channelName = `@${newChannelName}`;
+
+    this.setState({
+      creatingChannel: true,
+      createChannelError: undefined,
+    });
+
+    const success = () => {
+      this.setState({
+        creatingChannel: false,
+        addingChannel: false,
+        currentSelectedValue: channelName,
+        showCreateChannel: false
+      });
+
+      if (onChannelChange) {
+        onChannelChange(channelName);
+      }
+    };
+
+    const failure = () => {
+      notify({ message: 'Unable to create channel due to an internal error.' });
+      this.setState({
+        creatingChannel: false
+      });
+    };
+
+    createChannel(channelName, newChannelBid).then(success, failure);
+  }
+
+  channelExists = (name) => {
+    const { channels = [] } = this.props;
+    for (let channel of channels) {
+      if (name.toLowerCase() === channel.name.toLowerCase() || `@${name}`.toLowerCase() === channel.name.toLowerCase()) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  render() {
+    const channel = this.state.addingChannel ? 'new' : this.props.channel;
+    const { fetchingChannels, channels = [] } = this.props;
+    console.log(channels);
+    const pickerItems = [
+      { name: Constants.ITEM_ANONYMOUS },
+      { name: Constants.ITEM_CREATE_A_CHANNEL }].concat(channels);
+    const {
+      newChannelName,
+      newChannelNameError,
+      newChannelBid,
+      newChannelBidError,
+      creatingChannel,
+      createChannelError,
+      addingChannel,
+    } = this.state;
+
+    return (
+      <View style={channelSelectorStyle.container}>
+        <Picker
+          selectedValue={this.state.currentSelectedValue}
+          style={channelSelectorStyle.channelPicker}
+          itemStyle={channelSelectorStyle.channelPickerItem}
+          onValueChange={this.handlePickerValueChange}>
+          {pickerItems.map(item => <Picker.Item label={item.name} value={item.name} key={item.name} />)}
+        </Picker>
+
+        {this.state.showCreateChannel && (
+        <View style={channelSelectorStyle.createChannelContainer}>
+          <TextInput
+            style={channelSelectorStyle.channelNameInput}
+            value={this.state.newChannelName}
+            onChangeText={this.handleNewChannelNameChange}
+            placeholder={'Channel name'}
+            underlineColorAndroid={Colors.NextLbryGreen}
+            />
+          <View style={channelSelectorStyle.bidRow}>
+            <Text style={channelSelectorStyle.label}>Deposit</Text>
+            <TextInput
+              style={channelSelectorStyle.bidAmountInput}
+              value={String(this.state.newChannelBid)}
+              onChangeText={this.handleNewChannelBidChange}
+              placeholder={'0.00'}
+              keyboardType={'number-pad'}
+              underlineColorAndroid={Colors.NextLbryGreen}
+              />
+            <Text style={channelSelectorStyle.currency}>LBC</Text>
+          </View>
+          <Text style={channelSelectorStyle.helpText}>This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.</Text>
+
+          <View style={channelSelectorStyle.buttonContainer}>
+            {creatingChannel && <ActivityIndicator size={'small'} color={Colors.LbryGreen} />}
+            {!creatingChannel &&
+            <View style={channelSelectorStyle.buttons}>
+              <Link style={channelSelectorStyle.cancelLink} text="Cancel" onPress={this.handleCreateCancel} />
+              <Button style={channelSelectorStyle.createButton}
+                disabled={!(this.state.newChannelName.trim().length > 0 && this.state.newChannelBid > 0)}
+                text="Create"
+                onPress={this.handleCreateChannelClick} />
+            </View>}
+          </View>
+        </View>
+        )}
+      </View>
+    );
+  }
+}

app/src/component/fileItemMedia/view.js

@@ -96,7 +96,7 @@ class FileItemMedia extends React.PureComponent {
         )}
         {!isResolvingUri && (
           <Text style={fileItemMediaStyle.autothumbText}>
-            {title &&
+            {title && title.trim().length > 0 &&
               title
                 .replace(/\s+/g, '')
                 .substring(0, Math.min(title.replace(' ', '').length, 5))

app/src/constants.js

@@ -13,6 +13,7 @@ const Constants = {
 
   PHASE_SELECTOR: 'selector',
   PHASE_DETAILS: 'details',
+  PHASE_PUBLISH: 'publish',
 
   CONTENT_TAB: 'content',
   ABOUT_TAB: 'about',
@@ -67,6 +68,9 @@ const Constants = {
 
   ROUTE_FILE: 'File',
 
+  ITEM_CREATE_A_CHANNEL: 'Create a channel...',
+  ITEM_ANONYMOUS: 'Publish anonymously',
+
   SUBSCRIPTIONS_VIEW_ALL: 'view_all',
   SUBSCRIPTIONS_VIEW_LATEST_FIRST: 'view_latest_first',
 

app/src/index.js

@@ -40,6 +40,7 @@ import thunk from 'redux-thunk';
 
 const globalExceptionHandler = (error, isFatal) => {
   if (error && NativeModules.Firebase) {
+    console.log(error);
     NativeModules.Firebase.logException(isFatal, error.message ? error.message : 'No message', JSON.stringify(error));
   }
 };

app/src/page/publish/index.js

@@ -1,11 +1,13 @@
 import { connect } from 'react-redux';
-import { doToast } from 'lbry-redux';
+import { doPublish, doResolveUri, doToast } from 'lbry-redux';
 import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
 import Constants from 'constants';
 import PublishPage from './view';
 
 const perform = dispatch => ({
   notify: data => dispatch(doToast(data)),
+  publish: params => dispatch(doPublish(params)),
+  resolveUri: uri => dispatch(doResolveUri(uri)),
   pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_PUBLISH)),
   setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
 });

app/src/page/publish/view.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   ActivityIndicator,
+  Clipboard,
   Image,
   NativeModules,
   Picker,
@@ -12,7 +13,18 @@ import {
   View
 } from 'react-native';
 import { FlatGrid } from 'react-native-super-grid';
+import {
+  isNameValid,
+  buildURI,
+  regexInvalidURI,
+  CLAIM_VALUES,
+  LICENSES,
+  THUMBNAIL_STATUSES
+} from 'lbry-redux';
+import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
+import { RNCamera } from 'react-native-camera';
 import Button from 'component/button';
+import ChannelSelector from 'component/channelSelector';
 import Colors from 'styles/colors';
 import Constants from 'constants';
 import FastImage from 'react-native-fast-image';
@@ -28,11 +40,20 @@ class PublishPage extends React.PureComponent {
     videos: null,
     currentMedia: null,
     currentPhase: Constants.PHASE_SELECTOR,
+    advancedMode: false,
 
     // publish
     anonymous: true,
-    channelName: null,
+    channelName: CLAIM_VALUES.CHANNEL_ANONYMOUS,
-    priceFree: true,
+    priceSet: false,
+
+    // input data
+    bid: 0.1,
+    description: null,
+    title: null,
+    name: null,
+    price: 0,
+    uri: null
   };
 
   didFocusListener;
@@ -48,6 +69,79 @@ class PublishPage extends React.PureComponent {
     }
   }
 
+  getNewUri(name, channel) {
+    const { resolveUri } = this.props;
+    // If they are midway through a channel creation, treat it as anonymous until it completes
+    const channelName = channel === CLAIM_VALUES.CHANNEL_ANONYMOUS || channel === CLAIM_VALUES.CHANNEL_NEW ? '' : channel;
+
+    // We are only going to store the full uri, but we need to resolve the uri with and without the channel name
+    let uri;
+    try {
+      uri = buildURI({ contentName: name, channelName });
+    } catch (e) {
+      // something wrong with channel or name
+    }
+
+    if (uri) {
+      if (channelName) {
+        // resolve without the channel name so we know the winning bid for it
+        const uriLessChannel = buildURI({ contentName: name });
+        resolveUri(uriLessChannel);
+      }
+      resolveUri(uri);
+      return uri;
+    }
+
+    return '';
+  }
+
+  handleModePressed = () => {
+    this.setState({ advancedMode: !this.state.advancedMode });
+  }
+
+  handlePublishPressed = () => {
+    const { notify, publish } = this.props;
+    const {
+      bid,
+      channelName,
+      currentMedia,
+      description,
+      name,
+      price,
+      priceSet,
+      title,
+      uri
+    } = this.state;
+    const thumbnail = null;
+
+    if (!name) {
+      notify({ message: 'Please specify an address where people can find your content.' });
+      return;
+    }
+
+    const publishParams = {
+      filePath: currentMedia.filePath,
+      bid: bid || 0.1,
+      title: title || '',
+      thumbnail: thumbnail,
+      description: description || '',
+      language: 'en',
+      nsfw: false,
+      license: '',
+      licenseUrl: '',
+      otherLicenseDescription: '',
+      name: name || undefined,
+      contentIsFree: !priceSet,
+      fee: { currency: 'LBC', price },
+      uri: uri || undefined,
+      channel: (CLAIM_VALUES.CHANNEL_ANONYMOUS === channelName) ? undefined : channelName,
+      isStillEditing: false,
+      claim: null,
+    };
+
+    this.setState({ currentPhase: Constants.PHASE_PUBLISH }, () => publish(publishParams));
+  }
+
   onComponentFocused = () => {
     const { pushDrawerStack, setPlayerVisible } = this.props;
 
@@ -77,22 +171,91 @@ class PublishPage extends React.PureComponent {
   }
 
   setCurrentMedia(media) {
-    this.setState({ currentMedia: media, currentPhase: Constants.PHASE_DETAILS });
+    this.setState({
+      currentMedia: media,
+      title: media.name,
+      name: this.formatNameForTitle(media.name),
+      currentPhase: Constants.PHASE_DETAILS
+    });
+  }
+
+  formatNameForTitle = (title) => {
+    return title.replace(regexInvalidURI, '-').toLowerCase();
   }
 
   showSelector() {
     this.setState({
       currentMedia: null,
       currentPhase: Constants.PHASE_SELECTOR,
-      // reset publish state
+
+      // publish
+      advancedMode: false,
       anonymous: true,
-      channelName: null,
+      channelName: CLAIM_VALUES.CHANNEL_ANONYMOUS,
-      priceFree: true
+      priceSet: false,
+
+      // input data
+      bid: 0.1,
+      description: null,
+      title: null,
+      name: null,
+      price: 0,
+      uri: null
+    });
+  }
+
+  handleUploadPressed = () => {
+    DocumentPicker.show({
+      filetype: [DocumentPickerUtil.allFiles()]
+    }, (error, res) => {
+      console.log(error);
+      console.log('***')
+      console.log(res);
+      if (!error) {
+        console.log(res);
+      }
+    });
+  }
+
+  handlePublishAgainPressed = () => {
+    this.showSelector();
+  }
+
+  handleBidChange = (bid) => {
+    this.setState({ bid });
+  }
+
+  handlePriceChange = (price) => {
+    this.setState({ price });
+  }
+
+  handleNameChange = (name) => {
+    const { notify } = this.props;
+    this.setState({ name });
+    if (!isNameValid(name, false)) {
+      notify({ message: 'LBRY names must contain only letters, numbers and dashes.' });
+      return;
+    }
+
+    const uri = this.getNewUri(name, this.state.channelName);
+    this.setState({ uri });
+  }
+
+  handleChannelChanged = (channel) => {
+    this.setState({ channelName: channel });
+  }
+
+  handleTitleChange = (title) => {
+    this.setState({
+      title,
+      name: this.formatNameForTitle(title)
+    }, () => {
+      this.handleNameChange(this.state.name);
     });
   }
 
   render() {
-    const { navigation } = this.props;
+    const { navigation, notify } = this.props;
     const { thumbnailPath } = this.state;
 
     let content;
@@ -100,18 +263,40 @@ class PublishPage extends React.PureComponent {
       content = (
         <View style={publishStyle.gallerySelector}>
           <View style={publishStyle.actionsView}>
-            <View style={publishStyle.record}>
+            <RNCamera
-              <Icon name="video" size={48} color={Colors.White} />
+              style={publishStyle.cameraPreview}
-              <Text style={publishStyle.actionText}>Record</Text>
+              ref={ref => {
-            </View>
+                this.camera = ref;
-            <View style={publishStyle.subActions}>
+              }}
-              <View style={publishStyle.photo}>
+              type={RNCamera.Constants.Type.back}
-                <Icon name="camera" size={48} color={Colors.White} />
+              flashMode={RNCamera.Constants.FlashMode.on}
-                <Text style={publishStyle.actionText}>Take a photo</Text>
+              androidCameraPermissionOptions={{
+                title: 'Camera',
+                message: 'Please grant access to make use of your camera',
+                buttonPositive: 'OK',
+                buttonNegative: 'Cancel',
+              }}
+              androidRecordAudioPermissionOptions={{
+                title: 'Audio',
+                message: 'Please grant access to record audio',
+                buttonPositive: 'OK',
+                buttonNegative: 'Cancel',
+              }}
+            />
+            <View style={publishStyle.actionsSubView}>
+              <View style={publishStyle.record}>
+                <Icon name="video" size={48} color={Colors.White} />
+                <Text style={publishStyle.actionText}>Record</Text>
               </View>
-              <View style={publishStyle.upload}>
+              <View style={publishStyle.subActions}>
-                <Icon name="file-upload" size={48} color={Colors.White} />
+                <View style={publishStyle.photo}>
-                <Text style={publishStyle.actionText}>Upload a file</Text>
+                  <Icon name="camera" size={48} color={Colors.White} />
+                  <Text style={publishStyle.actionText}>Take a photo</Text>
+                </View>
+                <TouchableOpacity style={publishStyle.upload} onPress={this.handleUploadPressed}>
+                  <Icon name="file-upload" size={48} color={Colors.White} />
+                  <Text style={publishStyle.actionText}>Upload a file</Text>
+                </TouchableOpacity>
               </View>
             </View>
           </View>
@@ -152,70 +337,118 @@ class PublishPage extends React.PureComponent {
           </View>
 
           <View style={publishStyle.card}>
+            <Text style={publishStyle.cardTitle}>Title</Text>
             <TextInput
               placeholder={"Title"}
               style={publishStyle.inputText}
-              value={currentMedia.name}
+              value={this.state.title}
               numberOfLines={1}
-              underlineColorAndroid={Colors.NextLbryGreen} />
+              underlineColorAndroid={Colors.NextLbryGreen}
+              onChangeText={this.state.handleTitleChange}
+              />
+          </View>
+
+          <View style={publishStyle.card}>
+            <Text style={publishStyle.cardTitle}>Description</Text>
             <TextInput
               placeholder={"Description"}
               style={publishStyle.inputText}
-              underlineColorAndroid={Colors.NextLbryGreen} />
+              value={this.state.description}
+              underlineColorAndroid={Colors.NextLbryGreen}
+              onChangeText={this.state.handleDescriptionChange}
+              />
           </View>
 
           <View style={publishStyle.card}>
-            <Text style={publishStyle.cardTitle}>Price</Text>
+            <View style={publishStyle.titleRow}>
-
+              <Text style={publishStyle.cardTitle}>Channel</Text>
-            <View style={publishStyle.cardRow}>
-              <View style={publishStyle.switchRow}>
-                <Switch value={this.state.priceFree} onValueChange={value => this.setState({ priceFree: value }) } />
-                <Text style={publishStyle.switchText}>Free</Text>
-              </View>
-
-              {!this.state.priceFree &&
-              <View style={[publishStyle.inputRow, publishStyle.priceInputRow]}>
-                <TextInput placeholder={"0.00"} style={publishStyle.priceInput} underlineColorAndroid={Colors.NextLbryGreen} numberOfLines={1} />
-                <Text style={publishStyle.currency}>LBC</Text>
-              </View>}
             </View>
+
+            <ChannelSelector onChannelChange={this.handleChannelChange}  />
           </View>
 
+          {this.state.advancedMode &&
           <View style={publishStyle.card}>
-            <Text style={publishStyle.cardTitle}>Publish anonymously or as a channel?</Text>
+            <View style={publishStyle.titleRow}>
-            <View style={publishStyle.cardRow}>
+              <Text style={publishStyle.cardTitle}>Price</Text>
-              <View style={publishStyle.switchRow}>
+              <View style={publishStyle.switchTitleRow}>
-                <Switch value={this.state.anonymous} onValueChange={value => this.setState({ anonymous: value }) } />
+                <Switch value={this.state.priceSet} onValueChange={value => this.setState({ priceSet: value }) } />
-                <Text style={publishStyle.switchText}>Anonymous</Text>
               </View>
-
-              {!this.state.anonymous &&
-              <Picker
-                selectedValue={this.state.channelName}
-                style={publishStyle.channelPicker}
-                onValueChange={(itemValue, itemIndex) =>
-                  this.setState({channelName: itemValue})
-                }>
-                <Picker.Item label="Select..." value={null} />
-              </Picker>}
             </View>
-          </View>
 
+            {!this.state.priceSet &&
+            <Text style={publishStyle.cardText}>Your content will be free. Press the toggle to set a price.</Text>}
+
+            {this.state.priceSet &&
+            <View style={[publishStyle.inputRow, publishStyle.priceInputRow]}>
+              <TextInput
+                placeholder={"0.00"}
+                keyboardType={'number-pad'}
+                style={publishStyle.priceInput}
+                underlineColorAndroid={Colors.NextLbryGreen}
+                numberOfLines={1}
+                value={String(this.state.price)}
+                onChangeText={this.handlePriceChange}
+              />
+              <Text style={publishStyle.currency}>LBC</Text>
+            </View>}
+          </View>}
+
+          {this.state.advancedMode &&
           <View style={publishStyle.card}>
-            <Text style={publishStyle.cardTitle}>Where can people find this content?</Text>
+            <Text style={publishStyle.cardTitle}>Content Address</Text>
-            <Text style={publishStyle.helpText}>The LBRY URL is the exact address where people can find your content (ex. lbry://myvideo)</Text>
+            <Text style={publishStyle.helpText}>The address where people can find your content (ex. lbry://myvideo)</Text>
 
-            <TextInput placeholder={"lbry://"} style={publishStyle.inputText} underlineColorAndroid={Colors.NextLbryGreen} numberOfLines={1} />
+            <TextInput
+              placeholder={"lbry://"}
+              style={publishStyle.inputText}
+              underlineColorAndroid={Colors.NextLbryGreen}
+              numberOfLines={1}
+              value={this.state.name}
+              onChangeText={this.handleNameChange}
+              />
             <View style={publishStyle.inputRow}>
-              <TextInput placeholder={"0.00"} style={publishStyle.priceInput} underlineColorAndroid={Colors.NextLbryGreen} numberOfLines={1} />
+              <TextInput
+                placeholder={"0.00"}
+                style={publishStyle.priceInput}
+                underlineColorAndroid={Colors.NextLbryGreen}
+                numberOfLines={1}
+                keyboardType={'numeric'}
+                value={String(this.state.bid)}
+                onChangeText={this.handleBidChange} />
               <Text style={publishStyle.currency}>LBC</Text>
             </View>
             <Text style={publishStyle.helpText}>This LBC remains yours and the deposit can be undone at any time.</Text>
-          </View>
+          </View>}
 
           <View style={publishStyle.actionButtons}>
             <Link style={publishStyle.cancelLink} text="Cancel" onPress={() => this.setState({ currentPhase: Constants.PHASE_SELECTOR })} />
-            <Button style={publishStyle.publishButton} text="Publish" />
+
+            <View style={publishStyle.rightActionButtons}>
+              <Button style={publishStyle.modeButton}
+                text={this.state.advancedMode ? 'Simple' : 'Advanced'}
+                onPress={this.handleModePressed} />
+              <Button style={publishStyle.publishButton} text="Publish" onPress={this.handlePublishPressed} />
+            </View>
+          </View>
+        </ScrollView>
+      );
+    } else if (Constants.PHASE_PUBLISH === this.state.currentPhase) {
+      content = (
+        <ScrollView style={publishStyle.publishDetails}>
+          <View style={publishStyle.successContainer}>
+            <Text style={publishStyle.successTitle}>Success!</Text>
+            <Text style={publishStyle.successText}>Congratulations! Your content was successfully uploaded.</Text>
+            <View style={publishStyle.successRow}>
+              <Link style={publishStyle.successUrl} text={this.state.uri} href={this.state.uri} />
+              <TouchableOpacity onPress={() => { Clipboard.setString(this.state.uri); notify({ message: 'Copied.' }); }}>
+                <Icon name="clipboard" size={24} color={Colors.LbryGreen} />
+              </TouchableOpacity>
+            </View>
+            <Text style={publishStyle.successText}>Your content will be live in a few minutes. In the mean time, feel free to publish more content or explore the app.</Text>
+          </View>
+          <View style={publishStyle.actionButtons}>
+            <Button style={publishStyle.publishButton} text="Publish again" onPress={this.handlePublishAgainPressed} />
           </View>
         </ScrollView>
       );

app/src/styles/channelSelector.js

@@ -0,0 +1,62 @@
+import { StyleSheet } from 'react-native';
+import Colors from './colors';
+
+const channelSelectorStyle = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  channelPicker: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16,
+    height: 52,
+    width: '100%'
+  },
+  bidRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  label: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16
+  },
+  channelNameInput: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16
+ },
+  bidAmountInput: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16,
+    marginLeft: 16,
+    textAlign: 'right',
+    width: 80
+  },
+  helpText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 12
+  },
+  createChannelContainer: {
+    flex: 1,
+    marginLeft: 8,
+    marginRight: 8
+  },
+  buttonContainer: {
+    flex: 1,
+    marginTop: 16,
+    justifyContent: 'flex-end'
+  },
+  buttons: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  cancelLink: {
+    marginRight: 16
+  },
+  createButton: {
+    backgroundColor: Colors.NextLbryGreen
+  }
+});
+
+export default channelSelectorStyle;

app/src/styles/publish.js

@@ -31,12 +31,24 @@ const publishStyle = StyleSheet.create({
     padding: 16,
   },
   actionButtons: {
-    margin: 16,
+    marginLeft: 16,
+    marginRight: 16,
+    marginBottom: 16,
+    marginTop: 24,
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between'
   },
+  rightActionButtons: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  modeButton: {
+    backgroundColor: Colors.NextLbryGreen,
+    alignSelf: 'flex-end',
+    marginRight: 20
+  },
   publishButton: {
     backgroundColor: Colors.LbryGreen,
     alignSelf: 'flex-end'
@@ -47,12 +59,12 @@ const publishStyle = StyleSheet.create({
     marginBottom: 8
   },
   actionsView: {
-    flexDirection: 'row',
     width: '100%',
     height: 240,
+    overflow: 'hidden'
   },
   record: {
-    backgroundColor: Colors.Black,
+    backgroundColor: 'transparent',
     flex: 0.5,
     justifyContent: 'center',
     alignItems: 'center'
@@ -69,7 +81,7 @@ const publishStyle = StyleSheet.create({
     marginTop: 8
   },
   photo: {
-    backgroundColor: Colors.Black,
+    backgroundColor: 'transparent',
     height: 120,
     justifyContent: 'center',
     alignItems: 'center'
@@ -109,26 +121,79 @@ const publishStyle = StyleSheet.create({
   cardRow: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'flex-start'
   },
   switchRow: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    height: 52
+    marginLeft: 24
+  },
+  switchTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 24,
+    marginTop: -10
   },
   switchText: {
-    marginLeft: 6,
+    marginRight: 4,
     fontSize: 16
   },
-  channelPicker: {
-    height: 52,
-    width: 160
-  },
   loadingView: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  cardText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 14
+  },
+  cameraPreview: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    height: 240
+  },
+  actionsSubView: {
+    flex: 1,
+    flexDirection: 'row',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  },
+  successContainer: {
+    padding: 16
+  },
+  successTitle: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 28,
+    marginBottom: 16
+  },
+  successText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16,
+    marginBottom: 16,
+    lineHeight: 20
+  },
+  successRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16
+  },
+  successUrl: {
+    fontSize: 32,
+    fontFamily: 'Inter-UI-Regular',
+    color: Colors.NextLbryGreen,
+    marginRight: 16
   }
 });
 

buildozer.spec.sample

@@ -86,7 +86,7 @@ fullscreen = 0
 #android.presplash_color = #FFFFFF
 
 # (list) Permissions
-android.permissions = ACCESS_NETWORK_STATE,BLUETOOTH,INTERNET,READ_EXTERNAL_STORAGE,WRITE_EXTERNAL_STORAGE
+android.permissions = CAMERA,INTERNET,READ_EXTERNAL_STORAGE,RECORD_AUDIO,WRITE_EXTERNAL_STORAGE
 
 # (int) Android API to use
 android.api = 28
@@ -148,7 +148,7 @@ android.react_src = ./app
 
 # (list) Gradle dependencies to add (currently works only with sdl2_gradle
 # bootstrap)
-android.gradle_dependencies = com.android.support:support-v4:27.1.1, com.android.support:support-media-compat:27.1.1, com.android.support:appcompat-v7:27.1.1, com.facebook.react:react-native:0.59.3, com.google.android.gms:play-services-gcm:11.0.4+, com.facebook.fresco:fresco:1.9.0, com.facebook.fresco:animated-gif:1.9.0, com.squareup.picasso:picasso:2.71828, com.google.firebase:firebase-core:16.0.1
+android.gradle_dependencies = com.android.support:support-v4:27.1.1, com.android.support:support-media-compat:27.1.1, com.android.support:appcompat-v7:27.1.1, com.facebook.react:react-native:0.59.3, com.google.android.gms:play-services-gcm:11.0.4+, com.facebook.fresco:fresco:1.9.0, com.facebook.fresco:animated-gif:1.9.0, com.squareup.picasso:picasso:2.71828, com.google.firebase:firebase-core:16.0.1, com.google.android.gms:play-services-base:16.1.0, com.android.support:exifinterface:27.1.1
 
 # (str) python-for-android branch to use, defaults to master
 #p4a.branch = stable

buildozer.spec.travis

@@ -86,7 +86,7 @@ fullscreen = 0
 #android.presplash_color = #FFFFFF
 
 # (list) Permissions
-android.permissions = ACCESS_NETWORK_STATE,BLUETOOTH,INTERNET,READ_EXTERNAL_STORAGE,WRITE_EXTERNAL_STORAGE
+android.permissions = CAMERA,INTERNET,READ_EXTERNAL_STORAGE,RECORD_AUDIO,WRITE_EXTERNAL_STORAGE
 
 # (int) Android API to use
 android.api = 28
@@ -148,7 +148,7 @@ android.react_src = ./app
 
 # (list) Gradle dependencies to add (currently works only with sdl2_gradle
 # bootstrap)
-android.gradle_dependencies = com.android.support:support-v4:27.1.1, com.android.support:support-media-compat:27.1.1, com.android.support:appcompat-v7:27.1.1, com.facebook.react:react-native:0.59.3, com.google.android.gms:play-services-gcm:11.0.4+, com.facebook.fresco:fresco:1.9.0, com.facebook.fresco:animated-gif:1.9.0, com.squareup.picasso:picasso:2.71828, com.google.firebase:firebase-core:16.0.1
+android.gradle_dependencies = com.android.support:support-v4:27.1.1, com.android.support:support-media-compat:27.1.1, com.android.support:appcompat-v7:27.1.1, com.facebook.react:react-native:0.59.3, com.google.android.gms:play-services-gcm:11.0.4+, com.facebook.fresco:fresco:1.9.0, com.facebook.fresco:animated-gif:1.9.0, com.squareup.picasso:picasso:2.71828, com.google.firebase:firebase-core:16.0.1, com.google.android.gms:play-services-base:16.1.0, com.android.support:exifinterface:27.1.1
 
 # (str) python-for-android branch to use, defaults to master
 #p4a.branch = stable

buildozer.spec.vagrant

@@ -86,7 +86,7 @@ fullscreen = 0
 #android.presplash_color = #FFFFFF
 
 # (list) Permissions
-android.permissions = ACCESS_NETWORK_STATE,BLUETOOTH,INTERNET,READ_EXTERNAL_STORAGE,WRITE_EXTERNAL_STORAGE
+android.permissions = CAMERA,INTERNET,READ_EXTERNAL_STORAGE,RECORD_AUDIO,WRITE_EXTERNAL_STORAGE
 
 # (int) Android API to use
 android.api = 28
@@ -148,7 +148,7 @@ android.react_src = ./app
 
 # (list) Gradle dependencies to add (currently works only with sdl2_gradle
 # bootstrap)
-android.gradle_dependencies = com.android.support:support-v4:27.1.1, com.android.support:support-media-compat:27.1.1, com.android.support:appcompat-v7:27.1.1, com.facebook.react:react-native:0.59.3, com.google.android.gms:play-services-gcm:11.0.4+, com.facebook.fresco:fresco:1.9.0, com.facebook.fresco:animated-gif:1.9.0, com.squareup.picasso:picasso:2.71828, com.google.firebase:firebase-core:16.0.1
+android.gradle_dependencies = com.android.support:support-v4:27.1.1, com.android.support:support-media-compat:27.1.1, com.android.support:appcompat-v7:27.1.1, com.facebook.react:react-native:0.59.3, com.google.android.gms:play-services-gcm:11.0.4+, com.facebook.fresco:fresco:1.9.0, com.facebook.fresco:animated-gif:1.9.0, com.squareup.picasso:picasso:2.71828, com.google.firebase:firebase-core:16.0.1, com.google.android.gms:play-services-base:16.1.0, com.android.support:exifinterface:27.1.1
 
 # (str) python-for-android branch to use, defaults to master
 #p4a.branch = stable

p4a/pythonforandroid/bootstraps/lbry/build/templates/build.tmpl.gradle

@@ -3,10 +3,11 @@ buildscript {
     repositories {
         google()
         jcenter()
+        maven { url "https://jitpack.io" }
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:3.0.0'
-        classpath 'com.google.gms:google-services:4.0.1'
+        classpath 'com.google.gms:google-services:4.2.0'
     }
 }
 
@@ -36,6 +37,8 @@ android {
         targetSdkVersion {{ android_api }}
         versionCode {{ args.numeric_version }}
         versionName '{{ args.version }}'
+        missingDimensionStrategy 'react-native-camera', 'general'
+        multiDexEnabled true
 
         ndk {
             abiFilters "armeabi-v7a", "x86"
@@ -85,6 +88,8 @@ ext {
     minSdkVersion = {{ args.min_sdk_version }}
     targetSdkVersion = {{ android_api }}
     supportLibVersion = '27.1.1'
+    googlePlayServicesVersion = '16.1.0'
+    googlePlayServicesVisionVersion = '17.0.2'
 }
 
 subprojects {
@@ -100,6 +105,8 @@ subprojects {
 
 dependencies {
     compile project(':@react-native-community_async-storage')
+    compile project(':react-native-camera')
+    compile project(':react-native-document-picker')
     compile project(':react-native-exception-handler')
     compile project(':react-native-fast-image')
     compile project(':react-native-fs')

p4a/pythonforandroid/bootstraps/lbry/build/templates/settings.gradle

@@ -1,6 +1,10 @@
 rootProject.name = 'browser'
 include ':@react-native-community_async-storage'
 project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, './react/node_modules/@react-native-community/async-storage/android')
+include ':react-native-camera'
+project(':react-native-camera').projectDir = new File(rootProject.projectDir, 	'./react/node_modules/react-native-camera/android')
+include ':react-native-document-picker'
+project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, './react/node_modules/react-native-document-picker/android')
 include ':react-native-exception-handler'
 project(':react-native-exception-handler').projectDir = new File(rootProject.projectDir, './react/node_modules/react-native-exception-handler/android')
 include ':react-native-fast-image'

src/main/java/io/lbry/browser/MainActivity.java

@@ -1,5 +1,6 @@
 package io.lbry.browser;
 
+import android.annotation.TargetApi;
 import android.os.Build;
 import android.os.Bundle;
 import android.app.Activity;
@@ -31,9 +32,12 @@ import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
+import com.facebook.react.modules.core.PermissionAwareActivity;
+import com.facebook.react.modules.core.PermissionListener;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.react.ReactRootView;
 import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
+import com.reactnativedocumentpicker.ReactNativeDocumentPicker;
 import com.rnfs.RNFSPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
@@ -55,8 +59,9 @@ import java.util.Random;
 import org.json.JSONObject;
 import org.json.JSONArray;
 import org.json.JSONException;
+import org.reactnative.camera.RNCameraPackage;
 
-public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
+public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {
 
     private static Activity currentActivity = null;
 
@@ -100,6 +105,8 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand
 
     private boolean receivedStopService;
 
+    private PermissionListener permissionListener;
+
     protected String getMainComponentName() {
         return "LBRYApp";
     }
@@ -140,7 +147,9 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand
                 .addPackage(new MainReactPackage())
                 .addPackage(new AsyncStoragePackage())
                 .addPackage(new FastImageViewPackage())
+                .addPackage(new ReactNativeDocumentPicker())
                 .addPackage(new ReactVideoPackage())
+                .addPackage(new RNCameraPackage())
                 .addPackage(new RNFetchBlobPackage())
                 .addPackage(new RNFSPackage())
                 .addPackage(new RNGestureHandlerPackage())
@@ -354,6 +363,10 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand
                 }
                 break;
         }
+
+        if (permissionListener != null) {
+            permissionListener.onRequestPermissionsResult(requestCode, permissions, grantResults);
+        }
     }
 
     public static String acquireDeviceId(Context context) {
@@ -475,6 +488,12 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand
         }
     }
 
+    @TargetApi(Build.VERSION_CODES.M)
+    public void requestPermissions(String[] permissions, int requestCode, PermissionListener listener) {
+        permissionListener = listener;
+        ActivityCompat.requestPermissions(this, permissions, requestCode);
+    }
+
     @Override
     public void onNewIntent(Intent intent) {
         if (mReactInstanceManager != null) {

src/main/java/io/lbry/browser/reactmodules/GalleryModule.java

@@ -70,7 +70,8 @@ public class GalleryModule extends ReactContextBaseJavaModule {
 
         List<String> ids = new ArrayList<String>();
         List<GalleryItem> items = new ArrayList<GalleryItem>();
-        Cursor cursor = context.getContentResolver().query(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, projection, null, null, null);
+        Cursor cursor = context.getContentResolver().query(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, projection, null, null,
+                                                           String.format("%s DESC", MediaStore.MediaColumns.DATE_MODIFIED));
         while (cursor.moveToNext()) {
             int idColumn = cursor.getColumnIndex(MediaStore.MediaColumns._ID);
             int nameColumn = cursor.getColumnIndex(MediaStore.MediaColumns.DISPLAY_NAME);