@atlaskit/media-card 79.12.0 → 79.13.0

package/dist/es2019/card/fileCard.js

@@ -11,7 +11,7 @@ import { generateUniqueId } from '../utils/generateUniqueId';
 import { resolveCardPreviewDimensions } from '../utils/getDataURIDimension';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { getFileDetails } from '../utils/metadata';
-import { abortUfoExperience, completeUfoExperience, shouldPerformanceBeSampled, startUfoExperience } from '../utils/ufoExperiences';
+import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { usePrevious } from '../utils/usePrevious';
 import { ViewportDetector } from '../utils/viewportDetector';
@@ -181,7 +181,13 @@ export const FileCard = ({
     skipRemote: !isCardVisible,
     source: 'mediaCard'
   });
-  const shouldSendPerformanceEventRef = useRef(shouldPerformanceBeSampled());
+  const shouldSendPerformanceEvent = useMemo(() => shouldPerformanceBeSampled(), []);
+
+  // UFO experience hook - creates a unique experience instance per card
+  const ufoExperience = useMediaCardUfoExperience({
+    instanceId: internalOccurrenceKey,
+    enabled: shouldSendPerformanceEvent
+  });
   const [error, setError] = useState();
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
@@ -258,6 +264,7 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   const fireOperationalEventRef = useCurrentValueRef(() => {
+    var _ssrReliability$serve, _ssrReliability$clien;
     const timeElapsedTillEvent = performanceNow();
     const durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
     const performanceAttributes = {
@@ -267,7 +274,19 @@ export const FileCard = ({
       }
     };
     createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, finalStatus, fileAttributes, performanceAttributes, ssrReliability, finalError, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
-    shouldSendPerformanceEventRef.current && completeUfoExperience(internalOccurrenceKey, finalStatus, fileAttributes, fileStateFlagsRef.current, ssrReliability, finalError);
+
+    // Determine SSR preview info for UFO timing strategy
+    // wasSSRAttempted is only true when SSR was used AND preview is non-lazy
+    // because lazy SSR defers loading, so it behaves like CSR for timing purposes
+    const isSSRNonLazy = !!ssr && (preview === null || preview === void 0 ? void 0 : preview.lazy) !== true;
+    const wasSSRSuccessful = isSSRNonLazy && (((_ssrReliability$serve = ssrReliability.server) === null || _ssrReliability$serve === void 0 ? void 0 : _ssrReliability$serve.status) === 'success' || ((_ssrReliability$clien = ssrReliability.client) === null || _ssrReliability$clien === void 0 ? void 0 : _ssrReliability$clien.status) === 'success');
+    const ssrPreviewInfo = {
+      dataUri: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      srcset: preview === null || preview === void 0 ? void 0 : preview.srcSet,
+      wasSSRAttempted: isSSRNonLazy,
+      wasSSRSuccessful
+    };
+    ufoExperience.complete(finalStatus, fileAttributes, fileStateFlagsRef.current, ssrReliability, finalError, ssrPreviewInfo);
   });
   const fireNonCriticalErrorEventRef = useCurrentValueRef(error => {
     createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, finalStatus, fileAttributes, ssrReliability, error, traceContext, fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.metadataTraceContext);
@@ -278,19 +297,20 @@ export const FileCard = ({
     }
   }, [nonCriticalError, fireNonCriticalErrorEventRef]);
   const startUfoExperienceRef = useCurrentValueRef(() => {
-    if (shouldSendPerformanceEventRef.current) {
-      startUfoExperience(internalOccurrenceKey);
-    }
+    // For non-lazy SSR previews, use interaction start time as the experience start time
+    // because the image loading started at interaction start, not at mount time
+    const isSSRNonLazy = !!ssr && (preview === null || preview === void 0 ? void 0 : preview.lazy) !== true;
+    ufoExperience.start({
+      useInteractionTime: isSSRNonLazy
+    });
   });
   const fireAbortedEventRef = useCurrentValueRef(() => {
     // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    if (shouldSendPerformanceEventRef.current) {
-      abortUfoExperience(internalOccurrenceKey, {
-        fileAttributes,
-        fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
-        ssrReliability: ssrReliability
-      });
-    }
+    ufoExperience.abort({
+      fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
   });
 
   //----------------------------------------------------------------//

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "0.0.0-development";
+const packageVersion = "79.13.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/titleBox/failedTitleBox.js

@@ -16,8 +16,6 @@ export const FailedTitleBox = ({
     breakpoint: breakpoint
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
-    LEGACY_size: 'small',
-    LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
     color: `var(--ds-text-danger, ${R300})`,
     size: "small"
   }), /*#__PURE__*/React.createElement("span", {

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "0.0.0-development",
+      packageName: "79.13.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -57,9 +57,7 @@ const ErrorBoundaryComponent = ({
     React.createElement("span", {
       style: style
     }, /*#__PURE__*/React.createElement(WarningIcon, {
-      LEGACY_margin: `0 ${"var(--ds-space-negative-050, -4px)"} 0 0`,
       label: "error",
-      LEGACY_size: "small",
       color: `var(--ds-icon-danger, ${R300})`,
       size: "small"
     }), message)

package/dist/es2019/utils/globalScope/globalScope.js

@@ -7,6 +7,7 @@ import { printFunctionCall, printScript } from '../printScript';
 
 export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
 export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export const GLOBAL_MEDIA_PERFORMANCE_ENTRIES = 'performanceEntries';
 export function getMediaGlobalScope(globalScope = window) {
   // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
   const namespace = '__MEDIA_INTERNAL';

package/dist/es2019/utils/mediaPerformanceObserver/durationMetrics.js

@@ -81,6 +81,7 @@ export const createMediaDurationMetrics = (entry, interactionStartTime) => {
     totalDuration: entry.duration,
     initiatorType: entry.initiatorType,
     // value can be 'fetch' or 'img'
+    endedAt: entry.responseEnd - interactionStartTime,
     responseEnd: entry.responseEnd,
     browserCacheHit: entry.transferSize === 0,
     nextHopProtocol: entry.nextHopProtocol,