@atlaskit/media-file-preview 0.7.0 → 0.8.0

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/useFilePreview.js +10 -2
  3. package/dist/es2019/useFilePreview.js +12 -3
  4. package/dist/esm/useFilePreview.js +10 -2
  5. package/dist/types/useFilePreview.d.ts +3 -1
  6. package/dist/types-ts4.5/useFilePreview.d.ts +3 -1
  7. package/package.json +10 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/media-file-preview
2
2
 
3
+ ## 0.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#130787](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130787)
8
+ [`64a680780dc57`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64a680780dc57) -
9
+ Add performance observer metrics for Media Card to assist investigation into hot-110955
10
+
11
+ ### Patch Changes
12
+
13
+ - [#131947](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131947)
14
+ [`871136a343690`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/871136a343690) -
15
+ Fixed issue with images being refetched if the items responded before upfront preview resolved
16
+ - Updated dependencies
17
+
3
18
  ## 0.7.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/useFilePreview.js CHANGED
@@ -11,6 +11,7 @@ var _react = require("react");
11
11
  var _mediaClient = require("@atlaskit/media-client");
12
12
  var _mediaClientReact = require("@atlaskit/media-client-react");
13
13
  var _mediaCommon = require("@atlaskit/media-common");
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _analytics = require("./analytics");
15
16
  var _errors = require("./errors");
16
17
  var _getPreview = require("./getPreview");
@@ -30,7 +31,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
30
31
  _ref$allowAnimated = _ref.allowAnimated,
31
32
  allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
32
33
  upscale = _ref.upscale,
33
- maxAge = _ref.maxAge;
34
+ maxAge = _ref.maxAge,
35
+ source = _ref.source;
34
36
  var mediaClient = (0, _mediaClientReact.useMediaClient)();
35
37
  var _useState = (0, _react.useState)('loading'),
36
38
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -72,6 +74,12 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
72
74
  upscale: upscale,
73
75
  'max-age': maxAge
74
76
  });
77
+ if ((0, _platformFeatureFlags.fg)('platform.media-card-performance-observer_lgc7b')) {
78
+ imageURLParams = _objectSpread(_objectSpread({}, imageURLParams), {}, {
79
+ source: source,
80
+ ssr: ssr
81
+ });
82
+ }
75
83
  var previewInitializer = function previewInitializer() {
76
84
  var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
77
85
  if (preview) {
@@ -214,7 +222,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
214
222
  // Remote Preview ----------------------------------------------------------------
215
223
  else if (!error && !nonCriticalError && (!preview || (0, _helpers.isBigger)(preview.dimensions, requestDimensions) ||
216
224
  // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
217
- (0, _getPreview.isSSRPreview)(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
225
+ (0, _getPreview.isSSRPreview)(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
218
226
  getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
219
227
  var wrappedError = (0, _errors.ensureMediaFilePreviewError)('preview-fetch', e);
220
228
  if (!preview) {
package/dist/es2019/useFilePreview.js CHANGED
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { isImageRepresentationReady } from '@atlaskit/media-client';
3
3
  import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
4
4
  import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { createFailedSSRObject, extractErrorInfo } from './analytics';
6
7
  import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
7
8
  import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
@@ -18,7 +19,8 @@ export const useFilePreview = ({
18
19
  // TODO: mediaBlobUrlAttrs can be missing several values contained in the file details. The preview hook is not updating the params in the preview after the file details are available.
19
20
  allowAnimated = true,
20
21
  upscale,
21
- maxAge
22
+ maxAge,
23
+ source
22
24
  }) => {
23
25
  const mediaClient = useMediaClient();
24
26
  const [status, setStatus] = useState('loading');
@@ -36,7 +38,7 @@ export const useFilePreview = ({
36
38
  });
37
39
  const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
38
40
  const requestDimensionsRef = useCurrentValueRef(requestDimensions);
39
- const imageURLParams = {
41
+ let imageURLParams = {
40
42
  collection: identifier.collectionName,
41
43
  mode: resizeMode,
42
44
  ...requestDimensions,
@@ -44,6 +46,13 @@ export const useFilePreview = ({
44
46
  upscale,
45
47
  'max-age': maxAge
46
48
  };
49
+ if (fg('platform.media-card-performance-observer_lgc7b')) {
50
+ imageURLParams = {
51
+ ...imageURLParams,
52
+ source,
53
+ ssr
54
+ };
55
+ }
47
56
  const previewInitializer = () => {
48
57
  const preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
49
58
  if (preview) {
@@ -188,7 +197,7 @@ export const useFilePreview = ({
188
197
  // Remote Preview ----------------------------------------------------------------
189
198
  else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
190
199
  // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
191
- isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
200
+ isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
192
201
  getAndCacheRemotePreviewRef.current().then(setPreview).catch(e => {
193
202
  const wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
194
203
  if (!preview) {
package/dist/esm/useFilePreview.js CHANGED
@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
6
6
  import { isImageRepresentationReady } from '@atlaskit/media-client';
7
7
  import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
8
8
  import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { createFailedSSRObject, extractErrorInfo } from './analytics';
10
11
  import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
11
12
  import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
@@ -23,7 +24,8 @@ export var useFilePreview = function useFilePreview(_ref) {
23
24
  _ref$allowAnimated = _ref.allowAnimated,
24
25
  allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
25
26
  upscale = _ref.upscale,
26
- maxAge = _ref.maxAge;
27
+ maxAge = _ref.maxAge,
28
+ source = _ref.source;
27
29
  var mediaClient = useMediaClient();
28
30
  var _useState = useState('loading'),
29
31
  _useState2 = _slicedToArray(_useState, 2),
@@ -65,6 +67,12 @@ export var useFilePreview = function useFilePreview(_ref) {
65
67
  upscale: upscale,
66
68
  'max-age': maxAge
67
69
  });
70
+ if (fg('platform.media-card-performance-observer_lgc7b')) {
71
+ imageURLParams = _objectSpread(_objectSpread({}, imageURLParams), {}, {
72
+ source: source,
73
+ ssr: ssr
74
+ });
75
+ }
68
76
  var previewInitializer = function previewInitializer() {
69
77
  var preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
70
78
  if (preview) {
@@ -207,7 +215,7 @@ export var useFilePreview = function useFilePreview(_ref) {
207
215
  // Remote Preview ----------------------------------------------------------------
208
216
  else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
209
217
  // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
210
- isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
218
+ isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
211
219
  getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
212
220
  var wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
213
221
  if (!preview) {
package/dist/types/useFilePreview.d.ts CHANGED
@@ -26,8 +26,10 @@ export interface UseFilePreviewParams {
26
26
  /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
27
27
  */
28
28
  readonly maxAge?: number;
29
+ /** Defines the source component */
30
+ readonly source?: string;
29
31
  }
30
- export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
32
+ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, }: UseFilePreviewParams) => {
31
33
  preview: MediaFilePreview | undefined;
32
34
  status: MediaFilePreviewStatus;
33
35
  error: MediaFilePreviewError | undefined;
package/dist/types-ts4.5/useFilePreview.d.ts CHANGED
@@ -26,8 +26,10 @@ export interface UseFilePreviewParams {
26
26
  /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
27
27
  */
28
28
  readonly maxAge?: number;
29
+ /** Defines the source component */
30
+ readonly source?: string;
29
31
  }
30
- export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
32
+ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, }: UseFilePreviewParams) => {
31
33
  preview: MediaFilePreview | undefined;
32
34
  status: MediaFilePreviewStatus;
33
35
  error: MediaFilePreviewError | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-file-preview",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "description": "A React Hook to fetch and render file previews. It's overloaded with fancy features like SSR, lazy loading, memory cache and local preview.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -36,10 +36,11 @@
36
36
  ".": "./src/index.ts"
37
37
  },
38
38
  "dependencies": {
39
- "@atlaskit/media-client": "^27.3.0",
40
- "@atlaskit/media-client-react": "^2.0.1",
41
- "@atlaskit/media-common": "^11.3.0",
39
+ "@atlaskit/media-client": "^27.4.0",
40
+ "@atlaskit/media-client-react": "^2.1.0",
41
+ "@atlaskit/media-common": "^11.4.0",
42
42
  "@atlaskit/media-ui": "^25.11.0",
43
+ "@atlaskit/platform-feature-flags": "^0.3.0",
43
44
  "@babel/runtime": "^7.0.0",
44
45
  "eventemitter2": "^4.1.0",
45
46
  "lru_map": "^0.4.1"
@@ -96,5 +97,10 @@
96
97
  "import-no-extraneous-disable-for-examples-and-docs"
97
98
  ]
98
99
  }
100
+ },
101
+ "platform-feature-flags": {
102
+ "platform.media-card-performance-observer_lgc7b": {
103
+ "type": "boolean"
104
+ }
99
105
  }
100
106
  }