From eeacbbb97907cdbd3505f08fe3ec846510c2ee8a Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 28 Aug 2018 20:23:48 +0100
Subject: [PATCH] tweak thumbnail aspect ratio and sizing on discover and
 search pages

---
 app/src/component/fileItem/view.js         |  4 +++-
 app/src/component/searchResultItem/view.js |  1 +
 app/src/page/discover/view.js              |  1 +
 app/src/page/trending/view.js              |  1 +
 app/src/styles/discover.js                 | 15 ++++++++++++++-
 app/src/styles/search.js                   | 10 +++++-----
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/src/component/fileItem/view.js b/app/src/component/fileItem/view.js
index 883dc3bd..cf636441 100644
--- a/app/src/component/fileItem/view.js
+++ b/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 &&
diff --git a/app/src/component/searchResultItem/view.js b/app/src/component/searchResultItem/view.js
index b03ec4e8..fbe70136 100644
--- a/app/src/component/searchResultItem/view.js
+++ b/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>
diff --git a/app/src/page/discover/view.js b/app/src/page/discover/view.js
index 30402074..93c55716 100644
--- a/app/src/page/discover/view.js
+++ b/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} />
diff --git a/app/src/page/trending/view.js b/app/src/page/trending/view.js
index 8312b617..d86f70c6 100644
--- a/app/src/page/trending/view.js
+++ b/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} />
diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js
index 2ce59d35..cdad2c57 100644
--- a/app/src/styles/discover.js
+++ b/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,
diff --git a/app/src/styles/search.js b/app/src/styles/search.js
index 890cbf9c..898b81f1 100644
--- a/app/src/styles/search.js
+++ b/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: {