@imposium-hub/components 1.34.3 → 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/app-wrapper/AppWrapper.tsx

@@ -13,6 +13,7 @@ export interface IAppWrapperProps {
     children : React.ReactChildren;
     auth0ClientId : string;
     organizationId : string;
+    baseUrl : string;
     storyId? : string;
     serviceId : number;
     access : any;
@@ -145,7 +146,7 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         Check auth0 session, pull Imposium access creds on success and initialize app-wrapper
     */
     private doCheckSession = (blockRender : boolean = false) : void => {
-        const {onAuthenticationFailure} = this.props;
+        const {onAuthenticationFailure, baseUrl} = this.props;
 
         if (blockRender) {
             this.setState({blockRender: true});
@@ -153,7 +154,7 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
 
         AuthService.checkSession()
             .then((freshIdentity : IIdentity) => {
-                SessionService.getAccessData(freshIdentity.idToken)
+                SessionService.getAccessData(freshIdentity.idToken, baseUrl)
                     .then((freshAccess : any) => {
                         this.props.login(freshIdentity);
                         this.props.cacheAccessData(freshAccess);

package/components/auth-gate/AuthGate.tsx

@@ -11,6 +11,7 @@ interface IAuthGateProps {
     auth0ClientId : string;
     auth0Hash : string;
     onAuthenticated : () => any;
+    baseUrl? : string;
     login : (id : IIdentity) => any;
     cacheAccessData : (accessData : any) => any;
 }
@@ -23,7 +24,7 @@ class AuthGate extends React.PureComponent<IAuthGateProps, {}> {
     }
 
     public componentDidMount = () : void => {
-        const {auth0ClientId, auth0Hash, onAuthenticated} = this.props;
+        const {auth0ClientId, auth0Hash, onAuthenticated, baseUrl} = this.props;
 
         AuthService.bindToClient(auth0ClientId);
 
@@ -32,7 +33,7 @@ class AuthGate extends React.PureComponent<IAuthGateProps, {}> {
         } else {
             AuthService.parseIdFromHash(auth0Hash)
                 .then((freshIdentity : IIdentity) => {
-                    SessionService.getAccessData(freshIdentity.idToken)
+                    SessionService.getAccessData(freshIdentity.idToken, baseUrl)
                         .then((freshAccess : any) => {
                             this.props.login(freshIdentity);
                             this.props.cacheAccessData(freshAccess);

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;