@panneau/medias 3.0.171 → 3.0.172

package/assets/css/styles.css

@@ -1 +1 @@
-.panneau-medias-mediaFrame{margin-bottom:10px;position:relative}.panneau-medias-playButton{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
+.panneau-medias-mediaFrame{aspect-ratio:1/1;margin-bottom:10px;position:relative}.panneau-medias-playButton{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

package/es/index.js

@@ -9,10 +9,12 @@ import { useForm, useQuery, useItemSelection } from '@panneau/core/hooks';
 import Button from '@panneau/element-button';
 import Form from '@panneau/element-form';
 import FormStatus from '@panneau/element-form-status';
+import ImageDisplay from '@panneau/display-image';
 import MediaPlayer from '@panneau/element-media-player';
-import MediaPreview from '@panneau/element-media-preview';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import uniqBy from 'lodash/uniqBy';
 import { PropTypes as PropTypes$1 } from '@panneau/core';
 import Buttons from '@panneau/element-buttons';
 import Grid from '@panneau/element-grid';
@@ -22,7 +24,6 @@ import Pagination from '@panneau/element-pagination';
 import Table from '@panneau/element-table';
 import Filters from '@panneau/filter-filters';
 import { useItems, useData, useApi } from '@panneau/data';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 
 /* eslint-disable react/jsx-props-no-spreading */
 var MediasApiContext = /*#__PURE__*/React.createContext(null);
@@ -214,22 +215,18 @@ function MediaFrame(_ref) {
     setShowPlayer(!showPlayer);
   }, [showPlayer, setShowPlayer]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([className, 'position-relative', _defineProperty({}, className, className != null)])
+    className: classNames([styles.mediaFrame, 'position-relative', 'd-flex', 'flex-grow-1', 'w-100', 'mw-100', _defineProperty({}, className, className != null)])
   }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
     value: value,
     width: "100%"
-  }) : /*#__PURE__*/React.createElement(MediaPreview, {
+  }) : /*#__PURE__*/React.createElement(ImageDisplay, {
+    className: "w-100",
     value: value,
-    width: "100%"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.playButton
-  }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
-    className: "rounded-circle",
-    theme: "secondary",
-    onClick: onClick,
-    icon: "play-fill",
-    size: "lg"
-  }) : null)));
+    maxWidth: "100%",
+    maxHeight: "100%",
+    withoutZoom: true,
+    onClick: type === 'video' || type === 'audio' ? onClick : null
+  }));
 }
 MediaFrame.propTypes = propTypes$8;
 MediaFrame.defaultProps = defaultProps$8;
@@ -775,10 +772,8 @@ var _excluded$5 = ["page", "count"],
   _excluded2 = ["types"];
 var propTypes$5 = {
   items: PropTypes$1.medias,
+  extraItems: PropTypes$1.medias,
   types: PropTypes.arrayOf(PropTypes.string),
-  // uploadButton: PropTypes.shape({
-  //     value: PropTypes.oneOfType([PanneauPropTypes.medias, PanneauPropTypes.media]),
-  // }),
   buttons: PropTypes$1.buttons,
   filters: PropTypes$1.filters,
   columns: PropTypes$1.tableColumns,
@@ -789,16 +784,16 @@ var propTypes$5 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
-  onSelectItem: PropTypes.func,
-  onSelectItems: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  buttonsClassName: PropTypes.string
 };
 var defaultProps$5 = {
   items: null,
+  extraItems: null,
   types: null,
   buttons: null,
   filters: defaultFilters,
@@ -820,16 +815,16 @@ var defaultProps$5 = {
   }],
   theme: null,
   tableProps: null,
-  onSelectItem: null,
-  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
-  className: null
+  className: null,
+  buttonsClassName: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
     buttons = _ref.buttons,
@@ -841,13 +836,12 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
-    onSelectItem = _ref.onSelectItem,
-    onSelectItems = _ref.onSelectItems,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
-    className = _ref.className;
+    className = _ref.className,
+    buttonsClassName = _ref.buttonsClassName;
   var _useState = useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -925,13 +919,6 @@ function MediasBrowser(_ref) {
   var onCloseMedia = useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-
-  // TODO: context for this?
-  useCallback(function () {
-    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    onSelectItems(media);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset, onSelectItems]);
   var onSaveMedia = useCallback(function () {
     setCurrentMedia(null);
     onQueryReset();
@@ -963,13 +950,20 @@ function MediasBrowser(_ref) {
     }
     return filters;
   }, [filters, types]);
+  var finalItems = useMemo(function () {
+    if (page === 1 && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+        return it === null || it === void 0 ? void 0 : it.id;
+      });
+    }
+    return items;
+  }, [items, page, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
-    outline: true,
     onClick: onCloseMedia,
     icon: "arrow-left"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -985,7 +979,6 @@ function MediasBrowser(_ref) {
     onSave: onSaveMedia,
     onClose: onCloseMedia
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    className: "mt-0 pt-0",
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
@@ -994,12 +987,12 @@ function MediasBrowser(_ref) {
     theme: theme
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1026,29 +1019,28 @@ function MediasBrowser(_ref) {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
       vertical: true,
-      selectable: onSelectItem !== null,
       onClickDescription: function onClickDescription(it) {
         onOpenMedia(it);
       }
-    }
-  }, tableProps, {
-    items: items || [],
-    loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+    },
+    onSelectItem: function onSelectItem(it) {
       return onOpenMedia(it);
     }
+  }, tableProps, {
+    items: finalItems || [],
+    loading: loading
   })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
     theme: theme,
     columns: columns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014")
+    }, "\u2014"),
+    onSelectItem: function onSelectItem(it) {
+      return onOpenMedia(it);
+    }
   }, tableProps, {
-    items: items,
+    items: finalItems,
     loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
-      return onOpenMedia(it);
-    },
     actionsProps: {
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
@@ -1104,60 +1096,47 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  // For selection only
   var _useState = useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
+    currentItems = _useState2[0],
     setItems = _useState2[1];
   var onItemsChange = useCallback(function (pageItems) {
     setItems(pageItems);
   }, [setItems]);
-  var disabled = initialItems === null || initialItems.length < 1;
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media;
   var _useItemSelection = useItemSelection({
-      items: items,
+      currentItems: currentItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
-    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
+  var disabled = currentItems === null || currentItems.length < 1;
   var onConfirmSelection = useCallback(function () {
     if (onConfirm !== null) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-
-  // const finalUploadButton = useMemo(
-  //     () => ({
-  //         ...(uploadButton || null),
-  //         ...(types !== null ? { types } : null),
-  //         allowMultipleUploads: multiple,
-  //         maxNumberOfFiles: multiple ? 10 : 0,
-  //         value: selectedItems,
-  //     }),
-  //     [uploadButton, selectedItems, multiple],
-  // );
-
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
     tableProps: _objectSpread({
-      selectable: multiple,
+      selectable: true,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps),
-    items: items,
-    onSelectItem: onSelectItem,
-    onSelectItems: onSelectItems,
+    }, tableProps)
+    // items={initialItems} // TODO: fix useItems if using this
+    ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,

package/lib/index.js

@@ -11,10 +11,12 @@ var hooks = require('@panneau/core/hooks');
 var Button = require('@panneau/element-button');
 var Form = require('@panneau/element-form');
 var FormStatus = require('@panneau/element-form-status');
+var ImageDisplay = require('@panneau/display-image');
 var MediaPlayer = require('@panneau/element-media-player');
-var MediaPreview = require('@panneau/element-media-preview');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var uniqBy = require('lodash/uniqBy');
 var core = require('@panneau/core');
 var Buttons = require('@panneau/element-buttons');
 var Grid = require('@panneau/element-grid');
@@ -24,7 +26,6 @@ var Pagination = require('@panneau/element-pagination');
 var Table = require('@panneau/element-table');
 var Filters = require('@panneau/filter-filters');
 var data = require('@panneau/data');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 
 /* eslint-disable react/jsx-props-no-spreading */
 var MediasApiContext = /*#__PURE__*/React.createContext(null);
@@ -216,22 +217,18 @@ function MediaFrame(_ref) {
     setShowPlayer(!showPlayer);
   }, [showPlayer, setShowPlayer]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([className, 'position-relative', _defineProperty({}, className, className != null)])
+    className: classNames([styles.mediaFrame, 'position-relative', 'd-flex', 'flex-grow-1', 'w-100', 'mw-100', _defineProperty({}, className, className != null)])
   }, showPlayer ? /*#__PURE__*/React.createElement(MediaPlayer, {
     value: value,
     width: "100%"
-  }) : /*#__PURE__*/React.createElement(MediaPreview, {
+  }) : /*#__PURE__*/React.createElement(ImageDisplay, {
+    className: "w-100",
     value: value,
-    width: "100%"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.playButton
-  }, !showPlayer && (type === 'video' || type === 'embed' || type === 'audio') ? /*#__PURE__*/React.createElement(Button, {
-    className: "rounded-circle",
-    theme: "secondary",
-    onClick: onClick,
-    icon: "play-fill",
-    size: "lg"
-  }) : null)));
+    maxWidth: "100%",
+    maxHeight: "100%",
+    withoutZoom: true,
+    onClick: type === 'video' || type === 'audio' ? onClick : null
+  }));
 }
 MediaFrame.propTypes = propTypes$8;
 MediaFrame.defaultProps = defaultProps$8;
@@ -777,10 +774,8 @@ var _excluded$5 = ["page", "count"],
   _excluded2 = ["types"];
 var propTypes$5 = {
   items: core.PropTypes.medias,
+  extraItems: core.PropTypes.medias,
   types: PropTypes.arrayOf(PropTypes.string),
-  // uploadButton: PropTypes.shape({
-  //     value: PropTypes.oneOfType([PanneauPropTypes.medias, PanneauPropTypes.media]),
-  // }),
   buttons: core.PropTypes.buttons,
   filters: core.PropTypes.filters,
   columns: core.PropTypes.tableColumns,
@@ -791,16 +786,16 @@ var propTypes$5 = {
   layouts: PropTypes.arrayOf(PropTypes.shape({})),
   theme: PropTypes.string,
   tableProps: PropTypes.bool,
-  onSelectItem: PropTypes.func,
-  onSelectItems: PropTypes.func,
   onItemsChange: PropTypes.func,
   onLayoutChange: PropTypes.func,
   selectedCount: PropTypes.number,
   onClearSelected: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  buttonsClassName: PropTypes.string
 };
 var defaultProps$5 = {
   items: null,
+  extraItems: null,
   types: null,
   buttons: null,
   filters: defaultFilters,
@@ -822,16 +817,16 @@ var defaultProps$5 = {
   }],
   theme: null,
   tableProps: null,
-  onSelectItem: null,
-  onSelectItems: null,
   onItemsChange: null,
   onLayoutChange: null,
   selectedCount: null,
   onClearSelected: null,
-  className: null
+  className: null,
+  buttonsClassName: null
 };
 function MediasBrowser(_ref) {
   var initialItems = _ref.items,
+    extraItems = _ref.extraItems,
     types = _ref.types,
     baseUrl = _ref.baseUrl,
     buttons = _ref.buttons,
@@ -843,13 +838,12 @@ function MediasBrowser(_ref) {
     layouts = _ref.layouts,
     theme = _ref.theme,
     tableProps = _ref.tableProps,
-    onSelectItem = _ref.onSelectItem,
-    onSelectItems = _ref.onSelectItems,
     onItemsChange = _ref.onItemsChange,
     onLayoutChange = _ref.onLayoutChange,
     selectedCount = _ref.selectedCount,
     onClearSelected = _ref.onClearSelected,
-    className = _ref.className;
+    className = _ref.className,
+    buttonsClassName = _ref.buttonsClassName;
   var _useState = React.useState(initialItems || null),
     _useState2 = _slicedToArray(_useState, 1),
     baseItems = _useState2[0];
@@ -927,13 +921,6 @@ function MediasBrowser(_ref) {
   var onCloseMedia = React.useCallback(function () {
     setCurrentMedia(null);
   }, [setCurrentMedia]);
-
-  // TODO: context for this?
-  React.useCallback(function () {
-    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    onSelectItems(media);
-    onQueryReset();
-  }, [setCurrentMedia, onQueryReset, onSelectItems]);
   var onSaveMedia = React.useCallback(function () {
     setCurrentMedia(null);
     onQueryReset();
@@ -965,13 +952,20 @@ function MediasBrowser(_ref) {
     }
     return filters;
   }, [filters, types]);
+  var finalItems = React.useMemo(function () {
+    if (page === 1 && extraItems !== null) {
+      return uniqBy([].concat(_toConsumableArray(extraItems), _toConsumableArray(items || [])), function (it) {
+        return it === null || it === void 0 ? void 0 : it.id;
+      });
+    }
+    return items;
+  }, [items, page, extraItems]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, className])
   }, currentMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-4"
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "primary",
-    outline: true,
     onClick: onCloseMedia,
     icon: "arrow-left"
   }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
@@ -987,7 +981,6 @@ function MediasBrowser(_ref) {
     onSave: onSaveMedia,
     onClose: onCloseMedia
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, filters !== null ? /*#__PURE__*/React.createElement(Filters, {
-    className: "mt-0 pt-0",
     value: query,
     clearValue: types !== null ? queryWithoutTypes : null,
     filters: finalFilters,
@@ -996,12 +989,12 @@ function MediasBrowser(_ref) {
     theme: theme
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, filters === null && buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mt-2 mb-2"
   }, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     items: buttons,
-    className: "ms-xl-auto"
+    className: buttonsClassName
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'mt-1', 'mb-3', {
       'justify-content-between': hasLayouts,
@@ -1028,29 +1021,28 @@ function MediasBrowser(_ref) {
       className: 'd-flex w-100',
       cardClassName: 'flex-grow-1',
       vertical: true,
-      selectable: onSelectItem !== null,
       onClickDescription: function onClickDescription(it) {
         onOpenMedia(it);
       }
-    }
-  }, tableProps, {
-    items: items || [],
-    loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
+    },
+    onSelectItem: function onSelectItem(it) {
       return onOpenMedia(it);
     }
+  }, tableProps, {
+    items: finalItems || [],
+    loading: loading
   })) : null, layout === 'table' ? /*#__PURE__*/React.createElement(Table, Object.assign({
     theme: theme,
     columns: columns,
     displayPlaceholder: /*#__PURE__*/React.createElement("span", {
       className: "text-secondary text-opacity-75"
-    }, "\u2014")
+    }, "\u2014"),
+    onSelectItem: function onSelectItem(it) {
+      return onOpenMedia(it);
+    }
   }, tableProps, {
-    items: items,
+    items: finalItems,
     loading: loading,
-    onSelectItem: onSelectItem !== null ? onSelectItem : function (it) {
-      return onOpenMedia(it);
-    },
     actionsProps: {
       getEditPropsFromItem: function getEditPropsFromItem(it) {
         return {
@@ -1106,60 +1098,47 @@ function MediasPicker(_ref) {
     tableProps = _ref.tableProps,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$4);
+  // For selection only
   var _useState = React.useState(initialItems),
     _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
+    currentItems = _useState2[0],
     setItems = _useState2[1];
   var onItemsChange = React.useCallback(function (pageItems) {
     setItems(pageItems);
   }, [setItems]);
-  var disabled = initialItems === null || initialItems.length < 1;
   var _useMediasForm = useMediasForm(),
     currentMedia = _useMediasForm.media;
   var _useItemSelection = hooks.useItemSelection({
-      items: items,
+      currentItems: currentItems,
       selectedItems: initialSelectedItems,
       onSelectionChange: onChange,
       multipleSelection: multiple
     }),
     onSelectItem = _useItemSelection.onSelectItem,
-    onSelectItems = _useItemSelection.onSelectItems,
     onSelectPage = _useItemSelection.onSelectPage,
     onClearSelected = _useItemSelection.onClearSelected,
     pageSelected = _useItemSelection.pageSelected,
     selectedCount = _useItemSelection.selectedCount,
     selectedItems = _useItemSelection.selectedItems;
+  var disabled = currentItems === null || currentItems.length < 1;
   var onConfirmSelection = React.useCallback(function () {
     if (onConfirm !== null) {
       onConfirm(selectedItems);
     }
   }, [selectedItems, onConfirm]);
-
-  // const finalUploadButton = useMemo(
-  //     () => ({
-  //         ...(uploadButton || null),
-  //         ...(types !== null ? { types } : null),
-  //         allowMultipleUploads: multiple,
-  //         maxNumberOfFiles: multiple ? 10 : 0,
-  //         value: selectedItems,
-  //     }),
-  //     [uploadButton, selectedItems, multiple],
-  // );
-
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, /*#__PURE__*/React.createElement(MediasBrowser, Object.assign({
     tableProps: _objectSpread({
-      selectable: multiple,
+      selectable: true,
       multipleSelection: multiple,
       onSelectItem: onSelectItem,
       onSelectPage: onSelectPage,
       selectedItems: selectedItems,
       pageSelected: pageSelected
-    }, tableProps),
-    items: items,
-    onSelectItem: onSelectItem,
-    onSelectItems: onSelectItems,
+    }, tableProps)
+    // items={initialItems} // TODO: fix useItems if using this
+    ,
     onItemsChange: onItemsChange,
     selectedCount: selectedCount,
     onClearSelected: onClearSelected,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/medias",
-    "version": "3.0.171",
+    "version": "3.0.172",
     "description": "",
     "keywords": [
         "javascript"
@@ -48,15 +48,15 @@
         "@babel/runtime": "^7.12.5",
         "@panneau/core": "^3.0.169",
         "@panneau/data": "^3.0.169",
+        "@panneau/display-image": "^3.0.172",
         "@panneau/element-button": "^3.0.169",
         "@panneau/element-buttons": "^3.0.169",
         "@panneau/element-form": "^3.0.169",
         "@panneau/element-form-status": "^3.0.169",
-        "@panneau/element-grid": "^3.0.169",
+        "@panneau/element-grid": "^3.0.172",
         "@panneau/element-icon": "^3.0.169",
-        "@panneau/element-media-card": "^3.0.171",
-        "@panneau/element-media-player": "^3.0.169",
-        "@panneau/element-media-preview": "^3.0.169",
+        "@panneau/element-media-card": "^3.0.172",
+        "@panneau/element-media-player": "^3.0.172",
         "@panneau/element-pagination": "^3.0.169",
         "@panneau/element-table": "^3.0.170",
         "@panneau/filter-filters": "^3.0.171",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "38e041e7659ef78ddbec9da1232c1456366c2040"
+    "gitHead": "74ada3ded1a27ab2d7008d67790d8431f57c5b0a"
 }