Merge pull request #265 from lbryio/thumbnails

tweak thumbnail aspect ratio and sizing on discover and search pages

app/src/component/fileItem/view.js

@@ -37,6 +37,7 @@ class FileItem extends React.PureComponent {
       isResolvingUri,
       rewardedContentClaimIds,
       style,
+      mediaStyle,
       navigation
     } = this.props;
 
@@ -60,7 +61,8 @@ class FileItem extends React.PureComponent {
                          thumbnail={thumbnail}
                          blurRadius={obscureNsfw ? 15 : 0}
                          resizeMode="cover"
-                         isResolvingUri={isResolvingUri} />
+                         isResolvingUri={isResolvingUri}
+                         style={mediaStyle} />
           <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />
           <Text style={discoverStyle.fileItemName}>{title}</Text>
           {channelName &&

app/src/component/searchResultItem/view.js

@@ -36,6 +36,7 @@ class SearchResultItem extends React.PureComponent {
           <View style={searchStyle.thumbnailContainer}>
             <FileItemMedia style={searchStyle.thumbnail}
                            blurRadius={obscureNsfw ? 15 : 0}
+                           resizeMode="cover"
                            title={title}
                            thumbnail={metadata ? metadata.thumbnail : null} />
           </View>

app/src/page/discover/view.js

@@ -63,6 +63,7 @@ class DiscoverPage extends React.PureComponent {
             renderItem={ ({item, index, section}) => (
                 <FileItem
                   style={discoverStyle.fileItem}
+                  mediaStyle={discoverStyle.fileItemMedia}
                   key={item}
                   uri={normalizeURI(item)}
                   navigation={navigation} />

app/src/page/trending/view.js

@@ -39,6 +39,7 @@ class TrendingPage extends React.PureComponent {
             renderItem={ ({item}) => (
                 <FileItem
                   style={discoverStyle.fileItem}
+                  mediaStyle={discoverStyle.fileItemMedia}
                   key={item}
                   uri={normalizeURI(item)}
                   navigation={navigation} />

app/src/styles/discover.js

@@ -1,6 +1,15 @@
-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;
+ // calculate thumbnail width and height based on device's aspect ratio
+const horizontalMargin = 48; // left and right margins (24 + 24)
+const verticalMargin = (screenWidth / screenHeight) * horizontalMargin;
+const mediaWidth = screenWidth - horizontalMargin;
+const mediaHeight = (screenWidth / (screenHeight - verticalMargin)) * mediaWidth;
+
 const discoverStyle = StyleSheet.create({
   container: {
     flex: 1
@@ -40,6 +49,10 @@ const discoverStyle = StyleSheet.create({
     marginRight: 24,
     marginBottom: 48
   },
+  fileItemMedia: {
+    width: mediaWidth,
+    height: mediaHeight
+  },
   fileItemName: {
     fontFamily: 'Metropolis-Bold',
     marginTop: 8,

app/src/styles/search.js

@@ -25,13 +25,13 @@ const searchStyle = StyleSheet.create({
   },
   thumbnail: {
     width: '100%',
-    height: 80
+    height: 72
   },
   thumbnailContainer: {
-    width: '25%'
+    width: '40%'
   },
   detailsContainer: {
-    width: '70%'
+    width: '55%'
   },
   searchInput: {
     width: '100%',
@@ -41,7 +41,7 @@ const searchStyle = StyleSheet.create({
   },
   title: {
     fontFamily: 'Metropolis-SemiBold',
-    fontSize: 16
+    fontSize: 14
   },
   uri: {
     fontFamily: 'Metropolis-SemiBold',
@@ -51,7 +51,7 @@ const searchStyle = StyleSheet.create({
   publisher: {
     fontFamily: 'Metropolis-SemiBold',
     fontSize: 12,
-    marginTop: 4,
+    marginTop: 3,
     color: '#c0c0c0'
   },
   noResultsText: {