Media: Render the media library items with the default value of 0.323…

… on mobile viewport

- Use isMobile() function from @automattic/viewport to detect mobile viewport
- Use getMediaScalePreference selector instead of getPreference selector for fetching media scale value from Redux

client/components/sorted-grid/index.jsx

@@ -22,6 +22,7 @@ class SortedGrid extends PureComponent {
 		getItemGroup: PropTypes.func.isRequired,
 		items: PropTypes.array,
 		itemsPerRow: PropTypes.number.isRequired,
+		isMobile: PropTypes.bool,
 	};
 
 	getItems() {
@@ -57,6 +58,7 @@ class SortedGrid extends PureComponent {
 								itemsCount={ count }
 								itemsPerRow={ this.props.itemsPerRow }
 								lastInRow={ last( keys( row.groups ) ) === group }
+								isMobile={ this.props.isMobile }
 							/>
 						)
 					);
@@ -74,7 +76,14 @@ class SortedGrid extends PureComponent {
 	};
 
 	render() {
-		const props = omit( this.props, 'getGroupLabel', 'getItemGroup', 'items', 'renderItem' );
+		const props = omit(
+			this.props,
+			'getGroupLabel',
+			'getItemGroup',
+			'items',
+			'renderItem',
+			'isMobile'
+		);
 
 		return <InfiniteList items={ this.getItems() } renderItem={ this.renderItem } { ...props } />;
 	}

client/components/sorted-grid/label.jsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 /**
  * Internal dependencies
  */
-import { getPreference } from 'calypso/state/preferences/selectors';
+import { getMediaScalePreference } from 'calypso/state/preferences/selectors';
 
 const Label = ( { itemsCount, itemsPerRow, lastInRow, scale, text } ) => {
 	const margin = ( ( 1 % scale ) / ( itemsPerRow - 1 ) ) * 100 || 0;
@@ -31,15 +31,16 @@ Label.propTypes = {
 	lastInRow: PropTypes.bool,
 	scale: PropTypes.number.isRequired,
 	text: PropTypes.string,
+	isMobile: PropTypes.bool,
 };
 
 Label.defaultProps = {
 	text: '',
 };
 
 const connectComponent = connect(
-	( state ) => ( {
-		scale: getPreference( state, 'mediaScale' ),
+	( state, { isMobile } ) => ( {
+		scale: getMediaScalePreference( state, 'mediaScale', isMobile ),
 	} ),
 	null,
 	null,

client/my-sites/media-library/content.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import page from 'page';
 import classnames from 'classnames';
 import { localize } from 'i18n-calypso';
+import { isMobile } from '@automattic/viewport';
 
 /**
  * Internal dependencies
@@ -63,12 +64,14 @@ export class MediaLibraryContent extends React.Component {
 		onMediaScaleChange: PropTypes.func,
 		postId: PropTypes.number,
 		isConnected: PropTypes.bool,
+		isMobile: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		mediaValidationErrors: Object.freeze( {} ),
 		onAddMedia: noop,
 		source: '',
+		isMobile: isMobile(),
 	};
 
 	componentDidUpdate( prevProps ) {
@@ -364,6 +367,7 @@ export class MediaLibraryContent extends React.Component {
 				<MediaLibraryList
 					key="list-loading"
 					filterRequiresUpgrade={ this.props.filterRequiresUpgrade }
+					isMobile={ this.props.isMobile }
 				/>
 			);
 		}
@@ -398,6 +402,7 @@ export class MediaLibraryContent extends React.Component {
 					thumbnailType={ this.getThumbnailType() }
 					single={ this.props.single }
 					scrollable={ this.props.scrollable }
+					isMobile={ this.props.isMobile }
 				/>
 			</MediaListData>
 		);
@@ -421,6 +426,7 @@ export class MediaLibraryContent extends React.Component {
 					sticky={ ! this.props.scrollable }
 					hasAttribution={ 'pexels' === this.props.source }
 					hasRefreshButton={ 'pexels' !== this.props.source }
+					isMobile={ this.props.isMobile }
 				/>
 			);
 		}
@@ -437,6 +443,7 @@ export class MediaLibraryContent extends React.Component {
 					onViewDetails={ this.props.onViewDetails }
 					onDeleteItem={ this.props.onDeleteItem }
 					sticky={ ! this.props.scrollable }
+					isMobile={ this.props.isMobile }
 				/>
 			);
 		}

client/my-sites/media-library/external-media-header.jsx

@@ -132,7 +132,7 @@ class MediaLibraryExternalHeader extends React.Component {
 
 				{ canCopy && this.renderCopyButton() }
 
-				<MediaLibraryScale onChange={ onMediaScaleChange } />
+				<MediaLibraryScale onChange={ onMediaScaleChange } isMobile={ this.props.isMobile } />
 			</Card>
 		);
 	}

client/my-sites/media-library/header.jsx

@@ -32,6 +32,7 @@ class MediaLibraryHeader extends React.Component {
 		onMediaScaleChange: PropTypes.func,
 		onAddMedia: PropTypes.func,
 		sticky: PropTypes.bool,
+		isMobile: PropTypes.bool,
 	};
 
 	static defaultProps = {
@@ -138,7 +139,10 @@ class MediaLibraryHeader extends React.Component {
 					onDelete={ this.props.onDeleteItem }
 					site={ this.props.site }
 				/>
-				<MediaLibraryScale onChange={ this.props.onMediaScaleChange } />
+				<MediaLibraryScale
+					onChange={ this.props.onMediaScaleChange }
+					isMobile={ this.props.isMobile }
+				/>
 			</Card>
 		);
 

client/my-sites/media-library/list.jsx

@@ -19,7 +19,7 @@ import ListNoContent from './list-no-content';
 import ListPlanUpgradeNudge from './list-plan-upgrade-nudge';
 import SortedGrid from 'calypso/components/sorted-grid';
 import { withLocalizedMoment } from 'calypso/components/localized-moment';
-import { getPreference } from 'calypso/state/preferences/selectors';
+import { getMediaScalePreference } from 'calypso/state/preferences/selectors';
 import { selectMediaItems } from 'calypso/state/media/actions';
 import isFetchingNextPage from 'calypso/state/selectors/is-fetching-next-page';
 
@@ -44,6 +44,7 @@ export class MediaLibraryList extends React.Component {
 		mediaOnFetchNextPage: PropTypes.func,
 		single: PropTypes.bool,
 		scrollable: PropTypes.bool,
+		isMobile: PropTypes.bool,
 	};
 
 	static defaultProps = {
@@ -254,14 +255,15 @@ export class MediaLibraryList extends React.Component {
 				renderItem={ this.renderItem }
 				renderLoadingPlaceholders={ this.renderLoadingPlaceholders }
 				className="media-library__list"
+				isMobile={ this.props.isMobile }
 			/>
 		);
 	}
 }
 
 export default connect(
-	( state, { site } ) => ( {
-		mediaScale: getPreference( state, 'mediaScale' ),
+	( state, { site, isMobile } ) => ( {
+		mediaScale: getMediaScalePreference( state, 'mediaScale', isMobile ),
 		selectedItems: getMediaLibrarySelectedItems( state, site?.ID ),
 		isFetchingNextPage: isFetchingNextPage( state, site?.ID ),
 	} ),

client/my-sites/media-library/scale.jsx

@@ -15,7 +15,7 @@ import Gridicon from 'calypso/components/gridicon';
 import FormRange from 'calypso/components/forms/range';
 import SegmentedControl from 'calypso/components/segmented-control';
 import { setPreference, savePreference } from 'calypso/state/preferences/actions';
-import { getPreference } from 'calypso/state/preferences/selectors';
+import { getMediaScalePreference } from 'calypso/state/preferences/selectors';
 import { SCALE_CHOICES } from 'calypso/lib/media/constants';
 
 /**
@@ -34,14 +34,15 @@ const SLIDER_STEPS = 100;
  *
  * @type {number}
  */
-const SCALE_TOUCH_GRID = 0.32;
+const SCALE_TOUCH_GRID = 0.323;
 
 class MediaLibraryScale extends Component {
 	static propTypes = {
 		mediaScale: PropTypes.number,
 		onChange: PropTypes.func,
 		setMediaScalePreference: PropTypes.func,
 		saveMediaScalePreference: PropTypes.func,
+		isMobile: PropTypes.bool,
 	};
 
 	static defaultProps = {
@@ -144,8 +145,8 @@ class MediaLibraryScale extends Component {
 }
 
 export default connect(
-	( state ) => ( {
-		scale: getPreference( state, 'mediaScale' ),
+	( state, { isMobile } ) => ( {
+		scale: getMediaScalePreference( state, 'mediaScale', isMobile ),
 	} ),
 	{
 		setMediaScalePreference: partial( setPreference, 'mediaScale' ),