Merge pull request #424 from lbryio/channel-page-tweaks

* optimise space usage by the page navigation buttons on the channel page
* use full URIs for channel name links

app/src/component/fileItem/view.js

@@ -63,6 +63,8 @@ class FileItem extends React.PureComponent {
     const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
     const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
     const channelName = claim ? claim.channel_name : null;
+    const channelClaimId = claim && claim.value && claim.value.publisherSignature && claim.value.publisherSignature.certificateId;
+    const fullChannelUri = channelClaimId ? `${channelName}#${channelClaimId}` : channelName;
     const height = claim ? claim.height : null;
 
     return (
@@ -85,8 +87,7 @@ class FileItem extends React.PureComponent {
           <View style={discoverStyle.detailsRow}>
             {channelName &&
               <Link style={discoverStyle.channelName} text={channelName} onPress={() => {
-                const channelUri = normalizeURI(channelName);
-                navigateToUri(navigation, channelUri);
+                navigateToUri(navigation, normalizeURI(fullChannelUri));
               }} />}
             <DateTime style={discoverStyle.dateTime} textStyle={discoverStyle.dateTimeText} timeAgo block={height} />
           </View>}

app/src/component/fileList/view.js

@@ -145,7 +145,15 @@ class FileList extends React.PureComponent<Props, State> {
   sortFunctions: {};
 
   render() {
-    const { fileInfos, hideFilter, checkPending, navigation, style } = this.props;
+    const {
+      contentContainerStyle,
+      fileInfos,
+      hideFilter,
+      checkPending,
+      navigation,
+      onEndReached,
+      style
+    } = this.props;
     const { sortBy } = this.state;
     const items = [];
 
@@ -170,7 +178,9 @@ class FileList extends React.PureComponent<Props, State> {
     return (
       <FlatList
         style={style}
+        contentContainerStyle={contentContainerStyle}
         data={items}
+        onEndReached={onEndReached}
         keyExtractor={(item, index) => item}
         renderItem={({item}) => (
           <FileItem style={discoverStyle.fileItem}

app/src/component/fileListItem/view.js

@@ -63,11 +63,13 @@ class FileListItem extends React.PureComponent {
     const isResolving = !fileInfo && isResolvingUri;
     const title = fileInfo ? fileInfo.metadata.title : metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
 
-    let name, channel, height;
+    let name, channel, height, channelClaimId, fullChannelUri;
     if (claim) {
       name = claim.name;
       channel = claim.channel_name;
       height = claim.height;
+      channelClaimId = claim.value && claim.value.publisherSignature && claim.value.publisherSignature.certificateId;
+      fullChannelUri = channelClaimId ? `${channel}#${channelClaimId}` : channel;
     }
 
     return (
@@ -90,8 +92,7 @@ class FileListItem extends React.PureComponent {
             {(title || name) && <Text style={fileListStyle.title}>{this.formatTitle(title) || this.formatTitle(name)}</Text>}
             {channel &&
               <Link style={fileListStyle.publisher} text={channel} onPress={() => {
-                const channelUri = normalizeURI(channel);
-                navigateToUri(navigation, channelUri);
+                navigateToUri(navigation, normalizeURI(fullChannelUri));
               }} />}
 
             <View style={fileListStyle.info}>

app/src/page/channel/view.js

@@ -11,7 +11,8 @@ import channelPageStyle from 'styles/channelPage';
 
 class ChannelPage extends React.PureComponent {
   state = {
-    page: 1
+    page: 1,
+    showPageButtons: false
   };
 
   componentDidMount() {
@@ -26,7 +27,7 @@ class ChannelPage extends React.PureComponent {
   handlePreviousPage = () => {
     const { uri, fetchClaims } = this.props;
     if (this.state.page > 1) {
-      this.setState({ page: this.state.page - 1 }, () => {
+      this.setState({ page: this.state.page - 1, showPageButtons: false }, () => {
         fetchClaims(uri, this.state.page);
       });
     }
@@ -35,7 +36,7 @@ class ChannelPage extends React.PureComponent {
   handleNextPage = () => {
     const { uri, fetchClaims, totalPages } = this.props;
     if (this.state.page < totalPages) {
-      this.setState({ page: this.state.page + 1 }, () => {
+      this.setState({ page: this.state.page + 1, showPageButtons: false }, () => {
         fetchClaims(uri, this.state.page);
       });
     }
@@ -69,7 +70,9 @@ class ChannelPage extends React.PureComponent {
                     hideFilter
                     fileInfos={claimsInChannel}
                     navigation={navigation}
-                    style={channelPageStyle.fileList} />
+                    style={channelPageStyle.fileList}
+                    contentContainerStyle={channelPageStyle.fileListContent}
+                    onEndReached={() => this.setState({ showPageButtons: true })} />
         ) : (
           <View style={channelPageStyle.busyContainer}>
             <Text style={channelPageStyle.infoText}>No content found.</Text>
@@ -81,7 +84,7 @@ class ChannelPage extends React.PureComponent {
       <View style={channelPageStyle.container}>
         <PageHeader title={name} onBackPressed={() => navigateBack(navigation, drawerStack, popDrawerStack)} />
         {contentList}
-        {(totalPages > 1) &&
+        {(totalPages > 1) && this.state.showPageButtons &&
         <View style={channelPageStyle.pageButtons}>
           <View>
             {(this.state.page > 1) && <Button

app/src/page/file/view.js

@@ -428,9 +428,9 @@ class FilePage extends React.PureComponent {
         const { height, channel_name: channelName, value } = claim;
         const showActions = !this.state.fullscreenMode && !this.state.showImageViewer && !this.state.showWebView;
         const showFileActions = (completed || (fileInfo && !fileInfo.stopped && fileInfo.written_bytes < fileInfo.total_bytes));
-        const channelClaimId =
-          value && value.publisherSignature && value.publisherSignature.certificateId;
+        const channelClaimId = value && value.publisherSignature && value.publisherSignature.certificateId;
         const canSendTip = this.state.tipAmount > 0;
+        const fullChannelUri = channelClaimId && channelClaimId.trim().length > 0 ? `${channelName}#${channelClaimId}` : channelName;
 
         const playerStyle = [filePageStyle.player,
           this.state.isLandscape ? filePageStyle.containedPlayerLandscape :
@@ -575,8 +575,7 @@ class FilePage extends React.PureComponent {
                               numberOfLines={1}
                               ellipsizeMode={"tail"}
                               onPress={() => {
-                                const channelUri = normalizeURI(channelName);
-                                navigateToUri(navigation, channelUri);
+                                navigateToUri(navigation, normalizeURI(fullChannelUri));
                               }} />
                         <DateTime
                           style={filePageStyle.publishDate}
@@ -588,11 +587,11 @@ class FilePage extends React.PureComponent {
                       <View style={filePageStyle.subscriptionRow}>
                         <SubscribeButton
                           style={filePageStyle.actionButton}
-                          uri={channelUri}
+                          uri={fullChannelUri}
                           name={channelName} />
                         <SubscribeNotificationButton
                           style={[filePageStyle.actionButton, filePageStyle.bellButton]}
-                          uri={channelUri}
+                          uri={fullChannelUri}
                           name={channelName} />
                       </View>
                     </View>

app/src/styles/channelPage.js

@@ -10,9 +10,12 @@ const channelPageStyle = StyleSheet.create({
     flex: 1
   },
   fileList: {
-    paddingTop: 30,
     flex: 1,
-    marginBottom: 16
+    paddingTop: 30,
+    marginBottom: 60,
+  },
+  fileListContent: {
+    paddingBottom: 16
   },
   title: {
     color: Colors.LbryGreen,
@@ -33,11 +36,13 @@ const channelPageStyle = StyleSheet.create({
     marginLeft: 10
   },
   pageButtons: {
+    width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',
+    position: 'absolute',
+    bottom: 76,
     paddingLeft: 16,
-    paddingRight: 16,
-    marginBottom: 76
+    paddingRight: 16
   },
   button: {
     backgroundColor: Colors.LbryGreen,