@atlaskit/media-card 79.3.1 → 79.3.3

package/dist/esm/card/fileCard.js

@@ -157,17 +157,17 @@ export var FileCard = function FileCard(_ref) {
     status = _useState8[0],
     setStatus = _useState8[1];
   var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isPlayingFile = _useState10[0],
-    setIsPlayingFile = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    isPlayingFile = _useState0[0],
+    setIsPlayingFile = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    shouldAutoplay = _useState10[0],
+    setShouldAutoplay = _useState10[1];
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    shouldAutoplay = _useState12[0],
-    setShouldAutoplay = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    previewDidRender = _useState14[0],
-    setPreviewDidRender = _useState14[1];
+    previewDidRender = _useState12[0],
+    setPreviewDidRender = _useState12[1];
   var mediaBlobUrlAttrs = useMemo(function () {
     var id = identifier.id,
       collection = identifier.collectionName;
@@ -206,18 +206,18 @@ export var FileCard = function FileCard(_ref) {
     getSsrScriptProps = _useFilePreview.getSsrScriptProps,
     copyNodeRef = _useFilePreview.copyNodeRef;
   var shouldSendPerformanceEventRef = useRef(shouldPerformanceBeSampled());
-  var _useState15 = useState(),
-    _useState16 = _slicedToArray(_useState15, 2),
-    error = _useState16[0],
-    setError = _useState16[1];
+  var _useState13 = useState(),
+    _useState14 = _slicedToArray(_useState13, 2),
+    error = _useState14[0],
+    setError = _useState14[1];
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
   var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) !== 'image/svg+xml' ? previewError : undefined);
   var finalStatus = finalError ? 'error' : status === 'failed-processing' && (fileStateValue === null || fileStateValue === void 0 ? void 0 : fileStateValue.mimeType) === 'image/svg+xml' ? 'loading-preview' : status;
-  var _useState17 = useState(null),
-    _useState18 = _slicedToArray(_useState17, 2),
-    mediaViewerSelectedItem = _useState18[0],
-    setMediaViewerSelectedItem = _useState18[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray(_useState15, 2),
+    mediaViewerSelectedItem = _useState16[0],
+    setMediaViewerSelectedItem = _useState16[1];
   var uploadProgressRef = useRef();
   var metadata = useMemo(function () {
     var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {

package/dist/esm/card/inlinePlayer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
 import { CustomMediaPlayer, MediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
 import { defaultImageCardDimensions } from '../utils';
@@ -64,12 +64,77 @@ export var InlinePlayerBase = function InlinePlayerBase(_ref) {
       occurrenceKey: occurrenceKey
     }),
     fileState = _useFileState.fileState;
+  var init = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileState) {
+      var artifactName, artifacts, newFileSrc, _newFileSrc;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (fileState.status === 'processed' || fileState.status === 'processing') {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            artifactName = getPreferredVideoArtifact(fileState);
+            artifacts = fileState.artifacts;
+            if (!(!artifactName || !artifacts)) {
+              _context.next = 16;
+              break;
+            }
+            _context.prev = 5;
+            _context.next = 8;
+            return mediaClient.file.getFileBinaryURL(id, collectionName);
+          case 8:
+            newFileSrc = _context.sent;
+            setFileSrc(newFileSrc);
+            _context.next = 15;
+            break;
+          case 12:
+            _context.prev = 12;
+            _context.t0 = _context["catch"](5);
+            if (onErrorRef.current && _context.t0 instanceof Error) {
+              onErrorRef.current(_context.t0);
+            }
+          case 15:
+            return _context.abrupt("return");
+          case 16:
+            _context.prev = 16;
+            _context.next = 19;
+            return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
+          case 19:
+            _newFileSrc = _context.sent;
+            setFileSrc(_newFileSrc);
+            _context.next = 26;
+            break;
+          case 23:
+            _context.prev = 23;
+            _context.t1 = _context["catch"](16);
+            if (onErrorRef.current && _context.t1 instanceof Error) {
+              onErrorRef.current(_context.t1);
+            }
+          case 26:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[5, 12], [16, 23]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [collectionName, id, mediaClient.file]);
+  var onPlay = function onPlay() {
+    if (fg('platform_media_resume_video_on_token_expiry')) {
+      fileState && init(fileState);
+    }
+  };
+  var onTimeChanged = onPlay;
   useEffect(function () {
     var subscribeFileState = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileState) {
-        var _yield$fileState$prev, value, newFileSrc, artifactName, artifacts, _newFileSrc, _newFileSrc2;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fileState) {
+        var _yield$fileState$prev, value, newFileSrc;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (fileState.status === 'uploading') {
                 setIsUploading(true);
@@ -80,83 +145,45 @@ export var InlinePlayerBase = function InlinePlayerBase(_ref) {
 
               // We reuse the existing fileSrc to prevent re renders, therefore we only perform fileSrc updates when there isn't any
               if (!fileSrc) {
-                _context.next = 3;
+                _context2.next = 3;
                 break;
               }
-              return _context.abrupt("return");
+              return _context2.abrupt("return");
             case 3:
               if (!(fileState.status !== 'error' && fileState.preview)) {
-                _context.next = 12;
+                _context2.next = 12;
                 break;
               }
-              _context.next = 6;
+              _context2.next = 6;
               return fileState.preview;
             case 6:
-              _yield$fileState$prev = _context.sent;
+              _yield$fileState$prev = _context2.sent;
               value = _yield$fileState$prev.value;
               if (!(value instanceof Blob && value.type.indexOf('video/') === 0)) {
-                _context.next = 12;
+                _context2.next = 12;
                 break;
               }
               newFileSrc = URL.createObjectURL(value);
               setFileSrc(newFileSrc);
-              return _context.abrupt("return");
+              return _context2.abrupt("return");
             case 12:
-              if (!(fileState.status === 'processed' || fileState.status === 'processing')) {
-                _context.next = 37;
-                break;
-              }
-              artifactName = getPreferredVideoArtifact(fileState);
-              artifacts = fileState.artifacts;
-              if (!(!artifactName || !artifacts)) {
-                _context.next = 27;
-                break;
-              }
-              _context.prev = 16;
-              _context.next = 19;
-              return mediaClient.file.getFileBinaryURL(id, collectionName);
-            case 19:
-              _newFileSrc = _context.sent;
-              setFileSrc(_newFileSrc);
-              _context.next = 26;
-              break;
-            case 23:
-              _context.prev = 23;
-              _context.t0 = _context["catch"](16);
-              if (onErrorRef.current && _context.t0 instanceof Error) {
-                onErrorRef.current(_context.t0);
-              }
-            case 26:
-              return _context.abrupt("return");
-            case 27:
-              _context.prev = 27;
-              _context.next = 30;
-              return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
-            case 30:
-              _newFileSrc2 = _context.sent;
-              setFileSrc(_newFileSrc2);
-              _context.next = 37;
-              break;
-            case 34:
-              _context.prev = 34;
-              _context.t1 = _context["catch"](27);
-              if (onErrorRef.current && _context.t1 instanceof Error) {
-                onErrorRef.current(_context.t1);
+              if (fileState.status === 'processed' || fileState.status === 'processing') {
+                init(fileState);
               }
-            case 37:
+            case 13:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, null, [[16, 23], [27, 34]]);
+        }, _callee2);
       }));
-      return function subscribeFileState(_x) {
-        return _ref2.apply(this, arguments);
+      return function subscribeFileState(_x2) {
+        return _ref3.apply(this, arguments);
       };
     }();
     if (fileState) {
       subscribeFileState(fileState);
     }
-  }, [fileState, collectionName, fileSrc, id, mediaClient]);
+  }, [fileState, collectionName, fileSrc, id, mediaClient, init]);
   useEffect(function () {
     return function () {
       fileSrc && URL.revokeObjectURL(fileSrc);
@@ -190,6 +217,8 @@ export var InlinePlayerBase = function InlinePlayerBase(_ref) {
           viewingLevel: 'full'
         });
       },
+      onPlay: onPlay,
+      onTimeChanged: onTimeChanged,
       lastWatchTimeConfig: {
         contentId: id
       },
@@ -214,6 +243,8 @@ export var InlinePlayerBase = function InlinePlayerBase(_ref) {
           viewingLevel: 'full'
         });
       },
+      onPlay: onPlay,
+      onTimeChanged: onTimeChanged,
       lastWatchTimeConfig: {
         contentId: id
       },

package/dist/esm/card/inlinePlayerWrapper-compiled.js

@@ -5,6 +5,8 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import UFOCustomData from '@atlaskit/react-ufo/custom-data';
+import { fg } from '@atlaskit/platform-feature-flags';
 var hideNativeBrowserTextSelectionStyles = null;
 var selectedBorderStyle = null;
 
@@ -38,5 +40,9 @@ export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
       height: getDimensionsWithDefault(dimensions).height || 'auto',
       "--_f9up2s": ix("1px solid ".concat("var(--ds-border-selected, #0C66E4)"))
     }
-  }), props.children);
+  }), fg('platform_media_add_ufo_custom_data') ? /*#__PURE__*/React.createElement(UFOCustomData, {
+    data: {
+      hasMediaComponent: true
+    }
+  }) : null, props.children);
 };

package/dist/esm/card/inlinePlayerWrapper-emotion.js

@@ -7,6 +7,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './inlinePlayerWrapperStyles';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import UFOCustomData from '@atlaskit/react-ufo/custom-data';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
   var testId = props.testId,
     selected = props.selected,
@@ -29,6 +31,10 @@ export var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
       }),
       onClick: onClick,
       ref: innerRef
-    }, VcMediaWrapperProps), props.children)
+    }, VcMediaWrapperProps), fg('platform_media_add_ufo_custom_data') ? jsx(UFOCustomData, {
+      data: {
+        hasMediaComponent: true
+      }
+    }) : null, props.children)
   );
 };

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

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.1";
+var packageVersion = "79.3.3";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/ui/imageRenderer/imageRendererV2.js

@@ -10,6 +10,8 @@ import { calculateDimensions, calculateInitialDimensions } from './helpers';
 import { useCurrentValueRef } from '../../../utils/useCurrentValueRef';
 import { ImageRendererWrapper } from './wrapper';
 import { isFileIdentifier } from '@atlaskit/media-client';
+import { fg } from '@atlaskit/platform-feature-flags';
+import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 var baseStyles = null;
 var backgroundStyles = null;
 export var ImageRenderer = function ImageRenderer(_ref) {
@@ -57,7 +59,11 @@ export var ImageRenderer = function ImageRenderer(_ref) {
       setResolvedDimensions(calculateDimensions(imgRef.current, wrapperRef.current, resizeMode));
     }
   }, [resizeMode, wrapperRef]);
-  return cardPreview ? /*#__PURE__*/React.createElement(ImageRendererWrapper, null, /*#__PURE__*/React.createElement("img", {
+  return cardPreview ? /*#__PURE__*/React.createElement(ImageRendererWrapper, null, fg('platform_media_add_ufo_custom_data') ? /*#__PURE__*/React.createElement(UFOCustomData, {
+    data: {
+      hasMediaComponent: true
+    }
+  }) : null, /*#__PURE__*/React.createElement("img", {
     ref: imgRef,
     "data-testid": testId,
     "data-fileid": isFileIdentifier(identifier) ? identifier.id : null,

package/dist/esm/card/ui/wrapper/wrapper-compiled.js

@@ -11,6 +11,8 @@ import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
 import { N0, N100, N20, N60A, N90A, B100 } from '@atlaskit/theme/colors';
 import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
 import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
+import { fg } from '@atlaskit/platform-feature-flags';
+import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 var LOCAL_WIDTH_VARIABLE = '--media-wrapper-width';
 var LOCAL_HEIGHT_VARIABLE = '--media-wrapper-height';
 var wrapperStyles = null;
@@ -82,6 +84,10 @@ export var Wrapper = function Wrapper(props) {
       "--_mt8cm6": ix("var(--ds-background-input, ".concat(N0, ")")),
       "--_13xf2t5": ix("var(--ds-icon-subtle, ".concat(N100, ")"))
     })
-  }), props.children);
+  }), fg('platform_media_add_ufo_custom_data') ? /*#__PURE__*/React.createElement(UFOCustomData, {
+    data: {
+      hasMediaComponent: true
+    }
+  }) : null, props.children);
 };
 Wrapper.displayName = 'NewFileExperienceWrapper';

package/dist/esm/card/ui/wrapper/wrapper-emotion.js

@@ -8,6 +8,8 @@ import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { wrapperStyles } from './styles';
 import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import UFOCustomData from '@atlaskit/react-ufo/custom-data';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var Wrapper = function Wrapper(props) {
   var testId = props.testId,
     dimensions = props.dimensions,
@@ -48,6 +50,10 @@ export var Wrapper = function Wrapper(props) {
       ref: innerRef,
       onClick: onClick,
       onMouseEnter: onMouseEnter
-    }, VcMediaWrapperProps), props.children)
+    }, VcMediaWrapperProps), fg('platform_media_add_ufo_custom_data') ? jsx(UFOCustomData, {
+      data: {
+        hasMediaComponent: true
+      }
+    }) : null, props.children)
   );
 };

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "79.3.1",
+        packageName: "79.3.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineCard.js

@@ -41,9 +41,9 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     isFailedEventSent = _useState8[0],
     setIsFailedEventSent = _useState8[1];
   var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isMediaViewerVisible = _useState10[0],
-    setMediaViewerVisible = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    isMediaViewerVisible = _useState0[0],
+    setMediaViewerVisible = _useState0[1];
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var fireFailedOperationalEvent = function fireFailedOperationalEvent() {

package/dist/esm/utils/ufoExperiences.js

@@ -8,7 +8,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.1";
+var packageVersion = "79.3.3";
 var SAMPLE_RATE = 0.05;
 var concurrentExperience;
 var getExperience = function getExperience(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "79.3.1",
+	"version": "79.3.3",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/dropdown-menu": "^16.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^26.1.0",
+		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/media-client": "^33.3.0",
 		"@atlaskit/media-client-react": "^4.1.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.9.0",
-		"@atlaskit/tooltip": "^20.0.0",
+		"@atlaskit/tooltip": "^20.2.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -110,6 +110,9 @@
 		"platform-filecard-ufo-trace": {
 			"type": "boolean"
 		},
+		"platform_media_add_ufo_custom_data": {
+			"type": "boolean"
+		},
 		"platform.media-card-performance-observer_a803k": {
 			"type": "boolean"
 		},
@@ -139,6 +142,9 @@
 		},
 		"platform_media_video_captions": {
 			"type": "boolean"
+		},
+		"platform_media_resume_video_on_token_expiry": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {