Umbraco-cms: Console error when opening media picker crop from grid

[bjarnef]

With latest changes I noticed some console errors, when opening image crop via media picker in the grid editor.

It seems scope.dimensions has some NaN values in its nested object properties, e.g. scale min and max.

---

_This item has been added to our backlog AB#8321_

[bjarnef]

@nul800sebastiaan @kjac not sure if you guys have noticed this or is it just on my machine? 🙈

[bjarnef]

[bjarnef]

It seems to be related to this PR: https://github.com/umbraco/Umbraco-CMS/pull/8023

In the mediacropdetails overlay it has the following:

<div ng-if="!model.disableFocalPoint">
    <h5>
        <localize key="@general_cropSection">Crop section</localize>
    </h5>

    <div>
        <umb-image-crop height="{{model.cropSize.height}}"
                        width="{{model.cropSize.width}}"
                        crop="model.target.coordinates"
                        center="model.target.focalPoint"
                        max-size="400"
                        src="model.target.image">
        </umb-image-crop>
    </div>
</div>

In my test model contains following json:

{
  "view": "views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html",
  "size": "small",
  "target": {
    "name": "Unicorn",
    "id": 1129,
    "udi": "umb://media/74c44a93dd6d4740a11caae83d469725",
    "icon": "icon-picture",
    "trashed": false,
    "key": "74c44a93-dd6d-4740-a11c-aae83d469725",
    "parentId": -1,
    "alias": null,
    "path": "-1,1129",
    "metaData": {
      "ContentTypeAlias": "Image",
      "UpdateDate": "2020-04-27T14:32:14.09Z",
      "MediaPath": "/media/svfmi3dn/unicorn.jpg",
      "IsContainer": false
    },
    "thumbnail": "/umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=%2Fmedia%2Fsvfmi3dn%2Funicorn.jpg&rnd=0.08074028145028822",
    "image": "/media/svfmi3dn/unicorn.jpg",
    "updateDate": "2020-04-27T14:32:14.09Z",
    "filtered": null,
    "isFolder": false,
    "width": "150",
    "height": 150,
    "aspectRatio": 1,
    "selectable": true,
    "flexStyle": {
      "flex": "1 1 150px",
      "max-width": "150px",
      "min-width": "100px",
      "min-height": "100px"
    },
    "url": "/media/svfmi3dn/unicorn.jpg",
    "focalPoint": {
      "left": 0.5,
      "top": 0.5
    },
    "coordinates": {
      "x1": null,
      "y1": null,
      "x2": null,
      "y2": null
    }
  },
  "disableFocalPoint": false,
  "title": "Edit selected media",
  "infiniteMode": true,
  "inFront": true,
  "moveRight": false,
  "level": 2,
  "styleIndex": 2,
  "animating": false
}

originally I added this in https://github.com/umbraco/Umbraco-CMS/pull/8048

<div ng-if="!model.disableFocalPoint">
    <h5>
        <localize key="@general_focalPoint">Focal point</localize>
    </h5>

    <div ng-if="model.target.url">
        <umb-image-gravity src="model.target.url"
                            center="model.target.focalPoint"
                            on-value-changed="vm.focalPointChanged(left, top)">
        </umb-image-gravity>
    </div>

    <div ng-if="model.cropSize">

        <h5>
            <localize key="general_preview">Preview</localize>
        </h5>

        <umb-image-thumbnail center="target.focalPoint"
                                src="target.url"
                                height="{{model.cropSize.height}}"
                                width="{{model.cropSize.width}}"
                                max-size="400">
        </umb-image-thumbnail>

    </div>
</div>

With this it looks right and without console errors.

@lars-erik did you had any issues, when inserting Image grid editor in the grid editor and selecting an image, where it shows the mediadetails overlay?

[kjac]

@bjarnef I'm seeing the same issue on the latest v8/contrib

[lars-erik]

I didn't notice this. Quite sure I tested with the console open. :P
Will have another look suddenly this week.
// @bjarnef @kjac

[bjarnef]

I noticed media parameter in clickhandler is returning the following coordinates object with NaN values for x1, x2, y1, y2 properties, which it probably shouldn't.

It seems the onClick in umbMediaGrid also doesn't have values for these properties.

https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js#L298

The raw json for the items in media picker looks like this:
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html#L116

[
  {
    "name": "Otter",
    "id": 1128,
    "udi": "umb://media/5360a28aed6846a589e980767a6f4730",
    "icon": "icon-picture",
    "trashed": false,
    "key": "5360a28a-ed68-46a5-89e9-80767a6f4730",
    "parentId": -1,
    "alias": null,
    "path": "-1,1128",
    "metaData": {
      "ContentTypeAlias": "Image",
      "UpdateDate": "2020-07-25T11:51:17.957Z",
      "MediaPath": "/media/rsrgau1i/otter.jpg",
      "IsContainer": false
    },
    "thumbnail": "/umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=%2Fmedia%2Frsrgau1i%2Fotter.jpg&rnd=0.74214958437292",
    "image": "/media/rsrgau1i/otter.jpg",
    "updateDate": "2020-07-25T11:51:17.957Z",
    "filtered": null,
    "isFolder": false,
    "width": "150",
    "height": 150,
    "aspectRatio": 1,
    "selectable": true,
    "flexStyle": {
      "flex": "1 1 150px",
      "max-width": "150px",
      "min-width": "100px",
      "min-height": "100px"
    }
  },
  {
    "name": "Unicorn",
    "id": 1129,
    "udi": "umb://media/74c44a93dd6d4740a11caae83d469725",
    "icon": "icon-picture",
    "trashed": false,
    "key": "74c44a93-dd6d-4740-a11c-aae83d469725",
    "parentId": -1,
    "alias": null,
    "path": "-1,1129",
    "metaData": {
      "ContentTypeAlias": "Image",
      "UpdateDate": "2020-08-03T10:57:29.493Z",
      "MediaPath": "/media/svfmi3dn/unicorn.jpg",
      "IsContainer": false
    },
    "thumbnail": "/umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=%2Fmedia%2Fsvfmi3dn%2Funicorn.jpg&rnd=0.6960179635897175",
    "image": "/media/svfmi3dn/unicorn.jpg",
    "updateDate": "2020-08-03T10:57:29.493Z",
    "filtered": null,
    "isFolder": false,
    "width": "150",
    "height": 150,
    "aspectRatio": 1,
    "selectable": true,
    "flexStyle": {
      "flex": "1 1 150px",
      "max-width": "150px",
      "min-width": "100px",
      "min-height": "100px"
    },
    "url": "/media/svfmi3dn/unicorn.jpg",
    "focalPoint": {
      "left": 0.5,
      "top": 0.5
    },
    "coordinates": {
      "x1": null,
      "y1": null,
      "x2": null,
      "y2": null
    }
  },
  {
    "name": "Cat",
    "id": 1130,
    "udi": "umb://media/64708dafaa58424b9070efea3709b577",
    "icon": "icon-picture",
    "trashed": false,
    "key": "64708daf-aa58-424b-9070-efea3709b577",
    "parentId": -1,
    "alias": null,
    "path": "-1,1130",
    "metaData": {
      "ContentTypeAlias": "Image",
      "UpdateDate": "2020-04-27T14:32:38.657Z",
      "MediaPath": "/media/vgghazcy/cat.jpg",
      "IsContainer": false
    },
    "thumbnail": "/umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=%2Fmedia%2Fvgghazcy%2Fcat.jpg&rnd=0.8395367680211487",
    "image": "/media/vgghazcy/cat.jpg",
    "updateDate": "2020-04-27T14:32:38.657Z",
    "filtered": null,
    "isFolder": false,
    "width": "150",
    "height": 150,
    "aspectRatio": 1,
    "selectable": true,
    "flexStyle": {
      "flex": "1 1 150px",
      "max-width": "150px",
      "min-width": "100px",
      "min-height": "100px"
    }
  },
  {
    "name": "SVG",
    "id": 1131,
    "udi": "umb://media/f547b74f94c7438ab7651d559f8e256a",
    "icon": "icon-folder",
    "trashed": false,
    "key": "f547b74f-94c7-438a-b765-1d559f8e256a",
    "parentId": -1,
    "alias": null,
    "path": "-1,1131",
    "metaData": {
      "ContentTypeAlias": "Folder",
      "UpdateDate": "2020-04-30T12:03:35.7Z",
      "MediaPath": null,
      "IsContainer": false
    },
    "updateDate": "2020-04-30T12:03:35.7Z",
    "filtered": null,
    "isFolder": true,
    "width": "150",
    "height": 150,
    "aspectRatio": 1,
    "selectable": false,
    "flexStyle": {
      "flex": "1 1 150px",
      "max-width": "150px",
      "min-width": "100px",
      "min-height": "100px"
    }
  },
  {
    "name": "Image",
    "id": 1139,
    "udi": "umb://media/88e16b523c254d45b3ecb5705363f61d",
    "icon": "icon-folder",
    "trashed": false,
    "key": "88e16b52-3c25-4d45-b3ec-b5705363f61d",
    "parentId": -1,
    "alias": null,
    "path": "-1,1139",
    "metaData": {
      "ContentTypeAlias": "Folder",
      "UpdateDate": "2020-05-01T12:28:40.237Z",
      "MediaPath": null,
      "IsContainer": false
    },
    "updateDate": "2020-05-01T12:28:40.237Z",
    "filtered": null,
    "isFolder": true,
    "width": "150",
    "height": 150,
    "aspectRatio": 1,
    "selectable": false,
    "flexStyle": {
      "flex": "1 1 150px",
      "max-width": "150px",
      "min-width": "100px",
      "min-height": "100px"
    }
  }
]

[lars-erik]

@bjarnef - some time last few years, the API endpoint used was swapped from ending at mediaservice to ending at entityservice. As far as I've seen, a lot of client code was left addressing data that was there from the mediaservice. Likely due to that.

[bjarnef]

The coordinates property it only saved on the entity if media has been saved with crops, so existing medias might not have this property.

The data comes from entityResource.getPagedDescendants()
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js#L447

and entityResource.getChildren()
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js#L519

In the abobe json I have saved the "Unicorn" image with crops. Not sure if it is expected the response from server side is the following?

"coordinates": {
  "x1": null,
  "y1": null,
  "x2": null,
  "y2": null
}

[bjarnef]

It seems in some cases the entity has this coordinates property, in other cases not and some cases it has the property with x1, y1, x2, y2 with null values.

I noticed some changed was made here. Maybe "coordinates" property should be null if each of the four properties doesn't have any value?
https://github.com/umbraco/Umbraco-CMS/commit/43094891742f9d4ff0110f30e32f7973f068f59a#diff-1477452f99d564d6912206603fd0e569

[lars-erik]

Likely, but I think the client code should default something and not depend on the server-side data. It's prone to change without QA done on the client-side code.

[nul800sebastiaan]

It seems like you two are close to a solution so I'll let you work on it for a bit more 👍

[umbrabot]

Hi @bjarnef,

We're writing to let you know that we would love some help with this issue. We feel that this issue is ideal to flag for a community member to work on it. Once flagged here, folk looking for issues to work on will know to look at yours. Of course, please feel free work on this yourself ;-). If there are any changes to this status, we'll be sure to let you know.

For more information about issues and states, have a look at this blog post

Thanks muchly, from your friendly Umbraco GitHub bot :-)

[nul800sebastiaan]

@lars-erik have you had a chance to look at this some more, I'd love for this to be resolved soon!

[lars-erik]

Soz, @nul800sebastiaan, not yet. Hoping to get a chance this week.

[lars-erik]

@bjarnef @nul800sebastiaan Seems this was due to me forgetting to test initial behavior before adding width/height to the grid editor config. I'll polish some more given a chance, but at least it'll work as expected when you haven't configured a crop now.

[nul800sebastiaan]

The console error is fixed now through https://github.com/umbraco/Umbraco-CMS/pull/8620