From afaa00d635b29c8d6ccfe98c05a52e76f6a22561 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Fri, 6 Jul 2018 02:00:24 +0100
Subject: [PATCH] Link effect (#199)

* Add style to link on video file on tap. Adds a timeout to set it to false as Linking has a weird behavior when chrome vs youtube page is open.
* Add link to be semi-transparent onPress instead of green background.
---
 app/src/component/link/view.js | 30 ++++++++++++++++++++++++++----
 app/src/page/file/view.js      |  3 ++-
 app/src/styles/filePage.js     |  3 +++
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/src/component/link/view.js b/app/src/component/link/view.js
index af27b955..b4df5284 100644
--- a/app/src/component/link/view.js
+++ b/app/src/component/link/view.js
@@ -2,18 +2,36 @@ import React from 'react';
 import { Linking, Text, TouchableOpacity } from 'react-native';
 
 export default class Link extends React.PureComponent {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      tappedStyle: false,
+    }
+    this.addTappedStyle = this.addTappedStyle.bind(this)
+  }
+  
   handlePress = () => {
     const { error, href, navigation, notify } = this.props;
     
     if (navigation && href.startsWith('#')) {
       navigation.navigate(href.substring(1));
     } else {
-      Linking.openURL(href).catch(err => notify({
-        message: error,
-        displayType: ['toast']
-      }));
+      if (this.props.effectOnTap) this.addTappedStyle();
+      Linking.openURL(href)
+        .then(() => setTimeout(() => { this.setState({ tappedStyle: false }); }, 2000))
+      .catch(err => {
+        notify({ message: error, displayType: ['toast']})
+        this.setState({tappedStyle: false})
+      }
+    );
     }
   }
+
+  addTappedStyle() {
+    this.setState({ tappedStyle: true });
+    setTimeout(() => { this.setState({ tappedStyle: false }); }, 2000);
+  }
   
   render() {
     const {
@@ -30,6 +48,10 @@ export default class Link extends React.PureComponent {
         styles.push(style);
       }
     }
+
+    if (this.props.effectOnTap && this.state.tappedStyle) {
+      styles.push(this.props.effectOnTap);
+    }
     
     return (
       <Text style={styles} onPress={onPress ? onPress : this.handlePress}>
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index 2ed49b98..00f6944e 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -149,7 +149,8 @@ class FilePage extends React.PureComponent {
             <Link key={j}
                   style={filePageStyle.link}
                   href={token}
-                  text={token} />
+                  text={token}
+                  effectOnTap={filePageStyle.linkTapped} />
           );
         } else {
           return token + space;
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index 413c200b..9db9219a 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -160,6 +160,9 @@ const filePageStyle = StyleSheet.create({
   },
   link: {
     color: Colors.LbryGreen
+  },
+  linkTapped: {
+    color: "rgba(64, 184, 154, .2)"
   }
 });