@ntbjs/react-components 0.0.1-beta.31 → 0.0.1-beta.32

package/{AssetGallery-c79858ba.js → AssetGallery-7b7c9ce2.js}

@@ -297,7 +297,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       extendedSelectMode = props.extendedSelectMode,
       onAssetSelected = props.onAssetSelected,
       onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
+      component = props.component,
+      scrollPosition = props.scrollPosition;
 
   function onClick(event) {
     if (extendedSelectMode) {
@@ -411,7 +412,9 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     extendedSelectMode: extendedSelectMode,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, null, React__default['default'].createElement("video", {
+  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+    scrollPosition: scrollPosition
+  }, React__default['default'].createElement("video", {
     ref: videoPlayerRef,
     loop: true,
     muted: true
@@ -426,7 +429,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     height: "100%",
     width: "100%",
     effect: "opacity",
-    threshold: 700
+    threshold: 1000,
+    scrollPosition: scrollPosition
   }))), React__default['default'].createElement(Overlay, {
     ref: cardRef
   }, React__default['default'].createElement(OverlayBackdrop, null), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
@@ -466,15 +470,16 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   extendedSelectMode: defaultTheme.PropTypes.bool,
   onAssetSelected: defaultTheme.PropTypes.func.isRequired,
   onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
-  component: defaultTheme.PropTypes.func
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryCompactCard.defaultProps = {};
-var AssetGalleryCompactCard$1 = React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
+var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
-});
+}));
 
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  margin: 0;\n  ", "\n  border: 1px solid;\n  ", ";\n  ", "\n  box-sizing: border-box;\n  text-decoration: none;\n"])), function (props) {
@@ -570,7 +575,8 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       extendedSelectMode = props.extendedSelectMode,
       onAssetSelected = props.onAssetSelected,
       onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
+      component = props.component,
+      scrollPosition = props.scrollPosition;
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
 
@@ -660,7 +666,9 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     title: asset.note.title
   }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
     "data-id": "ss"
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, null, React__default['default'].createElement("video", {
+  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+    scrollPosition: scrollPosition
+  }, React__default['default'].createElement("video", {
     ref: videoPlayerRef,
     loop: true,
     muted: true
@@ -673,7 +681,8 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     height: "100%",
     width: "100%",
     effect: "opacity",
-    threshold: 700
+    threshold: 1000,
+    scrollPosition: scrollPosition
   })))), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
     style: {
       display: 'flex'
@@ -715,15 +724,16 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
   extendedSelectMode: defaultTheme.PropTypes.bool,
   onAssetSelected: defaultTheme.PropTypes.func.isRequired,
   onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
-  component: defaultTheme.PropTypes.func
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryGridCard.defaultProps = {};
-var AssetGalleryGridCard$1 = React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
+var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
-});
+}));
 
 var _templateObject, _templateObject2, _templateObject3;
 var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
@@ -761,8 +771,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   }, [viewMode, thumbnailMaxHeight]);
   var SPACE_BETWEEN_ASSETS = 8;
   var SPACE_UNDER_ASSETS = 8;
-  var PRIMARY_SCROLL_BUFFER_HEIGHT = 700;
-  var SECONDARY_SCROLL_BUFFER_HEIGHT = 300;
+  var PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
+  var SECONDARY_SCROLL_BUFFER_HEIGHT = 500;
   var GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
   var GRID_VIEW_MODE_ASSET_HEIGHT = 403;
   var MISSING_WIDTH_PLACEHOLDER = 1920;
@@ -1007,7 +1017,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,
-      selectable: "selectable" in asset ? asset.selectable : selectable,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
       selected: selectedAssetKeys.includes(asset.key),
       extendedSelectMode: Boolean(selectedAssetKeys.length),
       onAssetSelected: onAssetSelected,
@@ -1016,7 +1026,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
       asset: asset,
       hasHeightAndWidth: asset.layout.hasHeightAndWidth,
-      selectable: "selectable" in asset ? asset.selectable : selectable,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
       selected: selectedAssetKeys.includes(asset.key),
       extendedSelectMode: Boolean(selectedAssetKeys.length),
       onAssetSelected: onAssetSelected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "0.0.1-beta.31",
+  "version": "0.0.1-beta.32",
   "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-c79858ba.js');
+var AssetGallery = require('../../AssetGallery-7b7c9ce2.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-c79858ba.js');
+var AssetGallery = require('../AssetGallery-7b7c9ce2.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');