@imposium-hub/components 1.62.7 → 2.0.0

package/dist/esm/components/text-area-field/TextAreaField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TextAreaField from './TextAreaField';
 declare const _default: {
     title: string;

package/dist/esm/components/text-field/TextField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TextField from './TextField';
 declare const _default: {
     title: string;

package/dist/esm/index.d.ts

@@ -95,4 +95,5 @@ import PublishStatusIndicator from './components/publish-wizard/publish/PublishS
 import { getMediaPreviewStyle } from './utils/assets';
 import AdvancedNumberField from './components/advanced-number-field/AdvancedNumberField';
 import FontPicker from './components/font-picker/FontPicker';
-export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, ITab, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, IStaticComposition, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, IIdentity, SessionService, IHubSession, API, IImposiumAPI, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, getSMPTE, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, deleteAssetsTags, updateAssetStory, FontPicker, cancelAssetUpload };
+import AudioPreview from './components/players/AudioPreview';
+export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, ITab, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, AudioPreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, IStaticComposition, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, IIdentity, SessionService, IHubSession, API, IImposiumAPI, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, getSMPTE, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, deleteAssetsTags, updateAssetStory, FontPicker, cancelAssetUpload };

package/dist/esm/index.js

@@ -106,5 +106,6 @@ import PublishStatusIndicator from './components/publish-wizard/publish/PublishS
 import { getMediaPreviewStyle } from './utils/assets';
 import AdvancedNumberField from './components/advanced-number-field/AdvancedNumberField';
 import FontPicker from './components/font-picker/FontPicker';
-export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, SessionService, API, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, getSMPTE, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, deleteAssetsTags, updateAssetStory, FontPicker, cancelAssetUpload };
+import AudioPreview from './components/players/AudioPreview';
+export { AppWrapper, AuthGate, ImposiumHeader, ImposiumDropdown, Button, ButtonGroupField, ButtonMenu, ButtonMenuItem, Card, CheckboxField, ControlledList, DataTable, DataTablePaginator, FieldWrapper, HRule, ListField, Modal, AdvancedNumberField, NumberField, SelectField, ColorField, Tabs, Tag, TextField, TextAreaField, ToastService, SliderField, Section, DeterminateLoader, Spinner, NoAccess, ServiceIcon, LogViewer, StoryPreviewer, ShortcutMenu, Portal, AssetDetails, ImagePlayer, VideoPlayer, AudioPlayer, VideoPreview, ImagePreview, AudioPreview, ImageSequencePlayer, AssetsTypeIcon, AssetsTableDateCell, AssetsTableDropzone, AssetsTablePreviewCell, AssetsTableSelectFilter, AssetsTableSelectCell, AssetsTableTypeFilter, AssetsTableTypeCell, AssetsTableStatusCell, AssetsTableNameFilter, AssetsTableNameCell, AssetsTableDurationCell, AssetsTableTagsCell, AssetsTableTagsFilter, AssetsTableTagsPivot, AssetsTableComplexTagCell, AssetField, AssetsUploadMenu, FontAssetPreview, DroppableAssetRenderer, PreviewNotAvailable, auth, login, clearCachedAuth, access, cacheAccessData, clearCachedAccessList, storyAdded, storyNameMutated, orgNameMutated, storyDeleted, updateFilters, getAssets, deleteAssets, addAssetTag, deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration, toggleAutoTag, uploadAssets, selectAsset, deselectAsset, resetSelection, assetFilters, assetList, assetUploads, selectedAssets, getAssetTagList, addAssetTagToList, assetTags, assetActions, activeBatch, batchActions, AuthService, SessionService, API, LegacyAPI, StorageService, Timer, validateAccessLevel, getFirstStoryInOrg, string2HexCode, parameterizeServiceUrl, scrapeEmail, fitToContainer, formattedTime, filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, toFixed, getSMPTE, padStart, formatDateDefault, ASSET_TYPES, publish, publishVersion, clearStoryPublishStatus, getStoryPublishStatus, PublishStatusIndicator, AnchorField, SMPTEField, getMediaPreviewStyle, HEADER_HEIGHT, decoupleAssets, deleteAssetsTags, updateAssetStory, FontPicker, cancelAssetUpload };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/utils/assets.d.ts

@@ -1,2 +1,2 @@
 import { CSSProperties } from 'react';
-export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, ref: any) => CSSProperties;
+export declare const getMediaPreviewStyle: (mediaWidth: number, mediaHeight: number, element: any) => CSSProperties;

package/dist/esm/utils/assets.js

@@ -1,6 +1,6 @@
 import { HEADER_HEIGHT, PREVIEW_MAX_HEIGHT, PREVIEW_MAX_WIDTH } from '../constants/assets';
-export const getMediaPreviewStyle = (mediaWidth, mediaHeight, ref) => {
-    if (!ref.current) {
+export const getMediaPreviewStyle = (mediaWidth, mediaHeight, element) => {
+    if (!element) {
         return;
     }
     if (!mediaWidth) {
@@ -9,8 +9,11 @@ export const getMediaPreviewStyle = (mediaWidth, mediaHeight, ref) => {
     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 = mediaWidth / mediaHeight;
     let width = PREVIEW_MAX_WIDTH;
     let height = width / aspect;

package/dist/esm/utils/assets.js.map

@@ -1 +1 @@
-{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,UAAkB,EAClB,WAAmB,EACnB,GAAQ,EACK,EAAE;IACf,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;QACd,OAAO;KACV;IACD,IAAI,CAAC,UAAU,EAAE;QACb,UAAU,GAAG,iBAAiB,CAAC;KAClC;IACD,IAAI,CAAC,WAAW,EAAE;QACd,WAAW,GAAG,kBAAkB,CAAC;KACpC;IACD,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;IACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC9C,MAAM,MAAM,GAAW,UAAU,GAAG,WAAW,CAAC;IAChD,IAAI,KAAK,GAAW,iBAAiB,CAAC;IACtC,IAAI,MAAM,GAAW,KAAK,GAAG,MAAM,CAAC;IAEpC,IAAI,MAAM,GAAG,kBAAkB,EAAE;QAC7B,MAAM,GAAG,kBAAkB,CAAC;QAC5B,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KAC3B;IAED,eAAe;IACf,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC;IACrD,qEAAqE;IACrE,IAAI,IAAI,GAAG,CAAC,EAAE;QACV,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;KACrB;IACD,iEAAiE;IACjE,IAAI,GAAG,GAAG,aAAa,EAAE;QACrB,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;KACzB;IAED,OAAO;QACH,GAAG;QACH,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,IAAI;KACf,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../../src/utils/assets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAChC,UAAkB,EAClB,WAAmB,EACnB,OAAY,EACC,EAAE;IACf,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;KACV;IACD,IAAI,CAAC,UAAU,EAAE;QACb,UAAU,GAAG,iBAAiB,CAAC;KAClC;IACD,IAAI,CAAC,WAAW,EAAE;QACd,WAAW,GAAG,kBAAkB,CAAC;KACpC;IAED,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,IAAI,CAAC,UAAU,EAAE;QACb,OAAO;KACV;IACD,MAAM,QAAQ,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;IACpD,MAAM,MAAM,GAAW,UAAU,GAAG,WAAW,CAAC;IAChD,IAAI,KAAK,GAAW,iBAAiB,CAAC;IACtC,IAAI,MAAM,GAAW,KAAK,GAAG,MAAM,CAAC;IAEpC,IAAI,MAAM,GAAG,kBAAkB,EAAE;QAC7B,MAAM,GAAG,kBAAkB,CAAC;QAC5B,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KAC3B;IAED,eAAe;IACf,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,GAAG,EAAE,CAAC;IACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC;IACrD,qEAAqE;IACrE,IAAI,IAAI,GAAG,CAAC,EAAE;QACV,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;KACrB;IACD,iEAAiE;IACjE,IAAI,GAAG,GAAG,aAAa,EAAE;QACrB,GAAG,GAAG,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;KACzB;IAED,OAAO;QACH,GAAG;QACH,IAAI;QACJ,KAAK;QACL,MAAM;QACN,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,IAAI;KACf,CAAC;AACN,CAAC,CAAC"}

package/dist/styles.css

@@ -488,6 +488,14 @@ body a {
   height: 30px !important;
   align-items: center;
 }
+.error-preview {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+.error-preview.audio {
+  height: 30px !important;
+}
 .auth-gate {
   position: absolute;
   width: 100%;

package/dist/styles.less

@@ -513,6 +513,15 @@ body{
     align-items: center
 }
 
+.error-preview {
+    justify-content: center;
+    display: flex;
+    align-items: center;
+
+    &.audio {
+        height: 30px !important;
+    }
+}
 .auth-gate {
   .layer;
   display: flex;

package/less/components/assets.less

@@ -266,3 +266,13 @@
     height: 30px !important;
     align-items: center
 }
+
+.error-preview {
+    justify-content: center;
+    display: flex;
+    align-items: center;
+
+    &.audio {
+        height: 30px !important;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.62.7",
+    "version": "2.0.0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/assets/AssetsTablePreviewCell.tsx

@@ -4,7 +4,8 @@ import {
     VideoPreview,
     AssetsTypeIcon,
     ImagePreview,
-    getMediaPreviewStyle
+    getMediaPreviewStyle,
+    AudioPreview
 } from '../../index';
 
 interface IAssetsTablePreviewCell {
@@ -54,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(
@@ -63,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(
@@ -76,7 +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 && showMedia && (
+                    <AudioPreview
+                        playbackSettings={playbackSettings}
+                        style={getMediaPreviewStyle(5, 1, this.iconRef)}
                         url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />

package/src/components/players/AudioPreview.tsx

@@ -0,0 +1,113 @@
+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 IAudioPreviewProps {
+    url: string;
+    playbackSettings?: any;
+    style?: React.CSSProperties | any;
+    onRequestClose?(): void;
+}
+
+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;
+        onRequestClose();
+    }
+
+    public render() {
+        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'}>
+                        <Button
+                            key='btn-filter'
+                            onClick={this.evtHandlers.onClose}
+                            size={'large'}
+                            style='subtle'
+                            tooltip={copy.field.tooltipFilter}>
+                            {ICON_TIMES}
+                        </Button>
+                    </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}
+                        controls
+                        src={url}
+                        className='asset-preview-background media-preview'
+                    />
+                    {error ? (
+                        <div
+                            className='error-preview audio'
+                            style={style}>
+                            Audio not found
+                        </div>
+                    ) : null}
+                </div>
+            </Portal>
+        );
+    }
+}
+
+export default AudioPreview;

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/index.ts

@@ -145,6 +145,7 @@ import PublishStatusIndicator from './components/publish-wizard/publish/PublishS
 import { getMediaPreviewStyle } from './utils/assets';
 import AdvancedNumberField from './components/advanced-number-field/AdvancedNumberField';
 import FontPicker from './components/font-picker/FontPicker';
+import AudioPreview from './components/players/AudioPreview';
 
 export {
     AppWrapper,
@@ -190,6 +191,7 @@ export {
     AudioPlayer,
     VideoPreview,
     ImagePreview,
+    AudioPreview,
     ImageSequencePlayer,
     AssetsTypeIcon,
     AssetsTableDateCell,

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;