Preview assets

package.json

@@ -119,6 +119,7 @@
         "react-scripts": "^4.0.3",
         "react-select": "^3.1.0",
         "react-sortable-hoc": "^0.6.8",
+        "react-table": "^7.7.0",
         "react-test-renderer": "^16.13.1",
         "react-transform-hmr": "^1.0.4",
         "react-transition-group": "^4.4.1",

src/behaviours/window.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+import windowRootConsumer from '@codaco/ui/lib/components/windowRootConsumer';
+
+const getDisplayName = (WrappedComponent) => WrappedComponent.displayName || WrappedComponent.name || 'Component';
+
+/*
+ * HOC which will cause a component to be rendered outside of the main ReactDOM hierarchy,
+ * useful for modals and other windowed components.
+ */
+const window = (forceRoot) => (WrappedComponent) => {
+  const Window = (props) => {
+    const { windowRoot } = props;
+    const portal = forceRoot || windowRoot;
+    // const portal = windowRoot;
+
+    return ReactDOM.createPortal(
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <WrappedComponent {...props} />,
+      portal,
+    );
+  };
+
+  Window.displayName = () => `Window(${getDisplayName(WrappedComponent)})`;
+
+  Window.propTypes = {
+    windowRoot: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  };
+
+  Window.defaultProps = {
+    windowRoot: null,
+  };
+
+  return windowRootConsumer(Window);
+};
+
+export default window;

src/components/AssetBrowser/Asset.js

@@ -0,0 +1,119 @@
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import PreviewIcon from '@material-ui/icons/Visibility';
+import DeleteIcon from '@material-ui/icons/Delete';
+import DownloadIcon from '@material-ui/icons/GetApp';
+import * as Thumbnails from '@components/Thumbnail';
+
+const FallBackAssetComponent = () => (
+  <div>No preview component available for this asset type.</div>
+);
+
+const ASSET_COMPONENTS = {
+  image: Thumbnails.Image,
+  video: Thumbnails.Video,
+  audio: Thumbnails.Audio,
+  network: Thumbnails.Network,
+};
+
+const Asset = ({
+  id,
+  isUsed,
+  onClick,
+  onDelete,
+  onDownload,
+  onPreview,
+  type,
+}) => {
+  const handleClick = useCallback((e) => {
+    e.stopPropagation();
+    onClick(id);
+  }, [onClick, id]);
+
+  const handleDelete = useCallback((e) => {
+    e.stopPropagation();
+    onDelete(id, isUsed);
+  }, [onDelete, isUsed, id]);
+
+  const handlePreview = useCallback((e) => {
+    e.stopPropagation();
+    onPreview(id);
+  }, [onPreview, id]);
+
+  const handleDownload = useCallback((e) => {
+    e.stopPropagation();
+    onDownload(id);
+  }, [onDownload, id]);
+
+  const PreviewComponent = useMemo(
+    () => ASSET_COMPONENTS[type] || FallBackAssetComponent,
+    [type],
+  );
+
+  const assetClasses = cx(
+    'asset-browser-asset',
+    { 'asset-browser-asset--is-used': isUsed },
+  );
+
+  return (
+    <div
+      onClick={handleClick}
+      className={assetClasses}
+    >
+      <div className="asset-browser-asset__preview">
+        <PreviewComponent id={id} />
+      </div>
+
+      <div className="asset-browser-asset__controls">
+        { onPreview && (
+          <div
+            className="asset-browser-asset__control"
+            onClick={handlePreview}
+          >
+            <PreviewIcon />
+          </div>
+        )}
+
+        { onDownload && (
+          <div
+            className="asset-browser-asset__control"
+            onClick={handleDownload}
+          >
+            <DownloadIcon />
+          </div>
+        )}
+
+        { onDelete && (
+          <div
+            className="asset-browser-asset__control asset-browser-asset__control--delete"
+            onClick={handleDelete}
+            title={isUsed ? 'This asset is in use by the protocol and cannot be deleted' : ''}
+          >
+            <DeleteIcon />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Asset.propTypes = {
+  id: PropTypes.string.isRequired,
+  isUsed: PropTypes.bool,
+  onClick: PropTypes.func,
+  onDelete: PropTypes.func,
+  onDownload: PropTypes.func,
+  onPreview: PropTypes.func,
+  type: PropTypes.string.isRequired,
+};
+
+Asset.defaultProps = {
+  isUsed: false,
+  onClick: () => {},
+  onDelete: null,
+  onPreview: () => {},
+  onDownload: () => {},
+};
+
+export default Asset;

src/components/AssetBrowser/AssetBrowser.js

@@ -2,6 +2,8 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'recompose';
 import { Section } from '@components/EditorLayout';
+import useExternalDataPreview from '@components/AssetBrowser/useExternalDataPreview';
+import useExternalDataDownload from '@components/AssetBrowser/useExternalDataDownload';
 import Assets from './Assets';
 import NewAsset from './NewAsset';
 import withAssetActions from './withAssetActions';
@@ -19,6 +21,9 @@ const AssetBrowser = ({
     onSelect(assetIds[0]);
   }, [onSelect]);
 
+  const [preview, handleShowPreview] = useExternalDataPreview();
+  const handleDownload = useExternalDataDownload();
+
   return (
     <>
       <Section>
@@ -40,12 +45,15 @@ const AssetBrowser = ({
         </h3>
         <Assets
           onSelect={onSelect}
+          onPreview={handleShowPreview}
+          onDownload={handleDownload}
           onDelete={onDelete}
           disableDelete={disableDelete}
           selected={selected}
           type={type}
         />
       </Section>
+      { preview }
     </>
   );
 };

src/components/AssetBrowser/Assets.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'recompose';
 import { RadioGroup } from '@codaco/ui/lib/components/Fields';
 import withAssets from './withAssets';
-import Thumbnail from './Thumbnail';
+import Asset from './Asset';
 
 const ASSET_TYPES = [
   { label: 'All Types', value: null },
@@ -20,9 +20,11 @@ const Assets = ({
   onUpdateAssetFilter,
   onSelect,
   onDelete,
+  onDownload,
+  onPreview,
   disableDelete,
 }) => {
-  const handleDelete = !disableDelete && onDelete;
+  const handleDelete = disableDelete ? null : onDelete;
 
   const renderedAssets = assets.map(({
     id,
@@ -32,13 +34,15 @@ const Assets = ({
     isUsed,
   }) => (
     <div className="asset-browser-assets__asset" key={id}>
-      <Thumbnail
+      <Asset
         id={id}
         name={name}
         source={source}
         type={thumbnailType}
         isUsed={isUsed}
         onClick={onSelect}
+        onPreview={onPreview}
+        onDownload={onDownload}
         onDelete={handleDelete}
       />
     </div>
@@ -80,22 +84,26 @@ const asset = PropTypes.shape({
 });
 
 Assets.propTypes = {
-  type: PropTypes.string,
-  onSelect: PropTypes.func,
-  onDelete: PropTypes.func,
   assets: PropTypes.arrayOf(asset),
   assetType: PropTypes.string,
-  onUpdateAssetFilter: PropTypes.func.isRequired,
   disableDelete: PropTypes.bool,
+  onDelete: PropTypes.func,
+  onDownload: PropTypes.func,
+  onPreview: PropTypes.func,
+  onSelect: PropTypes.func,
+  onUpdateAssetFilter: PropTypes.func.isRequired,
+  type: PropTypes.string,
 };
 
 Assets.defaultProps = {
-  type: null,
-  onSelect: () => {},
-  onDelete: null,
   assets: [],
   assetType: null,
   disableDelete: false,
+  onDelete: null,
+  onDownload: () => {},
+  onPreview: () => {},
+  onSelect: () => {},
+  type: null,
 };
 
 export default compose(