@imposium-hub/components 1.35.0 → 1.36.0

package/Entry.ts

@@ -54,6 +54,8 @@ import DroppableAssetRenderer from './components/assets/DroppableAssetRenderer';
 import ImagePlayer from './components/players/ImagePlayer';
 import VideoPlayer from './components/players/VideoPlayer';
 import AudioPlayer from './components/players/AudioPlayer';
+import VideoPreview from './components/players/VideoPreview';
+import ImagePreview from './components/players/ImagePreview';
 import ImageSequencePlayer from './components/players/ImageSequencePlayer';
 import LogViewer from './components/log-viewer/LogViewer';
 import StoryPreviewer from './components/story-previewer/StoryPreviewer';
@@ -74,19 +76,19 @@ import auth from './redux/reducers/auth';
 import {login, clearCachedAuth} from './redux/actions/auth';
 import access from './redux/reducers/access';
 import {
-    cacheAccessData, clearCachedAccessList, storyAdded, 
+    cacheAccessData, clearCachedAccessList, storyAdded,
     storyNameMutated, orgNameMutated, storyDeleted
 } from './redux/actions/access';
 import { updateFilters } from './redux/actions/asset-filters';
-import { 
+import {
     getAssets, deleteAssets, addAssetTag,
     deleteAssetTag, updateAssetName, updateAssetData, doAssetTableHydration
 } from './redux/actions/asset-list';
-import { 
+import {
     getAssetTagList, addAssetTagToList
 } from './redux/actions/asset-tags';
 import { toggleAutoTag, uploadAssets } from './redux/actions/asset-uploads';
-import { 
+import {
     selectAsset, deselectAsset, resetSelection
 } from './redux/actions/selected-assets';
 import assetFilters from './redux/reducers/asset-filters';
@@ -152,6 +154,8 @@ export {
     ImagePlayer,
     VideoPlayer,
     AudioPlayer,
+    VideoPreview,
+    ImagePreview,
     ImageSequencePlayer,
 
     AssetsTypeIcon,
@@ -231,7 +235,7 @@ export {
     filterHotkeys,
     mimetypeConformsToOverlay,
     validateAssetMimetype,
-    toFixed, 
+    toFixed,
     padStart,
     formatDateDefault,
 

package/components/players/ImagePreview.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Portal from '../portal/Portal';
+
+interface IVideoPreviewProps {
+    showMedia : boolean;
+    url : string;
+    playbackSettings? : any;
+    style? : React.CSSProperties | any;
+}
+
+class ImagePreview extends React.PureComponent<IVideoPreviewProps> {
+    private imageNode : any = null;
+    constructor(props) {
+        super(props);
+        this.imageNode = React.createRef();
+    }
+    public render() {
+        const {showMedia, url, style} = this.props;
+        if (showMedia) {
+            return (
+                <Portal id='portal-root'>
+                    <img
+                        src={url}
+                        ref={this.imageNode}
+                        className='media-preview'
+                        style={style}/>
+                </Portal>
+            );
+        } else {
+            return null;
+        }
+    }
+}
+
+export default ImagePreview;

package/components/players/VideoPreview.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Portal from '../portal/Portal';
+
+interface IVideoPreviewProps {
+    showMedia : boolean;
+    url : string;
+    playbackSettings? : any;
+    style? : React.CSSProperties | {};
+}
+
+class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
+    private videoNode : any = null;
+    constructor(props) {
+        super(props);
+        this.videoNode = React.createRef();
+    }
+    public render() {
+        const {showMedia, url, playbackSettings, style} = this.props;
+        if (showMedia) {
+            return (
+                <Portal id='portal-root'>
+                    <video
+                        style = {style}
+                        muted
+                        ref = {this.videoNode}
+                        autoPlay = {playbackSettings.autoPlay}
+                        loop = {playbackSettings.loop}
+                        controls
+                        preload = 'preload'
+                        src={url}
+                        className='media-preview' />
+                </Portal>
+            );
+        } else {
+           return null;
+        }
+    }
+}
+
+export default VideoPreview;