@atlaskit/media-viewer 48.3.3 → 48.3.5

package/dist/es2019/v2/item-viewer-v2.js

@@ -5,6 +5,7 @@ import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-cli
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { useFileState, useMediaClient, MediaFileStateError } from '@atlaskit/media-client-react';
 import { Outcome } from '../domain';
 import { Spinner } from '../loading';
@@ -127,9 +128,70 @@ export const ItemViewerV2Base = ({
       }
     });
   }, [item]);
-  const onLoadFail = useCallback(mediaViewerError => {
-    setItem(Outcome.failed(mediaViewerError));
+  const onLoadFail = useCallback((mediaViewerError, data) => {
+    setItem(Outcome.failed(mediaViewerError, data));
   }, []);
+  const renderItem = fileItem => {
+    const collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
+    const viewerProps = {
+      mediaClient,
+      item: fileItem,
+      collectionName,
+      onClose,
+      previewCount
+    };
+
+    // TODO: fix all of the item errors
+
+    if (isCodeViewerItem(fileItem.name, fileItem.mimeType)) {
+      //Render error message if code file has size over 10MB.
+      //Required by https://product-fabric.atlassian.net/browse/MEX-1788
+      if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+        return renderError(new MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
+      }
+      return /*#__PURE__*/React.createElement(CodeViewerV2, _extends({
+        onSuccess: onSuccess,
+        onError: onLoadFail
+      }, viewerProps));
+    }
+    const {
+      mediaType
+    } = fileItem;
+    switch (mediaType) {
+      case 'image':
+        return /*#__PURE__*/React.createElement(ImageViewerV2, _extends({
+          onLoad: onSuccess,
+          onError: onLoadFail,
+          contextId: contextId,
+          traceContext: traceContext.current
+        }, viewerProps));
+      case 'audio':
+        return /*#__PURE__*/React.createElement(AudioViewerV2, _extends({
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'video':
+        return /*#__PURE__*/React.createElement(VideoViewerV2, _extends({
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+      case 'doc':
+        return /*#__PURE__*/React.createElement(DocViewerV2, _extends({
+          onSuccess: onSuccess,
+          onError: err => {
+            onLoadFail(err, fileState);
+          }
+        }, viewerProps));
+      case 'archive':
+        return /*#__PURE__*/React.createElement(ArchiveViewerLoader, _extends({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps));
+    }
+    return renderError(new MediaViewerError('unsupported'), fileItem);
+  };
   const renderError = useCallback((error, fileItem) => {
     if (fileItem) {
       let fileState;
@@ -188,65 +250,11 @@ export const ItemViewerV2Base = ({
           case 'processed':
           case 'uploading':
           case 'processing':
-            // TODO: renderItem
-            const collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
-            const viewerProps = {
-              mediaClient,
-              item: fileItem,
-              collectionName,
-              onClose,
-              previewCount
-            };
-
-            // TODO: fix all of the item errors
-
-            if (isCodeViewerItem(fileItem.name, fileItem.mimeType)) {
-              //Render error message if code file has size over 10MB.
-              //Required by https://product-fabric.atlassian.net/browse/MEX-1788
-              if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
-                return renderError(new MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
-              }
-              return /*#__PURE__*/React.createElement(CodeViewerV2, _extends({
-                onSuccess: onSuccess,
-                onError: onLoadFail
-              }, viewerProps));
-            }
-            const {
-              mediaType
-            } = fileItem;
-            switch (mediaType) {
-              case 'image':
-                return /*#__PURE__*/React.createElement(ImageViewerV2, _extends({
-                  onLoad: onSuccess,
-                  onError: onLoadFail,
-                  contextId: contextId,
-                  traceContext: traceContext.current
-                }, viewerProps));
-              case 'audio':
-                return /*#__PURE__*/React.createElement(AudioViewerV2, _extends({
-                  showControls: showControls,
-                  onCanPlay: onSuccess,
-                  onError: onLoadFail
-                }, viewerProps));
-              case 'video':
-                return /*#__PURE__*/React.createElement(VideoViewerV2, _extends({
-                  showControls: showControls,
-                  onCanPlay: onSuccess,
-                  onError: onLoadFail
-                }, viewerProps));
-              case 'doc':
-                return /*#__PURE__*/React.createElement(DocViewerV2, _extends({
-                  onSuccess: onSuccess,
-                  onError: onLoadFail
-                }, viewerProps));
-              case 'archive':
-                return /*#__PURE__*/React.createElement(ArchiveViewerLoader, _extends({
-                  onSuccess: onSuccess,
-                  onError: onLoadFail
-                }, viewerProps));
-            }
-            return renderError(new MediaViewerError('unsupported'), fileItem);
+            return renderItem(fileItem);
           case 'failed-processing':
+            if (getBooleanFF('platform.corex.password-protected-pdf_ht8re') && fileItem.mediaType === 'doc' && fileItem.mimeType === 'application/pdf') {
+              return renderItem(fileItem);
+            }
             return renderError(new MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
           case 'error':
             return renderError(new MediaViewerError('itemviewer-file-error-status'), fileItem);

package/dist/es2019/viewers/archiveSidebar/archive.js

@@ -203,7 +203,9 @@ export class ArchiveViewerBase extends BaseViewer {
           }, /*#__PURE__*/React.createElement(DefaultCoverWrapper, null, /*#__PURE__*/React.createElement(AudioIcon, {
             label: "cover",
             size: "xlarge",
-            primaryColor: blanketColor,
+            primaryColor: blanketColor
+            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+            ,
             secondaryColor: "#9FADBC"
           })), /*#__PURE__*/React.createElement(CustomAudioPlayerWrapper, null, /*#__PURE__*/React.createElement(CustomMediaPlayer, {
             type: "audio",

package/dist/es2019/viewers/archiveSidebar/styleWrappers.js

@@ -1,8 +1,107 @@
 /** @jsx jsx */
 
-import { jsx } from '@emotion/react';
-import { archiveDownloadButtonWrapperStyles, archiveItemViewerWrapperStyles, archiveLayoutStyles, archiveSidebarFileEntryWrapperStyles, archiveSidebarFolderWrapperStyles, archiveSideBarStyles, archiveViewerWrapperStyles, separatorStyles, sidebarHeaderEntryStyles, sidebarHeaderIconStyles, sidebarHeaderWrapperStyles, sidebarItemWrapperStyles } from './styles';
+import { jsx, css, keyframes } from '@emotion/react';
+import { ArchiveSideBarWidth } from './styles';
+import { DN500 } from '@atlaskit/theme/colors';
 import { TouchScrollable } from 'react-scrolllock';
+const archiveItemViewerWrapperStyles = css({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const archiveSideBarStyles = css({
+  padding: `22px ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-250, 20px)"}`,
+  backgroundColor: "var(--ds-surface, #101214)",
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  width: `${ArchiveSideBarWidth}px`,
+  bottom: 0,
+  boxSizing: 'border-box',
+  overflowY: 'scroll'
+});
+const slideDown = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(-100%)'
+  },
+  '100%': {
+    transform: 'translateY(0)',
+    opacity: 1
+  }
+});
+const archiveDownloadButtonWrapperStyles = css({
+  padding: `${"var(--ds-space-100, 8px)"} 7px 5px ${"var(--ds-space-100, 8px)"}`,
+  border: 'none',
+  borderRadius: '3px',
+  backgroundColor: 'transparent',
+  color: "var(--ds-icon, #9FADBC)",
+  '&:hover': {
+    cursor: 'pointer',
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #A1BDD914)"
+  },
+  '&:active': {
+    cursor: 'pointer',
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #A6C5E229)"
+  }
+});
+const archiveSidebarFolderWrapperStyles = css({
+  transform: 'translateY(-100%)',
+  transition: 'all 1s',
+  opacity: 0,
+  animation: `${slideDown} 0.3s forwards`
+});
+const sidebarItemWrapperStyles = css({
+  width: '85%'
+});
+const archiveSidebarFileEntryWrapperStyles = css({
+  paddingBottom: "var(--ds-space-075, 5px)",
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  transition: 'background-color 0.3s'
+});
+const archiveLayoutStyles = css({
+  display: 'flex',
+  width: '100%',
+  height: '100%'
+});
+const archiveViewerWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  left: `${ArchiveSideBarWidth}px`,
+  right: 0,
+  bottom: 0,
+  alignItems: 'center',
+  display: 'flex'
+});
+const separatorStyles = css({
+  borderRadius: '1px',
+  height: '2px',
+  margin: `${"var(--ds-space-200, 19px)"} 0`,
+  backgroundColor: "var(--ds-border, #A6C5E229)",
+  flexShrink: 0
+});
+const sidebarHeaderWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flexShrink: 0
+});
+const sidebarHeaderIconStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: "var(--ds-space-100, 10px)",
+  flexShrink: 0
+});
+const sidebarHeaderEntryStyles = css({
+  flex: '1 1 auto',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  lineHeight: 1.14286,
+  color: `var(--ds-text, ${DN500})`
+});
 export const ArchiveItemViewerWrapper = ({
   children
 }) => {

package/dist/es2019/viewers/archiveSidebar/styles.js

@@ -1,113 +1,5 @@
-import { css, keyframes } from '@emotion/react';
 import { DN500 } from '@atlaskit/theme/colors';
 export const ArchiveSideBarWidth = 300;
-export const archiveItemViewerWrapperStyles = css`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`;
-export const archiveSideBarStyles = css`
-  padding: 22px ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-250, 20px)"}
-    ${"var(--ds-space-250, 20px)"};
-  background-color: ${"var(--ds-surface, #101214)"};
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: ${ArchiveSideBarWidth}px;
-  bottom: 0;
-  box-sizing: border-box;
-  overflow-y: scroll;
-`;
-const slideDown = keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`;
-export const archiveSidebarFolderWrapperStyles = css`
-  transform: translateY(-100%);
-  transition: all 1s;
-  opacity: 0;
-  animation: ${slideDown} 0.3s forwards;
-`;
-export const archiveDownloadButtonWrapperStyles = css`
-  padding: ${"var(--ds-space-100, 8px)"} 7px 5px ${"var(--ds-space-100, 8px)"};
-  border: none;
-  border-radius: 3px;
-  background-color: transparent;
-  color: ${"var(--ds-icon, #9FADBC)"};
-
-  &:hover {
-    cursor: pointer;
-    background-color: ${"var(--ds-background-neutral-subtle-hovered, #A1BDD914)"};
-  }
-
-  &:active {
-    cursor: pointer;
-    background-color: ${"var(--ds-background-neutral-subtle-pressed, #A6C5E229)"};
-  }
-`;
-export const sidebarItemWrapperStyles = css`
-  width: 85%;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const archiveSidebarFileEntryWrapperStyles = css`
-  padding-bottom: 5px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  transition: background-color 0.3s;
-`;
-export const archiveLayoutStyles = css`
-  display: flex;
-  width: 100%;
-  height: 100%;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const archiveViewerWrapperStyles = css`
-  position: absolute;
-  top: 0;
-  left: ${ArchiveSideBarWidth}px;
-  right: 0;
-  bottom: 0;
-  align-items: center;
-  display: flex;
-`;
-export const separatorStyles = css`
-  border-radius: 1px;
-  height: 2px;
-  margin: ${(8 * 5 - 2) / 2}px 0;
-  background-color: ${"var(--ds-border, #A6C5E229)"};
-  flex-shrink: 0;
-`;
-export const sidebarHeaderWrapperStyles = css`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const sidebarHeaderIconStyles = css`
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-  flex-shrink: 0;
-`;
-export const sidebarHeaderEntryStyles = css`
-  flex: 1 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.14286;
-  color: ${`var(--ds-text, ${DN500})`};
-`;
 export const itemStyle = {
   backgroundColor: `${"var(--ds-background-neutral-subtle, #101214)"}`,
   fill: `${"var(--ds-icon-success, #101214)"}`,

package/dist/es2019/viewers/doc/pdfPasswordInput.js

@@ -88,14 +88,14 @@ export const PDFPasswordInput = ({
     "aria-label": intl.formatMessage(messages.password),
     placeholder: intl.formatMessage(messages.enter_password),
     ref: passwordInputRef,
+    "aria-describedby": formError ? `${fieldProps.id}-error` : undefined,
     onChange: value => {
       fieldProps.onChange(value);
       setFormError(false);
     }
   })), formError && jsx("div", {
     css: errorMessageWrapperStyle,
-    id: `${fieldProps.id}-error`,
-    "aria-live": "polite"
+    id: `${fieldProps.id}-error`
   }, jsx(ErrorIcon, {
     size: "small",
     label: ""

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

@@ -7,7 +7,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import HDIcon from '@atlaskit/icon/glyph/vid-hd-circle';
 import Spinner from '@atlaskit/spinner';
 import { B75, B200, DN400, DN60, N0 } from '@atlaskit/theme/colors';
-import { BaselineExtend, HDIconGroupWrapper, HDIconWrapper, ImageWrapper, Img } from '../../styleWrappers';
+import { BaselineExtend, HDIconGroupWrapper, ImageWrapper, Img } from '../../styleWrappers';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
 import { ZoomControls } from '../../zoomControls';
@@ -217,12 +217,12 @@ export class InteractiveImgComponent extends React.Component {
       className: hideControlsClassName
     }, isHDActivating ? /*#__PURE__*/React.createElement(Spinner, {
       appearance: "invert"
-    }) : undefined, /*#__PURE__*/React.createElement(HDIconWrapper, null, /*#__PURE__*/React.createElement(HDIcon, {
+    }) : undefined, /*#__PURE__*/React.createElement(HDIcon, {
       primaryColor: hdPrimaryColor,
       secondaryColor: hdSecondaryColor,
       label: "hd",
       testId: testId
-    })));
+    }));
   }
   render() {
     const {
@@ -276,7 +276,7 @@ export class InteractiveImgComponent extends React.Component {
     }), /*#__PURE__*/React.createElement(BaselineExtend, null), /*#__PURE__*/React.createElement(ZoomControls, {
       zoomLevel: zoomLevel,
       onChange: this.onZoomChange
-    }), this.renderHDIndicator());
+    }, this.renderHDIndicator()));
   }
 }
 export const InteractiveImg = withAnalyticsEvents({

package/dist/es2019/zoomControls.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { hideControlsClassName, MediaButton } from '@atlaskit/media-ui';
 import ZoomOutIcon from '@atlaskit/icon/glyph/media-services/zoom-out';
 import ZoomInIcon from '@atlaskit/icon/glyph/media-services/zoom-in';
-import { ZoomWrapper, ZoomControlsWrapper, ZoomLevelIndicator } from './styleWrappers';
+import { ZoomWrapper, ZoomCenterControls, ZoomRightControls, ZoomLevelIndicator } from './styleWrappers';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireAnalytics } from './analytics/';
 import { createZoomInButtonClickEvent } from './analytics/events/ui/zoomInButtonClicked';
@@ -44,11 +44,12 @@ export class ZoomControlsBase extends Component {
       zoomLevel,
       intl: {
         formatMessage
-      }
+      },
+      children
     } = this.props;
     return /*#__PURE__*/React.createElement(ZoomWrapper, {
       className: hideControlsClassName
-    }, /*#__PURE__*/React.createElement(ZoomControlsWrapper, null, /*#__PURE__*/React.createElement(MediaButton, {
+    }, /*#__PURE__*/React.createElement(ZoomCenterControls, null, /*#__PURE__*/React.createElement(MediaButton, {
       isDisabled: !zoomLevel.canZoomOut,
       onClick: this.zoomOut,
       iconBefore: /*#__PURE__*/React.createElement(ZoomOutIcon, {
@@ -60,7 +61,7 @@ export class ZoomControlsBase extends Component {
       iconBefore: /*#__PURE__*/React.createElement(ZoomInIcon, {
         label: formatMessage(messages.zoom_in)
       })
-    })), /*#__PURE__*/React.createElement(ZoomLevelIndicator, null, zoomLevel.asPercentage));
+    })), /*#__PURE__*/React.createElement(ZoomRightControls, null, children, /*#__PURE__*/React.createElement(ZoomLevelIndicator, null, zoomLevel.asPercentage)));
   }
 }
 export const ZoomControls = withAnalyticsEvents({})(injectIntl(ZoomControlsBase));

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.3.3";
+var packageVersion = "48.3.5";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.3.3";
+var packageVersion = "48.3.5";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/navigation.js

@@ -83,10 +83,10 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         testId: prevNavButtonId,
         onClick: prev('mouse'),
         iconBefore: /*#__PURE__*/React.createElement(ArrowLeftCircleIcon
-        // DN800
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
         , {
           primaryColor: "#9FADBC"
-          // DN0
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           ,
           secondaryColor: "#161A1D",
           size: "xlarge",
@@ -102,10 +102,10 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         testId: nextNavButtonId,
         onClick: next('mouse'),
         iconBefore: /*#__PURE__*/React.createElement(ArrowRightCircleIcon
-        // DN800
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
         , {
           primaryColor: "#9FADBC"
-          // DN0
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           ,
           secondaryColor: "#161A1D",
           size: "xlarge",