add publishes page

src/component/AppNavigator.js

@@ -6,6 +6,7 @@ import DrawerContent from 'component/drawerContent';
 import FilePage from 'page/file';
 import FirstRunScreen from 'page/firstRun';
 import PublishPage from 'page/publish';
+import PublishesPage from 'page/publishes';
 import RewardsPage from 'page/rewards';
 import TagPage from 'page/tag';
 import TrendingPage from 'page/trending';
@@ -162,6 +163,12 @@ const drawer = createDrawerNavigator(
         drawerIcon: ({ tintColor }) => <Icon name="upload" size={20} style={{ color: tintColor }} />,
       },
     },
+    Publishes: {
+      screen: PublishesPage,
+      navigationOptions: {
+        drawerIcon: ({ tintColor }) => <Icon name="cloud-upload-alt" size={20} style={{ color: tintColor }} />,
+      },
+    },
     Rewards: {
       screen: RewardsPage,
       navigationOptions: {

src/component/fileListItem/view.js

@@ -58,6 +58,7 @@ class FileListItem extends React.PureComponent {
       onPress,
       navigation,
       thumbnail,
+      hideChannel,
       title,
     } = this.props;
 
@@ -115,7 +116,7 @@ class FileListItem extends React.PureComponent {
                 {this.formatTitle(title) || this.formatTitle(name)}
               </Text>
             )}
-            {channel && (
+            {channel && !hideChannel && (
               <Link
                 style={fileListStyle.publisher}
                 text={channel}

src/constants.js

@@ -60,6 +60,7 @@ const Constants = {
   DRAWER_ROUTE_SUBSCRIPTIONS: 'Subscriptions',
   DRAWER_ROUTE_MY_LBRY: 'Downloads',
   DRAWER_ROUTE_PUBLISH: 'Publish',
+  DRAWER_ROUTE_PUBLISHES: 'Publishes',
   DRAWER_ROUTE_REWARDS: 'Rewards',
   DRAWER_ROUTE_WALLET: 'Wallet',
   DRAWER_ROUTE_SETTINGS: 'Settings',
@@ -113,6 +114,8 @@ export const DrawerRoutes = [
   Constants.DRAWER_ROUTE_MY_LBRY,
   Constants.DRAWER_ROUTE_REWARDS,
   Constants.DRAWER_ROUTE_WALLET,
+  Constants.DRAWER_ROUTE_PUBLISH,
+  Constants.DRAWER_ROUTE_PUBLISHES,
   Constants.DRAWER_ROUTE_SETTINGS,
   Constants.DRAWER_ROUTE_ABOUT,
   Constants.DRAWER_ROUTE_SEARCH,

src/page/publish/view.js

@@ -123,6 +123,17 @@ class PublishPage extends React.PureComponent {
     }
   }
 
+  onComponentFocused = () => {
+    const { pushDrawerStack, setPlayerVisible } = this.props;
+
+    pushDrawerStack();
+    setPlayerVisible();
+
+    NativeModules.Gallery.canUseCamera().then(canUseCamera => this.setState({ canUseCamera }));
+    NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
+    NativeModules.Gallery.getVideos().then(videos => this.setState({ videos }));
+  };
+
   getNewUri(name, channel) {
     const { resolveUri } = this.props;
     // If they are midway through a channel creation, treat it as anonymous until it completes
@@ -212,17 +223,6 @@ class PublishPage extends React.PureComponent {
     this.setState({ publishStarted: true }, () => publish(publishParams));
   };
 
-  onComponentFocused = () => {
-    const { pushDrawerStack, setPlayerVisible } = this.props;
-
-    pushDrawerStack();
-    setPlayerVisible();
-
-    NativeModules.Gallery.canUseCamera().then(canUseCamera => this.setState({ canUseCamera }));
-    NativeModules.Gallery.getThumbnailPath().then(thumbnailPath => this.setState({ thumbnailPath }));
-    NativeModules.Gallery.getVideos().then(videos => this.setState({ videos }));
-  };
-
   componentDidMount() {
     this.onComponentFocused();
   }

src/page/publishes/index.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { doCheckPendingPublishes, selectMyClaimUrisWithoutChannels, selectIsFetchingClaimListMine } from 'lbry-redux';
+import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
+import PublishesPage from './view';
+
+const select = state => ({
+  uris: selectMyClaimUrisWithoutChannels(state),
+  fetching: selectIsFetchingClaimListMine(state),
+});
+
+const perform = dispatch => ({
+  checkPendingPublishes: () => dispatch(doCheckPendingPublishes()),
+  pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_PUBLISHES)),
+  setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
+});
+
+export default connect(
+  select,
+  perform
+)(PublishesPage);

src/page/publishes/view.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ActivityIndicator, FlatList, Text, TouchableOpacity, View } from 'react-native';
+import Button from 'component/button';
+import Colors from 'styles/colors';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
+import FileListItem from 'component/fileListItem';
+import FloatingWalletBalance from 'component/floatingWalletBalance';
+import UriBar from 'component/uriBar';
+import publishStyle from 'styles/publish';
+import { __ } from 'utils/helper';
+
+class PublishesPage extends React.PureComponent {
+  didFocusListener;
+
+  componentWillMount() {
+    const { navigation } = this.props;
+    this.didFocusListener = navigation.addListener('didFocus', this.onComponentFocused);
+  }
+
+  componentWillUnmount() {
+    if (this.didFocusListener) {
+      this.didFocusListener.remove();
+    }
+  }
+
+  onComponentFocused = () => {
+    const { checkPendingPublishes, pushDrawerStack, setPlayerVisible } = this.props;
+
+    pushDrawerStack();
+    setPlayerVisible();
+    checkPendingPublishes();
+  };
+
+  render() {
+    const { fetching, navigation, uris } = this.props;
+
+    return (
+      <View style={publishStyle.container}>
+        <UriBar navigation={navigation} />
+        {fetching && (
+          <View style={publishStyle.centered}>
+            <ActivityIndicator size={'small'} color={Colors.LbryGreen} />
+          </View>
+        )}
+
+        {!fetching && (!uris || uris.length === 0) && (
+          <View style={publishStyle.noPublishes}>
+            <Text style={publishStyle.noPublishText}>
+              {__('It looks like you have not published anything to LBRY yet.')}
+            </Text>
+            <Button
+              style={publishStyle.publishNowButton}
+              text={__('Publish something new')}
+              onPress={() => navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH })}
+            />
+          </View>
+        )}
+
+        {uris && uris.length > 0 && (
+          <FlatList
+            style={publishStyle.publishesList}
+            contentContainerStyle={publishStyle.publishesScrollPadding}
+            initialNumToRender={8}
+            maxToRenderPerBatch={24}
+            removeClippedSubviews
+            renderItem={({ item }) => (
+              <FileListItem hideChannel key={item} uri={item} style={publishStyle.listItem} navigation={navigation} />
+            )}
+            data={uris}
+            keyExtractor={(item, index) => item}
+          />
+        )}
+
+        <FloatingWalletBalance navigation={navigation} />
+      </View>
+    );
+  }
+}
+
+export default PublishesPage;

src/styles/publish.js

@@ -326,6 +326,49 @@ const publishStyle = StyleSheet.create({
     fontSize: 14,
     marginLeft: 8,
   },
+  centered: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 60,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  noPublishes: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 60,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  noPublishText: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 16,
+  },
+  publishNowButton: {
+    alignSelf: 'center',
+    backgroundColor: Colors.LbryGreen,
+    marginTop: 16,
+  },
+  publishesList: {
+    flex: 1,
+    marginTop: 60,
+  },
+  publishesScrollPadding: {
+    paddingBottom: 16,
+  },
+  listItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 8,
+    marginLeft: 8,
+    marginRight: 8,
+  },
 });
 
 export default publishStyle;