@imposium-hub/components 1.63.0 → 2.0.0

package/src/components/assets/AssetsTablePreviewCell.tsx

@@ -55,7 +55,7 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
                 className='asset-type-cell'
                 onClick={this.evtHandlers.onClick}>
                 <AssetsTypeIcon type={cell.row.values.type} />
-                {cell.row.values.type === ASSET_TYPES.IMAGE && (
+                {cell.row.values.type === ASSET_TYPES.IMAGE && showMedia && (
                     <ImagePreview
                         style={{
                             ...getMediaPreviewStyle(
@@ -64,12 +64,11 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
                                 this.iconRef
                             )
                         }}
-                        showMedia={showMedia}
                         url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}
-                {cell.row.values.type === ASSET_TYPES.VIDEO && (
+                {cell.row.values.type === ASSET_TYPES.VIDEO && showMedia && (
                     <VideoPreview
                         playbackSettings={playbackSettings}
                         style={getMediaPreviewStyle(
@@ -77,16 +76,14 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
                             cell.row.original.height,
                             this.iconRef
                         )}
-                        showMedia={showMedia}
                         url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}
-                {cell.row.values.type === ASSET_TYPES.AUDIO && (
+                {cell.row.values.type === ASSET_TYPES.AUDIO && showMedia && (
                     <AudioPreview
                         playbackSettings={playbackSettings}
                         style={getMediaPreviewStyle(5, 1, this.iconRef)}
-                        showMedia={showMedia}
                         url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />

package/src/components/players/AudioPreview.tsx

@@ -4,38 +4,76 @@ import Button from '../button/Button';
 import { assets as copy } from '../../constants/copy';
 import { ICON_TIMES } from '../../constants/icons';
 
-interface IVideoPreviewProps {
-    showMedia: boolean;
+interface IAudioPreviewProps {
     url: string;
     playbackSettings?: any;
     style?: React.CSSProperties | any;
     onRequestClose?(): void;
 }
 
-class AudioPreview extends React.PureComponent<IVideoPreviewProps> {
+interface IAudioPreviewState {
+    error: boolean;
+    loaded: boolean;
+}
+
+class AudioPreview extends React.PureComponent<IAudioPreviewProps, IAudioPreviewState> {
     private audioNode: any = null;
 
+    private audioRef: any = null;
+
     private evtHandlers: any;
 
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+
+    private clickOutsideTimeout: any;
+
     constructor(props) {
         super(props);
         this.audioNode = React.createRef();
+        this.audioRef = React.createRef();
         this.evtHandlers = {
             onClose: (e) => this.onClose(e)
         };
+        this.state = {
+            error: false,
+            loaded: false
+        };
+    }
+
+    public componentDidMount() {
+        clearTimeout(this.clickOutsideTimeout);
+        this.clickOutsideTimeout = setTimeout(() => {
+            window.addEventListener('click', this.clickHandler);
+        }, 25);
     }
 
+    public componentWillUnmount(): void {
+        clearTimeout(this.clickOutsideTimeout);
+        window.removeEventListener('click', this.clickHandler);
+    }
+
+    private detectOutsideClick = (e: any): void => {
+        const { target } = e;
+
+        const clickInside =
+            this.audioRef.current && this.audioRef.current.contains(target) ? true : false;
+
+        if (!clickInside) {
+            this.onClose(e);
+        }
+    };
+
     private onClose(e) {
         const { onRequestClose } = this.props;
-        e.stopPropagation();
         onRequestClose();
     }
 
     public render() {
-        const { showMedia, url, playbackSettings, style } = this.props;
-        if (showMedia) {
-            return (
-                <Portal id='portal-root'>
+        const { url, playbackSettings, style } = this.props;
+        const { error } = this.state;
+        return (
+            <Portal id='portal-root'>
+                <div ref={this.audioRef}>
                     <div
                         style={{ ...style }}
                         className={'close-icon-preview'}>
@@ -50,6 +88,8 @@ class AudioPreview extends React.PureComponent<IVideoPreviewProps> {
                     </div>
                     <audio
                         style={style}
+                        onError={() => this.setState({ loaded: true, error: true })}
+                        onCanPlayThrough={() => this.setState({ loaded: true })}
                         ref={this.audioNode}
                         autoPlay={playbackSettings.autoPlay}
                         loop={playbackSettings.loop}
@@ -57,11 +97,16 @@ class AudioPreview extends React.PureComponent<IVideoPreviewProps> {
                         src={url}
                         className='asset-preview-background media-preview'
                     />
-                </Portal>
-            );
-        } else {
-            return null;
-        }
+                    {error ? (
+                        <div
+                            className='error-preview audio'
+                            style={style}>
+                            Audio not found
+                        </div>
+                    ) : null}
+                </div>
+            </Portal>
+        );
     }
 }
 

package/src/components/players/ImagePreview.tsx

@@ -4,7 +4,6 @@ import { ICON_TIMES } from '../../constants/icons';
 import Button from '../button/Button';
 import { assets as copy } from '../../constants/copy';
 interface IImagePreviewProps {
-    showMedia: boolean;
     url: string;
     playbackSettings?: any;
     style?: React.CSSProperties | any;
@@ -12,37 +11,66 @@ interface IImagePreviewProps {
 }
 
 interface IImagePreviewState {
+    error: boolean;
     loaded: boolean;
 }
 
 class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreviewState> {
     private imageNode: any = null;
 
+    private imageRef: any = null;
+
     private evtHandlers: any;
 
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+
+    private clickOutsideTimeout: any;
+
     constructor(props) {
         super(props);
         this.imageNode = React.createRef();
+        this.imageRef = React.createRef();
         this.evtHandlers = {
             onClose: (e) => this.onClose(e)
         };
         this.state = {
+            error: false,
             loaded: false
         };
     }
 
+    public componentDidMount() {
+        clearTimeout(this.clickOutsideTimeout);
+        this.clickOutsideTimeout = setTimeout(() => {
+            window.addEventListener('click', this.clickHandler);
+        }, 25);
+    }
+
+    public componentWillUnmount(): void {
+        clearTimeout(this.clickOutsideTimeout);
+        window.removeEventListener('click', this.clickHandler);
+    }
+
+    private detectOutsideClick = (e: any): void => {
+        const { target } = e;
+        const clickInside =
+            this.imageRef.current && this.imageRef.current.contains(target) ? true : false;
+        if (!clickInside) {
+            this.onClose(e);
+        }
+    };
+
     private onClose(e) {
         const { onRequestClose } = this.props;
-        e.stopPropagation();
         onRequestClose();
     }
 
     public render() {
-        const { showMedia, url, style } = this.props;
-        const { loaded } = this.state;
-        if (showMedia) {
-            return (
-                <Portal id='portal-root'>
+        const { url, style } = this.props;
+        const { error } = this.state;
+        return (
+            <Portal id='portal-root'>
+                <div ref={this.imageRef}>
                     <div
                         style={{ ...style }}
                         className={'close-icon-preview'}>
@@ -56,19 +84,23 @@ class ImagePreview extends React.PureComponent<IImagePreviewProps, IImagePreview
                         </Button>
                     </div>
                     <img
+                        onError={() => this.setState({ error: true, loaded: true })}
                         onLoad={() => this.setState({ loaded: true })}
                         src={url}
                         ref={this.imageNode}
-                        className={`asset-preview-background media-preview ${
-                            !loaded ? 'hidden' : ''
-                        }`}
+                        className={`asset-preview-background media-preview`}
                         style={style}
                     />
-                </Portal>
-            );
-        } else {
-            return null;
-        }
+                    {error ? (
+                        <div
+                            className='error-preview'
+                            style={style}>
+                            Image not found
+                        </div>
+                    ) : null}
+                </div>
+            </Portal>
+        );
     }
 }
 

package/src/components/players/VideoPreview.tsx

@@ -5,37 +5,76 @@ import { assets as copy } from '../../constants/copy';
 import { ICON_TIMES } from '../../constants/icons';
 
 interface IVideoPreviewProps {
-    showMedia: boolean;
     url: string;
     playbackSettings?: any;
     style?: React.CSSProperties | any;
     onRequestClose?(): void;
 }
 
-class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
+interface IVideoPreviewState {
+    error: boolean;
+    loaded: boolean;
+}
+
+class VideoPreview extends React.PureComponent<IVideoPreviewProps, IVideoPreviewState> {
     private videoNode: any = null;
 
+    private videoRef: any = null;
+
     private evtHandlers: any;
 
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+
+    private clickOutsideTimeout: any;
+
     constructor(props) {
         super(props);
         this.videoNode = React.createRef();
+        this.videoRef = React.createRef();
         this.evtHandlers = {
             onClose: (e) => this.onClose(e)
         };
+
+        this.state = {
+            error: false,
+            loaded: false
+        };
+    }
+
+    public componentDidMount() {
+        clearTimeout(this.clickOutsideTimeout);
+        this.clickOutsideTimeout = setTimeout(() => {
+            window.addEventListener('click', this.clickHandler);
+        }, 25);
+    }
+
+    public componentWillUnmount(): void {
+        clearTimeout(this.clickOutsideTimeout);
+        window.removeEventListener('click', this.clickHandler);
     }
 
+    private detectOutsideClick = (e: any): void => {
+        const { target } = e;
+
+        const clickInside =
+            this.videoRef.current && this.videoRef.current.contains(target) ? true : false;
+
+        if (!clickInside) {
+            this.onClose(e);
+        }
+    };
+
     private onClose(e) {
         const { onRequestClose } = this.props;
-        e.stopPropagation();
         onRequestClose();
     }
 
     public render() {
-        const { showMedia, url, playbackSettings, style } = this.props;
-        if (showMedia) {
-            return (
-                <Portal id='portal-root'>
+        const { url, playbackSettings, style } = this.props;
+        const { error } = this.state;
+        return (
+            <Portal id='portal-root'>
+                <div ref={this.videoRef}>
                     <div
                         style={{ ...style }}
                         className={'close-icon-preview'}>
@@ -49,6 +88,8 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
                         </Button>
                     </div>
                     <video
+                        onError={() => this.setState({ error: true, loaded: true })}
+                        onCanPlayThrough={() => this.setState({ loaded: true })}
                         style={style}
                         muted
                         ref={this.videoNode}
@@ -60,11 +101,16 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
                         src={url}
                         className='asset-preview-background media-preview'
                     />
-                </Portal>
-            );
-        } else {
-            return null;
-        }
+                    {error ? (
+                        <div
+                            className='error-preview'
+                            style={style}>
+                            Video not found
+                        </div>
+                    ) : null}
+                </div>
+            </Portal>
+        );
     }
 }
 

package/src/utils/assets.ts

@@ -4,9 +4,9 @@ import { CSSProperties } from 'react';
 export const getMediaPreviewStyle = (
     mediaWidth: number,
     mediaHeight: number,
-    ref: any
+    element: any
 ): CSSProperties => {
-    if (!ref.current) {
+    if (!element) {
         return;
     }
     if (!mediaWidth) {
@@ -15,8 +15,12 @@ export const getMediaPreviewStyle = (
     if (!mediaHeight) {
         mediaHeight = PREVIEW_MAX_HEIGHT;
     }
-    const icon = ref.current;
-    const iconRect = icon.getBoundingClientRect();
+
+    const elementDiv = element.current !== undefined ? element.current : element;
+    if (!elementDiv) {
+        return;
+    }
+    const iconRect = elementDiv.getBoundingClientRect();
     const aspect: number = mediaWidth / mediaHeight;
     let width: number = PREVIEW_MAX_WIDTH;
     let height: number = width / aspect;