@atlaskit/emoji 64.5.2 → 64.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/emoji
 
+## 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/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; } }
@@ -246,6 +254,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) {

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,8 +29,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _EmojiUtils = require("../../api/EmojiUtils");
-
 var _typeHelpers = require("../../util/type-helpers");
 
 var _logger = _interopRequireDefault(require("../../util/logger"));
@@ -101,55 +99,43 @@ 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 +152,38 @@ 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'
-              }
-            });
-          }
+      emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+        _this2.setState({
+          cachedEmoji: cachedEmoji,
+          invalidImage: false
+        });
+      }).catch(function () {
+        _this2.setState({
+          cachedEmoji: undefined,
+          invalidImage: true
         });
-        return undefined;
-      }
-
-      if ((0, _typeHelpers.isEmojiDescription)(loadedEmoji)) {
-        return loadedEmoji;
-      }
 
-      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

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.5.2",
+	"version": "64.6.0",
 	"sideEffects": false
 }

package/dist/es2019/api/EmojiResource.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { AbstractResource, utils as serviceUtils } from '@atlaskit/util-service-support';
 import { selectedToneStorageKey } from '../util/constants';
-import { isMediaEmoji, isPromise, toEmojiId } from '../util/type-helpers';
+import { isMediaEmoji, isMediaRepresentation, isPromise, toEmojiId } from '../util/type-helpers';
 import storageAvailable from '../util/storage-available';
 import { ProviderTypes } from '../types';
 import debug from '../util/logger';
@@ -181,6 +181,23 @@ export class EmojiResource extends AbstractResource {
       super.notifyResult(result);
     }
   }
+  /**
+   *  Returns the EmojiDescription with a valid media path that includes query token and client attributes to access the emoji media inline.
+   */
+
+
+  async getMediaEmojiDescriptionURLWithInlineToken(emoji) {
+    if (this.siteEmojiResource && isMediaRepresentation(emoji.representation)) {
+      const tokenisedMediaPath = await this.siteEmojiResource.generateTokenisedMediaURL(emoji);
+      return { ...emoji,
+        representation: { ...emoji.representation,
+          mediaPath: tokenisedMediaPath
+        }
+      };
+    }
+
+    return emoji;
+  }
 
   loadMediaEmoji(emoji, useAlt) {
     if (!this.siteEmojiResource || !isMediaEmoji(emoji)) {

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

@@ -63,6 +63,30 @@ export default class SiteEmojiResource {
     this.tokenManager.addToken('read', mediaApiToken);
     this.mediaEmojiCache = new MediaEmojiCache(this.tokenManager);
   }
+  /**
+   * Will generate an emoji media path that is inclusive of client and token within the query parameter
+   */
+
+
+  async generateTokenisedMediaURL(emoji) {
+    if (emoji && isMediaRepresentation(emoji.representation)) {
+      const currentMediaPathURL = new URL(emoji.representation.mediaPath);
+      const currentMediaPathPARAMS = currentMediaPathURL.searchParams;
+      const readToken = await this.tokenManager.getToken('read');
+
+      if (currentMediaPathPARAMS.get('token') !== readToken.jwt) {
+        currentMediaPathPARAMS.set('token', readToken.jwt);
+      }
+
+      if (currentMediaPathPARAMS.get('client') !== readToken.clientId) {
+        currentMediaPathPARAMS.set('client', readToken.clientId);
+      }
+
+      return currentMediaPathURL.toString();
+    }
+
+    throw Error('Emoji resource is not of type Media Representation');
+  }
   /**
    * Will load media emoji, returning a new EmojiDescription if, for example,
    * the URL has changed.

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

@@ -1,12 +1,23 @@
 import { utils as serviceUtils } from '@atlaskit/util-service-support'; // expire 30 seconds early to factor in latency, slow services, etc
 
-export const expireAdjustment = 30;
+export const EXPIRES_AT_LATENCY_IN_SECONDS = 30;
 export default class TokenManager {
   constructor(siteServiceConfig) {
     this.siteServiceConfig = siteServiceConfig;
     this.tokens = new Map();
   }
 
+  isValidToken(mediaApiToken) {
+    const nowInSeconds = Date.now() / 1000;
+    const expiresAt = mediaApiToken.expiresAt - EXPIRES_AT_LATENCY_IN_SECONDS;
+
+    if (nowInSeconds < expiresAt) {
+      return true;
+    }
+
+    return false;
+  }
+
   addToken(type, mediaApiToken) {
     this.tokens.set(type, {
       mediaApiToken
@@ -27,10 +38,7 @@ export default class TokenManager {
     } = tokenDetail;
 
     if (mediaApiToken) {
-      const nowInSeconds = Date.now() / 1000;
-      const expiresAt = mediaApiToken.expiresAt - expireAdjustment;
-
-      if (nowInSeconds < expiresAt && !forceRefresh) {
+      if (this.isValidToken(mediaApiToken) && !forceRefresh) {
         // still valid
         return Promise.resolve(mediaApiToken);
       }

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

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
-import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-helpers';
+import { isMediaEmoji } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
@@ -48,53 +47,36 @@ export class CachingMediaEmoji extends PureComponent {
   constructor(props, context) {
     super(props);
 
-    _defineProperty(this, "mounted", false);
-
-    _defineProperty(this, "handleLoadError", (_emojiId, emoji) => {
-      const {
-        invalidImage
-      } = this.state;
+    _defineProperty(this, "handleLoadError", _emojiId => {
       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);
   }
 
   componentDidMount() {
-    this.mounted = true;
     sampledUfoRenderedEmoji(this.props.emoji).markFMP();
   }
 
-  componentWillUnmount() {
-    this.mounted = false;
-  }
+  componentDidUpdate() {
+    var _this$state$cachedEmo;
 
-  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
-    if (nextProps.emoji !== this.props.emoji) {
-      if (this.mounted) {
-        this.setState({
-          cachedEmoji: this.loadEmoji(nextProps.emoji, nextContext, false)
-        });
-      }
+    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);
     }
   }
 
-  loadEmoji(emoji, context, forceLoad) {
+  loadEmoji(emoji, context) {
     if (!context) {
       return;
     }
@@ -111,54 +93,29 @@ export class CachingMediaEmoji extends PureComponent {
       return undefined;
     }
 
-    const {
-      fitToHeight
-    } = this.props;
-    const useAlt = shouldUseAltRepresentation(emoji, fitToHeight);
-    const optimisticRendering = emojiProvider.optimisticMediaRendering(emoji, useAlt);
-
-    if (optimisticRendering && !forceLoad) {
-      debug('Optimistic rendering', emoji.shortName);
-      return emoji;
-    }
-
     debug('Loading image via media cache', emoji.shortName);
-    const loadedEmoji = emojiProvider.loadMediaEmoji(emoji, useAlt);
-
-    if (isPromise(loadedEmoji)) {
-      loadedEmoji.then(cachedEmoji => {
-        if (this.mounted) {
-          this.setState({
-            cachedEmoji,
-            invalidImage: !cachedEmoji
-          });
-        }
-      }).catch(() => {
-        if (this.mounted) {
-          this.setState({
-            cachedEmoji: undefined,
-            invalidImage: true
-          });
-          sampledUfoRenderedEmoji(emoji).failure({
-            metadata: {
-              reason: 'failed to load media emoji'
-            }
-          });
+    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(cachedEmoji => {
+      this.setState({
+        cachedEmoji,
+        invalidImage: false
+      });
+    }).catch(() => {
+      this.setState({
+        cachedEmoji: undefined,
+        invalidImage: true
+      });
+      sampledUfoRenderedEmoji(emoji).failure({
+        metadata: {
+          reason: 'failed to load media emoji'
         }
       });
-      return undefined;
-    }
-
-    if (isEmojiDescription(loadedEmoji)) {
-      return loadedEmoji;
-    }
-
-    return undefined;
+    });
   }
 
   render() {
     const {
-      cachedEmoji
+      cachedEmoji,
+      invalidImage
     } = this.state;
     const {
       children,
@@ -167,7 +124,7 @@ export class CachingMediaEmoji extends PureComponent {
     } = this.props;
     let emojiComponent;
 
-    if (cachedEmoji) {
+    if (cachedEmoji && !invalidImage) {
       emojiComponent = /*#__PURE__*/React.createElement(Emoji, _extends({}, otherProps, {
         emoji: cachedEmoji,
         onLoadError: this.handleLoadError

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.5.2",
+	"version": "64.6.0",
 	"sideEffects": false
 }

package/dist/esm/api/EmojiResource.js

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -7,13 +9,17 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import { AbstractResource, utils as serviceUtils } from '@atlaskit/util-service-support';
 import { selectedToneStorageKey } from '../util/constants';
-import { isMediaEmoji, isPromise, toEmojiId } from '../util/type-helpers';
+import { isMediaEmoji, isMediaRepresentation, isPromise, toEmojiId } from '../util/type-helpers';
 import storageAvailable from '../util/storage-available';
 import { ProviderTypes } from '../types';
 import debug from '../util/logger';
@@ -221,6 +227,52 @@ export var EmojiResource = /*#__PURE__*/function (_AbstractResource) {
         _get(_getPrototypeOf(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(emoji) {
+        var tokenisedMediaPath;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(this.siteEmojiResource && 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) {

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

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -73,12 +75,65 @@ var SiteEmojiResource = /*#__PURE__*/function () {
     this.mediaEmojiCache = new MediaEmojiCache(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
    */
 
 
   _createClass(SiteEmojiResource, [{
+    key: "generateTokenisedMediaURL",
+    value: function () {
+      var _generateTokenisedMediaURL = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(emoji) {
+        var currentMediaPathURL, currentMediaPathPARAMS, readToken;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(emoji && 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 (!isMediaEmoji(emoji)) {

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

@@ -2,7 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import { utils as serviceUtils } from '@atlaskit/util-service-support'; // expire 30 seconds early to factor in latency, slow services, etc
 
-export var expireAdjustment = 30;
+export var EXPIRES_AT_LATENCY_IN_SECONDS = 30;
 
 var TokenManager = /*#__PURE__*/function () {
   function TokenManager(siteServiceConfig) {
@@ -13,6 +13,18 @@ var TokenManager = /*#__PURE__*/function () {
   }
 
   _createClass(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, {
@@ -34,10 +46,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/esm/components/common/CachingEmoji.js

@@ -16,8 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
-import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-helpers';
+import { isMediaEmoji } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
@@ -69,57 +68,44 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "mounted", false);
-
-    _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId, emoji) {
-      var invalidImage = _this.state.invalidImage;
+    _defineProperty(_assertThisInitialized(_this), "handleLoadError", function (_emojiId) {
       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;
   }
 
   _createClass(CachingMediaEmoji, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.mounted = true;
       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) {
@@ -136,53 +122,31 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
         return undefined;
       }
 
-      var fitToHeight = this.props.fitToHeight;
-      var useAlt = shouldUseAltRepresentation(emoji, fitToHeight);
-      var optimisticRendering = emojiProvider.optimisticMediaRendering(emoji, useAlt);
-
-      if (optimisticRendering && !forceLoad) {
-        debug('Optimistic rendering', emoji.shortName);
-        return emoji;
-      }
-
       debug('Loading image via media cache', emoji.shortName);
-      var loadedEmoji = emojiProvider.loadMediaEmoji(emoji, useAlt);
-
-      if (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
-            });
-
-            sampledUfoRenderedEmoji(emoji).failure({
-              metadata: {
-                reason: 'failed to load media emoji'
-              }
-            });
-          }
+      emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+        _this2.setState({
+          cachedEmoji: cachedEmoji,
+          invalidImage: false
+        });
+      }).catch(function () {
+        _this2.setState({
+          cachedEmoji: undefined,
+          invalidImage: true
         });
-        return undefined;
-      }
-
-      if (isEmojiDescription(loadedEmoji)) {
-        return loadedEmoji;
-      }
 
-      return undefined;
+        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,
@@ -191,7 +155,7 @@ export var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
 
       var emojiComponent;
 
-      if (cachedEmoji) {
+      if (cachedEmoji && !invalidImage) {
         emojiComponent = /*#__PURE__*/React.createElement(Emoji, _extends({}, otherProps, {
           emoji: cachedEmoji,
           onLoadError: this.handleLoadError

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.5.2",
+	"version": "64.6.0",
 	"sideEffects": false
 }

package/dist/types/api/EmojiResource.d.ts

@@ -69,6 +69,10 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     protected isLoaded: () => false | EmojiRepository | undefined;
     protected retryIfLoading<T>(retry: Retry<T>, defaultResponse: T): Promise<T>;
     protected notifyResult(result: EmojiSearchResult): void;
+    /**
+     *  Returns the EmojiDescription with a valid media path that includes query token and client attributes to access the emoji media inline.
+     */
+    getMediaEmojiDescriptionURLWithInlineToken(emoji: EmojiDescription): Promise<EmojiDescription>;
     loadMediaEmoji(emoji: EmojiDescription, useAlt?: boolean): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
     optimisticMediaRendering(emoji: EmojiDescription, useAlt?: boolean): boolean;
     filter(query?: string, options?: SearchOptions): void;

package/dist/types/api/media/SiteEmojiResource.d.ts

@@ -17,6 +17,10 @@ export default class SiteEmojiResource {
     private mediaEmojiCache;
     protected tokenManager: TokenManager;
     constructor(siteServiceConfig: ServiceConfig, mediaApiToken: MediaApiToken);
+    /**
+     * Will generate an emoji media path that is inclusive of client and token within the query parameter
+     */
+    generateTokenisedMediaURL(emoji: EmojiDescription): Promise<string>;
     /**
      * Will load media emoji, returning a new EmojiDescription if, for example,
      * the URL has changed.

package/dist/types/api/media/TokenManager.d.ts

@@ -1,11 +1,12 @@
 import { MediaApiToken } from '../../types';
 import { ServiceConfig } from '@atlaskit/util-service-support';
-export declare const expireAdjustment = 30;
+export declare const EXPIRES_AT_LATENCY_IN_SECONDS = 30;
 export declare type TokenType = 'read' | 'upload';
 export default class TokenManager {
     private siteServiceConfig;
     private tokens;
     constructor(siteServiceConfig: ServiceConfig);
+    isValidToken(mediaApiToken: MediaApiToken): boolean;
     addToken(type: TokenType, mediaApiToken: MediaApiToken): void;
     getToken(type: TokenType, forceRefresh?: boolean): Promise<MediaApiToken>;
 }

package/dist/types/components/common/CachingEmoji.d.ts

@@ -19,13 +19,11 @@ export declare const CachingEmoji: (props: CachingEmojiProps) => JSX.Element;
  * rendering paths depending on caching strategy.
  */
 export declare class CachingMediaEmoji extends PureComponent<CachingEmojiProps, State> {
-    private mounted;
     static contextType: React.Context<EmojiContextType>;
     context: ContextType<typeof EmojiContext>;
     constructor(props: EmojiProps, context: ContextType<typeof EmojiContext>);
     componentDidMount(): void;
-    componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: EmojiProps, nextContext: EmojiContextType): void;
+    componentDidUpdate(): void;
     private loadEmoji;
     private handleLoadError;
     render(): JSX.Element;

package/dist/types/types.d.ts

@@ -4,6 +4,12 @@ import { CategoryId } from './components/picker/categories';
 import { Provider } from '@atlaskit/util-service-support/types';
 export type { CategoryId } from './components/picker/categories';
 export interface EmojiProvider extends Provider<string, EmojiSearchResult, any, undefined, SearchOptions> {
+    /**
+     * Returns an immutable copy of EmojiDescription where mediaPath has token and client appended to url
+     *
+     * Will allow emoji to render site emojis without needing to fail first
+     */
+    getMediaEmojiDescriptionURLWithInlineToken(emoji: EmojiDescription): Promise<EmojiDescription>;
     /**
      * Returns the first matching emoji matching the shortName, or null if none found.
      *

package/element/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "64.5.2",
+  "version": "64.6.0",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-client": "^15.1.0",
+    "@atlaskit/media-client": "^16.0.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/textfield": "^5.1.0",
     "@atlaskit/theme": "^12.1.0",
@@ -54,7 +54,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/editor-test-helpers": "^17.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/media-core": "^32.3.0",
+    "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlaskit/visual-regression": "*",

package/picker/package.json

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

package/resource/package.json

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

package/typeahead/package.json

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

package/types/package.json

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

package/utils/package.json

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