@imposium-hub/components 1.38.17 → 1.39.0

package/Entry.ts

@@ -33,6 +33,7 @@ import NoAccess from './components/no-access/NoAccess';
 import ServiceIcon from './components/service-icon/ServiceIcon';
 import DeterminateLoader from './components/determinate-loader/DeterminateLoader';
 import AssetsTableDateCell from './components/assets/AssetsTableDateCell';
+import AssetsTablePreviewCell from './components/assets/AssetsTablePreviewCell';
 import AssetsTableDurationCell from './components/assets/AssetsTableDurationCell';
 import AssetField from './components/assets/AssetField';
 import AssetsTableDropzone from './components/assets/AssetsTableDropzone';
@@ -163,6 +164,7 @@ export {
     AssetsTypeIcon,
     AssetsTableDateCell,
     AssetsTableDropzone,
+    AssetsTablePreviewCell,
     AssetsTableSelectFilter,
     AssetsTableSelectCell,
     AssetsTableTypeFilter,

package/components/assets/AssetsTablePreviewCell.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {ASSET_TYPES, VideoPreview, AssetsTypeIcon, ImagePreview} from '../../Entry';
+export const PREVIEW_MAX_WIDTH : number = 400;
+export const PREVIEW_MAX_HEIGHT : number = 400;
+export const HEADER_HEIGHT : number = 30;
+
+interface IAssetsTablePreviewCell {
+    cell : any;
+    showMedia : boolean;
+    onClick() : void;
+    onRequestClose() : void;
+}
+
+class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell> {
+    private iconRef : any = React.createRef<HTMLDivElement>();
+    private evtHandlers : any;
+    constructor(props) {
+        super(props);
+        this.evtHandlers = {
+            onClose: () => this.handleClose(),
+            onClick: () => this.handlePreviewClick()
+        };
+    }
+
+    private handleClose() {
+        const {onRequestClose} = this.props;
+        onRequestClose();
+    }
+
+    private handlePreviewClick() {
+        const {onClick, showMedia} = this.props;
+        if (!showMedia) {
+            onClick();
+            return;
+        }
+        return;
+    }
+
+    public render() {
+
+        const getMediaPreviewStyle = (mediaWidth : number, mediaHeight : number) => {
+
+            if (!this.iconRef.current) {
+                return;
+            }
+            if (!mediaWidth) {
+                mediaWidth = PREVIEW_MAX_WIDTH;
+            }
+            if (!mediaHeight) {
+                mediaHeight = PREVIEW_MAX_HEIGHT;
+            }
+            const icon = this.iconRef.current;
+            const iconRect = icon.getBoundingClientRect();
+            const aspect = mediaWidth / mediaHeight;
+            let width = PREVIEW_MAX_WIDTH;
+            let height = width / aspect;
+
+            if (height > PREVIEW_MAX_HEIGHT) {
+                height = PREVIEW_MAX_HEIGHT;
+                width = height * aspect;
+            }
+
+            // try top left
+            let left = iconRect.x + iconRect.width - width;
+            let top = iconRect.y + iconRect.height - height - 20;
+            // if the preview is off on the left, switch to the right of the icon
+            if (left < 0) {
+                left = iconRect.x ;
+            }
+            // if the preview is off on the top, switch to bottom of the icon
+            if (top < HEADER_HEIGHT) {
+                top = iconRect.y + 20;
+            }
+
+            return {top, left, width, height, position: 'absolute', zIndex: 9000} as React.CSSProperties;
+        };
+
+        const {cell, showMedia} = this.props;
+        const playbackSettings = {
+            autoPlay: true,
+            loop: false
+        };
+
+        return(
+            <div ref = {this.iconRef} className = 'asset-type-cell' onClick={this.evtHandlers.onClick} >
+                <AssetsTypeIcon type = {cell.row.values.type} />
+                {cell.row.values.type === ASSET_TYPES.IMAGE &&
+                (
+                    <ImagePreview
+                        style={{...getMediaPreviewStyle(cell.row.original.width, cell.row.original.height)}}
+                        showMedia={showMedia}
+                        url={cell.row.original.url}
+                        onRequestClose={this.evtHandlers.onClose}
+                    />
+                )
+                }
+                {cell.row.values.type === ASSET_TYPES.VIDEO &&
+                (<VideoPreview
+                        playbackSettings={playbackSettings}
+                        style={getMediaPreviewStyle(cell.row.original.width, cell.row.original.height)}
+                        showMedia={showMedia}
+                        url={cell.row.original.url}
+                        onRequestClose={this.evtHandlers.onClose}
+                    />
+                )
+                }
+            </div>
+        );
+    }
+}
+
+const AssetsTablePreviewCellMemoized = React.memo(AssetsTablePreviewCell);
+export default AssetsTablePreviewCellMemoized;

package/components/players/ImagePreview.tsx

@@ -1,29 +1,55 @@
 import * as React from 'react';
 import Portal from '../portal/Portal';
-
+import {ICON_TIMES} from '../../constants/icons';
+import Button from '../button/Button';
+import {assets as copy} from '../../constants/copy';
 interface IVideoPreviewProps {
     showMedia : boolean;
     url : string;
     playbackSettings? : any;
     style? : React.CSSProperties | any;
+    onRequestClose?(e) : void;
 }
 
 class ImagePreview extends React.PureComponent<IVideoPreviewProps> {
     private imageNode : any = null;
+    private evtHandlers : any;
     constructor(props) {
         super(props);
         this.imageNode = React.createRef();
+        this.evtHandlers = {
+            onClose: (e) => this.onClose(e)
+        };
+    }
+
+    private onClose(e) {
+
+        const {onRequestClose} = this.props;
+
+        onRequestClose(e);
     }
     public render() {
         const {showMedia, url, style} = this.props;
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
+                    <div style={{...style}} className={'close-icon-preview'}>
+                            <Button
+                                key = 'btn-filter'
+                                onClick = {this.evtHandlers.onClose}
+                                size={'large'}
+                                style = 'subtle'
+                                tooltip = {copy.field.tooltipFilter}
+                                >
+                                {ICON_TIMES}
+                            </Button>
+                    </div>
                     <img
                         src={url}
                         ref={this.imageNode}
-                        className='media-preview'
-                        style={style}/>
+                        className='asset-preview-background'
+                        style={style}
+                    />
                 </Portal>
             );
         } else {

package/components/players/VideoPreview.tsx

@@ -1,24 +1,50 @@
 import * as React from 'react';
 import Portal from '../portal/Portal';
+import Button from '../button/Button';
+import {assets as copy} from '../../constants/copy';
+import {ICON_TIMES} from '../../constants/icons';
 
 interface IVideoPreviewProps {
     showMedia : boolean;
     url : string;
     playbackSettings? : any;
     style? : React.CSSProperties | {};
+    onRequestClose?(e) : void;
 }
 
 class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
     private videoNode : any = null;
+    private evtHandlers : any;
     constructor(props) {
         super(props);
         this.videoNode = React.createRef();
+        this.evtHandlers = {
+            onClose: (e) => this.onClose(e)
+        };
+    }
+
+    private onClose(e) {
+
+        const {onRequestClose} = this.props;
+
+        onRequestClose(e);
     }
     public render() {
         const {showMedia, url, playbackSettings, style} = this.props;
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
+                    <div style={{...style}} className={'close-icon-preview'}>
+                        <Button
+                            key = 'btn-filter'
+                            onClick = {this.evtHandlers.onClose}
+                            size={'large'}
+                            style = 'subtle'
+                            tooltip = {copy.field.tooltipFilter}
+                        >
+                            {ICON_TIMES}
+                        </Button>
+                    </div>
                     <video
                         style = {style}
                         muted
@@ -28,7 +54,8 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
                         controls
                         preload = 'preload'
                         src={url}
-                        className='media-preview' />
+                        className='asset-preview-background'
+                    />
                 </Portal>
             );
         } else {