From 8b18a40bd01e8fd2c7640844f6ddb3a9ab4671e4 Mon Sep 17 00:00:00 2001 From: richardkang112 Date: Wed, 16 Jun 2021 20:10:11 -0400 Subject: [PATCH] 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 | 11 ++++++++++- client/components/sorted-grid/label.jsx | 7 ++++--- client/my-sites/media-library/content.jsx | 7 +++++++ .../my-sites/media-library/external-media-header.jsx | 2 +- client/my-sites/media-library/header.jsx | 6 +++++- client/my-sites/media-library/list.jsx | 8 +++++--- client/my-sites/media-library/scale.jsx | 9 +++++---- 7 files changed, 37 insertions(+), 13 deletions(-) diff --git a/client/components/sorted-grid/index.jsx b/client/components/sorted-grid/index.jsx index c160e2a095bdf..deacfdd79fda8 100644 --- a/client/components/sorted-grid/index.jsx +++ b/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 ; } diff --git a/client/components/sorted-grid/label.jsx b/client/components/sorted-grid/label.jsx index b43b3e746d77b..d3ab494eb114c 100644 --- a/client/components/sorted-grid/label.jsx +++ b/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,6 +31,7 @@ Label.propTypes = { lastInRow: PropTypes.bool, scale: PropTypes.number.isRequired, text: PropTypes.string, + isMobile: PropTypes.bool, }; Label.defaultProps = { @@ -38,8 +39,8 @@ Label.defaultProps = { }; const connectComponent = connect( - ( state ) => ( { - scale: getPreference( state, 'mediaScale' ), + ( state, { isMobile } ) => ( { + scale: getMediaScalePreference( state, 'mediaScale', isMobile ), } ), null, null, diff --git a/client/my-sites/media-library/content.jsx b/client/my-sites/media-library/content.jsx index ba9d99905c978..1f4056993189d 100644 --- a/client/my-sites/media-library/content.jsx +++ b/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 { ); } @@ -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 } /> ); @@ -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 } /> ); } diff --git a/client/my-sites/media-library/external-media-header.jsx b/client/my-sites/media-library/external-media-header.jsx index b0e03623a2ebc..7d96d145b9b3b 100644 --- a/client/my-sites/media-library/external-media-header.jsx +++ b/client/my-sites/media-library/external-media-header.jsx @@ -132,7 +132,7 @@ class MediaLibraryExternalHeader extends React.Component { { canCopy && this.renderCopyButton() } - + ); } diff --git a/client/my-sites/media-library/header.jsx b/client/my-sites/media-library/header.jsx index cb92daac1b706..4675b6117140d 100644 --- a/client/my-sites/media-library/header.jsx +++ b/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 } /> - + ); diff --git a/client/my-sites/media-library/list.jsx b/client/my-sites/media-library/list.jsx index f2ffccdb3ff64..062e7e414ab7b 100644 --- a/client/my-sites/media-library/list.jsx +++ b/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 ), } ), diff --git a/client/my-sites/media-library/scale.jsx b/client/my-sites/media-library/scale.jsx index 027a7e1f80936..c05794b16f0c2 100644 --- a/client/my-sites/media-library/scale.jsx +++ b/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,7 +34,7 @@ const SLIDER_STEPS = 100; * * @type {number} */ -const SCALE_TOUCH_GRID = 0.32; +const SCALE_TOUCH_GRID = 0.323; class MediaLibraryScale extends Component { static propTypes = { @@ -42,6 +42,7 @@ class MediaLibraryScale extends Component { 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' ),