@atlaskit/media-card 82.1.43 → 82.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/card/card.js +1 -1
- package/dist/cjs/card/cardView.js +3 -1
- package/dist/cjs/card/fileCard.js +26 -0
- package/dist/cjs/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/cjs/inline/loader.js +1 -1
- package/dist/cjs/utils/ufoExperiences.js +1 -1
- package/dist/es2019/card/card.js +1 -1
- package/dist/es2019/card/cardView.js +3 -1
- package/dist/es2019/card/fileCard.js +22 -0
- package/dist/es2019/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/es2019/inline/loader.js +1 -1
- package/dist/es2019/utils/ufoExperiences.js +1 -1
- package/dist/esm/card/card.js +1 -1
- package/dist/esm/card/cardView.js +3 -1
- package/dist/esm/card/fileCard.js +26 -0
- package/dist/esm/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/esm/inline/loader.js +1 -1
- package/dist/esm/utils/ufoExperiences.js +1 -1
- package/dist/types/card/cardView.d.ts +7 -1
- package/dist/types/utils/analytics/fireMediaCardEvent.d.ts +2 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/media-card
|
|
2
2
|
|
|
3
|
+
## 82.1.44
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c570c6f9b75f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c570c6f9b75f7) -
|
|
8
|
+
Warm the media viewer when a media card is hovered or focused, so opening it does not have to load
|
|
9
|
+
the viewer chunks and the full resolution image from cold.
|
|
10
|
+
|
|
11
|
+
Media cards that open the viewer on click warm it on `mouseenter`, when keyboard focus enters the
|
|
12
|
+
card, and when the "open in viewer" button receives focus. That button renders outside the card
|
|
13
|
+
wrapper, so its focus never reaches the card-level `onFocus`, and it is covered by a separate
|
|
14
|
+
internal `CardView` hook. Editor media nodes warm the viewer on hover and focus when
|
|
15
|
+
`allowImagePreview` is enabled.
|
|
16
|
+
|
|
17
|
+
Both fire the warm-up's operational events on the media channel: media-card through its analytics
|
|
18
|
+
context, and the editor through the analytics plugin.
|
|
19
|
+
|
|
20
|
+
Behind the `platform_media_viewer_preload_on_hover` experiment. The hover and focus handlers run
|
|
21
|
+
in both arms, so both arms are exposed on the same hover or focus.
|
|
22
|
+
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 82.1.43
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/dist/cjs/card/card.js
CHANGED
|
@@ -8,7 +8,7 @@ var _reactIntl = require("react-intl");
|
|
|
8
8
|
var _withMediaAnalyticsContext = require("@atlaskit/media-common/withMediaAnalyticsContext");
|
|
9
9
|
var _CardWithPerformanceObserver = require("./CardWithPerformanceObserver");
|
|
10
10
|
var packageName = "@atlaskit/media-card";
|
|
11
|
-
var packageVersion = "82.1.
|
|
11
|
+
var packageVersion = "82.1.43";
|
|
12
12
|
var Card = exports.Card = (0, _withMediaAnalyticsContext.withMediaAnalyticsContext)({
|
|
13
13
|
packageVersion: packageVersion,
|
|
14
14
|
packageName: packageName,
|
|
@@ -70,6 +70,7 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
|
|
|
70
70
|
onClick = _ref.onClick,
|
|
71
71
|
onMouseEnter = _ref.onMouseEnter,
|
|
72
72
|
onFocus = _ref.onFocus,
|
|
73
|
+
onOpenMediaViewerButtonFocus = _ref.onOpenMediaViewerButtonFocus,
|
|
73
74
|
testId = _ref.testId,
|
|
74
75
|
metadata = _ref.metadata,
|
|
75
76
|
status = _ref.status,
|
|
@@ -401,7 +402,8 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
|
|
|
401
402
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldOpenMediaViewer && /*#__PURE__*/_react.default.createElement(_openMediaViewerButton.default, {
|
|
402
403
|
fileName: name !== null && name !== void 0 ? name : '',
|
|
403
404
|
innerRef: openMediaViewerButtonRef,
|
|
404
|
-
onClick: onClick
|
|
405
|
+
onClick: onClick,
|
|
406
|
+
onFocus: onOpenMediaViewerButtonFocus
|
|
405
407
|
}), /*#__PURE__*/_react.default.createElement(_wrapper.Wrapper, {
|
|
406
408
|
testId: testId || 'media-card-view',
|
|
407
409
|
dimensions: dimensions,
|
|
@@ -27,6 +27,7 @@ var _isMimeTypeSupportedByBrowser = require("@atlaskit/media-common/isMimeTypeSu
|
|
|
27
27
|
var _useFilePreview2 = require("@atlaskit/media-file-preview/use-file-preview");
|
|
28
28
|
var _abuseModal = require("@atlaskit/media-ui/abuseModal");
|
|
29
29
|
var _mediaViewerLoader = _interopRequireDefault(require("@atlaskit/media-viewer/media-viewer-loader"));
|
|
30
|
+
var _preload = require("@atlaskit/media-viewer/preload");
|
|
30
31
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
31
32
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
32
33
|
var _getActiveTrace = require("@atlaskit/react-ufo/get-active-trace");
|
|
@@ -739,7 +740,30 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
|
|
|
739
740
|
//----------------------------------------------------------------//
|
|
740
741
|
|
|
741
742
|
var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
|
|
743
|
+
|
|
744
|
+
// Warm the viewer chunks and the full resolution image before the user commits
|
|
745
|
+
// to opening the viewer, so the click does not start by loading them. Runs in
|
|
746
|
+
// both arms of the experiment: `preloadMediaViewer` fires the exposure.
|
|
747
|
+
var warmMediaViewer = function warmMediaViewer() {
|
|
748
|
+
if (!shouldOpenMediaViewer) {
|
|
749
|
+
return;
|
|
750
|
+
}
|
|
751
|
+
(0, _preload.preloadMediaViewer)({
|
|
752
|
+
getMediaClient: function getMediaClient() {
|
|
753
|
+
return mediaClient;
|
|
754
|
+
},
|
|
755
|
+
identifier: identifier,
|
|
756
|
+
mediaType: metadata.mediaType,
|
|
757
|
+
mimeType: metadata.mimeType,
|
|
758
|
+
fileState: fileStateValue,
|
|
759
|
+
traceContext: traceContext,
|
|
760
|
+
onAnalyticsEvent: function onAnalyticsEvent(payload) {
|
|
761
|
+
return (0, _fireMediaCardEvent.fireMediaCardEvent)(payload, createAnalyticsEvent);
|
|
762
|
+
}
|
|
763
|
+
});
|
|
764
|
+
};
|
|
742
765
|
var onImageMouseEnter = function onImageMouseEnter(event) {
|
|
766
|
+
warmMediaViewer();
|
|
743
767
|
onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
|
|
744
768
|
event: event,
|
|
745
769
|
mediaItemDetails: metadata
|
|
@@ -749,6 +773,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
|
|
|
749
773
|
if (!(0, _isKeyboardFocusEnteringElement.isKeyboardFocusEnteringElement)(event)) {
|
|
750
774
|
return;
|
|
751
775
|
}
|
|
776
|
+
warmMediaViewer();
|
|
752
777
|
onFocus === null || onFocus === void 0 || onFocus({
|
|
753
778
|
event: event,
|
|
754
779
|
mediaItemDetails: metadata
|
|
@@ -793,6 +818,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
|
|
|
793
818
|
onClick: withCallbacks ? onCardViewClick : undefined,
|
|
794
819
|
onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
|
|
795
820
|
onFocus: withCallbacks ? onImageFocus : undefined,
|
|
821
|
+
onOpenMediaViewerButtonFocus: withCallbacks ? warmMediaViewer : undefined,
|
|
796
822
|
disableOverlay: disableOverlay,
|
|
797
823
|
progress: uploadProgressRef.current,
|
|
798
824
|
onDisplayImage: withCallbacks ? function () {
|
|
@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
|
|
|
87
87
|
}(_react.default.Component);
|
|
88
88
|
(0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
89
89
|
var packageName = "@atlaskit/media-card";
|
|
90
|
-
var packageVersion = "82.1.
|
|
90
|
+
var packageVersion = "82.1.43";
|
|
91
91
|
|
|
92
92
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
93
93
|
var MediaCardAnalyticsErrorBoundary = (0, _withMediaAnalyticsContext.withMediaAnalyticsContext)({
|
|
@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
|
|
|
116
116
|
ErrorBoundary = _this$state.ErrorBoundary;
|
|
117
117
|
var analyticsContext = {
|
|
118
118
|
packageVersion: "@atlaskit/media-card",
|
|
119
|
-
packageName: "82.1.
|
|
119
|
+
packageName: "82.1.43",
|
|
120
120
|
componentName: 'mediaInlineCard',
|
|
121
121
|
component: 'mediaInlineCard'
|
|
122
122
|
};
|
|
@@ -23,7 +23,7 @@ var _getMediaGlobalScope = require("./globalScope/getMediaGlobalScope");
|
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
24
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
25
|
var packageName = "@atlaskit/media-card";
|
|
26
|
-
var packageVersion = "82.1.
|
|
26
|
+
var packageVersion = "82.1.43";
|
|
27
27
|
var SAMPLE_RATE = 0.05;
|
|
28
28
|
|
|
29
29
|
/**
|
package/dist/es2019/card/card.js
CHANGED
|
@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
|
|
|
2
2
|
import { withMediaAnalyticsContext } from '@atlaskit/media-common/withMediaAnalyticsContext';
|
|
3
3
|
import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
|
|
4
4
|
const packageName = "@atlaskit/media-card";
|
|
5
|
-
const packageVersion = "82.1.
|
|
5
|
+
const packageVersion = "82.1.43";
|
|
6
6
|
export const Card = withMediaAnalyticsContext({
|
|
7
7
|
packageVersion,
|
|
8
8
|
packageName,
|
|
@@ -56,6 +56,7 @@ export const CardViewBase = ({
|
|
|
56
56
|
onClick,
|
|
57
57
|
onMouseEnter,
|
|
58
58
|
onFocus,
|
|
59
|
+
onOpenMediaViewerButtonFocus,
|
|
59
60
|
testId,
|
|
60
61
|
metadata,
|
|
61
62
|
status,
|
|
@@ -388,7 +389,8 @@ export const CardViewBase = ({
|
|
|
388
389
|
return /*#__PURE__*/React.createElement(React.Fragment, null, shouldOpenMediaViewer && /*#__PURE__*/React.createElement(OpenMediaViewerButton, {
|
|
389
390
|
fileName: name !== null && name !== void 0 ? name : '',
|
|
390
391
|
innerRef: openMediaViewerButtonRef,
|
|
391
|
-
onClick: onClick
|
|
392
|
+
onClick: onClick,
|
|
393
|
+
onFocus: onOpenMediaViewerButtonFocus
|
|
392
394
|
}), /*#__PURE__*/React.createElement(Wrapper, {
|
|
393
395
|
testId: testId || 'media-card-view',
|
|
394
396
|
dimensions: dimensions,
|
|
@@ -15,6 +15,7 @@ import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser } from
|
|
|
15
15
|
import { useFilePreview } from '@atlaskit/media-file-preview/use-file-preview';
|
|
16
16
|
import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
|
|
17
17
|
import MediaViewer from '@atlaskit/media-viewer/media-viewer-loader';
|
|
18
|
+
import { preloadMediaViewer } from '@atlaskit/media-viewer/preload';
|
|
18
19
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
19
20
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
20
21
|
import { getActiveTrace } from '@atlaskit/react-ufo/get-active-trace';
|
|
@@ -655,7 +656,26 @@ export const FileCard = ({
|
|
|
655
656
|
//----------------------------------------------------------------//
|
|
656
657
|
|
|
657
658
|
const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
|
|
659
|
+
|
|
660
|
+
// Warm the viewer chunks and the full resolution image before the user commits
|
|
661
|
+
// to opening the viewer, so the click does not start by loading them. Runs in
|
|
662
|
+
// both arms of the experiment: `preloadMediaViewer` fires the exposure.
|
|
663
|
+
const warmMediaViewer = () => {
|
|
664
|
+
if (!shouldOpenMediaViewer) {
|
|
665
|
+
return;
|
|
666
|
+
}
|
|
667
|
+
preloadMediaViewer({
|
|
668
|
+
getMediaClient: () => mediaClient,
|
|
669
|
+
identifier,
|
|
670
|
+
mediaType: metadata.mediaType,
|
|
671
|
+
mimeType: metadata.mimeType,
|
|
672
|
+
fileState: fileStateValue,
|
|
673
|
+
traceContext,
|
|
674
|
+
onAnalyticsEvent: payload => fireMediaCardEvent(payload, createAnalyticsEvent)
|
|
675
|
+
});
|
|
676
|
+
};
|
|
658
677
|
const onImageMouseEnter = event => {
|
|
678
|
+
warmMediaViewer();
|
|
659
679
|
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter({
|
|
660
680
|
event,
|
|
661
681
|
mediaItemDetails: metadata
|
|
@@ -665,6 +685,7 @@ export const FileCard = ({
|
|
|
665
685
|
if (!isKeyboardFocusEnteringElement(event)) {
|
|
666
686
|
return;
|
|
667
687
|
}
|
|
688
|
+
warmMediaViewer();
|
|
668
689
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus({
|
|
669
690
|
event,
|
|
670
691
|
mediaItemDetails: metadata
|
|
@@ -708,6 +729,7 @@ export const FileCard = ({
|
|
|
708
729
|
onClick: withCallbacks ? onCardViewClick : undefined,
|
|
709
730
|
onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
|
|
710
731
|
onFocus: withCallbacks ? onImageFocus : undefined,
|
|
732
|
+
onOpenMediaViewerButtonFocus: withCallbacks ? warmMediaViewer : undefined,
|
|
711
733
|
disableOverlay: disableOverlay,
|
|
712
734
|
progress: uploadProgressRef.current,
|
|
713
735
|
onDisplayImage: withCallbacks ? () => {
|
|
@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
|
|
|
66
66
|
}
|
|
67
67
|
_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
68
68
|
const packageName = "@atlaskit/media-card";
|
|
69
|
-
const packageVersion = "82.1.
|
|
69
|
+
const packageVersion = "82.1.43";
|
|
70
70
|
|
|
71
71
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
72
72
|
const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
|
|
@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
|
|
|
37
37
|
} = this.state;
|
|
38
38
|
const analyticsContext = {
|
|
39
39
|
packageVersion: "@atlaskit/media-card",
|
|
40
|
-
packageName: "82.1.
|
|
40
|
+
packageName: "82.1.43",
|
|
41
41
|
componentName: 'mediaInlineCard',
|
|
42
42
|
component: 'mediaInlineCard'
|
|
43
43
|
};
|
|
@@ -12,7 +12,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
|
|
|
12
12
|
import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
|
|
13
13
|
import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
|
|
14
14
|
const packageName = "@atlaskit/media-card";
|
|
15
|
-
const packageVersion = "82.1.
|
|
15
|
+
const packageVersion = "82.1.43";
|
|
16
16
|
const SAMPLE_RATE = 0.05;
|
|
17
17
|
|
|
18
18
|
/**
|
package/dist/esm/card/card.js
CHANGED
|
@@ -2,7 +2,7 @@ import { injectIntl } from 'react-intl';
|
|
|
2
2
|
import { withMediaAnalyticsContext } from '@atlaskit/media-common/withMediaAnalyticsContext';
|
|
3
3
|
import { CardWithPerformanceObserver } from './CardWithPerformanceObserver';
|
|
4
4
|
var packageName = "@atlaskit/media-card";
|
|
5
|
-
var packageVersion = "82.1.
|
|
5
|
+
var packageVersion = "82.1.43";
|
|
6
6
|
export var Card = withMediaAnalyticsContext({
|
|
7
7
|
packageVersion: packageVersion,
|
|
8
8
|
packageName: packageName,
|
|
@@ -61,6 +61,7 @@ export var CardViewBase = function CardViewBase(_ref) {
|
|
|
61
61
|
onClick = _ref.onClick,
|
|
62
62
|
onMouseEnter = _ref.onMouseEnter,
|
|
63
63
|
onFocus = _ref.onFocus,
|
|
64
|
+
onOpenMediaViewerButtonFocus = _ref.onOpenMediaViewerButtonFocus,
|
|
64
65
|
testId = _ref.testId,
|
|
65
66
|
metadata = _ref.metadata,
|
|
66
67
|
status = _ref.status,
|
|
@@ -392,7 +393,8 @@ export var CardViewBase = function CardViewBase(_ref) {
|
|
|
392
393
|
return /*#__PURE__*/React.createElement(React.Fragment, null, shouldOpenMediaViewer && /*#__PURE__*/React.createElement(OpenMediaViewerButton, {
|
|
393
394
|
fileName: name !== null && name !== void 0 ? name : '',
|
|
394
395
|
innerRef: openMediaViewerButtonRef,
|
|
395
|
-
onClick: onClick
|
|
396
|
+
onClick: onClick,
|
|
397
|
+
onFocus: onOpenMediaViewerButtonFocus
|
|
396
398
|
}), /*#__PURE__*/React.createElement(Wrapper, {
|
|
397
399
|
testId: testId || 'media-card-view',
|
|
398
400
|
dimensions: dimensions,
|
|
@@ -22,6 +22,7 @@ import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser } from
|
|
|
22
22
|
import { useFilePreview } from '@atlaskit/media-file-preview/use-file-preview';
|
|
23
23
|
import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
|
|
24
24
|
import MediaViewer from '@atlaskit/media-viewer/media-viewer-loader';
|
|
25
|
+
import { preloadMediaViewer } from '@atlaskit/media-viewer/preload';
|
|
25
26
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
26
27
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
27
28
|
import { getActiveTrace } from '@atlaskit/react-ufo/get-active-trace';
|
|
@@ -731,7 +732,30 @@ export var FileCard = function FileCard(_ref) {
|
|
|
731
732
|
//----------------------------------------------------------------//
|
|
732
733
|
|
|
733
734
|
var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
|
|
735
|
+
|
|
736
|
+
// Warm the viewer chunks and the full resolution image before the user commits
|
|
737
|
+
// to opening the viewer, so the click does not start by loading them. Runs in
|
|
738
|
+
// both arms of the experiment: `preloadMediaViewer` fires the exposure.
|
|
739
|
+
var warmMediaViewer = function warmMediaViewer() {
|
|
740
|
+
if (!shouldOpenMediaViewer) {
|
|
741
|
+
return;
|
|
742
|
+
}
|
|
743
|
+
preloadMediaViewer({
|
|
744
|
+
getMediaClient: function getMediaClient() {
|
|
745
|
+
return mediaClient;
|
|
746
|
+
},
|
|
747
|
+
identifier: identifier,
|
|
748
|
+
mediaType: metadata.mediaType,
|
|
749
|
+
mimeType: metadata.mimeType,
|
|
750
|
+
fileState: fileStateValue,
|
|
751
|
+
traceContext: traceContext,
|
|
752
|
+
onAnalyticsEvent: function onAnalyticsEvent(payload) {
|
|
753
|
+
return fireMediaCardEvent(payload, createAnalyticsEvent);
|
|
754
|
+
}
|
|
755
|
+
});
|
|
756
|
+
};
|
|
734
757
|
var onImageMouseEnter = function onImageMouseEnter(event) {
|
|
758
|
+
warmMediaViewer();
|
|
735
759
|
onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
|
|
736
760
|
event: event,
|
|
737
761
|
mediaItemDetails: metadata
|
|
@@ -741,6 +765,7 @@ export var FileCard = function FileCard(_ref) {
|
|
|
741
765
|
if (!isKeyboardFocusEnteringElement(event)) {
|
|
742
766
|
return;
|
|
743
767
|
}
|
|
768
|
+
warmMediaViewer();
|
|
744
769
|
onFocus === null || onFocus === void 0 || onFocus({
|
|
745
770
|
event: event,
|
|
746
771
|
mediaItemDetails: metadata
|
|
@@ -785,6 +810,7 @@ export var FileCard = function FileCard(_ref) {
|
|
|
785
810
|
onClick: withCallbacks ? onCardViewClick : undefined,
|
|
786
811
|
onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
|
|
787
812
|
onFocus: withCallbacks ? onImageFocus : undefined,
|
|
813
|
+
onOpenMediaViewerButtonFocus: withCallbacks ? warmMediaViewer : undefined,
|
|
788
814
|
disableOverlay: disableOverlay,
|
|
789
815
|
progress: uploadProgressRef.current,
|
|
790
816
|
onDisplayImage: withCallbacks ? function () {
|
|
@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
|
|
|
80
80
|
}(React.Component);
|
|
81
81
|
_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
82
82
|
var packageName = "@atlaskit/media-card";
|
|
83
|
-
var packageVersion = "82.1.
|
|
83
|
+
var packageVersion = "82.1.43";
|
|
84
84
|
|
|
85
85
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
86
86
|
var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
|
|
@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
101
101
|
ErrorBoundary = _this$state.ErrorBoundary;
|
|
102
102
|
var analyticsContext = {
|
|
103
103
|
packageVersion: "@atlaskit/media-card",
|
|
104
|
-
packageName: "82.1.
|
|
104
|
+
packageName: "82.1.43",
|
|
105
105
|
componentName: 'mediaInlineCard',
|
|
106
106
|
component: 'mediaInlineCard'
|
|
107
107
|
};
|
|
@@ -16,7 +16,7 @@ import { extractErrorInfo } from './analytics/extractErrorInfo';
|
|
|
16
16
|
import { getRenderErrorRequestMetadata } from './analytics/getRenderErrorRequestMetadata';
|
|
17
17
|
import { getMediaGlobalScope } from './globalScope/getMediaGlobalScope';
|
|
18
18
|
var packageName = "@atlaskit/media-card";
|
|
19
|
-
var packageVersion = "82.1.
|
|
19
|
+
var packageVersion = "82.1.43";
|
|
20
20
|
var SAMPLE_RATE = 0.05;
|
|
21
21
|
|
|
22
22
|
/**
|
|
@@ -32,6 +32,12 @@ export interface CardViewProps {
|
|
|
32
32
|
readonly shouldOpenMediaViewer?: boolean;
|
|
33
33
|
readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
34
34
|
readonly onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Fired when the "open in viewer" button receives focus. That button sits outside
|
|
37
|
+
* the card wrapper, so its focus never reaches `onFocus`, yet it is how keyboard
|
|
38
|
+
* users open the viewer. Internal to the card; not a consumer callback.
|
|
39
|
+
*/
|
|
40
|
+
readonly onOpenMediaViewerButtonFocus?: (event: FocusEvent<HTMLButtonElement>) => void;
|
|
35
41
|
readonly onDisplayImage?: () => void;
|
|
36
42
|
readonly cardPreview?: MediaFilePreview;
|
|
37
43
|
readonly progress?: number;
|
|
@@ -69,6 +75,6 @@ export interface RenderConfigByStatus {
|
|
|
69
75
|
customTitleMessage?: MessageDescriptor;
|
|
70
76
|
traceTooltipVariant?: TraceTooltipVariant;
|
|
71
77
|
}
|
|
72
|
-
export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, onFocus, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, isCWR, hasLoadingMotion, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
|
|
78
|
+
export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, onFocus, onOpenMediaViewerButtonFocus, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, isCWR, hasLoadingMotion, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
|
|
73
79
|
export declare const CardView: React.ForwardRefExoticComponent<Omit<CardViewProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
74
80
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
|
|
2
|
+
import type { MediaViewerPreloadEventPayload } from '@atlaskit/media-viewer/preload';
|
|
2
3
|
import type { MediaCardAnalyticsEventPayload } from './analytics';
|
|
3
|
-
export declare function fireMediaCardEvent(payload: MediaCardAnalyticsEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
|
|
4
|
+
export declare function fireMediaCardEvent(payload: MediaCardAnalyticsEventPayload | MediaViewerPreloadEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-card",
|
|
3
|
-
"version": "82.1.
|
|
3
|
+
"version": "82.1.44",
|
|
4
4
|
"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -39,24 +39,24 @@
|
|
|
39
39
|
"@atlaskit/icon": "^38.0.0",
|
|
40
40
|
"@atlaskit/interaction-context": "^4.1.0",
|
|
41
41
|
"@atlaskit/link": "^5.1.0",
|
|
42
|
-
"@atlaskit/media-client": "^39.
|
|
42
|
+
"@atlaskit/media-client": "^39.3.0",
|
|
43
43
|
"@atlaskit/media-client-react": "^7.0.0",
|
|
44
44
|
"@atlaskit/media-common": "^14.7.0",
|
|
45
45
|
"@atlaskit/media-file-preview": "^2.0.0",
|
|
46
46
|
"@atlaskit/media-state": "^4.0.0",
|
|
47
47
|
"@atlaskit/media-svg": "^4.0.0",
|
|
48
48
|
"@atlaskit/media-ui": "^31.5.0",
|
|
49
|
-
"@atlaskit/media-viewer": "^54.
|
|
49
|
+
"@atlaskit/media-viewer": "^54.12.0",
|
|
50
50
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
51
51
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
52
52
|
"@atlaskit/primitives": "^22.6.0",
|
|
53
53
|
"@atlaskit/progress-bar": "^5.3.0",
|
|
54
54
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
55
|
-
"@atlaskit/react-ufo": "^8.
|
|
55
|
+
"@atlaskit/react-ufo": "^8.3.0",
|
|
56
56
|
"@atlaskit/section-message": "^10.2.0",
|
|
57
57
|
"@atlaskit/theme": "^28.2.0",
|
|
58
|
-
"@atlaskit/tmp-editor-statsig": "^246.
|
|
59
|
-
"@atlaskit/tokens": "^20.
|
|
58
|
+
"@atlaskit/tmp-editor-statsig": "^246.1.0",
|
|
59
|
+
"@atlaskit/tokens": "^20.8.0",
|
|
60
60
|
"@atlaskit/tooltip": "^24.4.0",
|
|
61
61
|
"@atlaskit/ufo": "^2.0.0",
|
|
62
62
|
"@atlaskit/visually-hidden": "^4.4.0",
|