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

package/{AssetGallery-77c1c747.js → AssetGallery-9427c4a0.js}

@@ -313,7 +313,7 @@ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultThem
 }, function (props) {
   return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 });
-var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img,\n  video,\n  .audio {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  .audio {\n    display: flex;\n\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n"])), function (props) {
   return props.hasHeightAndWidth ? styled.css(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
 });
 var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  inset: 0;\n  opacity: ", ";\n  background-color: ", ";\n"])), function (props) {
@@ -473,7 +473,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       softSelected = props.softSelected,
       component = props.component,
       scrollPosition = props.scrollPosition,
-      collapseExtraInfo = props.collapseExtraInfo;
+      collapseExtraInfo = props.collapseExtraInfo,
+      thumbnailMaxHeight = props.thumbnailMaxHeight;
 
   var _React$useState = React__default['default'].useState(false),
       _React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
@@ -485,6 +486,14 @@ 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;
 
@@ -632,7 +641,10 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       }, React__default['default'].createElement("video", {
         ref: videoPlayerRef,
         loop: true,
-        muted: true
+        muted: true,
+        style: {
+          height: maxHeight
+        }
       }, React__default['default'].createElement("source", {
         src: asset.previewUrl,
         type: "video/mp4"
@@ -643,7 +655,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       }, React__default['default'].createElement("div", {
         className: "audio",
         style: {
-          height: '100%'
+          height: maxHeight
         }
       }, React__default['default'].createElement(SvgHeadset, null)));
     } else {
@@ -808,6 +820,7 @@ 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 = {};
@@ -1709,7 +1722,7 @@ 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: 'auto'
+        height: "".concat(asset.layout.height, "px")
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,
@@ -1731,6 +1744,7 @@ 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.41",
+  "version": "1.2.0-rc.43",
   "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-77c1c747.js');
+var AssetGallery = require('../../AssetGallery-9427c4a0.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-77c1c747.js');
+var AssetGallery = require('../AssetGallery-9427c4a0.js');
 var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
 var Instructions = require('../Instructions-b1311846.js');