@atlaskit/media-viewer 46.3.0 → 47.0.0

package/dist/cjs/viewers/image/interactive-img.js

@@ -38,7 +38,7 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _styled = require("../../styled");
+var _styleWrappers = require("../../styleWrappers");
 
 var _zoomLevel = require("../../domain/zoomLevel");
 
@@ -279,11 +279,11 @@ var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
       var hdPrimaryColor = isHDActivating ? _colors.B75 : isHDActive ? _colors.B200 : _colors.DN400;
       var hdSecondaryColor = isHDActive && !isHDActivating ? _colors.N0 : _colors.DN60;
       var testId = isHDActivating ? 'hd-activating' : isHDActive ? 'hd-active' : 'hd-inactive';
-      return /*#__PURE__*/_react.default.createElement(_styled.HDIconGroupWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.HDIconGroupWrapper, {
         className: _mediaUi.hideControlsClassName
       }, isHDActivating ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
         appearance: "invert"
-      }) : undefined, /*#__PURE__*/_react.default.createElement(_styled.HDIconWrapper, null, /*#__PURE__*/_react.default.createElement(_vidHdCircle.default, {
+      }) : undefined, /*#__PURE__*/_react.default.createElement(_styleWrappers.HDIconWrapper, null, /*#__PURE__*/_react.default.createElement(_vidHdCircle.default, {
         primaryColor: hdPrimaryColor,
         secondaryColor: hdSecondaryColor,
         label: "hd",
@@ -324,12 +324,13 @@ var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
       }
 
       var srcToDisplay = isHDAvailable && isHDActive && originalBinaryImageSrc ? originalBinaryImageSrc : src;
-      return /*#__PURE__*/_react.default.createElement(_styled.ImageWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ImageWrapper, {
         "data-testid": "media-viewer-image-content",
         onClick: this.onImageClicked,
-        innerRef: this.saveWrapperRef,
-        style: wrapperStyleOverride
-      }, /*#__PURE__*/_react.default.createElement(_styled.Img, {
+        ref: this.saveWrapperRef,
+        style: wrapperStyleOverride,
+        className: "media-viewer-image-content"
+      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.Img, {
         "data-testid": "media-viewer-image",
         canDrag: canDrag,
         isDragging: isDragging,
@@ -338,8 +339,9 @@ var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
         onLoad: this.onImgLoad,
         onError: onError,
         onMouseDown: this.startDragging,
-        shouldPixelate: zoomLevel.value > 1
-      }), /*#__PURE__*/_react.default.createElement(_styled.BaselineExtend, null), /*#__PURE__*/_react.default.createElement(_zoomControls.ZoomControls, {
+        shouldPixelate: zoomLevel.value > 1,
+        className: "media-viewer-image"
+      }), /*#__PURE__*/_react.default.createElement(_styleWrappers.BaselineExtend, null), /*#__PURE__*/_react.default.createElement(_zoomControls.ZoomControls, {
         zoomLevel: zoomLevel,
         onChange: this.onZoomChange
       }), this.renderHDIndicator());

package/dist/cjs/viewers/video.js

@@ -35,7 +35,7 @@ var _domain = require("../domain");
 
 var _errors = require("../errors");
 
-var _styled = require("../styled");
+var _styleWrappers = require("../styleWrappers");
 
 var _isIE = require("../utils/isIE");
 
@@ -116,7 +116,7 @@ var VideoViewer = /*#__PURE__*/function (_BaseViewer) {
           previewCount = _this$props2.previewCount;
       var useCustomVideoPlayer = !(0, _isIE.isIE)();
       var isAutoPlay = previewCount === 0;
-      return useCustomVideoPlayer ? /*#__PURE__*/_react.default.createElement(_styled.CustomVideoPlayerWrapper, {
+      return useCustomVideoPlayer ? /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomVideoPlayerWrapper, {
         "data-testid": "media-viewer-video-content"
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
         type: "video",
@@ -133,7 +133,7 @@ var VideoViewer = /*#__PURE__*/function (_BaseViewer) {
         lastWatchTimeConfig: {
           contentId: item.id
         }
-      })) : /*#__PURE__*/_react.default.createElement(_styled.Video, {
+      })) : /*#__PURE__*/_react.default.createElement(_styleWrappers.Video, {
         autoPlay: isAutoPlay,
         controls: true,
         src: content

package/dist/cjs/zoomControls.js

@@ -31,7 +31,7 @@ var _zoomOut = _interopRequireDefault(require("@atlaskit/icon/glyph/media-servic
 
 var _zoomIn = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/zoom-in"));
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -97,9 +97,9 @@ var ZoomControlsBase = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
           zoomLevel = _this$props3.zoomLevel,
           formatMessage = _this$props3.intl.formatMessage;
-      return /*#__PURE__*/_react.default.createElement(_styled.ZoomWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ZoomWrapper, {
         className: _mediaUi.hideControlsClassName
-      }, /*#__PURE__*/_react.default.createElement(_styled.ZoomControlsWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.ZoomControlsWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
         isDisabled: !zoomLevel.canZoomOut,
         onClick: this.zoomOut,
         iconBefore: /*#__PURE__*/_react.default.createElement(_zoomOut.default, {
@@ -111,7 +111,7 @@ var ZoomControlsBase = /*#__PURE__*/function (_Component) {
         iconBefore: /*#__PURE__*/_react.default.createElement(_zoomIn.default, {
           label: formatMessage(_mediaUi.messages.zoom_in)
         })
-      })), /*#__PURE__*/_react.default.createElement(_styled.ZoomLevelIndicator, null, zoomLevel.asPercentage));
+      })), /*#__PURE__*/_react.default.createElement(_styleWrappers.ZoomLevelIndicator, null, zoomLevel.asPercentage));
     }
   }]);
   return ZoomControlsBase;

package/dist/es2019/analytics/index.js

@@ -1,7 +1,19 @@
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
-import { name as packageName, version as packageVersion } from '../version.json';
+import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 const componentName = 'mediaViewer';
+const packageName = "@atlaskit/media-viewer";
+const packageVersion = "47.0.0";
 export { packageName, packageVersion, componentName, componentName as component };
+export const relevantFlags = {
+  newCardExperience: false,
+  captions: false,
+  timestampOnVideo: false,
+  observedWidth: false,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: true
+};
+export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
+export const LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(relevantFlags);
 export function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/es2019/analytics/ufoExperiences.js

@@ -1,6 +1,8 @@
 import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
-import { name as packageName, version as packageVersion } from '../version.json';
+import { LOGGED_FEATURE_FLAG_KEYS } from '.';
+const packageName = "@atlaskit/media-viewer";
+const packageVersion = "47.0.0";
 let ufoExperience;
 
 const getExperience = () => {
@@ -10,7 +12,8 @@ const getExperience = () => {
         component: 'media-viewer'
       },
       type: ExperienceTypes.Experience,
-      performanceType: ExperiencePerformanceTypes.InlineResult
+      performanceType: ExperiencePerformanceTypes.InlineResult,
+      featureFlags: LOGGED_FEATURE_FLAG_KEYS
     };
     ufoExperience = new UFOExperience('media-file', inlineExperience);
   }
@@ -23,8 +26,7 @@ export const startMediaFileUfoExperience = () => {
 };
 export const succeedMediaFileUfoExperience = properties => {
   getExperience().success({
-    metadata: {
-      fileAttributes: properties,
+    metadata: { ...properties,
       packageName,
       packageVersion,
       mediaEnvironment: getMediaEnvironment(),

package/dist/es2019/content.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Component } from 'react';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { MediaButton, hideControlsClassName, InactivityDetector } from '@atlaskit/media-ui';
-import { CloseButtonWrapper, ContentWrapper } from './styled';
+import { CloseButtonWrapper, ContentWrapper } from './styleWrappers';
 export class Content extends Component {
   /*
    * Here we get called by InactivityDetector and given a function we

package/dist/es2019/download.js

@@ -7,7 +7,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createDownloadButtonClickedEvent } from './analytics/events/ui/downloadButtonClicked';
 import { createFailedPreviewDownloadButtonClickedEvent } from './analytics/events/ui/failedPreviewDownloadButtonClicked';
-import { DownloadButtonWrapper } from './styled';
+import { DownloadButtonWrapper } from './styleWrappers';
 const downloadIcon = /*#__PURE__*/React.createElement(DownloadIcon, {
   label: "Download"
 });

package/dist/es2019/errorMessage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { messages as i18nMessages } from '@atlaskit/media-ui';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ErrorMessageWrapper, ErrorImage } from './styled';
+import { ErrorMessageWrapper, ErrorImage } from './styleWrappers';
 import { errorLoadingFile } from './error-images';
 import { fireAnalytics } from './analytics';
 import { getPrimaryErrorReason, getSecondaryErrorReason } from './errors';
@@ -55,7 +55,8 @@ export class ErrorMessage extends React.Component {
     if (supressAnalytics !== true) {
       const payload = ErrorMessage.getEventPayload(error, fileId, fileState);
       fireAnalytics(payload, props);
-      const rawPayload = { ...(payload === null || payload === void 0 ? void 0 : payload.attributes)
+      const rawPayload = { ...(payload === null || payload === void 0 ? void 0 : payload.attributes),
+        fileStateFlags: props.fileStateFlags
       };
 
       if (Object.keys(rawPayload).includes('status')) {

package/dist/es2019/header.js

@@ -6,7 +6,7 @@ import { hideControlsClassName, messages, toHumanReadableMediaSize, MediaButton
 import { getLanguageType, getExtension, isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { Outcome } from './domain';
-import { Header as HeaderWrapper, LeftHeader, RightHeader, MetadataWrapper, MetadataSubText, MedatadataTextWrapper, MetadataIconWrapper, MetadataFileName, FormattedMessageWrapper } from './styled';
+import { Header as HeaderWrapper, LeftHeader, RightHeader, MetadataWrapper, MetadataSubText, MedatadataTextWrapper, MetadataIconWrapper, MetadataFileName, FormattedMessageWrapper } from './styleWrappers';
 import { ToolbarDownloadButton, DisabledToolbarDownloadButton } from './download';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { getFormat } from './viewers/codeViewer/util';

package/dist/es2019/item-viewer.js

@@ -50,6 +50,11 @@ export class ItemViewerBase extends React.Component {
 
     _defineProperty(this, "state", initialState);
 
+    _defineProperty(this, "fileStateFlags", {
+      wasStatusUploading: false,
+      wasStatusProcessing: false
+    });
+
     _defineProperty(this, "onSuccess", () => {
       const {
         item
@@ -58,7 +63,10 @@ export class ItemViewerBase extends React.Component {
         if (isFileStateItem(fileItem)) {
           const fileAttributes = getFileAttributes(fileItem);
           fireAnalytics(createLoadSucceededEvent(fileAttributes), this.props);
-          succeedMediaFileUfoExperience(fileAttributes);
+          succeedMediaFileUfoExperience({
+            fileAttributes,
+            fileStateFlags: this.fileStateFlags
+          });
         }
       });
     });
@@ -74,7 +82,10 @@ export class ItemViewerBase extends React.Component {
         fileId: 'external-image'
       }), this.props);
       succeedMediaFileUfoExperience({
-        fileId: 'external-image'
+        fileAttributes: {
+          fileId: 'external-image'
+        },
+        fileStateFlags: this.fileStateFlags
       });
     });
 
@@ -191,12 +202,14 @@ export class ItemViewerBase extends React.Component {
       return /*#__PURE__*/React.createElement(ErrorMessage, {
         fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
         error: error,
-        fileState: fileState
+        fileState: fileState,
+        fileStateFlags: this.fileStateFlags
       }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
     } else {
       return /*#__PURE__*/React.createElement(ErrorMessage, {
         fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
-        error: error
+        error: error,
+        fileStateFlags: this.fileStateFlags
       });
     }
   }
@@ -257,6 +270,22 @@ export class ItemViewerBase extends React.Component {
     });
   }
 
+  updateFileStateFlag(fileState) {
+    if (!fileState) {
+      return;
+    }
+
+    const {
+      status
+    } = fileState;
+
+    if (status === 'processing') {
+      this.fileStateFlags.wasStatusProcessing = true;
+    } else if (status === 'uploading') {
+      this.fileStateFlags.wasStatusUploading = true;
+    }
+  }
+
   init(props) {
     const {
       mediaClient,
@@ -282,6 +311,7 @@ export class ItemViewerBase extends React.Component {
       collectionName: identifier.collectionName
     }).subscribe({
       next: file => {
+        this.updateFileStateFlag(file);
         this.setState({
           item: Outcome.successful(file)
         });

package/dist/es2019/list.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { hideControlsClassName } from '@atlaskit/media-ui';
 import { ItemViewer } from './item-viewer';
-import { HeaderWrapper, ListWrapper } from './styled';
+import { HeaderWrapper, ListWrapper } from './styleWrappers';
 import { Navigation } from './navigation';
 import Header from './header';
 export class List extends React.Component {

package/dist/es2019/media-viewer.js

@@ -1,16 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { withMediaAnalyticsContext, filterFeatureFlagNames } from '@atlaskit/media-common';
+import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import { IntlProvider, injectIntl } from 'react-intl-next';
 import { Shortcut } from '@atlaskit/media-ui';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { packageName, packageVersion, component, componentName, fireAnalytics } from './analytics';
+import { packageName, packageVersion, component, componentName, fireAnalytics, LOGGED_FEATURE_FLAGS } from './analytics';
 import { createModalEvent } from './analytics/events/screen/modal';
 import { createClosedEvent } from './analytics/events/ui/closed';
 import { List } from './list';
 import { Collection } from './collection';
 import { Content } from './content';
-import { Blanket, SidebarWrapper } from './styled';
+import { Blanket, SidebarWrapper } from './styleWrappers';
 import { start } from 'perf-marks';
 import { mediaViewerPopupClass } from './classnames';
 export class MediaViewerComponent extends React.Component {
@@ -172,14 +172,7 @@ export const MediaViewer = withMediaAnalyticsContext({
   component,
   componentName
 }, {
-  filterFeatureFlags: filterFeatureFlagNames({
-    newCardExperience: false,
-    captions: false,
-    timestampOnVideo: false,
-    observedWidth: false,
-    mediaInline: false,
-    folderUploads: false
-  })
+  filterFeatureFlags: LOGGED_FEATURE_FLAGS
 })(withAnalyticsEvents()(injectIntl(MediaViewerComponent, {
   enforceContext: false
 })));

package/dist/es2019/navigation.js

@@ -7,7 +7,7 @@ import { hideControlsClassName } from '@atlaskit/media-ui';
 import Button from '@atlaskit/button/standard-button';
 import { Shortcut } from '@atlaskit/media-ui';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ArrowsWrapper, RightWrapper, LeftWrapper, Arrow } from './styled';
+import { ArrowsWrapper, RightWrapper, LeftWrapper, Arrow } from './styleWrappers';
 import { getSelectedIndex } from './utils';
 import { createNavigatedEvent } from './analytics/events/ui/navigated';
 import { fireAnalytics } from './analytics';

package/dist/es2019/styleWrappers.js

@@ -0,0 +1,298 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { forwardRef, useMemo } from 'react';
+import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
+export const Blanket = ({
+  'data-testid': datatestId,
+  className,
+  children
+}) => jsx("div", {
+  css: blanketStyles,
+  "data-testid": datatestId,
+  className: className
+}, children);
+export const HeaderWrapper = ({
+  className,
+  children
+}) => jsx("div", {
+  css: headerWrapperStyles,
+  className: className
+}, children);
+HeaderWrapper.displayName = 'HeaderWrapper';
+export const ListWrapper = ({
+  children
+}) => jsx("div", {
+  css: listWrapperStyles
+}, children);
+ListWrapper.displayName = 'ListWrapper';
+export const ArrowsWrapper = ({
+  children
+}) => jsx("div", {
+  css: arrowsWrapperStyles
+}, children);
+export const CloseButtonWrapper = ({
+  className,
+  children
+}) => jsx("div", {
+  css: closeButtonWrapperStyles,
+  className: className
+}, children);
+export const ContentWrapper = ({
+  isSidebarVisible,
+  children
+}) => jsx("div", {
+  css: contentWrapperStyles({
+    isSidebarVisible
+  })
+}, children);
+export const ZoomWrapper = ({
+  className,
+  children
+}) => jsx("div", {
+  css: zoomWrapperStyles,
+  className: className
+}, children);
+export const ZoomControlsWrapper = ({
+  children
+}) => jsx("div", {
+  css: zoomControlsWrapperStyles
+}, children);
+export const ZoomLevelIndicator = ({
+  children
+}) => jsx("span", {
+  css: zoomLevelIndicatorStyles
+}, children);
+export const HDIconGroupWrapper = ({
+  className,
+  children
+}) => jsx("div", {
+  css: hdIconGroupWrapperStyles,
+  className: className
+}, children);
+export const HDIconWrapper = ({
+  children
+}) => jsx("div", {
+  css: hdIconWrapperStyles
+}, children);
+export const ErrorMessageWrapper = ({
+  'data-testid': datatestId,
+  children
+}) => jsx("div", {
+  css: errorMessageWrapperStyles,
+  "data-testid": datatestId
+}, children);
+export const ErrorImage = ({
+  src,
+  alt
+}) => jsx("img", {
+  css: errorImageStyles,
+  alt: alt,
+  src: src
+});
+export const Video = ({
+  autoPlay,
+  controls,
+  src
+}) => // eslint-disable-next-line jsx-a11y/media-has-caption
+jsx("video", {
+  css: videoStyles,
+  autoPlay: autoPlay,
+  controls: controls,
+  src: src
+});
+export const PDFWrapper = /*#__PURE__*/forwardRef(({
+  'data-testid': datatestId,
+  children
+}, ref) => jsx("div", {
+  css: pdfWrapperStyles,
+  ref: ref,
+  "data-testid": datatestId
+}, children));
+export const Arrow = ({
+  className,
+  children
+}) => jsx("span", {
+  css: arrowStyles,
+  className: className
+}, children);
+export const LeftWrapper = ({
+  children
+}) => jsx("div", {
+  css: leftWrapperStyles
+}, children);
+export const RightWrapper = ({
+  children
+}) => jsx("div", {
+  css: rightWrapperStyles
+}, children); // header.tsx
+
+export const Header = ({
+  children,
+  isArchiveSideBarVisible,
+  className
+}) => jsx("div", {
+  css: headerStyles({
+    isArchiveSideBarVisible
+  }),
+  className: className
+}, children);
+export const LeftHeader = ({
+  children
+}) => jsx("div", {
+  css: leftHeaderStyles
+}, children);
+export const ImageWrapper = /*#__PURE__*/forwardRef(({
+  children,
+  'data-testid': datatestId,
+  onClick,
+  style,
+  className
+}, ref) => jsx("div", {
+  "data-testid": datatestId,
+  onClick: onClick,
+  ref: ref,
+  css: imageWrapperStyles,
+  style: style,
+  className: className
+}, children));
+export const BaselineExtend = () => jsx("div", {
+  css: baselineExtendStyles
+});
+export const Img = ({
+  canDrag,
+  isDragging,
+  shouldPixelate,
+  'data-testid': datatestId,
+  src,
+  style,
+  onLoad,
+  onError,
+  onMouseDown,
+  className
+}) => {
+  const cursor = useMemo(() => {
+    if (canDrag && isDragging) {
+      return 'grabbing';
+    } else if (canDrag) {
+      return 'grab';
+    } else {
+      return 'auto';
+    }
+  }, [canDrag, isDragging]);
+  return jsx("img", {
+    className: className,
+    css: imgStyles({
+      cursor,
+      shouldPixelate
+    }),
+    "data-testid": datatestId,
+    src: src,
+    style: style,
+    onLoad: onLoad,
+    onError: onError,
+    onMouseDown: onMouseDown
+  });
+};
+export const MedatadataTextWrapper = ({
+  children
+}) => jsx("div", {
+  css: medatadataTextWrapperStyles
+}, children);
+export const MetadataWrapper = ({
+  children
+}) => jsx("div", {
+  css: metadataWrapperStyles
+}, children);
+export const MetadataFileName = ({
+  'data-testid': datatestId,
+  children
+}) => jsx("div", {
+  css: metadataFileNameStyles,
+  "data-testid": datatestId
+}, children);
+export const MetadataSubText = ({
+  'data-testid': datatestId,
+  children
+}) => jsx("div", {
+  css: metadataSubTextStyles,
+  "data-testid": datatestId
+}, children);
+export const MetadataIconWrapper = ({
+  children
+}) => jsx("div", {
+  css: metadataIconWrapperStyles
+}, children);
+export const RightHeader = ({
+  children
+}) => jsx("div", {
+  css: rightHeaderStyles
+}, children);
+export const CustomAudioPlayerWrapper = ({
+  children
+}) => jsx("div", {
+  css: customAudioPlayerWrapperStyles
+}, children);
+export const AudioPlayer = ({
+  'data-testid': datatestId,
+  children
+}) => jsx("div", {
+  css: audioPlayerStyles,
+  "data-testid": datatestId
+}, children);
+AudioPlayer.displayName = 'AudioPlayer';
+export const Audio = /*#__PURE__*/forwardRef(({
+  autoPlay,
+  controls,
+  src,
+  preload
+}, ref) => // eslint-disable-next-line jsx-a11y/media-has-caption
+jsx("audio", {
+  css: audioStyles,
+  ref: ref,
+  autoPlay: autoPlay,
+  controls: controls,
+  src: src,
+  preload: preload
+}));
+export const AudioCover = ({
+  src,
+  alt
+}) => jsx("img", {
+  css: audioCoverStyles,
+  alt: alt,
+  src: src
+});
+export const DefaultCoverWrapper = ({
+  children
+}) => jsx("div", {
+  css: downloadButtonWrapperStyles
+}, children);
+export const DownloadButtonWrapper = ({
+  children
+}) => jsx("div", {
+  css: downloadButtonWrapperStyles
+}, children);
+export const CustomVideoPlayerWrapper = ({
+  'data-testid': datatestId,
+  children
+}) => jsx("div", {
+  css: customVideoPlayerWrapperStyles,
+  "data-testid": datatestId
+}, children);
+export const SidebarWrapper = ({
+  'data-testid': datatestId,
+  children
+}) => jsx("div", {
+  css: sidebarWrapperStyles,
+  "data-testid": datatestId
+}, children);
+export const SpinnerWrapper = ({
+  children
+}) => jsx("div", {
+  css: spinnerWrapperStyles
+}, children);
+export const FormattedMessageWrapper = ({
+  children
+}) => jsx("span", {
+  css: formattedMessageWrapperStyles
+}, children);