update thumbnail display in search results and add channel links

app/src/component/searchResultItem/view.js

@@ -3,6 +3,7 @@ import { normalizeURI, parseURI } from 'lbry-redux';
 import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
 import Colors from '../../styles/colors';
 import FileItemMedia from '../fileItemMedia';
+import Link from '../../component/link';
 import NsfwOverlay from '../../component/nsfwOverlay';
 import searchStyle from '../../styles/search';
 
@@ -33,13 +34,11 @@ class SearchResultItem extends React.PureComponent {
     return (
       <View style={style}>
         <TouchableOpacity style={style} onPress={onPress}>
-          <View style={searchStyle.thumbnailContainer}>
-            <FileItemMedia style={searchStyle.thumbnail}
-                           blurRadius={obscureNsfw ? 15 : 0}
-                           resizeMode="cover"
-                           title={title}
-                           thumbnail={metadata ? metadata.thumbnail : null} />
-          </View>
+          <FileItemMedia style={searchStyle.thumbnail}
+                         blurRadius={obscureNsfw ? 15 : 0}
+                         resizeMode="cover"
+                         title={title}
+                         thumbnail={metadata ? metadata.thumbnail : null} />
           <View style={searchStyle.detailsContainer}>
             {isResolvingUri && (
             <View>
@@ -49,7 +48,11 @@ class SearchResultItem extends React.PureComponent {
               </View>
             </View>)}
             {!isResolvingUri && <Text style={searchStyle.title}>{title || name}</Text>}
-            {!isResolvingUri && channel && <Text style={searchStyle.publisher}>{channel}</Text>}
+            {!isResolvingUri && channel &&
+              <Link style={searchStyle.publisher} text={channel} onPress={() => {
+                const channelUri = normalizeURI(channel);
+                navigation.navigate({ routeName: 'File', key: channelUri, params: { uri: channelUri }});
+              }} />}
           </View>
         </TouchableOpacity>
         {obscureNsfw && <NsfwOverlay onPress={() => navigation.navigate({ routeName: 'Settings', key: 'settingsPage' })} />}

app/src/styles/fileItemMedia.js

@@ -1,14 +1,12 @@
 import { StyleSheet, Dimensions } from 'react-native';
 
-const screenDimension = Dimensions.get('window');
-const width = screenDimension.width - 48; // screen width minus combined left and right margins
-
 const fileItemMediaStyle = StyleSheet.create({
   autothumb: {
     flex: 1,
     width: '100%',
     height: 200,
-    justifyContent: 'center'
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   autothumbText: {
     fontFamily: 'Metropolis-SemiBold',

app/src/styles/search.js

@@ -1,4 +1,11 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+import Colors from './colors';
+
+const screenDimension = Dimensions.get('window');
+const screenWidth = screenDimension.width;
+const screenHeight = screenDimension.height;
+const thumbnailHeight = 100;
+const thumbnailWidth = (screenHeight / screenWidth) * thumbnailHeight;
 
 const searchStyle = StyleSheet.create({
   container: {
@@ -24,14 +31,13 @@ const searchStyle = StyleSheet.create({
     marginTop: 16
   },
   thumbnail: {
-    width: '100%',
-    height: 72
-  },
-  thumbnailContainer: {
-    width: '40%'
+    width: thumbnailWidth,
+    height: thumbnailHeight,
+    marginRight: 16,
+    justifyContent: 'center'
   },
   detailsContainer: {
-    width: '55%'
+    flex: 1
   },
   searchInput: {
     width: '100%',
@@ -41,7 +47,7 @@ const searchStyle = StyleSheet.create({
   },
   title: {
     fontFamily: 'Metropolis-SemiBold',
-    fontSize: 14
+    fontSize: 16
   },
   uri: {
     fontFamily: 'Metropolis-SemiBold',
@@ -50,9 +56,9 @@ const searchStyle = StyleSheet.create({
   },
   publisher: {
     fontFamily: 'Metropolis-SemiBold',
-    fontSize: 12,
+    fontSize: 14,
     marginTop: 3,
-    color: '#c0c0c0'
+    color: Colors.LbryGreen
   },
   noResultsText: {
     textAlign: 'center',