From d24a18023ddec3032e0bb68570c4ab4b0c5520f0 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 5 Jun 2018 19:03:40 +0100
Subject: [PATCH] make links in file descriptions clickable

---
 app/src/component/link/view.js | 16 +++++++++-------
 app/src/page/file/view.js      | 31 ++++++++++++++++++++++++++++++-
 app/src/styles/filePage.js     |  8 ++++++--
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/app/src/component/link/view.js b/app/src/component/link/view.js
index 8ea60a19..af27b955 100644
--- a/app/src/component/link/view.js
+++ b/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>
     );
   }
 };
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index 746987e5..4d7cac37 100644
--- a/app/src/page/file/view.js
+++ b/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>
           )}
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index ca145c46..87a9b1cb 100644
--- a/app/src/styles/filePage.js
+++ b/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
   }
 });