Make channel names displayed on file items and the file page touchable (#165)

app/src/component/fileItem/view.js

@@ -4,6 +4,7 @@ import { NavigationActions } from 'react-navigation';
 import { NativeModules, Text, View, TouchableOpacity } from 'react-native';
 import FileItemMedia from '../fileItemMedia';
 import FilePrice from '../filePrice';
+import Link from '../link';
 import NsfwOverlay from '../nsfwOverlay';
 import discoverStyle from '../../styles/discover';
 
@@ -68,7 +69,10 @@ class FileItem extends React.PureComponent {
           <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />
           <Text style={discoverStyle.fileItemName}>{title}</Text>
           {channelName &&
-            <Text style={discoverStyle.channelName}>{channelName}</Text>}
+            <Link style={discoverStyle.channelName} text={channelName} onPress={() => {
+              const channelUri = normalizeURI(channelName); 
+              navigation.navigate({ routeName: 'File', key: channelUri, params: { uri: channelUri }});
+            }} />}
         </TouchableOpacity>
         {obscureNsfw && <NsfwOverlay onPress={() => navigation.navigate('Settings')} />}
       </View>

app/src/page/file/view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Lbry } from 'lbry-redux';
+import { Lbry, normalizeURI } from 'lbry-redux';
 import {
   ActivityIndicator,
   Alert,
@@ -141,7 +141,7 @@ class FilePage extends React.PureComponent {
       let tokens = line.split(/\s/g);
       let lineContent = tokens.length === 0 ? '' : tokens.map((token, j) => {
         let hasSpace = j !== (tokens.length - 1);
-        let maybeSpace = hasSpace ? ' ' : '';
+        let space = hasSpace ? ' ' : '';
         
         if (token.match(/^(lbry|https?):\/\//g)) {
           return (
@@ -151,7 +151,7 @@ class FilePage extends React.PureComponent {
                   text={token} />
           );
         } else {
-          return token + maybeSpace;
+          return token + space;
         }
       });
       
@@ -274,7 +274,13 @@ class FilePage extends React.PureComponent {
               </View>}
               <ScrollView style={showActions ? filePageStyle.scrollContainerActions : filePageStyle.scrollContainer}>
                 <Text style={filePageStyle.title} selectable={true}>{title}</Text>
-                {channelName && <Text style={filePageStyle.channelName} selectable={true}>{channelName}</Text>}
+                {channelName && <Link style={filePageStyle.channelName}
+                                      selectable={true}
+                                      text={channelName}
+                                      onPress={() => {
+                                        const channelUri = normalizeURI(channelName);
+                                        navigation.navigate({ routeName: 'File', key: channelUri, params: { uri: channelUri }});
+                                      }} />}
                 {description && <Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>}
               </ScrollView>
             </View>

app/src/styles/discover.js

@@ -42,11 +42,11 @@ const discoverStyle = StyleSheet.create({
   fileItemName: {
     fontFamily: 'Metropolis-Bold',
     marginTop: 8,
-    fontSize: 16
+    fontSize: 18
   },
   channelName: {
     fontFamily: 'Metropolis-SemiBold',
-    fontSize: 14,
+    fontSize: 16,
     marginTop: 4,
     color: '#c0c0c0'
   },