@atlaskit/renderer 137.3.0 → 137.4.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/renderer
 
+## 137.4.0
+
+### Minor Changes
+
+- [`be8a71519cbc2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be8a71519cbc2) -
+  Add support for seeding media card file state from SSR media node metadata, behind the
+  `platform_media_ssr_data_seed` feature gate.
+
+  `@atlaskit/media-client` gains a Relay-free `mapSsrMediaItemToFileState`. Malformed, partial, or
+  non-array input yields `undefined` rather than throwing.
+
+  `@atlaskit/media-card` accepts an optional `ssrMediaItem` prop. When `ssrFileState` is absent and
+  the gate is on, the card converts `ssrMediaItem` to FileState via `mapSsrMediaItemToFileState` and
+  seeds `useFileState`. `ssrFileState` still wins when both are provided (Relay / media-card-relay).
+
+  `@atlaskit/renderer` extends `MediaSSR` with `ssrMediaItems` — the host's SSR media payload,
+  passed through untouched. The renderer finds the matching item by id and forwards it as
+  `ssrMediaItem` to Card. Hosts need no knowledge of `FileState` or of media internals. The field is
+  optional and additive: hosts that do not supply it, and media ids without an entry, keep the
+  current fetch behaviour.
+
+  `@atlaskit/media-card-relay`'s `MediaCardRelay` / `MediaInlineCardRelay` now call the shared
+  `mapSsrMediaItemToFileState` mapper directly (the Relay fragment data is structurally assignable
+  to `SsrMediaItem`, so no cast or wrapper is needed). Its public API and behaviour are unchanged.
+
+  `@atlaskit/media-file-preview` now forwards an SSR-seeded pre-signed `previewCdnUrl` to the new
+  optional `MediaClient.getImageUrlSync(id, params, seededCdnUrl)` argument when
+  `platform_media_ssr_data_seed` is enabled and CDN delivery is in use. `@atlaskit/media-client`
+  preserves the signed CDN asset URL and inserts supported image parameters before the `wm-ari` /
+  `wm-v` watermark anchor, avoiding query-string rebuilding or re-encoding that can invalidate
+  CloudFront signatures. Path-based routing, isolated cloud, GCP, and callers without a seeded URL
+  retain the existing URL-generation behaviour.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 137.3.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/mediaInline.js

@@ -33,7 +33,8 @@ var RenderMediaInline = function RenderMediaInline(_ref) {
     collectionName = _ref.collection,
     eventHandlers = _ref.eventHandlers,
     identifier = _ref.identifier,
-    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
+    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher,
+    ssr = _ref.ssr;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     contextIdentifier = _useState2[0],
@@ -44,6 +45,12 @@ var RenderMediaInline = function RenderMediaInline(_ref) {
     setFileState = _useState4[1];
   var mediaClient = (0, _react.useContext)(_mediaClientProvider.MediaClientContext);
   var contextIdentifierProvider = (0, _providerFactory.useProvider)('contextIdentifierProvider');
+  var ssrMediaItem = (0, _react.useMemo)(function () {
+    var _ssr$ssrMediaItems;
+    return ssr === null || ssr === void 0 || (_ssr$ssrMediaItems = ssr.ssrMediaItems) === null || _ssr$ssrMediaItems === void 0 ? void 0 : _ssr$ssrMediaItems.find(function (item) {
+      return item.id === identifier.id;
+    });
+  }, [ssr === null || ssr === void 0 ? void 0 : ssr.ssrMediaItems, identifier.id]);
   (0, _react.useEffect)(function () {
     if (contextIdentifierProvider) {
       contextIdentifierProvider.then(function (resolvedContextID) {
@@ -144,7 +151,8 @@ var RenderMediaInline = function RenderMediaInline(_ref) {
       shouldDisplayToolTip: shouldDisplayToolTip,
       mediaClientConfig: mediaClient.mediaClientConfig,
       mediaViewerItems: Array.from(_MediaCard.mediaIdentifierMap.values()),
-      fallbackMediaNameFetcher: fallbackMediaNameFetcher
+      fallbackMediaNameFetcher: fallbackMediaNameFetcher,
+      ssrMediaItem: ssrMediaItem
     }))
   );
 };
@@ -214,7 +222,8 @@ var MediaInline = function MediaInline(props) {
     intl: intl,
     collection: collection,
     featureFlags: featureFlags,
-    fallbackMediaNameFetcher: fallbackMediaNameFetcher
+    fallbackMediaNameFetcher: fallbackMediaNameFetcher,
+    ssr: ssr
   });
 };
 

package/dist/cjs/ui/MediaCard.js

@@ -285,6 +285,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _ssr$ssrMediaItems;
       var _this$state = this.state,
         contextIdentifierProvider = _this$state.contextIdentifierProvider,
         fileState = _this$state.fileState;
@@ -342,6 +343,9 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
       // More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233
       var currentUrl = window.location.href;
       var shouldDisableLazyLoading = (0, _expValEquals.expValEquals)('platform_editor_disable_lazy_load_media', 'isEnabled', true) && currentUrl.includes('/wiki/pdf/spaces/');
+      var ssrMediaItem = ssr === null || ssr === void 0 || (_ssr$ssrMediaItems = ssr.ssrMediaItems) === null || _ssr$ssrMediaItems === void 0 ? void 0 : _ssr$ssrMediaItems.find(function (item) {
+        return item.id === id;
+      });
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, getClipboardAttrs({
         id: id,
         alt: alt,
@@ -367,7 +371,10 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         mediaViewerItems: Array.from(mediaIdentifierMap.values()),
         featureFlags: featureFlags,
         shouldEnableDownloadButton: shouldEnableDownloadButton,
-        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
+        // Optional SSR seed supplied by the host product. Undefined when absent,
+        ,
+        ssrMediaItem: ssrMediaItem,
         shouldHideTooltip: isMobile,
         mediaViewerExtensions: mediaViewerExtensions,
         fallbackMediaNameFetcher: fallbackMediaNameFetcher,

package/dist/cjs/ui/Renderer/index.js

@@ -74,7 +74,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "137.2.8";
+var packageVersion = "137.3.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/mediaInline.js

@@ -5,7 +5,7 @@ import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react/media-client-provider';
 import { getMediaClient } from '@atlaskit/media-client-react/get-media-client';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui/LoadingView';
-import React, { useCallback, useEffect, useState, useContext } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useContext } from 'react';
 import { injectIntl } from 'react-intl';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
@@ -18,12 +18,17 @@ const RenderMediaInline = ({
   collection: collectionName,
   eventHandlers,
   identifier,
-  fallbackMediaNameFetcher
+  fallbackMediaNameFetcher,
+  ssr
 }) => {
   const [contextIdentifier, setContextIdentifier] = useState();
   const [fileState, setFileState] = useState();
   const mediaClient = useContext(MediaClientContext);
   const contextIdentifierProvider = useProvider('contextIdentifierProvider');
+  const ssrMediaItem = useMemo(() => {
+    var _ssr$ssrMediaItems;
+    return ssr === null || ssr === void 0 ? void 0 : (_ssr$ssrMediaItems = ssr.ssrMediaItems) === null || _ssr$ssrMediaItems === void 0 ? void 0 : _ssr$ssrMediaItems.find(item => item.id === identifier.id);
+  }, [ssr === null || ssr === void 0 ? void 0 : ssr.ssrMediaItems, identifier.id]);
   useEffect(() => {
     if (contextIdentifierProvider) {
       contextIdentifierProvider.then(resolvedContextID => {
@@ -110,7 +115,8 @@ const RenderMediaInline = ({
       shouldDisplayToolTip: shouldDisplayToolTip,
       mediaClientConfig: mediaClient.mediaClientConfig,
       mediaViewerItems: Array.from(mediaIdentifierMap.values()),
-      fallbackMediaNameFetcher: fallbackMediaNameFetcher
+      fallbackMediaNameFetcher: fallbackMediaNameFetcher,
+      ssrMediaItem: ssrMediaItem
     }))
   );
 };
@@ -179,7 +185,8 @@ const MediaInline = props => {
     intl: intl,
     collection: collection,
     featureFlags: featureFlags,
-    fallbackMediaNameFetcher: fallbackMediaNameFetcher
+    fallbackMediaNameFetcher: fallbackMediaNameFetcher,
+    ssr: ssr
   });
 };
 

package/dist/es2019/ui/MediaCard.js

@@ -223,6 +223,7 @@ export class MediaCardView extends Component {
     );
   }
   render() {
+    var _ssr$ssrMediaItems;
     const {
       contextIdentifierProvider,
       fileState
@@ -282,6 +283,7 @@ export class MediaCardView extends Component {
     // More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233
     const currentUrl = window.location.href;
     const shouldDisableLazyLoading = expValEquals('platform_editor_disable_lazy_load_media', 'isEnabled', true) && currentUrl.includes('/wiki/pdf/spaces/');
+    const ssrMediaItem = ssr === null || ssr === void 0 ? void 0 : (_ssr$ssrMediaItems = ssr.ssrMediaItems) === null || _ssr$ssrMediaItems === void 0 ? void 0 : _ssr$ssrMediaItems.find(item => item.id === id);
     return /*#__PURE__*/React.createElement("div", _extends({}, getClipboardAttrs({
       id,
       alt,
@@ -307,7 +309,10 @@ export class MediaCardView extends Component {
       mediaViewerItems: Array.from(mediaIdentifierMap.values()),
       featureFlags: featureFlags,
       shouldEnableDownloadButton: shouldEnableDownloadButton,
-      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
+      // Optional SSR seed supplied by the host product. Undefined when absent,
+      ,
+      ssrMediaItem: ssrMediaItem,
       shouldHideTooltip: isMobile,
       mediaViewerExtensions: mediaViewerExtensions,
       fallbackMediaNameFetcher: fallbackMediaNameFetcher,

package/dist/es2019/ui/Renderer/index.js

@@ -60,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "137.2.8";
+const packageVersion = "137.3.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/mediaInline.js

@@ -11,7 +11,7 @@ import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react/media-client-provider';
 import { getMediaClient } from '@atlaskit/media-client-react/get-media-client';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui/LoadingView';
-import React, { useCallback, useEffect, useState, useContext } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useContext } from 'react';
 import { injectIntl } from 'react-intl';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
@@ -24,7 +24,8 @@ var RenderMediaInline = function RenderMediaInline(_ref) {
     collectionName = _ref.collection,
     eventHandlers = _ref.eventHandlers,
     identifier = _ref.identifier,
-    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
+    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher,
+    ssr = _ref.ssr;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     contextIdentifier = _useState2[0],
@@ -35,6 +36,12 @@ var RenderMediaInline = function RenderMediaInline(_ref) {
     setFileState = _useState4[1];
   var mediaClient = useContext(MediaClientContext);
   var contextIdentifierProvider = useProvider('contextIdentifierProvider');
+  var ssrMediaItem = useMemo(function () {
+    var _ssr$ssrMediaItems;
+    return ssr === null || ssr === void 0 || (_ssr$ssrMediaItems = ssr.ssrMediaItems) === null || _ssr$ssrMediaItems === void 0 ? void 0 : _ssr$ssrMediaItems.find(function (item) {
+      return item.id === identifier.id;
+    });
+  }, [ssr === null || ssr === void 0 ? void 0 : ssr.ssrMediaItems, identifier.id]);
   useEffect(function () {
     if (contextIdentifierProvider) {
       contextIdentifierProvider.then(function (resolvedContextID) {
@@ -135,7 +142,8 @@ var RenderMediaInline = function RenderMediaInline(_ref) {
       shouldDisplayToolTip: shouldDisplayToolTip,
       mediaClientConfig: mediaClient.mediaClientConfig,
       mediaViewerItems: Array.from(mediaIdentifierMap.values()),
-      fallbackMediaNameFetcher: fallbackMediaNameFetcher
+      fallbackMediaNameFetcher: fallbackMediaNameFetcher,
+      ssrMediaItem: ssrMediaItem
     }))
   );
 };
@@ -205,7 +213,8 @@ var MediaInline = function MediaInline(props) {
     intl: intl,
     collection: collection,
     featureFlags: featureFlags,
-    fallbackMediaNameFetcher: fallbackMediaNameFetcher
+    fallbackMediaNameFetcher: fallbackMediaNameFetcher,
+    ssr: ssr
   });
 };
 

package/dist/esm/ui/MediaCard.js

@@ -276,6 +276,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _ssr$ssrMediaItems;
       var _this$state = this.state,
         contextIdentifierProvider = _this$state.contextIdentifierProvider,
         fileState = _this$state.fileState;
@@ -333,6 +334,9 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
       // More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233
       var currentUrl = window.location.href;
       var shouldDisableLazyLoading = expValEquals('platform_editor_disable_lazy_load_media', 'isEnabled', true) && currentUrl.includes('/wiki/pdf/spaces/');
+      var ssrMediaItem = ssr === null || ssr === void 0 || (_ssr$ssrMediaItems = ssr.ssrMediaItems) === null || _ssr$ssrMediaItems === void 0 ? void 0 : _ssr$ssrMediaItems.find(function (item) {
+        return item.id === id;
+      });
       return /*#__PURE__*/React.createElement("div", _extends({}, getClipboardAttrs({
         id: id,
         alt: alt,
@@ -358,7 +362,10 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         mediaViewerItems: Array.from(mediaIdentifierMap.values()),
         featureFlags: featureFlags,
         shouldEnableDownloadButton: shouldEnableDownloadButton,
-        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
+        // Optional SSR seed supplied by the host product. Undefined when absent,
+        ,
+        ssrMediaItem: ssrMediaItem,
         shouldHideTooltip: isMobile,
         mediaViewerExtensions: mediaViewerExtensions,
         fallbackMediaNameFetcher: fallbackMediaNameFetcher,

package/dist/esm/ui/Renderer/index.js

@@ -65,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "137.2.8";
+var packageVersion = "137.3.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/types/mediaOptions.d.ts

@@ -4,6 +4,14 @@ import type { MediaViewerExtensions } from '@atlaskit/media-viewer';
 export type MediaSSR = {
     config: MediaClientConfig;
     mode: SSR;
+    /**
+     * Host SSR media payload. The renderer looks up each card's id with `.find()`
+     * and passes the matching item as `ssrMediaItem` to Card. Missing entries fall
+     * back to the normal remote fetch path.
+     */
+    ssrMediaItems?: ReadonlyArray<{
+        id?: string;
+    }>;
 };
 export interface MediaOptions {
     allowCaptions?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "137.3.0",
+	"version": "137.4.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -53,8 +53,8 @@
 		"@atlaskit/link-datasource": "^6.11.0",
 		"@atlaskit/link-extractors": "^4.2.0",
 		"@atlaskit/linking-common": "^12.1.0",
-		"@atlaskit/media-card": "^81.9.0",
-		"@atlaskit/media-client": "^37.6.0",
+		"@atlaskit/media-card": "^81.10.0",
+		"@atlaskit/media-client": "^37.7.0",
 		"@atlaskit/media-client-react": "^6.4.0",
 		"@atlaskit/media-common": "^14.6.0",
 		"@atlaskit/media-filmstrip": "^52.4.0",