@atlaskit/media-card 79.11.1 → 79.11.2
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 +9 -0
- package/dist/cjs/utils/mediaPerformanceObserver/durationMetrics.js +13 -7
- package/dist/cjs/utils/mediaPerformanceObserver/mediaPerformanceObserver.js +18 -5
- package/dist/es2019/utils/mediaPerformanceObserver/durationMetrics.js +12 -6
- package/dist/es2019/utils/mediaPerformanceObserver/mediaPerformanceObserver.js +16 -5
- package/dist/esm/utils/mediaPerformanceObserver/durationMetrics.js +13 -7
- package/dist/esm/utils/mediaPerformanceObserver/mediaPerformanceObserver.js +18 -5
- package/dist/types/utils/mediaPerformanceObserver/durationMetrics.d.ts +2 -2
- package/dist/types-ts4.5/utils/mediaPerformanceObserver/durationMetrics.d.ts +2 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/media-card
|
|
2
2
|
|
|
3
|
+
## 79.11.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8eb08479e0602`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8eb08479e0602) -
|
|
8
|
+
Fixes the start time of the interaction relying on the UFO interaction start as opposed to
|
|
9
|
+
navigationTime and fixed the event emmission for path based routes
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 79.11.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -9,8 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
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; }
|
|
11
11
|
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; }
|
|
12
|
-
var getStartedAt = function getStartedAt(entry,
|
|
13
|
-
return entry.startTime -
|
|
12
|
+
var getStartedAt = function getStartedAt(entry, interactionStartTime) {
|
|
13
|
+
return entry.startTime - interactionStartTime;
|
|
14
14
|
};
|
|
15
15
|
var getCommonMetrics = function getCommonMetrics(entry) {
|
|
16
16
|
return {
|
|
@@ -85,10 +85,10 @@ var calculateCommonDurations = function calculateCommonDurations(metrics) {
|
|
|
85
85
|
return [key, end - start];
|
|
86
86
|
}));
|
|
87
87
|
};
|
|
88
|
-
var createMediaDurationMetrics = exports.createMediaDurationMetrics = function createMediaDurationMetrics(entry,
|
|
88
|
+
var createMediaDurationMetrics = exports.createMediaDurationMetrics = function createMediaDurationMetrics(entry, interactionStartTime) {
|
|
89
89
|
var _entry$serverTiming$f, _entry$serverTiming$f2;
|
|
90
90
|
return _objectSpread(_objectSpread({
|
|
91
|
-
startedAt: getStartedAt(entry,
|
|
91
|
+
startedAt: getStartedAt(entry, interactionStartTime),
|
|
92
92
|
/**
|
|
93
93
|
* Performance resource timing data regarding the loading of an
|
|
94
94
|
* application's resources as described in
|
|
@@ -141,11 +141,17 @@ var filterCommonMetrics = function filterCommonMetrics(metrics) {
|
|
|
141
141
|
return !!marks;
|
|
142
142
|
}));
|
|
143
143
|
};
|
|
144
|
-
var createUfoDurationMetrics = exports.createUfoDurationMetrics = function createUfoDurationMetrics(entry,
|
|
144
|
+
var createUfoDurationMetrics = exports.createUfoDurationMetrics = function createUfoDurationMetrics(entry, interactionStartTime) {
|
|
145
|
+
// Calculate timing relative to UFO interaction start time
|
|
146
|
+
// For page_load: interactionStartTime = 0 (relative to page navigation)
|
|
147
|
+
// For transitions: interactionStartTime = performance.now() when transition started
|
|
148
|
+
// This ensures metrics work correctly for both initial loads and SPA soft redirects
|
|
149
|
+
var relativeStartTime = entry.startTime - interactionStartTime;
|
|
145
150
|
return _objectSpread({
|
|
146
151
|
resourceTiming: {
|
|
147
|
-
start:
|
|
148
|
-
end: entry.responseEnd
|
|
152
|
+
start: relativeStartTime,
|
|
153
|
+
end: entry.responseEnd,
|
|
154
|
+
size: entry.transferSize
|
|
149
155
|
}
|
|
150
156
|
}, filterCommonMetrics(getCommonMetrics(entry)));
|
|
151
157
|
};
|
|
@@ -8,12 +8,17 @@ exports.startResourceObserver = exports.setAnalyticsContext = void 0;
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _analytics = require("@atlaskit/media-common/analytics");
|
|
10
10
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
|
+
var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
|
|
11
12
|
var _durationMetrics = require("./durationMetrics");
|
|
12
13
|
var _ufo = require("./ufo");
|
|
13
14
|
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; }
|
|
14
15
|
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; }
|
|
15
16
|
var MEDIA_CARD_PERF_STATE_KEY = '__mediaCardPerfState_asflkajsdflja';
|
|
16
|
-
|
|
17
|
+
// this should fire around 10% of the time
|
|
18
|
+
var shouldSamplePerfObserver = function shouldSamplePerfObserver() {
|
|
19
|
+
return Math.random() < 0.1;
|
|
20
|
+
};
|
|
21
|
+
var urlRegex = /(?:https:\/\/(?:media\.(?:dev|staging|prod)\.atl-paas\.net|api\.media\.atlassian\.com|media-cdn(?:\.stg\.|\.)atlassian\.com)\/|media-api\/)file\/([^/]+)\/image.*[?&]source=mediaCard/;
|
|
17
22
|
var clientIdParamRegex = /[?&]clientId=([^&]+)/;
|
|
18
23
|
var ssrParamRegex = /[?&]token=([^&]+)/;
|
|
19
24
|
var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
@@ -25,11 +30,17 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
25
30
|
var matchClientId = entry.name.match(clientIdParamRegex);
|
|
26
31
|
var matchSSR = entry.name.match(ssrParamRegex);
|
|
27
32
|
if (matchFileId && (_window$MEDIA_CARD_PE = window[MEDIA_CARD_PERF_STATE_KEY]) !== null && _window$MEDIA_CARD_PE !== void 0 && _window$MEDIA_CARD_PE.mediaCardCreateAnalyticsEvent) {
|
|
33
|
+
var _interaction$start;
|
|
28
34
|
var fileId = matchFileId[1];
|
|
29
35
|
var clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
|
|
30
36
|
var ssr = matchSSR ? 'server' : undefined;
|
|
31
|
-
|
|
32
|
-
|
|
37
|
+
|
|
38
|
+
// Get UFO interaction start time for proper timing in SPAs
|
|
39
|
+
// For page_load: start = 0 (relative to page navigation)
|
|
40
|
+
// For transitions: start = performance.now() when transition started
|
|
41
|
+
var interaction = (0, _interactionMetrics.getActiveInteraction)();
|
|
42
|
+
var interactionStartTime = (_interaction$start = interaction === null || interaction === void 0 ? void 0 : interaction.start) !== null && _interaction$start !== void 0 ? _interaction$start : 0;
|
|
43
|
+
var mediaDurationMetrics = (0, _durationMetrics.createMediaDurationMetrics)(entry, interactionStartTime);
|
|
33
44
|
var event = window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent({
|
|
34
45
|
eventType: 'operational',
|
|
35
46
|
action: 'succeeded',
|
|
@@ -43,9 +54,11 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
43
54
|
}
|
|
44
55
|
}, mediaDurationMetrics)
|
|
45
56
|
});
|
|
46
|
-
|
|
57
|
+
if (shouldSamplePerfObserver()) {
|
|
58
|
+
event.fire(_analytics.ANALYTICS_MEDIA_CHANNEL);
|
|
59
|
+
}
|
|
47
60
|
if ((0, _platformFeatureFlags.fg)('platform_media_card_ufo_network_metrics')) {
|
|
48
|
-
var ufoDurationMetrics = (0, _durationMetrics.createUfoDurationMetrics)(entry,
|
|
61
|
+
var ufoDurationMetrics = (0, _durationMetrics.createUfoDurationMetrics)(entry, interactionStartTime);
|
|
49
62
|
var endpointName = 'image';
|
|
50
63
|
(0, _ufo.sendUfoDurationMetrics)(ufoDurationMetrics, endpointName);
|
|
51
64
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const getStartedAt = (entry,
|
|
1
|
+
const getStartedAt = (entry, interactionStartTime) => entry.startTime - interactionStartTime;
|
|
2
2
|
const getCommonMetrics = entry => ({
|
|
3
3
|
tcpHandshakeTime: {
|
|
4
4
|
end: entry.connectEnd,
|
|
@@ -67,10 +67,10 @@ const calculateCommonDurations = metrics => Object.fromEntries(Object.entries(me
|
|
|
67
67
|
} = marks;
|
|
68
68
|
return [key, end - start];
|
|
69
69
|
}));
|
|
70
|
-
export const createMediaDurationMetrics = (entry,
|
|
70
|
+
export const createMediaDurationMetrics = (entry, interactionStartTime) => {
|
|
71
71
|
var _entry$serverTiming$f, _entry$serverTiming$f2;
|
|
72
72
|
return {
|
|
73
|
-
startedAt: getStartedAt(entry,
|
|
73
|
+
startedAt: getStartedAt(entry, interactionStartTime),
|
|
74
74
|
/**
|
|
75
75
|
* Performance resource timing data regarding the loading of an
|
|
76
76
|
* application's resources as described in
|
|
@@ -120,11 +120,17 @@ export const createMediaDurationMetrics = (entry, navigationTime) => {
|
|
|
120
120
|
};
|
|
121
121
|
};
|
|
122
122
|
const filterCommonMetrics = metrics => Object.fromEntries(Object.entries(metrics).filter(([, marks]) => !!marks));
|
|
123
|
-
export const createUfoDurationMetrics = (entry,
|
|
123
|
+
export const createUfoDurationMetrics = (entry, interactionStartTime) => {
|
|
124
|
+
// Calculate timing relative to UFO interaction start time
|
|
125
|
+
// For page_load: interactionStartTime = 0 (relative to page navigation)
|
|
126
|
+
// For transitions: interactionStartTime = performance.now() when transition started
|
|
127
|
+
// This ensures metrics work correctly for both initial loads and SPA soft redirects
|
|
128
|
+
const relativeStartTime = entry.startTime - interactionStartTime;
|
|
124
129
|
return {
|
|
125
130
|
resourceTiming: {
|
|
126
|
-
start:
|
|
127
|
-
end: entry.responseEnd
|
|
131
|
+
start: relativeStartTime,
|
|
132
|
+
end: entry.responseEnd,
|
|
133
|
+
size: entry.transferSize
|
|
128
134
|
},
|
|
129
135
|
...filterCommonMetrics(getCommonMetrics(entry))
|
|
130
136
|
};
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common/analytics';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
|
|
3
4
|
import { createMediaDurationMetrics, createUfoDurationMetrics } from './durationMetrics';
|
|
4
5
|
import { sendUfoDurationMetrics } from './ufo';
|
|
5
6
|
const MEDIA_CARD_PERF_STATE_KEY = '__mediaCardPerfState_asflkajsdflja';
|
|
6
|
-
|
|
7
|
+
// this should fire around 10% of the time
|
|
8
|
+
const shouldSamplePerfObserver = () => Math.random() < 0.1;
|
|
9
|
+
const urlRegex = /(?:https:\/\/(?:media\.(?:dev|staging|prod)\.atl-paas\.net|api\.media\.atlassian\.com|media-cdn(?:\.stg\.|\.)atlassian\.com)\/|media-api\/)file\/([^/]+)\/image.*[?&]source=mediaCard/;
|
|
7
10
|
const clientIdParamRegex = /[?&]clientId=([^&]+)/;
|
|
8
11
|
const ssrParamRegex = /[?&]token=([^&]+)/;
|
|
9
12
|
const createAndGetResourceObserver = () => {
|
|
@@ -15,11 +18,17 @@ const createAndGetResourceObserver = () => {
|
|
|
15
18
|
const matchClientId = entry.name.match(clientIdParamRegex);
|
|
16
19
|
const matchSSR = entry.name.match(ssrParamRegex);
|
|
17
20
|
if (matchFileId && (_window$MEDIA_CARD_PE = window[MEDIA_CARD_PERF_STATE_KEY]) !== null && _window$MEDIA_CARD_PE !== void 0 && _window$MEDIA_CARD_PE.mediaCardCreateAnalyticsEvent) {
|
|
21
|
+
var _interaction$start;
|
|
18
22
|
const fileId = matchFileId[1];
|
|
19
23
|
const clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
|
|
20
24
|
const ssr = matchSSR ? 'server' : undefined;
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
|
|
26
|
+
// Get UFO interaction start time for proper timing in SPAs
|
|
27
|
+
// For page_load: start = 0 (relative to page navigation)
|
|
28
|
+
// For transitions: start = performance.now() when transition started
|
|
29
|
+
const interaction = getActiveInteraction();
|
|
30
|
+
const interactionStartTime = (_interaction$start = interaction === null || interaction === void 0 ? void 0 : interaction.start) !== null && _interaction$start !== void 0 ? _interaction$start : 0;
|
|
31
|
+
const mediaDurationMetrics = createMediaDurationMetrics(entry, interactionStartTime);
|
|
23
32
|
const event = window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent({
|
|
24
33
|
eventType: 'operational',
|
|
25
34
|
action: 'succeeded',
|
|
@@ -34,9 +43,11 @@ const createAndGetResourceObserver = () => {
|
|
|
34
43
|
...mediaDurationMetrics
|
|
35
44
|
}
|
|
36
45
|
});
|
|
37
|
-
|
|
46
|
+
if (shouldSamplePerfObserver()) {
|
|
47
|
+
event.fire(ANALYTICS_MEDIA_CHANNEL);
|
|
48
|
+
}
|
|
38
49
|
if (fg('platform_media_card_ufo_network_metrics')) {
|
|
39
|
-
const ufoDurationMetrics = createUfoDurationMetrics(entry,
|
|
50
|
+
const ufoDurationMetrics = createUfoDurationMetrics(entry, interactionStartTime);
|
|
40
51
|
const endpointName = 'image';
|
|
41
52
|
sendUfoDurationMetrics(ufoDurationMetrics, endpointName);
|
|
42
53
|
}
|
|
@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
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; }
|
|
4
4
|
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) { _defineProperty(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; }
|
|
5
|
-
var getStartedAt = function getStartedAt(entry,
|
|
6
|
-
return entry.startTime -
|
|
5
|
+
var getStartedAt = function getStartedAt(entry, interactionStartTime) {
|
|
6
|
+
return entry.startTime - interactionStartTime;
|
|
7
7
|
};
|
|
8
8
|
var getCommonMetrics = function getCommonMetrics(entry) {
|
|
9
9
|
return {
|
|
@@ -78,10 +78,10 @@ var calculateCommonDurations = function calculateCommonDurations(metrics) {
|
|
|
78
78
|
return [key, end - start];
|
|
79
79
|
}));
|
|
80
80
|
};
|
|
81
|
-
export var createMediaDurationMetrics = function createMediaDurationMetrics(entry,
|
|
81
|
+
export var createMediaDurationMetrics = function createMediaDurationMetrics(entry, interactionStartTime) {
|
|
82
82
|
var _entry$serverTiming$f, _entry$serverTiming$f2;
|
|
83
83
|
return _objectSpread(_objectSpread({
|
|
84
|
-
startedAt: getStartedAt(entry,
|
|
84
|
+
startedAt: getStartedAt(entry, interactionStartTime),
|
|
85
85
|
/**
|
|
86
86
|
* Performance resource timing data regarding the loading of an
|
|
87
87
|
* application's resources as described in
|
|
@@ -134,11 +134,17 @@ var filterCommonMetrics = function filterCommonMetrics(metrics) {
|
|
|
134
134
|
return !!marks;
|
|
135
135
|
}));
|
|
136
136
|
};
|
|
137
|
-
export var createUfoDurationMetrics = function createUfoDurationMetrics(entry,
|
|
137
|
+
export var createUfoDurationMetrics = function createUfoDurationMetrics(entry, interactionStartTime) {
|
|
138
|
+
// Calculate timing relative to UFO interaction start time
|
|
139
|
+
// For page_load: interactionStartTime = 0 (relative to page navigation)
|
|
140
|
+
// For transitions: interactionStartTime = performance.now() when transition started
|
|
141
|
+
// This ensures metrics work correctly for both initial loads and SPA soft redirects
|
|
142
|
+
var relativeStartTime = entry.startTime - interactionStartTime;
|
|
138
143
|
return _objectSpread({
|
|
139
144
|
resourceTiming: {
|
|
140
|
-
start:
|
|
141
|
-
end: entry.responseEnd
|
|
145
|
+
start: relativeStartTime,
|
|
146
|
+
end: entry.responseEnd,
|
|
147
|
+
size: entry.transferSize
|
|
142
148
|
}
|
|
143
149
|
}, filterCommonMetrics(getCommonMetrics(entry)));
|
|
144
150
|
};
|
|
@@ -3,10 +3,15 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
3
|
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) { _defineProperty(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; }
|
|
4
4
|
import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common/analytics';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
|
|
6
7
|
import { createMediaDurationMetrics, createUfoDurationMetrics } from './durationMetrics';
|
|
7
8
|
import { sendUfoDurationMetrics } from './ufo';
|
|
8
9
|
var MEDIA_CARD_PERF_STATE_KEY = '__mediaCardPerfState_asflkajsdflja';
|
|
9
|
-
|
|
10
|
+
// this should fire around 10% of the time
|
|
11
|
+
var shouldSamplePerfObserver = function shouldSamplePerfObserver() {
|
|
12
|
+
return Math.random() < 0.1;
|
|
13
|
+
};
|
|
14
|
+
var urlRegex = /(?:https:\/\/(?:media\.(?:dev|staging|prod)\.atl-paas\.net|api\.media\.atlassian\.com|media-cdn(?:\.stg\.|\.)atlassian\.com)\/|media-api\/)file\/([^/]+)\/image.*[?&]source=mediaCard/;
|
|
10
15
|
var clientIdParamRegex = /[?&]clientId=([^&]+)/;
|
|
11
16
|
var ssrParamRegex = /[?&]token=([^&]+)/;
|
|
12
17
|
var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
@@ -18,11 +23,17 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
18
23
|
var matchClientId = entry.name.match(clientIdParamRegex);
|
|
19
24
|
var matchSSR = entry.name.match(ssrParamRegex);
|
|
20
25
|
if (matchFileId && (_window$MEDIA_CARD_PE = window[MEDIA_CARD_PERF_STATE_KEY]) !== null && _window$MEDIA_CARD_PE !== void 0 && _window$MEDIA_CARD_PE.mediaCardCreateAnalyticsEvent) {
|
|
26
|
+
var _interaction$start;
|
|
21
27
|
var fileId = matchFileId[1];
|
|
22
28
|
var clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
|
|
23
29
|
var ssr = matchSSR ? 'server' : undefined;
|
|
24
|
-
|
|
25
|
-
|
|
30
|
+
|
|
31
|
+
// Get UFO interaction start time for proper timing in SPAs
|
|
32
|
+
// For page_load: start = 0 (relative to page navigation)
|
|
33
|
+
// For transitions: start = performance.now() when transition started
|
|
34
|
+
var interaction = getActiveInteraction();
|
|
35
|
+
var interactionStartTime = (_interaction$start = interaction === null || interaction === void 0 ? void 0 : interaction.start) !== null && _interaction$start !== void 0 ? _interaction$start : 0;
|
|
36
|
+
var mediaDurationMetrics = createMediaDurationMetrics(entry, interactionStartTime);
|
|
26
37
|
var event = window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent({
|
|
27
38
|
eventType: 'operational',
|
|
28
39
|
action: 'succeeded',
|
|
@@ -36,9 +47,11 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
36
47
|
}
|
|
37
48
|
}, mediaDurationMetrics)
|
|
38
49
|
});
|
|
39
|
-
|
|
50
|
+
if (shouldSamplePerfObserver()) {
|
|
51
|
+
event.fire(ANALYTICS_MEDIA_CHANNEL);
|
|
52
|
+
}
|
|
40
53
|
if (fg('platform_media_card_ufo_network_metrics')) {
|
|
41
|
-
var ufoDurationMetrics = createUfoDurationMetrics(entry,
|
|
54
|
+
var ufoDurationMetrics = createUfoDurationMetrics(entry, interactionStartTime);
|
|
42
55
|
var endpointName = 'image';
|
|
43
56
|
sendUfoDurationMetrics(ufoDurationMetrics, endpointName);
|
|
44
57
|
}
|
|
@@ -5,7 +5,7 @@ export type UfoDurationMetrics = Record<string, {
|
|
|
5
5
|
end?: number;
|
|
6
6
|
size?: number;
|
|
7
7
|
}>;
|
|
8
|
-
export declare const createMediaDurationMetrics: (entry: ExperimentalPerformanceResourceTiming,
|
|
8
|
+
export declare const createMediaDurationMetrics: (entry: ExperimentalPerformanceResourceTiming, interactionStartTime: number) => {
|
|
9
9
|
/**
|
|
10
10
|
* The user agent string for the current browser
|
|
11
11
|
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
|
|
@@ -40,4 +40,4 @@ export declare const createMediaDurationMetrics: (entry: ExperimentalPerformance
|
|
|
40
40
|
browserCacheHit: boolean;
|
|
41
41
|
nextHopProtocol: string;
|
|
42
42
|
};
|
|
43
|
-
export declare const createUfoDurationMetrics: (entry: ExperimentalPerformanceResourceTiming,
|
|
43
|
+
export declare const createUfoDurationMetrics: (entry: ExperimentalPerformanceResourceTiming, interactionStartTime: number) => UfoDurationMetrics;
|
|
@@ -5,7 +5,7 @@ export type UfoDurationMetrics = Record<string, {
|
|
|
5
5
|
end?: number;
|
|
6
6
|
size?: number;
|
|
7
7
|
}>;
|
|
8
|
-
export declare const createMediaDurationMetrics: (entry: ExperimentalPerformanceResourceTiming,
|
|
8
|
+
export declare const createMediaDurationMetrics: (entry: ExperimentalPerformanceResourceTiming, interactionStartTime: number) => {
|
|
9
9
|
/**
|
|
10
10
|
* The user agent string for the current browser
|
|
11
11
|
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
|
|
@@ -40,4 +40,4 @@ export declare const createMediaDurationMetrics: (entry: ExperimentalPerformance
|
|
|
40
40
|
browserCacheHit: boolean;
|
|
41
41
|
nextHopProtocol: string;
|
|
42
42
|
};
|
|
43
|
-
export declare const createUfoDurationMetrics: (entry: ExperimentalPerformanceResourceTiming,
|
|
43
|
+
export declare const createUfoDurationMetrics: (entry: ExperimentalPerformanceResourceTiming, interactionStartTime: number) => UfoDurationMetrics;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-card",
|
|
3
|
-
"version": "79.11.
|
|
3
|
+
"version": "79.11.2",
|
|
4
4
|
"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"@af/integration-testing": "workspace:^",
|
|
72
72
|
"@atlaskit/analytics-listeners": "^9.1.0",
|
|
73
73
|
"@atlaskit/analytics-namespaced-context": "^7.2.0",
|
|
74
|
-
"@atlaskit/form": "^15.
|
|
74
|
+
"@atlaskit/form": "^15.2.0",
|
|
75
75
|
"@atlaskit/inline-message": "^15.5.0",
|
|
76
76
|
"@atlaskit/media-core": "^37.0.0",
|
|
77
77
|
"@atlaskit/media-picker": "^70.1.0",
|