@atlaskit/emoji 64.5.2 → 64.7.0

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

@@ -2,18 +2,22 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Emoji = void 0;
+exports.default = exports.SpriteEmoji = exports.ImageEmoji = exports.Emoji = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _core = require("@emotion/core");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _EmojiUtils = require("../../api/EmojiUtils");
 
@@ -21,6 +25,8 @@ var _constants = require("../../util/constants");
 
 var _typeHelpers = require("../../util/type-helpers");
 
+var _types = require("../../types");
+
 var _mouse = require("../../util/mouse");
 
 var _DeleteButton = _interopRequireDefault(require("./DeleteButton"));
@@ -29,6 +35,16 @@ var _styles = require("./styles");
 
 var _analytics = require("../../util/analytics");
 
+var _ = require("../..");
+
+var _reactIntersectionObserver = require("react-intersection-observer");
+
+var _browserSupport = require("../../util/browser-support");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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; }
@@ -97,7 +113,7 @@ var handleImageError = function handleImageError(props, event) {
 // When rendering 1500+ emoji using class based components had a significant impact.
 
 
-var renderAsSprite = function renderAsSprite(props) {
+var SpriteEmoji = function SpriteEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -128,11 +144,9 @@ var renderAsSprite = function renderAsSprite(props) {
     backgroundSize: "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%")
   }, sizing);
 
-  var emojiNode = (0, _core.jsx)("span", {
-    className: _styles.emojiSprite,
-    style: style
-  }, "\xA0");
   return (0, _core.jsx)("span", {
+    "data-testid": "sprite-emoji-".concat(emoji.shortName),
+    "data-emoji-type": "sprite",
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
     css: _styles.emojiContainer,
@@ -148,11 +162,16 @@ var renderAsSprite = function renderAsSprite(props) {
     },
     "aria-label": emoji.shortName,
     title: showTooltip ? emoji.shortName : ''
-  }, emojiNode);
+  }, (0, _core.jsx)("span", {
+    className: _styles.emojiSprite,
+    style: style
+  }, "\xA0"));
 }; // Keep as pure functional component, see renderAsSprite.
 
 
-var renderAsImage = function renderAsImage(props) {
+exports.SpriteEmoji = SpriteEmoji;
+
+var ImageEmoji = function ImageEmoji(props) {
   var emoji = props.emoji,
       fitToHeight = props.fitToHeight,
       selected = props.selected,
@@ -202,16 +221,28 @@ var renderAsImage = function renderAsImage(props) {
   };
 
   var onLoad = function onLoad() {
+    (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.ONLOAD_END);
     (0, _analytics.sampledUfoRenderedEmoji)(emoji).success();
-  }; // Pass src attribute as key to force React to rerender img node since browser does not
-  // change preview image until loaded
-  // We currently have the following error: property 'loading' does not exist on type 'DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>'
-  // The fix for this was added as a part of @types/react@16.9.20 - https://github.com/facebook/react/issues/16942
-  // TODO: remove @ts-ignore for the <img> below when the @types/react will be bumped from v16.8.0 to v16.9.20 or higher.
-
+  };
 
+  var onBeforeLoad = (0, _react.useCallback)(function () {
+    (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.ONLOAD_START);
+  }, [emoji]);
+
+  var _useInView = (0, _reactIntersectionObserver.useInView)({
+    triggerOnce: true
+  }),
+      _useInView2 = (0, _slicedToArray2.default)(_useInView, 2),
+      ref = _useInView2[0],
+      inView = _useInView2[1];
+
+  (0, _react.useEffect)(function () {
+    if (inView) {
+      onBeforeLoad();
+    }
+  }, [inView, onBeforeLoad]);
   var emojiNode = (0, _core.jsx)("img", (0, _extends2.default)({
-    // @ts-ignore
+    //@ts-ignore
     loading: "lazy",
     src: src,
     key: src,
@@ -226,7 +257,29 @@ var renderAsImage = function renderAsImage(props) {
     onError: onError,
     onLoad: onLoad
   }, sizing));
+  var placeholder = (0, _core.jsx)(_.EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    size: fitToHeight,
+    showTooltip: showTooltip,
+    representation: emoji.representation
+  });
+
+  var renderLazyLoadedEmoji = function renderLazyLoadedEmoji() {
+    // if browser not supported, render emoji node directly
+    if (!_browserSupport.isIntersectionObserverSupported) {
+      return emojiNode;
+    }
+
+    if (inView) {
+      return emojiNode;
+    }
+
+    return placeholder;
+  };
+
   return (0, _core.jsx)("span", {
+    "data-testid": "image-emoji-".concat(emoji.shortName),
+    "data-emoji-type": "image",
     css: _styles.emojiStyles,
     tabIndex: shouldBeInteractive ? 0 : undefined,
     role: shouldBeInteractive ? 'button' : undefined,
@@ -241,18 +294,21 @@ var renderAsImage = function renderAsImage(props) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
-    title: showTooltip ? emoji.shortName : ''
-  }, deleteButton, emojiNode);
+    title: showTooltip ? emoji.shortName : '',
+    ref: ref
+  }, deleteButton, renderLazyLoadedEmoji());
 };
 
+exports.ImageEmoji = ImageEmoji;
+
 var Emoji = function Emoji(props) {
   var emoji = props.emoji; // TODO: We always prefer render as image as having accessibility issues with sprite representation
 
   if ((0, _typeHelpers.isSpriteRepresentation)(emoji.representation)) {
-    return renderAsSprite(props);
+    return (0, _core.jsx)(SpriteEmoji, props);
   }
 
-  return renderAsImage(props);
+  return (0, _core.jsx)(ImageEmoji, props);
 };
 
 exports.Emoji = Emoji;

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

@@ -41,6 +41,7 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     height: "".concat(height, "px")
   };
   return (0, _core.jsx)("span", {
+    "data-testid": "emoji-placeholder-".concat(shortName),
     "aria-label": shortName,
     className: _styles.placeholder,
     css: _styles.placeholderContainer,

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

@@ -67,6 +67,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
       if (_this.debounced) {
         clearTimeout(_this.debounced);
         _this.debounced = null;
+      }
+
+      if (typeof window === 'undefined') {
+        return;
       } // Timeout set to 30ms as to not throttle IE11
 
 
@@ -85,7 +89,11 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
       this.popup = document.createElement('div');
       document.body.appendChild(this.popup);
       this.popup.style.position = 'absolute';
-      window.addEventListener('resize', this.handleResize);
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', this.handleResize);
+      }
+
       this.applyAbsolutePosition();
       this.renderContent();
     }
@@ -98,6 +106,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       window.removeEventListener('resize', this.handleResize);
 
       if (this.popup) {
@@ -124,6 +136,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "applyAbovePosition",
     value: function applyAbovePosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       var targetNode = getTargetNode(this.props.target);
 
       if (targetNode && this.popup) {
@@ -138,6 +154,10 @@ var Popup = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "applyAbsolutePosition",
     value: function applyAbsolutePosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if (this.props.relativePosition === 'above') {
         this.applyAbovePosition();
       } else if (this.props.relativePosition === 'below') {

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

@@ -29,6 +29,8 @@ var _constants = require("../../util/constants");
 
 var _typeHelpers = require("../../util/type-helpers");
 
+var _types = require("../../types");
+
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
@@ -69,6 +71,7 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       var foundEmoji = emojiProvider.findByEmojiId(emojiId);
+      (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_START);
 
       if ((0, _typeHelpers.isPromise)(foundEmoji)) {
         this.setState({
@@ -82,6 +85,8 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
               loaded: true
             });
 
+            (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END);
+
             if (!emoji) {
               // emoji is undefined
               (0, _analytics.sampledUfoRenderedEmoji)(emojiId).failure({
@@ -99,7 +104,8 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
           });
         });
       } else {
-        // loaded
+        (0, _analytics.sampledUfoRenderedEmoji)(emojiId).mark(_types.UfoEmojiTimings.METADATA_END); // loaded
+
         this.setState({
           emoji: foundEmoji,
           loaded: true
@@ -122,6 +128,11 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       this.ready = false;
     }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).mark(_types.UfoEmojiTimings.MOUNTED_END);
+    }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -329,6 +329,10 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollToEndOfList", function () {
       var emojiPickerList = _this.refs.emojiPickerList;
 
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       if (emojiPickerList) {
         // Wait a tick to ensure repaint and updated height for picker list
         window.setTimeout(function () {
@@ -433,8 +437,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       _analytics.ufoExperiences['emoji-picker-opened'].abort();
 
       _analytics.ufoExperiences['emoji-searched'].abort();
-
-      _analytics.ufoExperiences['emoji-selection-recorded'].abort();
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",

package/dist/cjs/components/picker/EmojiPickerListSearch.js

@@ -84,6 +84,11 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
         // setting the focus to search input.
         // see FS-2056
         _this.inputRef = input;
+
+        if (typeof window === 'undefined') {
+          return;
+        }
+
         window.setTimeout(_this.focusInput);
       }
     });

package/dist/cjs/components/picker/styles.js

@@ -181,6 +181,8 @@ var emojiItem = (0, _core.css)((_css6 = {
   margin: '7px',
   minWidth: '24px',
   maxWidth: '24px'
+}), (0, _defineProperty2.default)(_css6, "& .".concat(_styles.emojiNodeStyles, " .").concat(_styles.placeholder), {
+  margin: '0'
 }), (0, _defineProperty2.default)(_css6, "& .".concat(_styles.emojiNodeStyles, " > img"), {
   position: 'relative',
   left: '50%',

package/dist/cjs/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UfoExperienceName = exports.UfoComponentName = exports.SearchSort = exports.ProviderTypes = void 0;
+exports.UfoExperienceName = exports.UfoEmojiTimingsKeys = exports.UfoEmojiTimings = exports.UfoComponentName = exports.SearchSort = exports.ProviderTypes = void 0;
 
 /**
  * Minimum information to defined an emoji is the shortName.
@@ -72,4 +72,27 @@ exports.UfoComponentName = UfoComponentName;
   UfoComponentName["EMOJI"] = "emoji";
   UfoComponentName["EMOJI_PICKER"] = "emoji-picker";
   UfoComponentName["EMOJI_PROVIDER"] = "emoji-provider";
-})(UfoComponentName || (exports.UfoComponentName = UfoComponentName = {}));
+})(UfoComponentName || (exports.UfoComponentName = UfoComponentName = {}));
+
+var UfoEmojiTimingsKeys;
+exports.UfoEmojiTimingsKeys = UfoEmojiTimingsKeys;
+
+(function (UfoEmojiTimingsKeys) {
+  UfoEmojiTimingsKeys["MOUNTED"] = "emoji-mount";
+  UfoEmojiTimingsKeys["METADATA"] = "emoji-metadata";
+  UfoEmojiTimingsKeys["MEDIADATA"] = "emoji-media";
+  UfoEmojiTimingsKeys["ONLOAD"] = "emoji-onload";
+})(UfoEmojiTimingsKeys || (exports.UfoEmojiTimingsKeys = UfoEmojiTimingsKeys = {}));
+
+var UfoEmojiTimings;
+exports.UfoEmojiTimings = UfoEmojiTimings;
+
+(function (UfoEmojiTimings) {
+  UfoEmojiTimings["MOUNTED_END"] = "emoji-mount_end";
+  UfoEmojiTimings["METADATA_START"] = "emoji-metadata_start";
+  UfoEmojiTimings["METADATA_END"] = "emoji-metadata_end";
+  UfoEmojiTimings["MEDIA_START"] = "emoji-media_start";
+  UfoEmojiTimings["MEDIA_END"] = "emoji-media_end";
+  UfoEmojiTimings["ONLOAD_START"] = "emoji-onload_start";
+  UfoEmojiTimings["ONLOAD_END"] = "emoji-onload_end";
+})(UfoEmojiTimings || (exports.UfoEmojiTimings = UfoEmojiTimings = {}));

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

@@ -31,8 +31,33 @@ var createInlineExperience = function createInlineExperience(componentName) {
   };
 };
 
+var customEmojiTimings = [{
+  key: _types.UfoEmojiTimingsKeys.MOUNTED,
+  endMark: _types.UfoEmojiTimings.MOUNTED_END
+}, {
+  key: _types.UfoEmojiTimingsKeys.METADATA,
+  component: 'resourced-emoji',
+  startMark: _types.UfoEmojiTimings.METADATA_START,
+  endMark: _types.UfoEmojiTimings.METADATA_END
+}, {
+  key: _types.UfoEmojiTimingsKeys.MEDIADATA,
+  component: 'caching-emoji',
+  startMark: _types.UfoEmojiTimings.MEDIA_START,
+  endMark: _types.UfoEmojiTimings.MEDIA_END
+}, {
+  key: _types.UfoEmojiTimingsKeys.ONLOAD,
+  startMark: _types.UfoEmojiTimings.ONLOAD_START,
+  endMark: _types.UfoEmojiTimings.ONLOAD_END
+}];
 var ufoExperiences = {
-  'emoji-rendered': new _ufo.ConcurrentExperience(_types.UfoExperienceName.EMOJI_RENDERED, createRenderExperience(_types.UfoComponentName.EMOJI)),
+  'emoji-rendered': new _ufo.ConcurrentExperience(_types.UfoExperienceName.EMOJI_RENDERED, {
+    platform: {
+      component: _types.UfoComponentName.EMOJI
+    },
+    type: _ufo.ExperienceTypes.Operation,
+    performanceType: _ufo.ExperiencePerformanceTypes.Custom,
+    timings: customEmojiTimings
+  }),
   'emoji-resource-fetched': new _ufo.ConcurrentExperience(_types.UfoExperienceName.EMOJI_RESOURCE_FETCHED, createRenderExperience(_types.UfoComponentName.EMOJI_PROVIDER)),
   'emoji-picker-opened': new _ufo.UFOExperience(_types.UfoExperienceName.EMOJI_PICKER_OPENED, createRenderExperience(_types.UfoComponentName.EMOJI_PICKER)),
   'emoji-selection-recorded': new _ufo.UFOExperience(_types.UfoExperienceName.EMOJI_SELECTION_RECORDED, createInlineExperience(_types.UfoComponentName.EMOJI_PROVIDER)),

package/dist/cjs/util/browser-support.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIntersectionObserverSupported = void 0;
+var isIntersectionObserverSupported = typeof window === 'undefined' ? false : !!window.IntersectionObserver;
+exports.isIntersectionObserverSupported = isIntersectionObserverSupported;

package/dist/cjs/util/storage-available.js

@@ -8,6 +8,10 @@ exports.default = storageAvailable;
 // Copied from https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#feature-detecting_localstorage
 // a brief history of local storage - https://gist.github.com/paulirish/5558557
 function storageAvailable(type) {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
   var storage;
 
   try {

package/dist/cjs/version.json

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

package/dist/es2019/api/EmojiRepository.js

@@ -246,6 +246,10 @@ export default class EmojiRepository {
     // frequent category being shown in the picker).
 
     if (this.dynamicCategoryList.indexOf(frequentCategory) === -1) {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
       window.setTimeout(() => {
         this.dynamicCategoryList.push(frequentCategory);
       });

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';
@@ -143,6 +143,10 @@ export class EmojiResource extends AbstractResource {
   }
 
   loadStoredTone() {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
     const storedToneString = window.localStorage.getItem(selectedToneStorageKey);
 
     if (storedToneString) {
@@ -181,6 +185,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)) {
@@ -367,6 +388,10 @@ export class EmojiResource extends AbstractResource {
   setSelectedTone(tone) {
     this.selectedTone = tone;
 
+    if (typeof window === 'undefined') {
+      return;
+    }
+
     if (storageAvailable('localStorage')) {
       try {
         window.localStorage.setItem(selectedToneStorageKey, tone ? tone.toString() : '');

package/dist/es2019/api/EmojiUtils.js

@@ -36,6 +36,10 @@ const calculateScale = getRatio => {
 };
 
 export const getPixelRatio = () => {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
   return window.devicePixelRatio;
 };
 export const getAltRepresentation = reps => {

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

@@ -111,7 +111,10 @@ export class Gateway {
       }
     };
 
-    window.setTimeout(wrappedFunc);
+    if (typeof window !== 'undefined') {
+      window.setTimeout(wrappedFunc);
+    }
+
     return true;
   }
 

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);
       }