Merge pull request #160 from lbryio/linkify-description

make links in file descriptions clickable

app/src/component/link/view.js

@@ -23,16 +23,18 @@ export default class Link extends React.PureComponent {
     } = this.props;
     
     let styles = [];
-    if (style.length) {
-      styles = styles.concat(style);
-    } else {
-      styles.push(style);
+    if (style) {
+      if (style.length) {
+        styles = styles.concat(style);
+      } else {
+        styles.push(style);
+      }
     }
     
     return (
-      <TouchableOpacity onPress={onPress ? onPress : this.handlePress}>
-        <Text style={styles}>{text}</Text>
-      </TouchableOpacity>
+      <Text style={styles} onPress={onPress ? onPress : this.handlePress}>
+        {text}
+      </Text>
     );
   }
 };

app/src/page/file/view.js

@@ -20,6 +20,7 @@ import ChannelPage from '../channel';
 import FileDownloadButton from '../../component/fileDownloadButton';
 import FileItemMedia from '../../component/fileItemMedia';
 import FilePrice from '../../component/filePrice';
+import Link from '../../component/link';
 import MediaPlayer from '../../component/mediaPlayer';
 import UriBar from '../../component/uriBar';
 import Video from 'react-native-video';
@@ -133,6 +134,34 @@ class FilePage extends React.PureComponent {
     return 'file:///' + fileInfo.download_path;
   }
   
+  linkify = (text) => {
+    let linkifiedContent = [];
+    let lines = text.split(/\n/g);
+    linkifiedContent = lines.map((line, i) => {
+      let tokens = line.split(/\s/g);
+      let lineContent = tokens.length === 0 ? '' : tokens.map((token, j) => {
+        let hasSpace = j !== (tokens.length - 1);
+        let maybeSpace = hasSpace ? ' ' : '';
+        
+        if (token.match(/^(lbry|https?):\/\//g)) {
+          return (
+            <Link key={j}
+                  style={filePageStyle.link}
+                  href={token}
+                  text={token} />
+          );
+        } else {
+          return token + maybeSpace;
+        }
+      });
+      
+      lineContent.push("\n");
+      return (<Text key={i}>{lineContent}</Text>);
+    });
+    
+    return linkifiedContent;
+  }
+  
   render() {
     const {
       claim,
@@ -246,7 +275,7 @@ class FilePage extends React.PureComponent {
               <ScrollView style={showActions ? filePageStyle.scrollContainerActions : filePageStyle.scrollContainer}>
                 <Text style={filePageStyle.title} selectable={true}>{title}</Text>
                 {channelName && <Text style={filePageStyle.channelName} selectable={true}>{channelName}</Text>}
-                {description && <Text style={filePageStyle.description} selectable={true}>{description}</Text>}
+                {description && <Text style={filePageStyle.description} selectable={true}>{this.linkify(description)}</Text>}
               </ScrollView>
             </View>
           )}

app/src/styles/filePage.js

@@ -54,12 +54,13 @@ const filePageStyle = StyleSheet.create({
     color: Colors.ChannelGrey
   },
   description: {
+    color: Colors.DescriptionGrey,
     fontFamily: 'Metropolis-Regular',
     fontSize: 16,
+    lineHeight: 20,
     marginLeft: 20,
     marginRight: 20,
-    marginBottom: 40,
-    color: Colors.DescriptionGrey
+    marginBottom: 40
   },
   thumbnail: {
     width: screenWidth,
@@ -156,6 +157,9 @@ const filePageStyle = StyleSheet.create({
     top: 0,
     bottom: 60,
     zIndex: 100
+  },
+  link: {
+    color: Colors.LbryGreen
   }
 });