@atlaskit/media-card 73.6.0 → 74.0.0

package/dist/esm/utils/errorIcon/styles.js

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+export var errorIconWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  color: #ff991f;\n"])));

package/dist/esm/utils/fileIcon/index.js

@@ -8,10 +8,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { MediaTypeIcon } from '../mediaTypeIcon';
-import { FileTypeIcon } from './styled';
+import { fileTypeIconStyles } from './styles';
 var fileTypeIconClass = 'file-type-icon';
 export var FileIcon = /*#__PURE__*/function (_Component) {
   _inherits(FileIcon, _Component);
@@ -32,17 +33,18 @@ export var FileIcon = /*#__PURE__*/function (_Component) {
           iconUrl = _this$props.iconUrl,
           style = _this$props.style;
       var type = mediaType || 'unknown';
-      var defaultIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
+      var defaultIcon = jsx(MediaTypeIcon, {
         type: mediaType,
         size: "small",
         className: fileTypeIconClass
       });
-      var icon = iconUrl ? /*#__PURE__*/React.createElement("img", {
+      var icon = iconUrl ? jsx("img", {
         src: iconUrl,
         className: "custom-icon",
         alt: type
       }) : defaultIcon;
-      return /*#__PURE__*/React.createElement(FileTypeIcon, {
+      return jsx("div", {
+        css: fileTypeIconStyles,
         style: style,
         className: fileTypeIconClass
       }, icon);

package/dist/esm/utils/fileIcon/styles.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { size } from '@atlaskit/media-ui';
+export var fileTypeIconStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  float: left;\n  margin-right: 6px;\n  position: relative;\n  top: 1px;\n  img {\n    ", ";\n  }\n"])), size('12px !important'));

package/dist/esm/utils/getMediaCardCursor.js

@@ -1,8 +1,12 @@
 import { MediaCardCursor } from '../types';
+
+/**
+ * When the returned value is undefined, we'd expect the media card to take the parent's cursor style.
+ */
 export var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) {
   // If error status or no action is requested = NoAction
   if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
-    return MediaCardCursor.NoAction;
+    return;
   }
 
   if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
@@ -15,5 +19,5 @@ export var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, use
     return MediaCardCursor.Action;
   }
 
-  return MediaCardCursor.NoAction;
+  return;
 };

package/dist/esm/utils/lightCards/cardError.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { Component } from 'react';
 import { ErrorIcon } from '../errorIcon';
-import { Wrapper } from './styled';
+import { Wrapper } from './lightCardWrappers';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
 export var CardError = /*#__PURE__*/function (_Component) {
   _inherits(CardError, _Component);

package/dist/esm/utils/lightCards/cardLoading.js

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { Component } from 'react';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';
-import { Wrapper, AnimatedWrapper } from './styled';
+import { Wrapper, AnimatedWrapper } from './lightCardWrappers';
 import SpinnerIcon from '@atlaskit/spinner';
 import FileIcon from '@atlaskit/icon/glyph/file';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';

package/dist/esm/utils/lightCards/lightCardWrappers.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, animatedWrapperStyles } from './styles';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+export var Wrapper = function Wrapper(props) {
+  var theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: wrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+export var AnimatedWrapper = function AnimatedWrapper(props) {
+  var theme = useGlobalTheme();
+  return jsx("div", _extends({
+    css: animatedWrapperStyles({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};

package/dist/esm/utils/lightCards/styles.js

@@ -0,0 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+import { keyframes } from '@emotion/react';
+import { center, borderRadius } from '@atlaskit/media-ui';
+import { themed } from '@atlaskit/theme/components';
+import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
+export var blinkLoadingAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0%{\n    opacity: 1;\n  }\n\n  50%{\n    opacity: 0.6;\n  }\n\n  100%{\n    opacity: 1;\n  }\n"])));
+export var wrapperStyles = function wrapperStyles(_ref) {
+  var dimensions = _ref.dimensions,
+      theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, themed({
+    light: N20,
+    dark: DN50
+  })({
+    theme: theme
+  }), themed({
+    light: N50,
+    dark: DN100
+  })({
+    theme: theme
+  }), borderRadius, dimensions.width, dimensions.height);
+};
+export var animatedWrapperStyles = function animatedWrapperStyles(props) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  > span {\n    animation: ", " 0.8s infinite;\n  }\n"])), wrapperStyles(props), blinkLoadingAnimation);
+};

package/dist/esm/utils/mediaTypeIcon/iconWrapper.js

@@ -0,0 +1,9 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconWrapperStyles } from './styles';
+export var IconWrapper = function IconWrapper(props) {
+  return jsx("div", {
+    id: "iconWrapper",
+    css: iconWrapperStyles(props)
+  }, props.children);
+};

package/dist/esm/utils/mediaTypeIcon/index.js

@@ -15,7 +15,7 @@ import ArchiveIcon from '@atlaskit/icon/glyph/media-services/zip';
 import VideoIcon from '@atlaskit/icon/glyph/media-services/video';
 import DocIcon from '@atlaskit/icon/glyph/document';
 import UnknownIcon from '@atlaskit/icon/glyph/page';
-import { IconWrapper } from './styled';
+import { IconWrapper } from './iconWrapper';
 var icons = {
   image: ImageIcon,
   audio: AudioIcon,

package/dist/esm/utils/mediaTypeIcon/{styled.js → styles.js}

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { Y200, P200, B300 } from '@atlaskit/theme/colors';
 var typeToColorMap = {
   image: Y200,
@@ -13,7 +13,12 @@ var typeToColorMap = {
   archive: '' // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
 
 };
-export var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  color: ", ";\n"])), function (_ref) {
+
+var getWrapperColor = function getWrapperColor(_ref) {
   var type = _ref.type;
   return typeToColorMap[type] || typeToColorMap.unknown;
-});
+};
+
+export var iconWrapperStyles = function iconWrapperStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  color: ", ";\n"])), getWrapperColor(props));
+};

package/dist/esm/utils/mediaTypeIcon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/progressBar/index.js

@@ -8,9 +8,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { ProgressWrapper } from './styled';
+import { progressWrapperStyles } from './styles';
 export var ProgressBar = /*#__PURE__*/function (_Component) {
   _inherits(ProgressBar, _Component);
 
@@ -33,7 +34,9 @@ export var ProgressBar = /*#__PURE__*/function (_Component) {
       var progressBarStyle = {
         width: "".concat(progress * 100, "%")
       };
-      return /*#__PURE__*/React.createElement(ProgressWrapper, null, /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
+        css: progressWrapperStyles
+      }, jsx("div", {
         className: 'progressBar',
         style: progressBarStyle
       }));

package/dist/esm/utils/progressBar/styles.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/media-ui';
+export var progressWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " z-index: 30;\n  overflow: hidden;\n  background-color: rgba(255, 255, 255, 0.3);\n\n  .progressBar {\n    width: 0%;\n    height: 3px;\n    transition: width 0.25s ease-in;\n    background-color: white;\n  }\n"])), borderRadius);

package/dist/esm/utils/ufoExperiences.js

@@ -5,12 +5,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
-import { name as packageName, version as packageVersion } from '../version.json';
-import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
+import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KEYS } from './analytics';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.0.0";
 var concurrentExperience;
 
-var getExperience = function getExperience(id, featureFlagsKeys) {
+var getExperience = function getExperience(id) {
   if (!concurrentExperience) {
     var inlineExperience = {
       platform: {
@@ -18,7 +19,7 @@ var getExperience = function getExperience(id, featureFlagsKeys) {
       },
       type: ExperienceTypes.Experience,
       performanceType: ExperiencePerformanceTypes.InlineResult,
-      featureFlagsKeys: featureFlagsKeys
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     concurrentExperience = new ConcurrentExperience('media-card-render', inlineExperience);
   }
@@ -26,13 +27,13 @@ var getExperience = function getExperience(id, featureFlagsKeys) {
   return concurrentExperience.getInstance(id);
 };
 
-export var startUfoExperience = function startUfoExperience(id, featureFlagsKeys) {
-  getExperience(id, featureFlagsKeys).start();
+export var startUfoExperience = function startUfoExperience(id) {
+  getExperience(id).start();
 };
-export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, featureFlagsKeys, error) {
+export var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability, error) {
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, featureFlagsKeys, {
+      succeedUfoExperience(id, {
         fileAttributes: fileAttributes,
         ssrReliability: ssrReliability,
         fileStateFlags: fileStateFlags
@@ -40,7 +41,7 @@ export var completeUfoExperience = function completeUfoExperience(id, status, fi
       break;
 
     case 'failed-processing':
-      failUfoExperience(id, featureFlagsKeys, {
+      failUfoExperience(id, {
         fileAttributes: fileAttributes,
         failReason: 'failed-processing',
         ssrReliability: ssrReliability,
@@ -49,7 +50,7 @@ export var completeUfoExperience = function completeUfoExperience(id, status, fi
       break;
 
     case 'error':
-      error && failUfoExperience(id, featureFlagsKeys, _objectSpread(_objectSpread({
+      error && failUfoExperience(id, _objectSpread(_objectSpread({
         fileAttributes: fileAttributes
       }, extractErrorInfo(error)), {}, {
         request: getRenderErrorRequestMetadata(error),
@@ -60,8 +61,8 @@ export var completeUfoExperience = function completeUfoExperience(id, status, fi
   }
 };
 
-var succeedUfoExperience = function succeedUfoExperience(id, featureFlagsKeys, properties) {
-  getExperience(id, featureFlagsKeys).success({
+var succeedUfoExperience = function succeedUfoExperience(id, properties) {
+  getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: packageName,
       packageVersion: packageVersion,
@@ -71,8 +72,8 @@ var succeedUfoExperience = function succeedUfoExperience(id, featureFlagsKeys, p
   });
 };
 
-var failUfoExperience = function failUfoExperience(id, featureFlagsKeys, properties) {
-  getExperience(id, featureFlagsKeys).failure({
+var failUfoExperience = function failUfoExperience(id, properties) {
+  getExperience(id).failure({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
       packageName: packageName,
       packageVersion: packageVersion,

package/dist/esm/utils/videoSnapshot.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import VideoSnapshot from 'video-snapshot';
 export var takeSnapshot = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(blob) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "73.6.0",
+	"version": "74.0.0",
 	"sideEffects": false
 }

package/dist/types/files/cardImageView/cardImageViewWrapper.d.ts

@@ -0,0 +1,6 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { WrapperProps } from './styles';
+export declare const CardImageViewWrapper: (props: WrapperProps) => jsx.JSX.Element;
+export declare const PlayIconWrapper: (props: any) => jsx.JSX.Element;
+export declare const ProgressBarWrapper: (props: any) => jsx.JSX.Element;

package/dist/types/files/cardImageView/cardOverlay/cardOverlayComponents.d.ts

@@ -0,0 +1,8 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { OverlayProps } from './styles';
+export declare const Overlay: (props: OverlayProps) => jsx.JSX.Element;
+export declare const ErrorMessage: (props: any) => jsx.JSX.Element;
+export declare const AltWrapper: (props: any) => jsx.JSX.Element;
+export declare const TitleWrapper: (props: any) => jsx.JSX.Element;
+export declare const Metadata: (props: any) => jsx.JSX.Element;

package/dist/types/files/cardImageView/cardOverlay/index.d.ts

@@ -1,3 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { MouseEvent, Component, ReactNode } from 'react';
 import { MediaType } from '@atlaskit/media-client';
 import { CardAction, CardEventHandler } from '../../../actions';
@@ -26,10 +28,10 @@ export declare class CardOverlay extends Component<CardOverlayProps, CardOverlay
     };
     constructor(props: CardOverlayProps);
     private get wrapperClassNames();
-    render(): JSX.Element;
-    errorLine(): false | "" | 0 | JSX.Element | null | undefined;
-    tickBox(): false | JSX.Element | undefined;
-    bottomLeftColumn(): JSX.Element | undefined;
+    render(): jsx.JSX.Element;
+    errorLine(): false | "" | 0 | jsx.JSX.Element | null | undefined;
+    tickBox(): false | jsx.JSX.Element | undefined;
+    bottomLeftColumn(): jsx.JSX.Element | undefined;
     onMenuToggle: (attrs: {
         isOpen: boolean;
     }) => void;

package/dist/types/files/cardImageView/cardOverlay/styles.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Everything about this file change is just wrong.
+ * Mostly because we do bad things with classes.
+ * This is all wrong and hopefully will be removed from existence with card v3,
+ * so please don’t be too sad about all this!
+ */
+/// <reference types="react" />
+import { GlobalThemeTokens } from '@atlaskit/theme/components';
+export interface OverlayProps {
+    hasError?: boolean;
+    noHover?: boolean;
+    className?: string;
+    children?: JSX.Element[];
+}
+export declare const tickBoxStyles: import("@emotion/react").SerializedStyles;
+export declare const overlayStyles: (props: OverlayProps) => import("@emotion/react").SerializedStyles;
+export declare const errorLineStyles: import("@emotion/react").SerializedStyles;
+export declare const leftColumnStyles: import("@emotion/react").SerializedStyles;
+export declare const topRowStyles: import("@emotion/react").SerializedStyles;
+export declare const bottomRowStyles: import("@emotion/react").SerializedStyles;
+export declare const rightColumnStyles: import("@emotion/react").SerializedStyles;
+export declare const errorMessageStyles: import("@emotion/react").SerializedStyles;
+export declare const altWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const titleWrapperStyles: (theme: GlobalThemeTokens) => import("@emotion/react").SerializedStyles;
+export declare const subtitleStyles: import("@emotion/react").SerializedStyles;
+export declare const metadataStyles: import("@emotion/react").SerializedStyles;

package/dist/types/files/cardImageView/index.d.ts

@@ -1,3 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component, ReactNode } from 'react';
 import { MediaItemType, MediaType, ImageResizeMode } from '@atlaskit/media-client';
 import { CardDimensions, CardStatus } from '../../index';
@@ -29,7 +31,7 @@ export interface FileCardImageViewProps {
 export declare class FileCardImageView extends Component<FileCardImageViewProps> {
     private wasThumbnailDisplayed;
     static defaultProps: Partial<FileCardImageViewProps>;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
     private renderCardContents;
     private renderLoadingContents;
     private renderErrorContents;

package/dist/types/files/cardImageView/styles.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { GlobalThemeTokens } from '@atlaskit/theme/components';
+import { CardStatus } from '../../index';
+export interface WrapperProps {
+    disableOverlay?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    hasOnClick?: boolean;
+    mediaType?: string;
+    mediaName?: string;
+    progress?: number;
+    status?: CardStatus;
+    theme?: GlobalThemeTokens;
+    children?: JSX.Element | JSX.Element[];
+}
+export declare const wrapperStyles: (props: WrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const playIconWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const playIconBackgroundStyles: import("@emotion/react").SerializedStyles;
+export declare const progressBarWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const overlayStyles: import("@emotion/react").SerializedStyles;
+export declare const titleStyles: import("@emotion/react").SerializedStyles;
+export declare const bodyStyles: import("@emotion/react").SerializedStyles;
+export declare const progressWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const cardActionsWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types/index.d.ts

@@ -38,6 +38,11 @@ export interface CardOnClickCallback {
 export interface CardEventProps {
     readonly onClick?: CardOnClickCallback;
     readonly onMouseEnter?: (result: CardEvent) => void;
+    /** Callback function to be called when video enters and exit fullscreen.
+     * `fullscreen = true` indicates video enters fullscreen
+     * `fullscreen = false` indicates video exits fullscreen
+     */
+    readonly onFullscreenChange?: (fullscreen: boolean) => void;
 }
 export interface CardProps extends SharedCardProps, CardEventProps {
     readonly mediaClient: MediaClient;
@@ -68,5 +73,5 @@ export { CardLoading } from './utils/lightCards/cardLoading';
 export { CardError } from './utils/lightCards/cardError';
 export { defaultImageCardDimensions } from './utils/cardDimensions';
 export { fileCardImageViewSelector, fileCardImageViewSelectedSelector, } from './files/cardImageView/classnames';
-export { inlinePlayerClassName } from './root/inlinePlayer';
+export { inlinePlayerClassName } from './root/styles';
 export { newFileExperienceClassName } from './root/card/cardConstants';

package/dist/types/root/card/cardAnalytics.d.ts

@@ -3,16 +3,6 @@ import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../../utils/analytics';
 import { CardStatus } from '../..';
 import { MediaCardError } from './../../errors';
-export declare const REQUIRED_FEATURE_FLAGS: {
-    newCardExperience: boolean;
-    captions: boolean;
-    timestampOnVideo: boolean;
-    observedWidth: boolean;
-    mediaInline: boolean;
-    folderUploads: boolean;
-};
-export declare const getRelevantFeatureFlagNames: () => (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
-export declare const getRelevantFeatureFlagKeysWithAllProducts: () => string[];
 export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError | undefined) => void;
 export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;

package/dist/types/root/card/getCardPreview/cache.d.ts

@@ -1,18 +1,19 @@
+import { ImageResizeMode } from '@atlaskit/media-client';
 import { ObjectURLCache } from '../../../utils/objectURLCache';
-import { CardDimensions } from '../../../utils/cardDimensions';
 import { CardPreview } from '../../../types';
-export declare const getCacheKey: (id: string, dimensions: CardDimensions) => string;
+declare type Mode = ImageResizeMode | undefined;
+export declare const getCacheKey: (id: string, mode: Mode) => string;
 export interface CardPreviewCache {
-    get(id: string, dimensions: CardDimensions): CardPreview | undefined;
-    set(id: string, dimensions: CardDimensions, cardPreview: CardPreview): void;
-    remove(id: string, dimensions: CardDimensions): void;
+    get(id: string, mode: Mode): CardPreview | undefined;
+    set(id: string, mode: Mode, cardPreview: CardPreview): void;
+    remove(id: string, mode: Mode): void;
 }
 export declare class CardPreviewCacheImpl implements CardPreviewCache {
     private previewCache;
     constructor(previewCache: ObjectURLCache);
-    get: (id: string, dimensions: CardDimensions) => CardPreview | undefined;
-    set: (id: string, dimensions: CardDimensions, cardPreview: CardPreview) => void;
-    remove: (id: string, dimensions: CardDimensions) => void;
+    get: (id: string, mode: Mode) => CardPreview | undefined;
+    set: (id: string, mode: Mode, cardPreview: CardPreview) => void;
+    remove: (id: string, mode: Mode) => void;
 }
 declare const _default: CardPreviewCacheImpl;
 export default _default;

package/dist/types/root/card/getCardPreview/index.d.ts

@@ -1,12 +1,13 @@
-import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs, FileIdentifier } from '@atlaskit/media-client';
 import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
+import { ImageResizeMode } from '@atlaskit/media-client';
 import { CardDimensions } from '../../../utils/cardDimensions';
 import { MediaCardError } from '../../../errors';
 import { CardStatus, CardPreview } from '../../../types';
 export { getCardPreviewFromFilePreview, getCardPreviewFromBackend, isSupportedLocalPreview, } from './helpers';
 export { extractFilePreviewStatus } from './filePreviewStatus';
-export declare const getCardPreviewFromCache: (id: string, dimensions: CardDimensions) => CardPreview | undefined;
-export declare const removeCardPreviewFromCache: (id: string, dimensions: CardDimensions) => void;
+export declare const getCardPreviewFromCache: (id: string, mode: ImageResizeMode | undefined) => CardPreview | undefined;
+export declare const removeCardPreviewFromCache: (id: string, mode: ImageResizeMode | undefined) => void;
 /**
  * Will return the preview if available and supported by the browser
  * See extractFilePreviewStatus "hasLocalPreview" logic
@@ -33,11 +34,12 @@ export declare type CardPreviewParams = {
  * hence the use of the optional callback onLocalPreviewError
  */
 export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, }: CardPreviewParams) => Promise<CardPreview>;
-export declare const shouldResolvePreview: ({ status, fileState, dimensions, prevDimensions, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
+export declare const shouldResolvePreview: ({ status, fileState, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;
     dimensions?: CardDimensions | undefined;
-    prevDimensions?: CardDimensions | undefined;
+    identifier: FileIdentifier;
+    fileImageMode?: ImageResizeMode | undefined;
     hasCardPreview: boolean;
     isBannedLocalPreview: boolean;
     featureFlags?: MediaFeatureFlags | undefined;

package/dist/types/root/cardView.d.ts

@@ -1,15 +1,17 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { MouseEvent } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
 import { MediaItemType, FileDetails } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SharedCardProps, CardStatus } from '../index';
 import { MediaCardError } from '../errors';
 import { CardPreview } from '..';
-import { MessageDescriptor } from 'react-intl-next';
 import { MediaCardCursor } from '../types';
 export interface CardViewOwnProps extends SharedCardProps {
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
-    readonly mediaCardCursor: MediaCardCursor;
+    readonly mediaCardCursor?: MediaCardCursor;
     readonly metadata?: FileDetails;
     readonly error?: MediaCardError;
     readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
@@ -58,7 +60,7 @@ export declare class CardViewBase extends React.Component<CardViewProps, CardVie
     private get width();
     private get breakpoint();
     saveElementWidth: () => void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
     private renderSpinner;
     private shouldRenderPlayButton;
     private renderPlayButton;

package/dist/types/root/cardViewWrapper.d.ts

@@ -0,0 +1,4 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { WrapperProps } from './types';
+export declare const Wrapper: (props: WrapperProps) => jsx.JSX.Element;

package/dist/types/root/inlinePlayer.d.ts

@@ -4,7 +4,6 @@ import { MediaClient, FileIdentifier, FileState, MediaFileArtifacts, MediaSubscr
 import { CardDimensions, NumericalCardDimensions } from '..';
 import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { CardPreview } from '..';
-export declare const inlinePlayerClassName = "media-card-inline-player";
 export interface InlinePlayerOwnProps {
     identifier: FileIdentifier;
     mediaClient: MediaClient;
@@ -12,6 +11,7 @@ export interface InlinePlayerOwnProps {
     originalDimensions?: NumericalCardDimensions;
     autoplay: boolean;
     selected?: boolean;
+    onFullscreenChange?: (fullscreen: boolean) => void;
     onError?: (error: Error) => void;
     readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
     testId?: string;

package/dist/types/root/inlinePlayerWrapper.d.ts

@@ -0,0 +1,4 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { InlinePlayerWrapperProps } from './types';
+export declare const InlinePlayerWrapper: (props: InlinePlayerWrapperProps) => jsx.JSX.Element;

package/dist/types/root/styles.d.ts

@@ -0,0 +1,10 @@
+import { InlinePlayerWrapperProps, WrapperProps } from './types';
+export declare const inlinePlayerClassName = "media-card-inline-player";
+export declare const wrapperStyles: {
+    ({ dimensions, breakpointSize, shouldUsePointerCursor, }: WrapperProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};
+export declare const inlinePlayerWrapperStyles: {
+    ({ dimensions, selected, }: InlinePlayerWrapperProps): import("@emotion/react").SerializedStyles;
+    displayName: string;
+};