@atlaskit/emoji 64.5.2 → 64.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/emoji
 
+## 64.7.0
+
+### Minor Changes
+
+- [`2b241314079`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b241314079) - improve lazy load emoji with placeholder and improved analtyics tracking
+
+## 64.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 64.6.0
+
+### Minor Changes
+
+- [`b926172a999`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b926172a999) - Custom Emoji Assets now load using inline media tokens preventing 401s
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 64.5.2
 
 ### Patch Changes

package/admin/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/admin.js",
   "module": "../dist/esm/admin.js",
   "module:es2019": "../dist/es2019/admin.js",
+  "sideEffects": false,
   "types": "../dist/types/admin.d.ts"
 }

package/dist/cjs/api/EmojiRepository.js

@@ -307,6 +307,10 @@ var EmojiRepository = /*#__PURE__*/function () {
       // frequent category being shown in the picker).
 
       if (this.dynamicCategoryList.indexOf(_constants.frequentCategory) === -1) {
+        if (typeof window === 'undefined') {
+          return;
+        }
+
         window.setTimeout(function () {
           _this2.dynamicCategoryList.push(_constants.frequentCategory);
         });

package/dist/cjs/api/EmojiResource.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.supportsUploadFeature = exports.default = exports.EmojiResource = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -43,6 +47,10 @@ var _SiteEmojiResource = _interopRequireDefault(require("./media/SiteEmojiResour
 
 var _analytics = require("../util/analytics");
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -204,6 +212,10 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
   }, {
     key: "loadStoredTone",
     value: function loadStoredTone() {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+
       var storedToneString = window.localStorage.getItem(_constants.selectedToneStorageKey);
 
       if (storedToneString) {
@@ -246,6 +258,52 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
         (0, _get2.default)((0, _getPrototypeOf2.default)(EmojiResource.prototype), "notifyResult", this).call(this, result);
       }
     }
+    /**
+     *  Returns the EmojiDescription with a valid media path that includes query token and client attributes to access the emoji media inline.
+     */
+
+  }, {
+    key: "getMediaEmojiDescriptionURLWithInlineToken",
+    value: function () {
+      var _getMediaEmojiDescriptionURLWithInlineToken = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emoji) {
+        var tokenisedMediaPath;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(this.siteEmojiResource && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 3;
+                return this.siteEmojiResource.generateTokenisedMediaURL(emoji);
+
+              case 3:
+                tokenisedMediaPath = _context.sent;
+                return _context.abrupt("return", _objectSpread(_objectSpread({}, emoji), {}, {
+                  representation: _objectSpread(_objectSpread({}, emoji.representation), {}, {
+                    mediaPath: tokenisedMediaPath
+                  })
+                }));
+
+              case 5:
+                return _context.abrupt("return", emoji);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function getMediaEmojiDescriptionURLWithInlineToken(_x) {
+        return _getMediaEmojiDescriptionURLWithInlineToken.apply(this, arguments);
+      }
+
+      return getMediaEmojiDescriptionURLWithInlineToken;
+    }()
   }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {
@@ -471,6 +529,10 @@ var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
     value: function setSelectedTone(tone) {
       this.selectedTone = tone;
 
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if ((0, _storageAvailable.default)('localStorage')) {
         try {
           window.localStorage.setItem(_constants.selectedToneStorageKey, tone ? tone.toString() : '');

package/dist/cjs/api/EmojiUtils.js

@@ -64,6 +64,10 @@ var calculateScale = function calculateScale(getRatio) {
 };
 
 var getPixelRatio = function getPixelRatio() {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
   return window.devicePixelRatio;
 };
 

package/dist/cjs/api/internal/UsageFrequencyTracker.js

@@ -150,7 +150,10 @@ var Gateway = /*#__PURE__*/function () {
         }
       };
 
-      window.setTimeout(wrappedFunc);
+      if (typeof window !== 'undefined') {
+        window.setTimeout(wrappedFunc);
+      }
+
       return true;
     }
   }, {

package/dist/cjs/api/media/SiteEmojiResource.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mediaProportionOfProgress = exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -92,12 +96,65 @@ var SiteEmojiResource = /*#__PURE__*/function () {
     this.mediaEmojiCache = new _MediaEmojiCache.default(this.tokenManager);
   }
   /**
-   * Will load media emoji, returning a new EmojiDescription if, for example,
-   * the URL has changed.
+   * Will generate an emoji media path that is inclusive of client and token within the query parameter
    */
 
 
   (0, _createClass2.default)(SiteEmojiResource, [{
+    key: "generateTokenisedMediaURL",
+    value: function () {
+      var _generateTokenisedMediaURL = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emoji) {
+        var currentMediaPathURL, currentMediaPathPARAMS, readToken;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(emoji && (0, _typeHelpers.isMediaRepresentation)(emoji.representation))) {
+                  _context.next = 9;
+                  break;
+                }
+
+                currentMediaPathURL = new URL(emoji.representation.mediaPath);
+                currentMediaPathPARAMS = currentMediaPathURL.searchParams;
+                _context.next = 5;
+                return this.tokenManager.getToken('read');
+
+              case 5:
+                readToken = _context.sent;
+
+                if (currentMediaPathPARAMS.get('token') !== readToken.jwt) {
+                  currentMediaPathPARAMS.set('token', readToken.jwt);
+                }
+
+                if (currentMediaPathPARAMS.get('client') !== readToken.clientId) {
+                  currentMediaPathPARAMS.set('client', readToken.clientId);
+                }
+
+                return _context.abrupt("return", currentMediaPathURL.toString());
+
+              case 9:
+                throw Error('Emoji resource is not of type Media Representation');
+
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function generateTokenisedMediaURL(_x) {
+        return _generateTokenisedMediaURL.apply(this, arguments);
+      }
+
+      return generateTokenisedMediaURL;
+    }()
+    /**
+     * Will load media emoji, returning a new EmojiDescription if, for example,
+     * the URL has changed.
+     */
+
+  }, {
     key: "loadMediaEmoji",
     value: function loadMediaEmoji(emoji, useAlt) {
       if (!(0, _typeHelpers.isMediaEmoji)(emoji)) {

package/dist/cjs/api/media/TokenManager.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.expireAdjustment = exports.default = void 0;
+exports.default = exports.EXPIRES_AT_LATENCY_IN_SECONDS = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -14,8 +14,8 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 
 // expire 30 seconds early to factor in latency, slow services, etc
-var expireAdjustment = 30;
-exports.expireAdjustment = expireAdjustment;
+var EXPIRES_AT_LATENCY_IN_SECONDS = 30;
+exports.EXPIRES_AT_LATENCY_IN_SECONDS = EXPIRES_AT_LATENCY_IN_SECONDS;
 
 var TokenManager = /*#__PURE__*/function () {
   function TokenManager(siteServiceConfig) {
@@ -25,6 +25,18 @@ var TokenManager = /*#__PURE__*/function () {
   }
 
   (0, _createClass2.default)(TokenManager, [{
+    key: "isValidToken",
+    value: function isValidToken(mediaApiToken) {
+      var nowInSeconds = Date.now() / 1000;
+      var expiresAt = mediaApiToken.expiresAt - EXPIRES_AT_LATENCY_IN_SECONDS;
+
+      if (nowInSeconds < expiresAt) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
     key: "addToken",
     value: function addToken(type, mediaApiToken) {
       this.tokens.set(type, {
@@ -46,10 +58,7 @@ var TokenManager = /*#__PURE__*/function () {
           activeTokenRefresh = _tokenDetail.activeTokenRefresh;
 
       if (mediaApiToken) {
-        var nowInSeconds = Date.now() / 1000;
-        var expiresAt = mediaApiToken.expiresAt - expireAdjustment;
-
-        if (nowInSeconds < expiresAt && !forceRefresh) {
+        if (this.isValidToken(mediaApiToken) && !forceRefresh) {
           // still valid
           return Promise.resolve(mediaApiToken);
         }

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

@@ -29,10 +29,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _EmojiUtils = require("../../api/EmojiUtils");
-
 var _typeHelpers = require("../../util/type-helpers");
 
+var _types = require("../../types");
+
 var _logger = _interopRequireDefault(require("../../util/logger"));
 
 var _Emoji = _interopRequireDefault(require("./Emoji"));
@@ -48,7 +48,7 @@ var _constants = require("../../util/constants");
 var _EmojiContext = require("../../context/EmojiContext");
 
 var _excluded = ["placeholderSize"],
-    _excluded2 = ["children", "placeholderSize"];
+    _excluded2 = ["children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -68,8 +68,12 @@ var CachingEmoji = function CachingEmoji(props) {
       emojiProps = (0, _objectWithoutProperties2.default)(props, _excluded); // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
-    source: 'caching-emoji'
+    source: 'caching-emoji',
+    emoji: emojiProps.emoji.shortName
   });
+  (0, _react.useEffect)(function () {
+    (0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji).mark(_types.UfoEmojiTimings.MOUNTED_END); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   var emojiNode = function emojiNode() {
     if ((0, _typeHelpers.isMediaEmoji)(props.emoji)) {
@@ -101,55 +105,38 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     (0, _classCallCheck2.default)(this, CachingMediaEmoji);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId, emoji) {
-      var invalidImage = _this.state.invalidImage;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId) {
       (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
         metadata: {
           reason: 'load error'
         }
       });
 
-      if (invalidImage || !emoji) {
-        // do nothing, bad image
-        return;
-      }
-
       _this.setState({
-        cachedEmoji: _this.loadEmoji(emoji, _this.context, true)
+        invalidImage: true
       });
     });
     _this.state = {
-      cachedEmoji: _this.loadEmoji(props.emoji, context, false)
+      cachedEmoji: undefined
     };
+
+    _this.loadEmoji(props.emoji, context);
+
     return _this;
   }
 
   (0, _createClass2.default)(CachingMediaEmoji, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.mounted = true;
-      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emoji).markFMP();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
-      if (nextProps.emoji !== this.props.emoji) {
-        if (this.mounted) {
-          this.setState({
-            cachedEmoji: this.loadEmoji(nextProps.emoji, nextContext, false)
-          });
-        }
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this$state$cachedEmo;
+
+      if (this.props.emoji.shortName !== ((_this$state$cachedEmo = this.state.cachedEmoji) === null || _this$state$cachedEmo === void 0 ? void 0 : _this$state$cachedEmo.shortName)) {
+        this.loadEmoji(this.props.emoji, this.context);
       }
     }
   }, {
     key: "loadEmoji",
-    value: function loadEmoji(emoji, context, forceLoad) {
+    value: function loadEmoji(emoji, context) {
       var _this2 = this;
 
       if (!context) {
@@ -166,60 +153,40 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
         return undefined;
       }
 
-      var fitToHeight = this.props.fitToHeight;
-      var useAlt = (0, _EmojiUtils.shouldUseAltRepresentation)(emoji, fitToHeight);
-      var optimisticRendering = emojiProvider.optimisticMediaRendering(emoji, useAlt);
-
-      if (optimisticRendering && !forceLoad) {
-        (0, _logger.default)('Optimistic rendering', emoji.shortName);
-        return emoji;
-      }
-
       (0, _logger.default)('Loading image via media cache', emoji.shortName);
-      var loadedEmoji = emojiProvider.loadMediaEmoji(emoji, useAlt);
-
-      if ((0, _typeHelpers.isPromise)(loadedEmoji)) {
-        loadedEmoji.then(function (cachedEmoji) {
-          if (_this2.mounted) {
-            _this2.setState({
-              cachedEmoji: cachedEmoji,
-              invalidImage: !cachedEmoji
-            });
-          }
-        }).catch(function () {
-          if (_this2.mounted) {
-            _this2.setState({
-              cachedEmoji: undefined,
-              invalidImage: true
-            });
-
-            (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
-              metadata: {
-                reason: 'failed to load media emoji'
-              }
-            });
-          }
+      (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_START);
+      emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+        _this2.setState({
+          cachedEmoji: cachedEmoji,
+          invalidImage: false
         });
-        return undefined;
-      }
 
-      if ((0, _typeHelpers.isEmojiDescription)(loadedEmoji)) {
-        return loadedEmoji;
-      }
+        (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_END);
+      }).catch(function () {
+        _this2.setState({
+          cachedEmoji: undefined,
+          invalidImage: true
+        });
 
-      return undefined;
+        (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
+          metadata: {
+            reason: 'failed to load media emoji'
+          }
+        });
+      });
     }
   }, {
     key: "render",
     value: function render() {
-      var cachedEmoji = this.state.cachedEmoji;
+      var _this$state = this.state,
+          cachedEmoji = _this$state.cachedEmoji,
+          invalidImage = _this$state.invalidImage;
       var _this$props = this.props,
           children = _this$props.children,
-          placeholderSize = _this$props.placeholderSize,
           otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
       var emojiComponent;
 
-      if (cachedEmoji) {
+      if (cachedEmoji && !invalidImage) {
         emojiComponent = /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, otherProps, {
           emoji: cachedEmoji,
           onLoadError: this.handleLoadError
@@ -227,13 +194,13 @@ var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
       } else {
         var _this$props2 = this.props,
             emoji = _this$props2.emoji,
-            _placeholderSize = _this$props2.placeholderSize,
+            placeholderSize = _this$props2.placeholderSize,
             showTooltip = _this$props2.showTooltip,
             fitToHeight = _this$props2.fitToHeight;
         var shortName = emoji.shortName,
             representation = emoji.representation;
         emojiComponent = /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
-          size: fitToHeight || _placeholderSize,
+          size: fitToHeight || placeholderSize,
           shortName: shortName,
           showTooltip: showTooltip,
           representation: representation

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

@@ -25,7 +25,8 @@ var _styles = require("./styles");
 var DeleteButton = function DeleteButton(props) {
   return (0, _core.jsx)("span", {
     css: _styles.deleteButton,
-    className: _styles.emojiDeleteButton
+    className: _styles.emojiDeleteButton,
+    "data-testid": "emoji-delete-button"
   }, (0, _core.jsx)(_customThemeButton.default, {
     iconBefore: (0, _core.jsx)(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,