@ntbjs/react-components 1.2.0-rc.43 → 1.2.0-rc.44

package/{AssetGallery-9427c4a0.js → AssetGallery-276ec477.js}

@@ -170,7 +170,9 @@ var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 });
-var AssetGalleryCardBase = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  z-index: 1;\n  will-change: transform, width, height;\n\n  &:hover {\n    z-index: 2;\n  }\n"])));
+var AssetGalleryCardBase = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  z-index: 1;\n  will-change: transform, width, height;\n\n  &:hover {\n    z-index: 2;\n  }\n"])), function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
+});
 
 var css_248z = ".lazy-load-image-background.opacity {\n  opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n  opacity: 1;\n  transition: opacity .3s;\n}\n";
 defaultTheme.styleInject(css_248z);
@@ -473,8 +475,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       softSelected = props.softSelected,
       component = props.component,
       scrollPosition = props.scrollPosition,
-      collapseExtraInfo = props.collapseExtraInfo,
-      thumbnailMaxHeight = props.thumbnailMaxHeight;
+      collapseExtraInfo = props.collapseExtraInfo;
 
   var _React$useState = React__default['default'].useState(false),
       _React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
@@ -486,14 +487,6 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       openedSubActions = _React$useState4[0],
       updateOpenedSubActions = _React$useState4[1];
 
-  var _React$useState5 = React__default['default'].useState(),
-      _React$useState6 = defaultTheme._slicedToArray(_React$useState5, 2),
-      maxHeight = _React$useState6[0],
-      setMaxHeight = _React$useState6[1];
-
-  React.useEffect(function () {
-    setMaxHeight(thumbnailMaxHeight);
-  }, [thumbnailMaxHeight]);
   React.useEffect(function () {
     var _asset$actions;
 
@@ -641,10 +634,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       }, React__default['default'].createElement("video", {
         ref: videoPlayerRef,
         loop: true,
-        muted: true,
-        style: {
-          height: maxHeight
-        }
+        muted: true
       }, React__default['default'].createElement("source", {
         src: asset.previewUrl,
         type: "video/mp4"
@@ -653,10 +643,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
         scrollPosition: scrollPosition
       }, React__default['default'].createElement("div", {
-        className: "audio",
-        style: {
-          height: maxHeight
-        }
+        className: "audio"
       }, React__default['default'].createElement(SvgHeadset, null)));
     } else {
       previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
@@ -820,7 +807,6 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   softSelected: defaultTheme.PropTypes.bool.isRequired,
   component: defaultTheme.PropTypes.func,
   scrollPosition: defaultTheme.PropTypes.number,
-  thumbnailMaxHeight: defaultTheme.PropTypes.number,
   collapseExtraInfo: defaultTheme.PropTypes.bool
 } : {};
 AssetGalleryCompactCard.defaultProps = {};
@@ -1722,7 +1708,9 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       style: {
         transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
         width: "".concat(asset.layout.width, "px"),
-        height: "".concat(asset.layout.height, "px")
+        height: "".concat(asset.layout.height, "px"),
+        display: 'flex',
+        justifyContent: 'center'
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,
@@ -1744,7 +1732,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       onAssetSelected: onAssetSelected,
       onAssetUnselected: onAssetUnselected,
       softSelected: softSelectedAssetKey === asset.key,
-      thumbnailMaxHeight: "".concat(asset.layout.height, "px"),
       component: component
     })));
   })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.2.0-rc.43",
+  "version": "1.2.0-rc.44",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-9427c4a0.js');
+var AssetGallery = require('../../AssetGallery-276ec477.js');
 require('../../defaultTheme-ea44e34a.js');
 require('styled-components');
 require('lodash');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-9427c4a0.js');
+var AssetGallery = require('../AssetGallery-276ec477.js');
 var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
 var Instructions = require('../Instructions-b1311846.js');