Improve mobile photo quality for uploads and media rendering

Views/NewPost.js

@@ -51,7 +51,7 @@ let NewPostView = (props) => {
             // Launch image picker to select images from gallery
             const result = await ImagePicker.launchImageLibraryAsync({
                 mediaTypes: ImagePicker.MediaTypeOptions.Images,
-                quality: 0.2, // Set image quality
+                quality: 0.85, // Avoid aggressive client-side compression before upload
                 allowsMultipleSelection: true, // Allow multiple images to be selected
             });
             if (!result.canceled) {

Views/ProfileSettings.js

@@ -55,7 +55,7 @@ let ProfileSettings = () => {
             mediaTypes: ImagePicker.MediaTypeOptions.Images,
             allowsEditing: true,
             aspect: [4, 3],
-            quality: 0.5,
+            quality: 0.85,
             //allowsMultipleSelection: true,
         });
         if (!result.canceled) {

components/Media.js

@@ -1,6 +1,6 @@
 // Import necessary dependencies
 import React, { useState, useEffect } from 'react';
-import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, TouchableOpacity, Share } from 'react-native';
+import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, TouchableOpacity, Share, Dimensions, PixelRatio } from 'react-native';
 import { Button, Text, ProgressBar } from 'react-native-paper';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
@@ -71,7 +71,10 @@ let Media = (props) => {
     const viewer = gState.me;
 
     // Extracting tags from content
-    const imagesTag = imagesTagF(props.content, props.imageWidth || 1000, props.imageHeight || 1000);
+    const screenWidth = Dimensions.get('window').width;
+    const requestedImageWidth = props.imageWidth || Math.max(1200, Math.ceil(screenWidth * PixelRatio.get() * 1.2));
+    const requestedImageHeight = props.imageHeight || requestedImageWidth;
+    const imagesTag = imagesTagF(props.content, requestedImageWidth, requestedImageHeight);
     const imagesTagLimited = imagesTag.slice(0, 10);
     const isImagesCapped = imagesTag.length > imagesTagLimited.length;
     const imageStyle = imagesTag.length === 1 ? styles.image : styles.multipleImage;

components/NewPost.js

@@ -21,7 +21,7 @@ let NewPost = ({ profileid, newPostCB }) => {
             mediaTypes: ImagePicker.MediaTypeOptions.Images,
             //allowsEditing: true,
             //aspect: [4, 3],
-            quality: 0.2,
+            quality: 0.85,
             allowsMultipleSelection: true,
         });
         if (!result.canceled) {