set criteria by collection type, style portrait thumbnails, validate on drop

app/model/FeatureSwitches.scala

@@ -36,8 +36,14 @@ object TenImageSlideshows extends FeatureSwitch(
  enabled = false
 )
 
+object UsePortraitCropsForSomeCollectionTypes extends FeatureSwitch(
+ key = "support-portrait-crops",
+ title = "Use portrait crops for the experimental big card containers",
+ enabled = false
+)
+
 object FeatureSwitches {
- val all: List[FeatureSwitch] = List(ObscureFeed, PageViewDataVisualisation, ShowFirefoxPrompt, TenImageSlideshows)
+ val all: List[FeatureSwitch] = List(ObscureFeed, PageViewDataVisualisation, ShowFirefoxPrompt, TenImageSlideshows, UsePortraitCropsForSomeCollectionTypes)
 
  def updateFeatureSwitchesForUser(userDataSwitches: Option[List[FeatureSwitch]], switch: FeatureSwitch): List[FeatureSwitch] = {
  val newSwitches = userDataSwitches match {

fronts-client/src/components/CollectionDisplay.tsx

@@ -33,6 +33,11 @@ import { theme } from 'constants/theme';
 import Button from 'components/inputs/ButtonDefault';
 import { updateCollection as updateCollectionAction } from '../actions/Collections';
 import { isMode } from '../selectors/pathSelectors';
+import {
+ COLLECTIONS_USING_PORTRAIT_TRAILS,
+ SUPPORT_PORTRAIT_CROPS,
+} from 'constants/image';
+import { CropIcon } from './icons/Icons';
 
 export const createCollectionId = ({ id }: Collection, frontId: string) =>
  `front-${frontId}-collection-${id}`;
@@ -254,6 +259,12 @@ class CollectionDisplay extends React.Component<Props, CollectionState> {
  const itemCount = articleIds ? articleIds.length : 0;
  const targetedTerritory = collection ? collection.targetedTerritory : null;
  const { displayName } = this.state;
+
+ const usePortrait =
+ SUPPORT_PORTRAIT_CROPS &&
+ collection?.type &&
+ COLLECTIONS_USING_PORTRAIT_TRAILS.includes(collection?.type);
+
  return (
  <CollectionContainer
  id={collection && createCollectionId(collection, frontId)}
@@ -264,6 +275,9 @@ class CollectionDisplay extends React.Component<Props, CollectionState> {
  >
  <CollectionHeadingSticky tabIndex={-1}>
  <CollectionHeadingInner>
+ {usePortrait && (
+ <CropIcon title={'uses portrait (5:4) image crops'} />
+ )}
  <CollectionHeadlineWithConfigContainer>
  {this.state.editingContainerName ? (
  <CollectionHeaderInput

fronts-client/src/components/Features/FeaturesForm.tsx

@@ -5,6 +5,7 @@ import type { State } from 'types/State';
 import { selectAllFeatures } from 'selectors/featureSwitchesSelectors';
 import { FeatureSwitch } from 'types/Features';
 import { Dispatch } from 'types/Store';
+import pageConfig from 'util/extractConfigFromPage';
 import { actionSetFeatureValue } from 'actions/FeatureSwitches';
 import { saveFeatureSwitch } from 'services/userDataApi';
 
@@ -13,12 +14,24 @@ interface Props {
  setFeatureValue: (featureSwitch: FeatureSwitch) => void;
 }
 
+const STAGE = pageConfig.env;
+
+// We don't yet have any collectionTypes that use portrait crops
+// but even when we do, we might not want to show the option on PROD
+// it might lead to some broken visuals if used before implemented
+// on platforms.
+const SWITCHES_TO_HIDE_ON_PROD = ['support-portrait-crops'];
+
+const filterSwitchesByStage = (featureSwitch: FeatureSwitch): boolean =>
+ STAGE === 'code' || !SWITCHES_TO_HIDE_ON_PROD.includes(featureSwitch.key);
+
 class FeaturesForm extends React.Component<Props> {
  public render() {
  const { featureSwitches } = this.props;
+ console.log(featureSwitches);
  return (
  <form>
- {featureSwitches.map((featureSwitch) => (
+ {featureSwitches.filter(filterSwitchesByStage).map((featureSwitch) => (
  <InputCheckboxToggle
  key={featureSwitch.key}
  label={featureSwitch.title}

fronts-client/src/components/card/Card.tsx

@@ -5,6 +5,7 @@ import Article from 'components/card/article/ArticleCard';
 import type { State } from 'types/State';
 import { createSelectCardType } from 'selectors/cardSelectors';
 import {
+ selectCard,
  selectExternalArticleFromCard,
  selectSupportingArticleCount,
 } from 'selectors/shared';
@@ -17,12 +18,18 @@ import {
 } from 'actions/Cards';
 import {
  dragEventHasImageData,
+ getMaybeDimensionsFromWidthAndHeight,
+ validateDimensions,
  validateImageEvent,
  ValidationResponse,
 } from 'util/validateImageSrc';
 import {
  editionsCardImageCriteria,
  DRAG_DATA_CARD_IMAGE_OVERRIDE,
+ SUPPORT_PORTRAIT_CROPS,
+ COLLECTIONS_USING_PORTRAIT_TRAILS,
+ landScapeCardImageCriteria,
+ portraitCardImageCriteria,
  defaultCardTrailImageCriteria,
 } from 'constants/image';
 import Sublinks from '../FrontsEdit/CollectionComponents/Sublinks';
@@ -46,6 +53,9 @@ import { CardTypes, CardTypesMap } from 'constants/cardTypes';
 import { RecipeCard } from 'components/card/recipe/RecipeCard';
 import { ChefCard } from 'components/card/chef/ChefCard';
 import { ChefMetaForm } from '../form/ChefMetaForm';
+import { selectCollectionType } from 'selectors/frontsSelectors';
+import { Criteria } from 'types/Grid';
+import { Card as CardType } from 'types/Collection';
 
 export const createCardId = (id: string) => `collection-item-${id}`;
 
@@ -104,6 +114,8 @@ type CardContainerProps = ContainerProps & {
  editMode: EditMode;
  isLive?: boolean;
  pillarId?: string;
+ collectionType?: string;
+ selectOtherCard: { (uuid: string): CardType };
 };
 
 class Card extends React.Component<CardContainerProps> {
@@ -336,30 +348,90 @@ class Card extends React.Component<CardContainerProps> {
  e.preventDefault();
  e.persist();
 
+ const isEditionsMode = this.props.editMode === 'editions';
+ const imageCriteria = isEditionsMode
+ ? editionsCardImageCriteria
+ : this.determineCardCriteria();
+
  // Our drag is a copy event, from another Card
  const cardUuid = e.dataTransfer.getData(DRAG_DATA_CARD_IMAGE_OVERRIDE);
  if (cardUuid) {
+ if (!isEditionsMode) {
+ // check dragged image matches this card's collection's criteria.
+ const validationForDraggedImage = this.checkDraggedImage(
+ cardUuid,
+ imageCriteria
+ );
+ if (!validationForDraggedImage.matchesCriteria) {
+ // @todo - if they don't match, check grid for a matching
+ // crop of the image and use that if present?
+ // @todo handle error
+ alert(
+ `Cannot copy that image to this card: ${validationForDraggedImage.reason}`
+ );
+ return;
+ }
+ }
+
  this.props.copyCardImageMeta(cardUuid, this.props.uuid);
  return;
  }
 
- const isEditionsMode = this.props.editMode === 'editions';
- const imageCriteria = isEditionsMode
- ? editionsCardImageCriteria
- : defaultCardTrailImageCriteria;
-
  // Our drag contains Grid data
  validateImageEvent(e, this.props.frontId, imageCriteria)
  .then((imageData) =>
  this.props.addImageToCard(this.props.uuid, imageData)
  )
  .catch(alert);
  };
+
+ private determineCardCriteria = (): Criteria => {
+ const { collectionType, parentId } = this.props;
+ // @todo - how best to handle crop drags to a clipboard card?
+ // Using the default (landscape) for now.
+ // But, if you set a replacement (lanscape) trail on a clipboard
+ // item, that item can't be dragged to a portrit collection.
+ // Ideally, handleImageDrop will check if the Image has a matching
+ // crop of the required criteria and use that instead of the crop
+ // being dragged (or the crop on the card being dragged) onto the card
+ if (parentId === 'clipboard') {
+ return defaultCardTrailImageCriteria;
+ }
+
+ if (!SUPPORT_PORTRAIT_CROPS || !collectionType) {
+ return landScapeCardImageCriteria;
+ }
+
+ return COLLECTIONS_USING_PORTRAIT_TRAILS.includes(collectionType)
+ ? portraitCardImageCriteria
+ : landScapeCardImageCriteria;
+ };
+
+ private checkDraggedImage = (
+ cardUuid: string,
+ imageCriteria: Criteria
+ ): ReturnType<typeof validateDimensions> => {
+ // check dragged image matches this card's collection's criteria.
+ const cardImageWasDraggedFrom = this.props.selectOtherCard(cardUuid);
+
+ const draggedImageDims = getMaybeDimensionsFromWidthAndHeight(
+ cardImageWasDraggedFrom?.meta?.imageSrcWidth,
+ cardImageWasDraggedFrom?.meta?.imageSrcHeight
+ );
+
+ if (!draggedImageDims) {
+ return {
+ matchesCriteria: false,
+ reason: 'no replacement image found',
+ };
+ }
+ return validateDimensions(draggedImageDims, imageCriteria);
+ };
 }
 
 const createMapStateToProps = () => {
  const selectType = createSelectCardType();
- return (state: State, { uuid, frontId }: ContainerProps) => {
+ return (state: State, { uuid, frontId, collectionId }: ContainerProps) => {
  const maybeExternalArticle = selectExternalArticleFromCard(state, uuid);
  return {
  type: selectType(state, uuid),
@@ -368,6 +440,8 @@ const createMapStateToProps = () => {
  pillarId: maybeExternalArticle && maybeExternalArticle.pillarId,
  numSupportingArticles: selectSupportingArticleCount(state, uuid),
  editMode: selectEditMode(state),
+ collectionType: collectionId && selectCollectionType(state, collectionId),
+ selectOtherCard: (uuid: string) => selectCard(state, uuid),
  };
  };
 };

fronts-client/src/components/card/article/ArticleBody.tsx

@@ -34,6 +34,7 @@ import EditModeVisibility from 'components/util/EditModeVisibility';
 import PageViewDataWrapper from '../../PageViewDataWrapper';
 import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper';
 import { getPaths } from 'util/paths';
+import { getMaybeDimensionsFromWidthAndHeight } from 'util/validateImageSrc';
 
 const ThumbnailPlaceholder = styled(BasePlaceholder)`
  flex-shrink: 0;
@@ -131,6 +132,8 @@ interface ArticleBodyProps {
  canShowPageViewData: boolean;
  frontId: string;
  collectionId?: string;
+ imageSrcWidth?: string;
+ imageSrcHeight?: string;
 }
 
 const articleBodyDefault = React.memo(
@@ -176,11 +179,22 @@ const articleBodyDefault = React.memo(
  collectionId,
  newspaperPageNumber,
  promotionMetric,
+ imageSrcWidth,
+ imageSrcHeight,
  }: ArticleBodyProps) => {
  const displayByline = size === 'default' && showByline && byline;
  const now = Date.now();
  const paths = urlPath ? getPaths(urlPath) : undefined;
 
+ const thumbnailDims = getMaybeDimensionsFromWidthAndHeight(
+ imageSrcWidth,
+ imageSrcHeight
+ );
+ const thumbnailIsPortrait =
+ !!imageReplace &&
+ thumbnailDims &&
+ thumbnailDims.height > thumbnailDims.width;
+
  return (
  <>
  {showMeta && (
@@ -294,6 +308,7 @@ const articleBodyDefault = React.memo(
  imageHide={imageHide}
  url={thumbnail}
  isDraggingImageOver={isDraggingImageOver}
+ isPortrait={thumbnailIsPortrait}
  >
  {cutoutThumbnail ? (
  <ThumbnailCutout src={cutoutThumbnail} />