From 5be022e01197a95da6e2cba254bd3174e2159305 Mon Sep 17 00:00:00 2001
From: Daniel Dominguez <danielfromarg@gmail.com>
Date: Mon, 18 Jun 2018 20:44:06 -0300
Subject: [PATCH] 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.

---
 app/src/component/link/view.js | 30 ++++++++++++++++++++++++++----
 app/src/page/file/view.js      |  3 ++-
 app/src/styles/filePage.js     |  5 ++++-
 3 files changed, 32 insertions(+), 6 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 d5dac95e..8fb21391 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -148,7 +148,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 87a9b1cb..b5bafc14 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -160,7 +160,10 @@ const filePageStyle = StyleSheet.create({
   },
   link: {
     color: Colors.LbryGreen
-  }
+  },
+  linkTapped: {
+    backgroundColor: '#0c604b',
+  },
 });
 
 export default filePageStyle;