@vidispine/vdt-react 0.15.0-pre.8 → 21.4.0-pre.2

package/dist/index.js

@@ -8,9 +8,49 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var vdtApi = require('@vidispine/vdt-api');
 var vdtJs = require('@vidispine/vdt-js');
+var lzString = require('lz-string');
 var useDeepCompareEffect = _interopDefault(require('use-deep-compare-effect'));
+var debounce = _interopDefault(require('lodash.debounce'));
 var reactCookie = require('react-cookie');
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -118,40 +158,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
@@ -189,7 +195,7 @@ function _isNativeReflectConstruct() {
   if (typeof Proxy === "function") return true;
 
   try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
     return true;
   } catch (e) {
     return false;
@@ -243,6 +249,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -284,18 +292,21 @@ function _arrayWithHoles(arr) {
 }
 
 function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
+
+  var _s, _e;
 
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
 
       if (i && _arr.length === i) break;
@@ -477,6 +488,7 @@ function useApi(apiHandler, initialState, responseRef) {
   }, state);
 }
 
+var _excluded = ["queryParams", "matrixParams", "itemSearchDocument", "rowsPerPage", "page"];
 var CHANGE_PAGE = 'CHANGE_PAGE';
 var CHANGE_ROWS = 'CHANGE_ROWS';
 var CHANGE_SORT = 'CHANGE_SORT';
@@ -520,7 +532,7 @@ var setInitialDefaultState = function setInitialDefaultState() {
       rowsPerPage = _ref$rowsPerPage === void 0 ? 10 : _ref$rowsPerPage,
       _ref$page = _ref.page,
       page = _ref$page === void 0 ? 0 : _ref$page,
-      state = _objectWithoutProperties(_ref, ["queryParams", "matrixParams", "itemSearchDocument", "rowsPerPage", "page"]);
+      state = _objectWithoutProperties(_ref, _excluded);
 
   return _objectSpread2(_objectSpread2({}, state), {}, {
     queryParams: _objectSpread2({
@@ -930,9 +942,11 @@ function useAutocomplete(initialState) {
       setAutocompleteDoc = _React$useState2[1];
 
   var setAutocompleteField = React__default.useCallback(function (field) {
+    var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     setAutocompleteDoc(function (state) {
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        field: field
+        field: field,
+        text: text
       });
     });
   }, []);
@@ -1105,6 +1119,7 @@ function useThumbnailScrub() {
   };
 }
 
+var _excluded$1 = ["type"];
 var CHANGE_PAGE$1 = 'CHANGE_PAGE';
 var CHANGE_ROWS$1 = 'CHANGE_ROWS';
 var CHANGE_SORT$1 = 'CHANGE_SORT';
@@ -1145,7 +1160,7 @@ var setInitialDefaultState$2 = function setInitialDefaultState() {
 
 var searchReducer$1 = function searchReducer(state, action) {
   var type = action.type,
-      rest = _objectWithoutProperties(action, ["type"]);
+      rest = _objectWithoutProperties(action, _excluded$1);
 
   switch (type) {
     case ACTION_TYPE$1.CHANGE_PAGE:
@@ -1445,7 +1460,6 @@ var useLocalStorage = function useLocalStorage(localStorageKey, defaultValue) {
   return [value, setValue, getValue];
 };
 
-// eslint-disable-next-line import/prefer-default-export
 function uuidv4() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
     return (// eslint-disable-next-line
@@ -1454,16 +1468,16 @@ function uuidv4() {
   });
 }
 function b64EncodeUnicode(str) {
-  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (_, p1) {
-    return String.fromCharCode("0x".concat(p1));
-  }));
+  return lzString.compressToEncodedURIComponent(str);
 }
 function b64DecodeUnicode(str) {
-  return decodeURIComponent(atob(str).split('').map(function (c) {
+  // fallback for old base64 encoded links
+  return str.slice(-1) === '=' ? decodeURIComponent(atob(str).split('').map(function (c) {
     return "%".concat("00".concat(c.charCodeAt(0).toString(16)).slice(-2));
-  }).join(''));
+  }).join('')) : lzString.decompressFromEncodedURIComponent(str);
 }
 
+var _excluded$2 = ["onUploadFile", "initialMetadata"];
 var DEFAULT_AUDIO_SHAPETAGS = ['__mp3_160k'];
 var DEFAULT_VIDEO_SHAPETAGS = ['__mp4'];
 var DEFAULT_IMAGE_SHAPETAGS = ['__png'];
@@ -1590,7 +1604,7 @@ function useUploadFiles(_ref3) {
       handleUploadFile = _ref3$onUploadFile === void 0 ? onUploadFile : _ref3$onUploadFile,
       _ref3$initialMetadata = _ref3.initialMetadata,
       initialMetadata = _ref3$initialMetadata === void 0 ? {} : _ref3$initialMetadata,
-      props = _objectWithoutProperties(_ref3, ["onUploadFile", "initialMetadata"]);
+      props = _objectWithoutProperties(_ref3, _excluded$2);
 
   var _React$useState = React__default.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1752,6 +1766,9 @@ function useUpdateQueryState(_ref) {
   }, [onSearchStateChange, state]);
 }
 
+var _excluded$3 = ["accessId"],
+    _excluded2 = ["accessControlDocument"];
+
 var useEntityAccess = function useEntityAccess(_ref) {
   var entityId = _ref.entityId,
       entityType = _ref.entityType;
@@ -1772,7 +1789,7 @@ var useEntityAccess = function useEntityAccess(_ref) {
   [entityId, entityType]);
   var onRemove = React.useCallback(function (_ref2) {
     var accessId = _ref2.accessId,
-        props = _objectWithoutProperties(_ref2, ["accessId"]);
+        props = _objectWithoutProperties(_ref2, _excluded$3);
 
     return vdtApi.access.removeEntityAccess(_objectSpread2({
       accessId: accessId,
@@ -1782,7 +1799,7 @@ var useEntityAccess = function useEntityAccess(_ref) {
   }, [entityId, entityType]);
   var onAdd = React.useCallback(function (_ref3) {
     var accessControlDocument = _ref3.accessControlDocument,
-        props = _objectWithoutProperties(_ref3, ["accessControlDocument"]);
+        props = _objectWithoutProperties(_ref3, _excluded2);
 
     return vdtApi.access.createEntityAccess(_objectSpread2({
       entityType: entityType,
@@ -1799,6 +1816,11 @@ var useEntityAccess = function useEntityAccess(_ref) {
   };
 };
 
+var _excluded$4 = ["name"],
+    _excluded2$1 = ["label"],
+    _excluded3 = ["name", "field", "group"],
+    _excluded4 = ["label"];
+
 var getValueFromData = function getValueFromData() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$data = _ref.data,
@@ -1895,18 +1917,19 @@ var useAddMetadataFieldAttributes = function useAddMetadataFieldAttributes(_ref5
       var fieldsAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       return fieldsArray.map(function (_ref6) {
         var name = _ref6.name,
-            overrides = _objectWithoutProperties(_ref6, ["name"]);
+            overrides = _objectWithoutProperties(_ref6, _excluded$4);
 
         var fieldAttributes = fieldsAttributes[name] || {};
 
         var _getDataAttributes = getDataAttributes(fieldAttributes, fieldDataToInclude.split(',')),
             label = _getDataAttributes.label,
-            dataAttributes = _objectWithoutProperties(_getDataAttributes, ["label"]);
+            dataAttributes = _objectWithoutProperties(_getDataAttributes, _excluded2$1);
 
         return _objectSpread2(_objectSpread2({
           name: name,
           label: label || name,
           type: fieldAttributes.type,
+          constraint: fieldAttributes.constraint,
           options: getOptions(fieldAttributes)
         }, dataAttributes), overrides);
       });
@@ -1920,7 +1943,7 @@ var useAddMetadataFieldAttributes = function useAddMetadataFieldAttributes(_ref5
         var name = _ref7.name,
             field = _ref7.field,
             group = _ref7.group,
-            overrides = _objectWithoutProperties(_ref7, ["name", "field", "group"]);
+            overrides = _objectWithoutProperties(_ref7, _excluded3);
 
         var groupAttributes = groupsAttributes[name] || {};
         var childFields = field || groupAttributes && groupAttributes.field;
@@ -1928,7 +1951,7 @@ var useAddMetadataFieldAttributes = function useAddMetadataFieldAttributes(_ref5
 
         var _getDataAttributes2 = getDataAttributes(groupAttributes, groupDataToInclude.split(',')),
             label = _getDataAttributes2.label,
-            dataAttributes = _objectWithoutProperties(_getDataAttributes2, ["label"]);
+            dataAttributes = _objectWithoutProperties(_getDataAttributes2, _excluded4);
 
         return _objectSpread2(_objectSpread2({
           name: name,
@@ -2128,6 +2151,8 @@ var useAddMetadataFieldAttributes = function useAddMetadataFieldAttributes(_ref5
   };
 };
 
+var _excluded$5 = ["setItemSearchDocument"];
+
 var UPDATE_FREQUENCY = 1000; // Prevents access controls set on the library (i.e. saved search) from cascading down to items
 
 var UPDATE_MODE = 'TRANSIENT';
@@ -2264,7 +2289,7 @@ function useSavedSearch(_ref11) {
   }));
 
   var _setItemSearchDocument = searchProps.setItemSearchDocument,
-      props = _objectWithoutProperties(searchProps, ["setItemSearchDocument"]);
+      props = _objectWithoutProperties(searchProps, _excluded$5);
 
   return {
     onSaveSearch: saveSearchWithMarker,
@@ -2395,6 +2420,8 @@ function useGetCollection$1(_ref) {
   };
 }
 
+var _excluded$6 = ["request", "data"];
+
 var useGetEntity = function useGetEntity(_ref) {
   var _objectSpread3;
 
@@ -2430,7 +2457,7 @@ var useGetEntity = function useGetEntity(_ref) {
   var _useApi = useApi(entityApi),
       request = _useApi.request,
       data = _useApi.data,
-      apiProps = _objectWithoutProperties(_useApi, ["request", "data"]);
+      apiProps = _objectWithoutProperties(_useApi, _excluded$6);
 
   var onGetEntity = React__default.useCallback(function (props) {
     return request(_objectSpread2(_defineProperty({}, entityTypeId, entityId), props));
@@ -3193,6 +3220,872 @@ var useCollectionAutoPlay = function useCollectionAutoPlay(_ref) {
   };
 };
 
+function useHoverScrub() {
+  var srcList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var customOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var durationSeconds = arguments.length > 2 ? arguments[2] : undefined;
+
+  var _React$useState = React__default.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      scrubPosition = _React$useState2[0],
+      setScrubPosition = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      thumbnailIndex = _React$useState4[0],
+      setThumbnailIndex = _React$useState4[1];
+
+  var _React$useState5 = React__default.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      showScrub = _React$useState6[0],
+      setShowScrub = _React$useState6[1];
+
+  var _React$useState7 = React__default.useState([]),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      thumbnailTimeCodeArray = _React$useState8[0],
+      setThumbnailTimeCodeArray = _React$useState8[1];
+
+  var _React$useState9 = React__default.useState(),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      thumbnailTimeCode = _React$useState10[0],
+      setThumbnailTimeCode = _React$useState10[1];
+
+  var _React$useState11 = React__default.useState(0),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      thumbnailWidth = _React$useState12[0],
+      setThumbnailWidth = _React$useState12[1];
+
+  var getInnerLeft = React.useCallback(function (e) {
+    var left = e.clientX - e.currentTarget.offsetLeft - customOffset;
+
+    if (left < 0) {
+      return 0;
+    }
+
+    if (left > e.currentTarget.offsetWidth) {
+      return e.currentTarget.offsetWidth;
+    }
+
+    return left;
+  }, [customOffset]);
+
+  var onMouseMove = function onMouseMove(e) {
+    if (durationSeconds) {
+      var innerLeft = getInnerLeft(e);
+      setScrubPosition(innerLeft - 1);
+      setThumbnailWidth(e.currentTarget.offsetWidth);
+      var pxToSec = e.currentTarget.offsetWidth / +durationSeconds;
+      var pxAsTimeCode = innerLeft / pxToSec;
+      setThumbnailTimeCode(vdtJs.formatSeconds(pxAsTimeCode));
+
+      for (var index = 0; index < thumbnailTimeCodeArray.length; index += 1) {
+        var timeCode = thumbnailTimeCodeArray[index];
+        var nextTimeCode = thumbnailTimeCodeArray[index + 1] || thumbnailTimeCodeArray[thumbnailTimeCodeArray.length - 1];
+
+        if (timeCode && nextTimeCode && timeCode.toSeconds().toFixed(0) <= pxAsTimeCode && nextTimeCode.toSeconds().toFixed(0) >= pxAsTimeCode) {
+          setThumbnailIndex(index);
+        }
+      }
+    }
+  };
+
+  useDeepCompareEffect(function () {
+    var timeCodes = [];
+
+    for (var index = 0; index < srcList.length; index += 1) {
+      var uri = srcList[index];
+
+      if (uri && typeof uri === 'string') {
+        try {
+          var timeCodeFromURI = uri.split('version')[1].split('/')[1].split('?')[0];
+          var timecodeText = vdtJs.formatTimeCodeText(timeCodeFromURI);
+          timeCodes.push(timecodeText);
+        } catch (error) {
+          return;
+        }
+      }
+    }
+
+    setThumbnailTimeCodeArray(timeCodes);
+  }, [srcList]);
+
+  var handleShowScrub = function handleShowScrub(value) {
+    return function () {
+      if (durationSeconds > 0) {
+        setShowScrub(value);
+      }
+    };
+  };
+
+  return {
+    thumbnailIndex: thumbnailIndex,
+    thumbnailTimeCode: thumbnailTimeCode,
+    thumbnailWidth: thumbnailWidth,
+    showScrub: showScrub,
+    scrubPosition: scrubPosition,
+    handleShowScrub: handleShowScrub,
+    onMouseMove: onMouseMove
+  };
+}
+
+function useDocSearchAutocomplete(_ref) {
+  var searchDoc = _ref.searchDoc,
+      queryParams = _ref.queryParams,
+      debounceTime = _ref.debounceTime,
+      _ref$suggestionSettin = _ref.suggestionSettings,
+      suggestionSettings = _ref$suggestionSettin === void 0 ? {
+    maximumSuggestions: 10,
+    accuracy: 1
+  } : _ref$suggestionSettin,
+      _ref$triggerLength = _ref.triggerLength,
+      triggerLength = _ref$triggerLength === void 0 ? 1 : _ref$triggerLength,
+      _ref$apiCall = _ref.apiCall,
+      apiCall = _ref$apiCall === void 0 ? vdtApi.item.searchItem : _ref$apiCall;
+
+  var _React$useState = React__default.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      textValue = _React$useState2[0],
+      setTextValue = _React$useState2[1];
+
+  var handleAutocompleteChange = React__default.useRef(debounce(setTextValue, debounceTime)).current;
+
+  var _useApi = useApi(apiCall),
+      _useApi$data = _useApi.data;
+
+  _useApi$data = _useApi$data === void 0 ? {} : _useApi$data;
+  var _useApi$data$autocomp = _useApi$data.autocomplete,
+      autocomplete = _useApi$data$autocomp === void 0 ? [] : _useApi$data$autocomp,
+      request = _useApi.request;
+
+  var _ref2 = autocomplete[0] || {},
+      _ref2$suggestion = _ref2.suggestion,
+      suggestion = _ref2$suggestion === void 0 ? [] : _ref2$suggestion;
+
+  useDeepCompareEffect(function () {
+    if (searchDoc && textValue && textValue.length >= triggerLength) {
+      request({
+        body: _objectSpread2(_objectSpread2({}, searchDoc), {}, {
+          suggestion: suggestionSettings,
+          autocomplete: [{
+            text: textValue
+          }],
+          text: [{
+            value: textValue
+          }]
+        }),
+        queryParams: _objectSpread2({
+          count: false,
+          number: 0
+        }, queryParams)
+      });
+    }
+  }, [request, textValue, queryParams, triggerLength]);
+  return {
+    suggestion: suggestion,
+    handleAutocompleteChange: handleAutocompleteChange
+  };
+}
+
+function useGetFieldMetadataDataset() {
+  var _useApi = useApi(vdtApi.metadatafield.getMetadataFieldAllowedValues),
+      request = _useApi.request,
+      _useApi$data = _useApi.data;
+
+  _useApi$data = _useApi$data === void 0 ? {} : _useApi$data;
+  var _useApi$data$value = _useApi$data.value,
+      constraintValueListType = _useApi$data$value === void 0 ? [] : _useApi$data$value,
+      isLoading = _useApi.isLoading;
+
+  var getMetadataDataset = function getMetadataDataset(datasetField, parentValue, parentField) {
+    var metadataFieldValueConstraintListDocument = {
+      constraint: parentValue ? [{
+        field: parentField,
+        value: parentValue
+      }] : []
+    };
+
+    if (datasetField) {
+      request({
+        fieldName: datasetField,
+        metadataFieldValueConstraintListDocument: metadataFieldValueConstraintListDocument
+      });
+    }
+  };
+
+  return {
+    getMetadataDataset: getMetadataDataset,
+    dataset: constraintValueListType,
+    isLoading: isLoading
+  };
+}
+
+var UPDATE_FREQUENCY$1 = 1000; // Prevents access controls set on the library (i.e. saved search) from cascading down to items
+
+var UPDATE_MODE$1 = 'TRANSIENT';
+
+var getCollectionTitle = function getCollectionTitle(fields) {
+  return fields.find(function (field) {
+    return field.name === 'title';
+  }).value[0].value;
+};
+
+function useGetSavedSearchFolders(_ref) {
+  var _ref$childFolders = _ref.childFolders,
+      childFolders = _ref$childFolders === void 0 ? [] : _ref$childFolders,
+      _ref$queryParams = _ref.queryParams,
+      queryParams = _ref$queryParams === void 0 ? {
+    content: ['metadata']
+  } : _ref$queryParams,
+      _ref$markerProps = _ref.markerProps,
+      markerProps = _ref$markerProps === void 0 ? {
+    markerValue: 'savedSearch',
+    markerField: 'eidr_referentType'
+  } : _ref$markerProps,
+      expand = _ref.expand;
+
+  var _React$useState = React__default.useState(childFolders),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      currentFolders = _React$useState2[0],
+      setCurrentFolders = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      subFolders = _React$useState4[0],
+      setSubFolders = _React$useState4[1];
+
+  var _React$useState5 = React__default.useState(),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      errors = _React$useState6[0],
+      setErrors = _React$useState6[1];
+
+  var getSubFolders = React__default.useCallback(function () {
+    Promise.all(currentFolders.map( /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(id) {
+        var _yield$CollectionApi$, _yield$CollectionApi$2, content, _yield$CollectionApi$3, metadata, field;
+
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return vdtApi.collection.getCollection({
+                  collectionId: id,
+                  queryParams: queryParams
+                });
+
+              case 2:
+                _yield$CollectionApi$ = _context.sent;
+                _yield$CollectionApi$2 = _yield$CollectionApi$.data;
+                content = _yield$CollectionApi$2.content;
+                _yield$CollectionApi$3 = _yield$CollectionApi$2.metadata;
+                metadata = _yield$CollectionApi$3 === void 0 ? {} : _yield$CollectionApi$3;
+                field = metadata.timespan[0].field;
+
+                if (!(content && content[0].type === 'library')) {
+                  _context.next = 10;
+                  break;
+                }
+
+                return _context.abrupt("return", {
+                  id: id,
+                  libraryId: content[0].id,
+                  title: getCollectionTitle(field),
+                  type: 'query',
+                  metadata: metadata
+                });
+
+              case 10:
+                return _context.abrupt("return", {
+                  id: id,
+                  title: getCollectionTitle(field),
+                  subFolders: content && content.map(function (c) {
+                    return c.id;
+                  }),
+                  type: 'folder',
+                  metadata: metadata
+                });
+
+              case 11:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }())).then(function (newFolders) {
+      setSubFolders(function (prevState) {
+        return [].concat(_toConsumableArray(newFolders), _toConsumableArray(prevState));
+      });
+    })["catch"](function (error) {
+      setErrors(error);
+    });
+  }, [currentFolders, queryParams]);
+
+  var createFolder = function createFolder(parentId, type, title, callback) {
+    vdtApi.collection.createCollection({
+      collectionDocument: {
+        metadata: vdtJs.createMetadataType({
+          saved_search_folder: type,
+          title: title
+        })
+      }
+    }).then(function (_ref3) {
+      var id = _ref3.data.id;
+
+      if (parentId) {
+        return vdtApi.collection.updateCollection({
+          collectionId: parentId,
+          collectionDocument: {
+            content: [{
+              id: id,
+              mode: 'add',
+              type: 'collection'
+            }]
+          }
+        }).then(function (_ref4) {
+          var content = _ref4.data.content;
+
+          if (content) {
+            setCurrentFolders(content.filter(function (collection) {
+              return collection.id === id;
+            }).map(function (collection) {
+              return collection.id;
+            }));
+            if (callback) callback();
+          }
+        })["catch"](function (error) {
+          setErrors(error);
+        });
+      }
+
+      return null;
+    })["catch"](function (error) {
+      setErrors(error);
+    });
+  };
+
+  var saveSearch = function saveSearch(folderId, title, itemSearchDocument, callback) {
+    try {
+      vdtApi.item.searchItem({
+        queryParams: {
+          result: 'library',
+          updateMode: UPDATE_MODE$1,
+          updateFrequency: UPDATE_FREQUENCY$1
+        },
+        itemSearchDocument: itemSearchDocument
+      }).then(function (_ref5) {
+        var _createMetadataType;
+
+        var library = _ref5.data.library;
+        return vdtApi.collection.createCollection({
+          collectionDocument: {
+            metadata: vdtJs.createMetadataType((_createMetadataType = {}, _defineProperty(_createMetadataType, markerProps.markerField, markerProps.markerValue), _defineProperty(_createMetadataType, "title", title), _createMetadataType)),
+            content: [{
+              id: library,
+              type: 'library'
+            }]
+          }
+        });
+      }).then(function (_ref6) {
+        var id = _ref6.data.id;
+        return vdtApi.collection.updateCollection({
+          collectionId: folderId,
+          collectionDocument: {
+            content: [{
+              id: id,
+              mode: 'add',
+              type: 'collection'
+            }]
+          }
+        }).then(function (_ref7) {
+          var content = _ref7.data.content;
+
+          if (content) {
+            setCurrentFolders(content.filter(function (collection) {
+              return collection.id === id;
+            }).map(function (collection) {
+              return collection.id;
+            }));
+            if (callback) callback();
+          }
+        })["catch"](function (error) {
+          setErrors(error);
+        });
+      })["catch"](function (error) {
+        setErrors(error);
+      });
+    } catch (error) {
+      setErrors(error);
+    }
+  };
+
+  var deleteFolder = function deleteFolder(collectionId) {
+    return vdtApi.collection.removeCollection({
+      collectionId: collectionId
+    })["catch"](function (error) {
+      setErrors(error);
+    });
+  };
+
+  var removeItem = function removeItem(id) {
+    setSubFolders(function (prevState) {
+      return prevState.filter(function (folder) {
+        return folder.id !== id;
+      });
+    });
+  };
+
+  useDeepCompareEffect(function () {
+    if (currentFolders.length > 0 && expand) {
+      getSubFolders();
+    }
+  }, [currentFolders, expand]);
+  React__default.useEffect(function () {
+    if (!expand && typeof expand === 'boolean') {
+      setCurrentFolders(function () {
+        return subFolders.map(function (folder) {
+          return folder.id;
+        });
+      });
+      setSubFolders([]);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [expand]);
+  return {
+    createFolder: createFolder,
+    saveSearch: saveSearch,
+    getSubFolders: getSubFolders,
+    deleteFolder: deleteFolder,
+    removeItem: removeItem,
+    subFolders: subFolders,
+    setSubFolders: setSubFolders,
+    setCurrentFolders: setCurrentFolders,
+    errors: errors
+  };
+}
+
+var useRepresentativeItems = function useRepresentativeItems(_ref) {
+  var collectionId = _ref.collectionId,
+      onError = _ref.onError;
+
+  var _React$useState = React__default.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      representativeItems = _React$useState2[0],
+      setRepresentativeItems = _React$useState2[1];
+
+  var asyncGetRepresentativeItems = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _yield$CollectionApi$, _yield$CollectionApi$2, metadata, _parseMetadataType, _parseMetadataType$re, newRepresentativeItems;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (collectionId) {
+                _context.next = 3;
+                break;
+              }
+
+              throw Error('Missing collectionId');
+
+            case 3:
+              _context.next = 5;
+              return vdtApi.collection.getCollectionMetadata({
+                collectionId: collectionId,
+                queryParams: {
+                  content: 'metadata',
+                  field: 'representativeItems'
+                }
+              })["catch"](function (error) {
+                if (onError) onError(error);
+              });
+
+            case 5:
+              _yield$CollectionApi$ = _context.sent;
+              _yield$CollectionApi$2 = _yield$CollectionApi$.data;
+              metadata = _yield$CollectionApi$2 === void 0 ? {} : _yield$CollectionApi$2;
+              _parseMetadataType = vdtJs.parseMetadataType(metadata, {
+                flat: true,
+                includeValueAttributes: true
+              }), _parseMetadataType$re = _parseMetadataType.representativeItems, newRepresentativeItems = _parseMetadataType$re === void 0 ? [] : _parseMetadataType$re;
+              setRepresentativeItems(function () {
+                return newRepresentativeItems;
+              });
+              _context.next = 15;
+              break;
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](0);
+              if (onError) onError(_context.t0);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 12]]);
+    }));
+
+    return function asyncGetRepresentativeItems() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onRefresh = asyncGetRepresentativeItems;
+
+  var updateAsRepresentativeItem = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(values) {
+      var metadataDocument, response;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              metadataDocument = vdtJs.createMetadataType({
+                representativeItems: Array.isArray(values) ? values : [values]
+              });
+              _context2.next = 4;
+              return vdtApi.collection.updateCollectionMetadata({
+                collectionId: collectionId,
+                metadataDocument: metadataDocument
+              });
+
+            case 4:
+              response = _context2.sent;
+              onRefresh();
+              return _context2.abrupt("return", response);
+
+            case 9:
+              _context2.prev = 9;
+              _context2.t0 = _context2["catch"](0);
+              if (onError) onError(_context2.t0);
+              return _context2.abrupt("return", undefined);
+
+            case 13:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 9]]);
+    }));
+
+    return function updateAsRepresentativeItem(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var onAdd = function onAdd(entityId) {
+    return updateAsRepresentativeItem({
+      value: entityId,
+      mode: 'add'
+    });
+  };
+
+  var onRemove = function onRemove(entityId) {
+    try {
+      // Get all (if it has been added multiple times)
+      var entityIdValueUuids = representativeItems.filter(function (i) {
+        return i.value === entityId;
+      }).map(function (i) {
+        return i.uuid;
+      });
+      if (!entityIdValueUuids.length) return undefined;
+      return updateAsRepresentativeItem(entityIdValueUuids.map(function (uuid) {
+        return {
+          uuid: uuid,
+          mode: 'remove'
+        };
+      }));
+    } catch (error) {
+      if (onError) onError(error);
+      return undefined;
+    }
+  };
+
+  React__default.useEffect(function () {
+    onRefresh(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [collectionId]);
+  return {
+    representativeItems: representativeItems,
+    onRefresh: onRefresh,
+    onAdd: onAdd,
+    onRemove: onRemove
+  };
+};
+
+function defaultOnGetStorage() {
+  var storageData = vdtApi.storage.listStorage().then(function (response) {
+    var storage = {
+      id: response.data.storage[0].id,
+      uri: response.data.storage[0].method[0].uri
+    };
+    return storage;
+  });
+  return storageData;
+}
+
+function defaultOnCreate(list) {
+  return vdtApi.library.createLibrary({
+    itemListDocument: {
+      item: _toConsumableArray(list.item.map(function (_ref) {
+        var id = _ref.id;
+        return {
+          id: id
+        };
+      }))
+    }
+  });
+}
+
+function defaultOnList(response, storageInfo, queryParams) {
+  var _queryParams$fileName = queryParams.fileName,
+      fileName = _queryParams$fileName === void 0 ? 'output' : _queryParams$fileName,
+      _queryParams$outputFo = queryParams.outputFormat,
+      outputFormat = _queryParams$outputFo === void 0 ? 'csv' : _queryParams$outputFo;
+  var uri = storageInfo.uri;
+  var _response$data = response.data;
+  _response$data = _response$data === void 0 ? {} : _response$data;
+  var _response$data$uri = _response$data.uri;
+  _response$data$uri = _response$data$uri === void 0 ? [] : _response$data$uri;
+
+  var _response$data$uri2 = _slicedToArray(_response$data$uri, 1),
+      libraryId = _response$data$uri2[0];
+
+  var createNewUri = function createNewUri() {
+    if (uri.includes('s3')) {
+      var _uri$split = uri.split('?region'),
+          _uri$split2 = _slicedToArray(_uri$split, 2),
+          uriBeforeRegion = _uri$split2[0],
+          uriAfterRegion = _uri$split2[1];
+
+      return "".concat(uriBeforeRegion).concat(fileName, ".").concat(outputFormat, "?region").concat(uriAfterRegion);
+    }
+
+    return "".concat(uri).concat(fileName, ".").concat(outputFormat);
+  };
+
+  var newUri = encodeURIComponent(createNewUri());
+  return vdtApi.library.getLibraryBatch({
+    libraryId: libraryId,
+    queryParams: _objectSpread2({
+      destinationUri: newUri
+    }, queryParams)
+  });
+}
+
+var SUCCESSFUL_STATES = ['FINISHED', 'FINISHED_WARNING'];
+var INACTIVE_STATES = ['FINISHED', 'FINISHED_WARNING', 'FAILED_TOTAL', 'ABORTED'];
+
+function defaultOnGetFile(response, storageInfo, params, onError) {
+  var _response$data2 = response.data;
+  _response$data2 = _response$data2 === void 0 ? {} : _response$data2;
+  var jobId = _response$data2.jobId;
+  var id = storageInfo.id;
+  var _params$fileName = params.fileName,
+      fileName = _params$fileName === void 0 ? 'output' : _params$fileName,
+      _params$outputFormat = params.outputFormat,
+      outputFormat = _params$outputFormat === void 0 ? 'csv' : _params$outputFormat;
+  var filePath = "".concat(fileName, ".").concat(outputFormat);
+  vdtApi.job.getJob({
+    jobId: jobId
+  }).then(function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref2$data = _ref2.data;
+
+    _ref2$data = _ref2$data === void 0 ? {} : _ref2$data;
+    var status = _ref2$data.status;
+
+    if (SUCCESSFUL_STATES.includes(status)) {
+      try {
+        vdtApi.file.listFileStorage({
+          storageId: id,
+          queryParams: {
+            path: filePath,
+            methodMetadata: [{
+              key: 'format',
+              value: 'SIGNED-AUTO'
+            }, {
+              key: 'contentDisposition',
+              value: "attachment;+filename=".concat(filePath)
+            }],
+            'noauth-url': true
+          }
+        }).then(function (r) {
+          return window.open(r.data.file[0].uri[0]);
+        });
+      } catch (error) {
+        console.error('Download error:'.concat("\n", error));
+        onError({
+          message: 'Download failed'
+        });
+      }
+    } else if (!INACTIVE_STATES.includes(status)) {
+      setTimeout(function () {
+        defaultOnGetFile(response, storageInfo, params);
+      }, 1000);
+    } else {
+      onError({
+        message: 'Download failed'
+      });
+    }
+  });
+} // Note: Not needed as a react-hook since doesn't use react,
+//       but this is usually where we put logic functions right now
+
+
+var useCsvDownload = function useCsvDownload(_ref3) {
+  var itemListType = _ref3.itemListType,
+      queryParams = _ref3.queryParams,
+      onSuccess = _ref3.onSuccess,
+      _ref3$onError = _ref3.onError,
+      onError = _ref3$onError === void 0 ? function (_ref4) {
+    var message = _ref4.message,
+        error = _ref4.error;
+    return console.error("".concat(message, "\n").concat(error));
+  } : _ref3$onError,
+      _ref3$onGetFile = _ref3.onGetFile,
+      onGetFile = _ref3$onGetFile === void 0 ? defaultOnGetFile : _ref3$onGetFile,
+      _ref3$onCreateList = _ref3.onCreateList,
+      onCreateList = _ref3$onCreateList === void 0 ? defaultOnCreate : _ref3$onCreateList,
+      _ref3$onList = _ref3.onList,
+      onList = _ref3$onList === void 0 ? defaultOnList : _ref3$onList,
+      _ref3$onGetStorage = _ref3.onGetStorage,
+      onGetStorage = _ref3$onGetStorage === void 0 ? defaultOnGetStorage : _ref3$onGetStorage;
+
+  var onDownload = function onDownload() {
+    return onGetStorage().then(function (storageInfo) {
+      return Promise.all([onCreateList(itemListType).then(function (response) {
+        return onList(response, storageInfo, queryParams);
+      }).then(onSuccess()).then(function (response) {
+        return onGetFile(response, storageInfo, queryParams, onError);
+      })]);
+    });
+  };
+
+  return {
+    onDownload: onDownload
+  };
+};
+
+function useCompoundMetadata(itemId, values, groups, groupFields, setGroupFields, onRefresh, onSuccess, onError) {
+  var isFamily = function isFamily(el) {
+    return el.hasMultipleChild;
+  };
+
+  var groupFamily = groups.findIndex(isFamily);
+  var tableColumns = groups[groupFamily].groups[0].fields.map(function (group) {
+    return group;
+  });
+
+  var onChange = function onChange(e, row, groupIndex, editIndex) {
+    var value = e.target.value;
+    var name = e.target.name;
+    var newGroups = groupFields.map(function (group) {
+      return group;
+    });
+    var newRows = newGroups[groupIndex].group.map(function (newRow, rowIndex) {
+      if (rowIndex === editIndex) {
+        return _objectSpread2(_objectSpread2({}, row), {}, _defineProperty({}, name, value));
+      }
+
+      return newRow;
+    });
+    newGroups[groupIndex].group = newRows;
+    setGroupFields(newGroups);
+  };
+
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(data) {
+      var groupNames, metadataDocument, newTimeSpan, uuid, newGroups;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              groupNames = [];
+              groups.forEach(function (group) {
+                var newGroup = {};
+                newGroup.parentGroup = group.name;
+                newGroup.childGroup = group.groups[0].name;
+                groupNames.push(newGroup);
+              });
+              metadataDocument = vdtJs.createMetadataType({
+                group: data
+              });
+              newTimeSpan = metadataDocument.timespan;
+              uuid = values.itemType.metadata.timespan[0].group[0].uuid;
+              newGroups = [];
+              newTimeSpan[0].group.forEach(function (group, index) {
+                var newGroup = {
+                  group: []
+                };
+                newGroup.name = groupNames[index].parentGroup;
+                newGroup.mode = 'add';
+                group.group.forEach(function (subGroup) {
+                  var newSubGroup = subGroup;
+                  newSubGroup.name = groupNames[index].childGroup;
+                  newSubGroup.mode = 'add';
+                  newGroup.group.push(newSubGroup);
+                });
+                newGroups.push(newGroup);
+              });
+              newTimeSpan[0].group = newGroups;
+              _context.prev = 8;
+              _context.next = 11;
+              return vdtApi.metadata.removeMetadata({
+                metadataUuid: uuid
+              });
+
+            case 11:
+              _context.next = 13;
+              return vdtApi.item.updateItemMetadata({
+                itemId: itemId,
+                metadataDocument: {
+                  timespan: newTimeSpan
+                }
+              });
+
+            case 13:
+              _context.next = 15;
+              return onRefresh();
+
+            case 15:
+              onSuccess();
+              _context.next = 21;
+              break;
+
+            case 18:
+              _context.prev = 18;
+              _context.t0 = _context["catch"](8);
+              onError(_context.t0);
+
+            case 21:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[8, 18]]);
+    }));
+
+    return function onSubmit(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return {
+    tableColumns: tableColumns,
+    onChange: onChange,
+    onSubmit: onSubmit
+  };
+}
+
+var _excluded$7 = ["itemType", "collectionType", "joinValue", "flat", "groupAsList", "children"];
 function MetadataType(_ref) {
   var itemType = _ref.itemType,
       collectionType = _ref.collectionType,
@@ -3200,17 +4093,20 @@ function MetadataType(_ref) {
       joinValue = _ref$joinValue === void 0 ? ',' : _ref$joinValue,
       _ref$flat = _ref.flat,
       flat = _ref$flat === void 0 ? true : _ref$flat,
+      _ref$groupAsList = _ref.groupAsList,
+      groupAsList = _ref$groupAsList === void 0 ? true : _ref$groupAsList,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["itemType", "collectionType", "joinValue", "flat", "children"]);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   var entityType = itemType || collectionType || {};
   var metadataType = entityType.metadata;
   var metadata = React__default.useMemo(function () {
     return vdtJs.parseMetadataType(metadataType, {
       joinValue: joinValue,
-      flat: flat
+      flat: flat,
+      groupAsList: groupAsList
     });
-  }, [flat, joinValue, metadataType]);
+  }, [flat, groupAsList, joinValue, metadataType]);
 
   var cloneProps = _objectSpread2(_objectSpread2(_objectSpread2({}, props), metadata), {}, {
     itemType: itemType
@@ -3585,6 +4481,7 @@ var VidispineApi = /*#__PURE__*/function (_React$Component) {
   return VidispineApi;
 }(React__default.Component);
 
+var _excluded$8 = ["LoginComponent", "LoginProps", "AppComponent", "AppProps", "onGetToken", "onSuccess", "onError", "cookieOptions"];
 var VIDISPINE_TOKEN = 'VIDISPINE-TOKEN';
 var VIDISPINE_USERNAME = 'VIDISPINE-USERNAME';
 var VIDISPINE_SERVER_URL = 'VIDISPINE-SERVER-URL';
@@ -3650,7 +4547,7 @@ function Auth(_ref4) {
     maxAge: 604800,
     path: '/'
   } : _ref4$cookieOptions,
-      props = _objectWithoutProperties(_ref4, ["LoginComponent", "LoginProps", "AppComponent", "AppProps", "onGetToken", "onSuccess", "onError", "cookieOptions"]);
+      props = _objectWithoutProperties(_ref4, _excluded$8);
 
   var _useCookies = reactCookie.useCookies([VIDISPINE_TOKEN, VIDISPINE_USERNAME, VIDISPINE_SERVER_URL, VIDISPINE_REMEMBER_ME]),
       _useCookies2 = _slicedToArray(_useCookies, 3),
@@ -3946,11 +4843,13 @@ function HasRole(_ref) {
   return null;
 }
 
+var _excluded$9 = ["providers", "children"],
+    _excluded2$2 = ["provider"];
 function ComposeProviders(_ref) {
   var _ref$providers = _ref.providers,
       providers = _ref$providers === void 0 ? [] : _ref$providers,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["providers", "children"]);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   return providers.reduceRight(function (acc, Provider) {
     if (typeof Provider === 'function') {
@@ -3959,7 +4858,7 @@ function ComposeProviders(_ref) {
     }
 
     var ProviderComponent = Provider.provider,
-        providerProps = _objectWithoutProperties(Provider, ["provider"]);
+        providerProps = _objectWithoutProperties(Provider, _excluded2$2);
 
     return /*#__PURE__*/React__default.createElement(ProviderComponent // eslint-disable-next-line react/jsx-props-no-spreading
     , _extends({}, props, providerProps), acc);
@@ -4834,12 +5733,18 @@ exports.useApi = useApi;
 exports.useAuthContext = useAuthContext;
 exports.useAutocomplete = useAutocomplete;
 exports.useCollectionAutoPlay = useCollectionAutoPlay;
+exports.useCompoundMetadata = useCompoundMetadata;
+exports.useCsvDownload = useCsvDownload;
+exports.useDocSearchAutocomplete = useDocSearchAutocomplete;
 exports.useEntityAccess = useEntityAccess;
 exports.useGetCollection = useGetCollection;
 exports.useGetCollectionItem = useGetCollection$1;
 exports.useGetEntity = useGetEntity;
+exports.useGetFieldMetadataDataset = useGetFieldMetadataDataset;
 exports.useGetItem = useGetItem;
+exports.useGetSavedSearchFolders = useGetSavedSearchFolders;
 exports.useGroup = useGroup;
+exports.useHoverScrub = useHoverScrub;
 exports.useInterval = useInterval;
 exports.useJobSearch = useJobSearch;
 exports.useListGroup = useListGroup;
@@ -4847,6 +5752,7 @@ exports.useListUser = useListUser;
 exports.useLocalStorage = useLocalStorage;
 exports.useMouseDownPosition = useMouseDownPosition;
 exports.useQueryInitialState = useQueryInitialState;
+exports.useRepresentativeItems = useRepresentativeItems;
 exports.useRoles = useRoles;
 exports.useSavedSearch = useSavedSearch;
 exports.useSearch = useSearch;