@atlaskit/media-viewer 54.9.8 → 54.10.0

package/dist/esm/media-viewer.js

@@ -9,13 +9,15 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents'
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { Shortcut } from '@atlaskit/media-ui/shortcut';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createModalEvent } from './analytics/events/screen/modal';
 import { createClosedEvent } from './analytics/events/ui/closed';
 import { fireAnalytics } from './analytics/fireAnalytics';
 import { mediaViewerPopupClass } from './classnames';
 import { Content } from './content';
+import { InsetViewerProvider } from './insetViewerContext';
 import { List } from './list';
-import { Blanket, SidebarWrapper } from './styleWrappers';
+import { Blanket, BlanketCloseButton, InsetViewerLayout, InsetViewerShell, MediaColumn, MediaStage, SidebarWrapper } from './styleWrappers';
 var getIdentifierId = function getIdentifierId(identifier) {
   return isFileIdentifier(identifier) ? identifier.id : undefined;
 };
@@ -45,6 +47,10 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isSidebarVisible = _useState2[0],
     setIsSidebarVisibleState = _useState2[1];
+  // The inset presentation has its own feature gate, separate from the functionality above. The
+  // value flows out through InsetViewerProvider, so with the gate off every downstream
+  // useIsInsetViewer() is false and the full-bleed overlay renders unchanged.
+  var isInsetViewer = fg('cc_comments_inset_media_viewer') && !!(extensions !== null && extensions !== void 0 && extensions.useInsetViewer);
   var setIsSidebarVisible = useCallback(function (isVisible) {
     setIsSidebarVisibleState(isVisible);
     onSidebarVisibilityChange === null || onSidebarVisibilityChange === void 0 || onSidebarVisibilityChange(isVisible);
@@ -150,19 +156,29 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
       }));
     }
   };
+  var ConditionalInsetViewerShell = isInsetViewer ? InsetViewerShell : React.Fragment;
+  var ConditionalInsetViewerLayout = isInsetViewer ? InsetViewerLayout : React.Fragment;
+  var ConditionalInsetMediaColumn = isInsetViewer ? MediaColumn : React.Fragment;
+  var ConditionalInsetMediaStage = isInsetViewer ? MediaStage : React.Fragment;
   var content = /*#__PURE__*/React.createElement("div", {
     ref: innerRef
+  }, /*#__PURE__*/React.createElement(InsetViewerProvider, {
+    isInsetViewer: isInsetViewer
   }, /*#__PURE__*/React.createElement(Blanket, {
     "data-testid": "media-viewer-popup"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: mediaViewerPopupClass
-  }, /*#__PURE__*/React.createElement(Shortcut, {
+  }, isInsetViewer ? /*#__PURE__*/React.createElement(BlanketCloseButton, {
+    onClick: function onClick() {
+      return handlePreviewClose('blanket');
+    }
+  }) : null, /*#__PURE__*/React.createElement(Shortcut, {
     code: 'Escape',
     handler: function handler() {
       handlePreviewClose('escKey');
     }
-  }), /*#__PURE__*/React.createElement(Content, {
+  }), /*#__PURE__*/React.createElement(ConditionalInsetViewerShell, null, /*#__PURE__*/React.createElement(ConditionalInsetViewerLayout, null, /*#__PURE__*/React.createElement(ConditionalInsetMediaColumn, null, /*#__PURE__*/React.createElement(ConditionalInsetMediaStage, null, /*#__PURE__*/React.createElement(Content, {
     isSidebarVisible: isSidebarVisible,
     onClose: function onClose(_e, analyticsEvent) {
       var _analyticsEvent$paylo;
@@ -201,7 +217,7 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
     fallbackMediaNameFetcher: fallbackMediaNameFetcher
-  })), renderSidebar()));
+  })))), renderSidebar())))));
   return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
   }, content);

package/dist/esm/navigation.js

@@ -10,6 +10,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 import { Component } from 'react';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import IconButton from '@atlaskit/button/icon/button';
+import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
+import ArrowRightIcon from '@atlaskit/icon/core/arrow-right';
 import ArrowLeftCircleIcon from '@atlaskit/icon/core/chevron-left';
 import ArrowRightCircleIcon from '@atlaskit/icon/core/chevron-right';
 import { hideControlsClassName } from '@atlaskit/media-ui/classNames';
@@ -19,6 +22,7 @@ import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { createNavigatedEvent } from './analytics/events/ui/createNavigatedEvent';
 import { fireAnalytics } from './analytics/fireAnalytics';
+import { withInsetViewer } from './insetViewerContext';
 import { ArrowsWrapper, RightWrapper, LeftWrapper, Arrow } from './styleWrappers';
 import { getSelectedIndex } from './utils/getSelectedIndex';
 export var nextNavButtonId = 'media-viewer-navigation-next';
@@ -96,6 +100,29 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         selectedItem = _this$props2.selectedItem;
       return getSelectedIndex(items, selectedItem);
     }
+  }, {
+    key: "renderArrowButton",
+    value: function renderArrowButton(direction, label, clickHandler, testId) {
+      if (this.props.isInsetViewer) {
+        var _Icon = direction === 'next' ? ArrowRightIcon : ArrowLeftIcon;
+        return /*#__PURE__*/React.createElement(IconButton, {
+          appearance: "default",
+          shape: "circle",
+          spacing: "default",
+          label: label,
+          icon: _Icon,
+          onClick: clickHandler('mouse'),
+          testId: testId,
+          isTooltipDisabled: false
+        });
+      }
+      var Icon = direction === 'next' ? NextIcon : PreviousIcon;
+      return /*#__PURE__*/React.createElement(Icon, {
+        label: label,
+        clickHandler: clickHandler,
+        testId: testId
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -126,11 +153,7 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         code: 'ArrowLeft',
         handler: prev('keyboard'),
         eventType: 'keyup'
-      }), /*#__PURE__*/React.createElement(PreviousIcon, {
-        label: fg('platform_media_a11y_nav_button_labels') ? 'Previous attachment' : 'Previous',
-        clickHandler: prev,
-        testId: prevNavButtonId
-      })) : null), /*#__PURE__*/React.createElement(RightWrapper, null, isRightVisible ?
+      }), this.renderArrowButton('prev', fg('platform_media_a11y_nav_button_labels') ? 'Previous attachment' : 'Previous', prev, prevNavButtonId)) : null), /*#__PURE__*/React.createElement(RightWrapper, null, isRightVisible ?
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       React.createElement(Arrow, {
@@ -139,12 +162,8 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
         code: 'ArrowRight',
         handler: next('keyboard'),
         eventType: 'keyup'
-      }), /*#__PURE__*/React.createElement(NextIcon, {
-        label: fg('platform_media_a11y_nav_button_labels') ? 'Next attachment' : 'Next',
-        clickHandler: next,
-        testId: nextNavButtonId
-      })) : null));
+      }), this.renderArrowButton('next', fg('platform_media_a11y_nav_button_labels') ? 'Next attachment' : 'Next', next, nextNavButtonId)) : null));
     }
   }]);
 }(Component);
-export var Navigation = withAnalyticsEvents({})(NavigationBase);
+export var Navigation = withAnalyticsEvents({})(withInsetViewer(NavigationBase));

package/dist/esm/styleWrappers.compiled.css

@@ -1,11 +1,18 @@
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
+._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._189eidpf{border-width:0}
+._1ii7cs5v{grid-row:2}
+._yyhykb7n{grid-column:1}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
+._152tidpf{inset-block-start:0}
 ._154i1ejb{top:var(--ds-space-300,24px)}
 ._154i1ssb{top:50%}
 ._154iidpf{top:0}
+._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18ew1wq8._18ew1wq8 h1{font-weight:var(--ds-font-weight-medium,500)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
@@ -13,9 +20,11 @@
 ._19bv1mjv{padding-left:300px}
 ._19bvidpf{padding-left:0}
 ._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19kzstnw >*{position:absolute}
 ._19pk1ejb{margin-top:var(--ds-space-300,24px)}
 ._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
 ._1bahusic{justify-content:right}
 ._1bsb1ber{width:26pc}
 ._1bsb1kdj{width:25pc}
@@ -24,6 +33,8 @@
 ._1bsbauwl{width:100vw}
 ._1bsbyazj{width:calc(100% - 26pc)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e02idpf{inset-inline-start:0}
+._1e0c11p5{display:grid}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
 ._1ghp1kxc video{max-height:100vh}
@@ -31,17 +42,22 @@
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}
 ._1kemd8h4{image-rendering:pixelated}
 ._1l1f1n9t .mvng-hide-controls{position:fixed}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
 ._1ltv1mjv{left:300px}
 ._1ltvidpf{left:0}
+._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1p351l2s._1p351l2s h1{text-overflow:ellipsis}
 ._1p6zkb7n video{flex-grow:1}
 ._1p8j15vq._1p8j15vq h1{overflow-y:hidden}
 ._1pby1qpw{z-index:520}
 ._1pby3tda{z-index:521}
+._1pbykb7n{z-index:1}
 ._1pbyuou7{z-index:522}
 ._1reo15vq{overflow-x:hidden}
 ._1reo1wug{overflow-x:auto}
+._1tkeidpf{min-height:0}
+._1ul9idpf{min-width:0}
 ._1ul9uuw1{min-width:200px}
 ._1vgl1rj4 >*{pointer-events:all}
 ._1vnlkb7n video{flex-shrink:1}
@@ -52,6 +68,8 @@
 ._20ka1poe._20ka1poe button:active svg{color:#c7d1db}
 ._2hwx1jfw{margin-right:var(--ds-space-500,40px)}
 ._2lx21bp4{flex-direction:column}
+._2z055wi5{grid-template-rows:var(--_1dd8ooc)}
+._4cvr1fhb{align-items:stretch}
 ._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1kdj{height:25pc}
@@ -60,17 +78,26 @@
 ._4t3i1uc6{height:98px}
 ._4t3izwfg{height:2pc}
 ._5ralzm06{object-fit:scale-down}
+._7dir1j9a button{background-color:var(--ds-background-input,#fff)}
+._80om73ad{cursor:default}
 ._80omtlke{cursor:pointer}
 ._8at415vq._8at415vq h1{overflow-x:hidden}
 ._8g8b1q9c._8g8b1q9c h1{white-space:nowrap}
 ._94n5idpf{bottom:0}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1tzm{background-color:#22272b}
 ._bfhkr3uz{background-color:#000}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._c71l1osq{max-height:100%}
 ._ca0q1azu{padding-top:var(--ds-space-100,8px) var(--ds-space-300,24px)}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qidpf{padding-top:0}
 ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._di7o9txx._di7o9txx button:hover svg{color:#b6c2cf}
+._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqsw1n9t{position:fixed}
@@ -79,8 +106,10 @@
 ._lcxv1rj4{pointer-events:all}
 ._lcxvglyw{pointer-events:none}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._n3tdidpf{padding-bottom:0}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._o5721q9c{white-space:nowrap}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
 ._ouxl1klg{background-position:300px 0}
@@ -88,13 +117,17 @@
 ._p12f1osq{max-width:100%}
 ._qbrxf1ug video{flex-basis:0%}
 ._qvww1osq._qvww1osq h1{max-width:100%}
+._rjxpidpf{inset-inline-end:0}
 ._s7n4nkob{vertical-align:middle}
 ._syaz1poe{color:#c7d1db}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._t9ec1i34{transform:translateY(-50%)}
 ._tzy41w01{opacity:.85}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._u5f3idpf{padding-right:0}
 ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._u7coidpf{inset-block-end:0}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._umc418ws >*{transform:scale(2)}
 ._vchhusvi{box-sizing:border-box}
@@ -102,7 +135,9 @@
 ._y3gn1e5h{text-align:left}
 ._y3gn1h6o{text-align:center}
 ._y3gnusic{text-align:right}
+._yv0ehpfy{grid-template-columns:minmax(0,1fr) auto}
 ._z18o1kxc video{height:100vh}
 ._zcqx1osq p{line-height:100%}
 ._4pkp1fjg button:hover{color:#161a1d!important}
+._6pupl4ek button:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}
 ._1sfy1fjg button:active{color:#161a1d!important}