@atlaskit/emoji 73.3.7 → 73.3.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/emoji
 
+## 73.3.8
+
+### Patch Changes
+
+- [`12727dc9ff879`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/12727dc9ff879) -
+  Reuse the provider's MDPI image for compact standard and Atlassian emojis behind
+  platform_emoji_adaptive_image_size when it has enough pixels for the display. Preserve catalogue
+  images for larger or denser displays and providers without a suitable URL.
+
 ## 73.3.7
 
 ### Patch Changes

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -10,10 +10,12 @@ exports.default = exports.ResourcedEmojiComponent = void 0;
 require("./ResourcedEmojiComponent.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _getPixelRatio = require("../../api/getPixelRatio");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
 var _types = require("../../types");
 var _hasUfoMarked = require("../../util/analytics/hasUfoMarked");
@@ -23,7 +25,16 @@ var _isPromise = require("../../util/is-promise");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ignoreWrapperStyles = null;
+var isMdpiImageURL = function isMdpiImageURL(imageURL) {
+  try {
+    return new URL(imageURL, 'https://emoji.invalid').searchParams.get('scale') === 'MDPI';
+  } catch (_unused) {
+    return false;
+  }
+};
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -69,8 +80,12 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     setImageLoadError = _useState6[1];
   var _useState7 = (0, _react.useState)(),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    resolvedEmojiProvider = _useState8[0],
-    setResolvedEmojiProvider = _useState8[1];
+    failedAdaptiveImageURL = _useState8[0],
+    setFailedAdaptiveImageURL = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    resolvedEmojiProvider = _useState0[0],
+    setResolvedEmojiProvider = _useState0[1];
   var fetchOrGetEmoji = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_emojiProvider, emojiId) {
       var optimisticFetch,
@@ -187,6 +202,10 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
   }, [emoji, loaded, optimisticImageURL, imageLoadError]);
   var optimisticEmojiDescription = (0, _react.useMemo)(function () {
+    if (optimisticImageURL && emoji && (emoji.type === 'STANDARD' || emoji.type === 'ATLASSIAN') && fitToHeight * Math.max(1, (0, _getPixelRatio.getPixelRatio)()) > 32 && isMdpiImageURL(optimisticImageURL) && (0, _fg.fg)('platform_emoji_adaptive_image_size')) {
+      return emoji;
+    }
+
     // reduce blast radius by targeting page title
     if (pageTitleEmoji && optimisticImageURL && (0, _fg.fg)('platform_emoji_prevent_img_src_changing')) {
       return {
@@ -219,9 +238,33 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
         }
       };
     }
+    if ((0, _fg.fg)('platform_emoji_adaptive_image_size') && emoji && (emoji.type === 'STANDARD' || emoji.type === 'ATLASSIAN') && emoji.representation && 'imagePath' in emoji.representation && emoji.representation.height > 32 && fitToHeight > 0 && fitToHeight * Math.max(1, (0, _getPixelRatio.getPixelRatio)()) <= 32) {
+      var _resolvedEmojiProvide;
+      var imageURL = resolvedEmojiProvider === null || resolvedEmojiProvider === void 0 || (_resolvedEmojiProvide = resolvedEmojiProvider.getOptimisticImageURL) === null || _resolvedEmojiProvide === void 0 ? void 0 : _resolvedEmojiProvide.call(resolvedEmojiProvider, {
+        id: id,
+        shortName: shortName,
+        fallback: fallback
+      });
+      // MDPI standard/Atlassian images are 32px. Reuse the provider's URL instead of
+      // downloading a larger catalogue image when those pixels already cover the display.
+      if (imageURL && imageURL !== failedAdaptiveImageURL && isMdpiImageURL(imageURL)) {
+        return _objectSpread(_objectSpread({}, emoji), {}, {
+          representation: {
+            imagePath: imageURL,
+            width: 32,
+            height: 32
+          },
+          altRepresentation: undefined
+        });
+      }
+    }
     return emoji;
-  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
+  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji, resolvedEmojiProvider, failedAdaptiveImageURL]);
   var handleOnLoadError = (0, _react.useCallback)(function (emojiId) {
+    if ((0, _fg.fg)('platform_emoji_adaptive_image_size') && !optimisticImageURL && optimisticEmojiDescription !== emoji && optimisticEmojiDescription !== null && optimisticEmojiDescription !== void 0 && optimisticEmojiDescription.representation && 'imagePath' in optimisticEmojiDescription.representation) {
+      setFailedAdaptiveImageURL(optimisticEmojiDescription.representation.imagePath);
+      return;
+    }
     setImageLoadError(true);
     var reason = 'load error';
     onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
@@ -232,7 +275,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
         emojiId: emojiId.id
       }
     });
-  }, [onEmojiLoadFail]);
+  }, [onEmojiLoadFail, optimisticImageURL, optimisticEmojiDescription, emoji]);
   var handleOnLoadSuccess = (0, _react.useCallback)(function (emojiId) {
     onEmojiLoadSuccess && onEmojiLoadSuccess(emojiId.id);
   }, [onEmojiLoadSuccess]);

package/dist/cjs/util/analytics/createEvent.js

@@ -17,7 +17,7 @@ var createEvent = exports.createEvent = function createEvent(eventType, action,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "73.3.6"
+      packageVersion: "73.3.7"
     }, attributes)
   };
 };

package/dist/es2019/components/common/ResourcedEmojiComponent.js

@@ -3,6 +3,7 @@ import "./ResourcedEmojiComponent.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { getPixelRatio } from '../../api/getPixelRatio';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { UfoEmojiTimings } from '../../types';
 import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
@@ -12,6 +13,13 @@ import { isPromise } from '../../util/is-promise';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 const ignoreWrapperStyles = null;
+const isMdpiImageURL = imageURL => {
+  try {
+    return new URL(imageURL, 'https://emoji.invalid').searchParams.get('scale') === 'MDPI';
+  } catch {
+    return false;
+  }
+};
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -42,6 +50,7 @@ export const ResourcedEmojiComponent = ({
   const [emoji, setEmoji] = useState();
   const [loaded, setLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
+  const [failedAdaptiveImageURL, setFailedAdaptiveImageURL] = useState();
   const [resolvedEmojiProvider, setResolvedEmojiProvider] = useState();
   const fetchOrGetEmoji = useCallback(async (_emojiProvider, emojiId, optimisticFetch = false) => {
     if (!_emojiProvider.fetchByEmojiId) {
@@ -141,6 +150,10 @@ export const ResourcedEmojiComponent = ({
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
   }, [emoji, loaded, optimisticImageURL, imageLoadError]);
   const optimisticEmojiDescription = useMemo(() => {
+    if (optimisticImageURL && emoji && (emoji.type === 'STANDARD' || emoji.type === 'ATLASSIAN') && fitToHeight * Math.max(1, getPixelRatio()) > 32 && isMdpiImageURL(optimisticImageURL) && fg('platform_emoji_adaptive_image_size')) {
+      return emoji;
+    }
+
     // reduce blast radius by targeting page title
     if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
       return {
@@ -173,9 +186,34 @@ export const ResourcedEmojiComponent = ({
         }
       };
     }
+    if (fg('platform_emoji_adaptive_image_size') && emoji && (emoji.type === 'STANDARD' || emoji.type === 'ATLASSIAN') && emoji.representation && 'imagePath' in emoji.representation && emoji.representation.height > 32 && fitToHeight > 0 && fitToHeight * Math.max(1, getPixelRatio()) <= 32) {
+      var _resolvedEmojiProvide;
+      const imageURL = resolvedEmojiProvider === null || resolvedEmojiProvider === void 0 ? void 0 : (_resolvedEmojiProvide = resolvedEmojiProvider.getOptimisticImageURL) === null || _resolvedEmojiProvide === void 0 ? void 0 : _resolvedEmojiProvide.call(resolvedEmojiProvider, {
+        id,
+        shortName,
+        fallback
+      });
+      // MDPI standard/Atlassian images are 32px. Reuse the provider's URL instead of
+      // downloading a larger catalogue image when those pixels already cover the display.
+      if (imageURL && imageURL !== failedAdaptiveImageURL && isMdpiImageURL(imageURL)) {
+        return {
+          ...emoji,
+          representation: {
+            imagePath: imageURL,
+            width: 32,
+            height: 32
+          },
+          altRepresentation: undefined
+        };
+      }
+    }
     return emoji;
-  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
+  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji, resolvedEmojiProvider, failedAdaptiveImageURL]);
   const handleOnLoadError = useCallback(emojiId => {
+    if (fg('platform_emoji_adaptive_image_size') && !optimisticImageURL && optimisticEmojiDescription !== emoji && optimisticEmojiDescription !== null && optimisticEmojiDescription !== void 0 && optimisticEmojiDescription.representation && 'imagePath' in optimisticEmojiDescription.representation) {
+      setFailedAdaptiveImageURL(optimisticEmojiDescription.representation.imagePath);
+      return;
+    }
     setImageLoadError(true);
     const reason = 'load error';
     onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
@@ -186,7 +224,7 @@ export const ResourcedEmojiComponent = ({
         emojiId: emojiId.id
       }
     });
-  }, [onEmojiLoadFail]);
+  }, [onEmojiLoadFail, optimisticImageURL, optimisticEmojiDescription, emoji]);
   const handleOnLoadSuccess = useCallback(emojiId => {
     onEmojiLoadSuccess && onEmojiLoadSuccess(emojiId.id);
   }, [onEmojiLoadSuccess]);

package/dist/es2019/util/analytics/createEvent.js

@@ -5,7 +5,7 @@ export const createEvent = (eventType, action, actionSubject, actionSubjectId, a
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "73.3.6",
+    packageVersion: "73.3.7",
     ...attributes
   }
 });

package/dist/esm/components/common/ResourcedEmojiComponent.js

@@ -1,11 +1,15 @@
 /* ResourcedEmojiComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ResourcedEmojiComponent.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { getPixelRatio } from '../../api/getPixelRatio';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { UfoEmojiTimings } from '../../types';
 import { hasUfoMarked } from '../../util/analytics/hasUfoMarked';
@@ -15,6 +19,13 @@ import { isPromise } from '../../util/is-promise';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
 var ignoreWrapperStyles = null;
+var isMdpiImageURL = function isMdpiImageURL(imageURL) {
+  try {
+    return new URL(imageURL, 'https://emoji.invalid').searchParams.get('scale') === 'MDPI';
+  } catch (_unused) {
+    return false;
+  }
+};
 var ResourcedEmojiComponentRenderStatesEnum = /*#__PURE__*/function (ResourcedEmojiComponentRenderStatesEnum) {
   ResourcedEmojiComponentRenderStatesEnum["INITIAL"] = "INITIAL";
   ResourcedEmojiComponentRenderStatesEnum["FALLBACK"] = "FALLBACK";
@@ -60,8 +71,12 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     setImageLoadError = _useState6[1];
   var _useState7 = useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    resolvedEmojiProvider = _useState8[0],
-    setResolvedEmojiProvider = _useState8[1];
+    failedAdaptiveImageURL = _useState8[0],
+    setFailedAdaptiveImageURL = _useState8[1];
+  var _useState9 = useState(),
+    _useState0 = _slicedToArray(_useState9, 2),
+    resolvedEmojiProvider = _useState0[0],
+    setResolvedEmojiProvider = _useState0[1];
   var fetchOrGetEmoji = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_emojiProvider, emojiId) {
       var optimisticFetch,
@@ -178,6 +193,10 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
   }, [emoji, loaded, optimisticImageURL, imageLoadError]);
   var optimisticEmojiDescription = useMemo(function () {
+    if (optimisticImageURL && emoji && (emoji.type === 'STANDARD' || emoji.type === 'ATLASSIAN') && fitToHeight * Math.max(1, getPixelRatio()) > 32 && isMdpiImageURL(optimisticImageURL) && fg('platform_emoji_adaptive_image_size')) {
+      return emoji;
+    }
+
     // reduce blast radius by targeting page title
     if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
       return {
@@ -210,9 +229,33 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
         }
       };
     }
+    if (fg('platform_emoji_adaptive_image_size') && emoji && (emoji.type === 'STANDARD' || emoji.type === 'ATLASSIAN') && emoji.representation && 'imagePath' in emoji.representation && emoji.representation.height > 32 && fitToHeight > 0 && fitToHeight * Math.max(1, getPixelRatio()) <= 32) {
+      var _resolvedEmojiProvide;
+      var imageURL = resolvedEmojiProvider === null || resolvedEmojiProvider === void 0 || (_resolvedEmojiProvide = resolvedEmojiProvider.getOptimisticImageURL) === null || _resolvedEmojiProvide === void 0 ? void 0 : _resolvedEmojiProvide.call(resolvedEmojiProvider, {
+        id: id,
+        shortName: shortName,
+        fallback: fallback
+      });
+      // MDPI standard/Atlassian images are 32px. Reuse the provider's URL instead of
+      // downloading a larger catalogue image when those pixels already cover the display.
+      if (imageURL && imageURL !== failedAdaptiveImageURL && isMdpiImageURL(imageURL)) {
+        return _objectSpread(_objectSpread({}, emoji), {}, {
+          representation: {
+            imagePath: imageURL,
+            width: 32,
+            height: 32
+          },
+          altRepresentation: undefined
+        });
+      }
+    }
     return emoji;
-  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
+  }, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji, resolvedEmojiProvider, failedAdaptiveImageURL]);
   var handleOnLoadError = useCallback(function (emojiId) {
+    if (fg('platform_emoji_adaptive_image_size') && !optimisticImageURL && optimisticEmojiDescription !== emoji && optimisticEmojiDescription !== null && optimisticEmojiDescription !== void 0 && optimisticEmojiDescription.representation && 'imagePath' in optimisticEmojiDescription.representation) {
+      setFailedAdaptiveImageURL(optimisticEmojiDescription.representation.imagePath);
+      return;
+    }
     setImageLoadError(true);
     var reason = 'load error';
     onEmojiLoadFail && onEmojiLoadFail(emojiId.id, reason);
@@ -223,7 +266,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
         emojiId: emojiId.id
       }
     });
-  }, [onEmojiLoadFail]);
+  }, [onEmojiLoadFail, optimisticImageURL, optimisticEmojiDescription, emoji]);
   var handleOnLoadSuccess = useCallback(function (emojiId) {
     onEmojiLoadSuccess && onEmojiLoadSuccess(emojiId.id);
   }, [onEmojiLoadSuccess]);

package/dist/esm/util/analytics/createEvent.js

@@ -10,7 +10,7 @@ export var createEvent = function createEvent(eventType, action, actionSubject,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "73.3.6"
+      packageVersion: "73.3.7"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "73.3.7",
+	"version": "73.3.8",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"