@imposium-hub/components 2.2.45-0 → 2.2.46-0

package/src/components/Tooltip.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import ReactTooltip, { Place } from 'react-tooltip';
+import { Tooltip as ReactTooltip, PlacesType } from 'react-tooltip';
 
 export interface IToolTipConfig {
     content: string;
-    position?: Place;
+    position?: PlacesType;
     theme?: string;
 }
 
@@ -12,8 +12,8 @@ export const renderTooltipProps = (id: string, config: IToolTipConfig | string):
     if (config) {
         const content = typeof config === 'object' ? config.content : config;
         return {
-            'data-tip': content,
-            'data-for': id
+            'data-tooltip-content': content,
+            'data-tooltip-id': id
         };
     } else {
         return {};
@@ -25,7 +25,7 @@ export const renderTooltip = (id: string, config: IToolTipConfig | string): any
 
     if (config && tooltipLayer) {
         let theme = 'light';
-        let place: Place = 'top';
+        let place: PlacesType = 'top';
 
         if (typeof config === 'object') {
             theme = config.theme ? config.theme : 'light';
@@ -34,12 +34,12 @@ export const renderTooltip = (id: string, config: IToolTipConfig | string): any
 
         const tooltipComponent = (
             <ReactTooltip
-                place={place}
-                offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
+                data-tooltip-place={place}
+                data-tooltip-offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
                 id={id}
                 className={`imposium-button-tooltip-${theme}`}
-                delayShow={1000}
-                effect='solid'
+                delayShow={500}
+                noArrow={true}
             />
         );
 

package/src/components/advanced-number-field/AdvancedNumberField.tsx

@@ -5,7 +5,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface IAdvancedNumberFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: number;

package/src/components/anchor-field/AnchorField.tsx

@@ -21,7 +21,7 @@ interface IAnchorFieldProps {
     labelPosition?: string;
     tooltip?: IToolTipConfig | string;
     width?: string | number;
-    label?: string;
+    label?: any;
     labelWidth?: string | number;
 }
 

package/src/components/app-wrapper/AppWrapper.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import NoAccess from '../no-access/NoAccess';
 import Header from '../header/Header';
-import SessionService from '../../services/Session';
+import SessionService, { IHubSession } from '../../services/Session';
 import AuthService, { IIdentity } from '../../services/Auth0';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { login, clearCachedAuth } from '../../redux/actions/auth';
+import { cacheAccessData, clearCachedAccessList } from '../../redux/actions/access';
 import { validateAccessLevel } from '../../Util';
-import { setAccessData } from '../../redux/actions/access';
 
 export interface IAppWrapperProps {
     children: React.ReactChildren;
@@ -20,13 +20,14 @@ export interface IAppWrapperProps {
     access: any;
     auth: any;
     isFreshUser: boolean;
-    setAccessData(accessData: any): any;
     allowUnauthenticatedRender: boolean;
     onAuthenticated: (activeOrgId: string, activeStoryId: string) => any;
     onAuthenticationFailure: (e: Error) => any;
     showRequestAccess?: boolean;
     login: (id: IIdentity) => any;
     clearCachedAuth: () => any;
+    cacheAccessData: (accessData: any) => any;
+    clearCachedAccessList: () => any;
 }
 
 export interface IAppWrapperState {
@@ -66,7 +67,8 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     }
 
     public componentDidMount = (): void => {
-        const { auth0ClientId, auth0Domain } = this.props;
+        const { auth, access, auth0ClientId, auth0Domain, isFreshUser } = this.props;
+        const session: IHubSession = SessionService.getSession();
 
         AuthService.bindToClient(auth0ClientId, auth0Domain);
 
@@ -84,8 +86,22 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
             this.setState({ restrictAccess: false });
         }
 
-        // Always check the session
-        this.doCheckSession(true);
+        // If cookie, auth or access data is missing / mismatched,
+        // silently check auth0 session and refresh flow on success
+        if (
+            !isFreshUser &&
+            auth !== null &&
+            access !== null &&
+            typeof session === 'object' &&
+            typeof session.sub === 'string' &&
+            session.sub === auth.idTokenPayload.sub &&
+            session.stories_hash === SessionService.generateStoriesHash(access) &&
+            session.orgs_hash === SessionService.generateOrgsHash(access)
+        ) {
+            this.propagateCreds();
+        } else {
+            this.doCheckSession(true);
+        }
     };
 
     /*
@@ -106,14 +122,12 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
 
             if (!validSession) {
                 this.props.clearCachedAuth();
+                this.props.clearCachedAccessList();
                 this.doCheckSession();
             }
         }
 
-        if (
-            this.props.organizationId !== prevProps.organizationId ||
-            this.props.access !== prevProps.access
-        ) {
+        if (this.props.organizationId !== prevProps.organizationId) {
             validAccessLevel = validateAccessLevel(
                 this.props.organizationId,
                 this.props.serviceId,
@@ -133,58 +147,16 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     /*
         Emit creds to React parent
      */
-    private propagateCreds = (freshAccess, freshIdentity): void => {
-        const { storyId, organizationId, onAuthenticated } = this.props;
-
-        let initialStoryId = storyId;
-        let initialOrganizationId = organizationId;
-
-        const firstOrg = freshAccess.organizations[0];
-
-        const getIDsFromSession = () => {
-            const session = SessionService.getSession();
-            if (session && session.story_id && session.organization_id) {
-                const org = freshAccess.organizations.find(
-                    (o: any) => o.id === session.organization_id
-                );
-                if (org) {
-                    const story = org.stories.find((s: any) => s.id === session.story_id);
-                    if (story) {
-                        return { orgId: org.id, storyId: story.id };
-                    }
-                }
-            }
-            return null;
-        };
-
-        // If the org ID is not provided, but the storyID is provided, find the org ID if we can, if not, use the first org ID found and we'll show the story not found interface
-        if (!initialOrganizationId && initialStoryId) {
-            const org = freshAccess.organizations.find((o: any) =>
-                o.stories.find((s: any) => s.id === initialStoryId)
-            );
-            if (org) {
-                initialOrganizationId = org.id;
-            } else {
-                initialOrganizationId = firstOrg.id;
-            }
-        }
+    private propagateCreds = (): void => {
+        const { auth, access, storyId, onAuthenticated } = this.props;
+        const activeOrgId: string = this.determineActiveOrganization(auth, access);
+        let activeStoryId: string = SessionService.getSession().story_id;
 
-        if (!initialStoryId) {
-            // If storyID is not provided, try to use the one from the previous session
-            const sessionIds = getIDsFromSession();
-            if (sessionIds) {
-                initialOrganizationId = sessionIds.orgId;
-                initialStoryId = sessionIds.storyId;
-            } else {
-                // If that doesn't work - default to the first org & story
-                const story = firstOrg.stories[0];
-                initialOrganizationId = firstOrg.id;
-                initialStoryId = story.id;
-            }
+        if (storyId) {
+            activeStoryId = storyId;
         }
 
-        SessionService.buildFreshSession(freshIdentity, initialOrganizationId, initialStoryId);
-        onAuthenticated(initialOrganizationId, initialStoryId);
+        onAuthenticated(activeOrgId, activeStoryId);
 
         if (this.state.blockRender) {
             this.setState({ blockRender: false });
@@ -195,19 +167,8 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         Bust cached creds if exist, invoke auth failure handler
      */
     private handleCheckSessionFailure = (e: Error): void => {
-        if (this.props.storyId) {
-            SessionService.cacheStoryId(this.props.storyId);
-        } else {
-            SessionService.clearCachedStoryId();
-        }
-
-        if (this.props.organizationId) {
-            SessionService.cacheOrgId(this.props.organizationId);
-        } else {
-            SessionService.clearCachedOrgId();
-        }
-
         this.props.clearCachedAuth();
+        this.props.clearCachedAccessList();
         this.props.onAuthenticationFailure(e);
     };
 
@@ -220,16 +181,15 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         if (blockRender) {
             this.setState({ blockRender: true });
         }
+
         AuthService.checkSession()
             .then((freshIdentity: IIdentity) => {
-                const orgId = this.props.organizationId
-                    ? this.props.organizationId
-                    : SessionService.getCachedOrgId();
-                SessionService.getAccessData(freshIdentity.idToken, baseUrl, false, orgId)
+                SessionService.getAccessData(freshIdentity.idToken, baseUrl)
                     .then((freshAccess: any) => {
-                        this.props.setAccessData(freshAccess);
                         this.props.login(freshIdentity);
-                        this.propagateCreds(freshAccess, freshIdentity);
+                        this.props.cacheAccessData(freshAccess);
+                        SessionService.buildFreshSession(freshIdentity, freshAccess);
+                        this.propagateCreds();
                     })
                     .catch((e: Error) => {
                         console.error(e);
@@ -242,6 +202,86 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
             });
     };
 
+    private determineActiveOrganizationIn(
+        auth: IIdentity,
+        session: IHubSession,
+        organizationIds: string[]
+    ) {
+        const { organizationId } = this.props;
+        const {
+            idTokenPayload: { exp }
+        } = auth;
+
+        if (organizationIds.length > 0) {
+            if (organizationId && organizationIds.indexOf(organizationId) > -1) {
+                return this.setActiveOrganization(organizationId, exp, session);
+            }
+
+            if (
+                session &&
+                session.organization_id &&
+                organizationIds.indexOf(session.organization_id) > -1
+            ) {
+                return session.organization_id;
+            }
+
+            return this.setActiveOrganization(organizationIds[0], exp, session);
+        }
+
+        return '';
+    }
+
+    /*
+        Figure out what the active org should be based on app-wrapper configuration
+     */
+    private determineActiveOrganization = (auth: IIdentity, access: any): string => {
+        const { serviceId } = this.props;
+        const { organizations } = access;
+        const session: IHubSession = SessionService.getSession();
+        const allOrgIdsFlattened: string[] = organizations.map((o: any) => o.id);
+
+        const activeOrgId: string = this.determineActiveOrganizationIn(
+            auth,
+            session,
+            allOrgIdsFlattened
+        );
+        const activeOrg: any = organizations.find((o) => o.id === activeOrgId);
+
+        if (activeOrg && !activeOrg.services.includes(serviceId)) {
+            this.setState({ restrictAccess: true });
+        }
+
+        return activeOrgId;
+    };
+
+    /*
+        Update session if no session exists or diff in org id
+     */
+    private setActiveOrganization = (
+        organizationId: string,
+        exp: number,
+        sharedSession: IHubSession
+    ): string => {
+        if (
+            !sharedSession ||
+            !sharedSession.organization_id ||
+            sharedSession.organization_id !== organizationId
+        ) {
+            const activeOrg: any = this.props.access.organizations.find(
+                (o: any) => o.id === organizationId
+            );
+            const firstStoryId: string =
+                typeof activeOrg.stories[0] === 'object' ? activeOrg.stories[0].id : '';
+
+            SessionService.updateSession(
+                { organization_id: organizationId, story_id: firstStoryId },
+                exp
+            );
+        }
+
+        return organizationId;
+    };
+
     public render = (): JSX.Element => {
         const { blockRender, restrictAccess } = this.state;
         const { children, showRequestAccess, allowUnauthenticatedRender } = this.props;
@@ -282,8 +322,9 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
             login,
-            setAccessData,
-            clearCachedAuth
+            clearCachedAuth,
+            cacheAccessData,
+            clearCachedAccessList
         },
         dispatch
     );

package/src/components/assets/AssetField.tsx

@@ -28,12 +28,7 @@ interface IAssetFieldProps {
     tooltip: string;
     onChange: (asset: any) => any;
     updateFilters: (filters: any) => any;
-    uploadAssets: (
-        api: any,
-        files: File[],
-        storyId?: string,
-        bindToOverlay?: (f: any) => any
-    ) => any;
+    uploadAssets: (api: any, files: File[], bindToOverlay?: (f: any) => any) => any;
     accepts?: string | string[];
     labelPosition?: string;
     onError?: (message: string) => void;
@@ -108,14 +103,14 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     private onFileDrop = (i: any, monitor: any): void => {
-        const { accepts, storyId, api } = this.props;
+        const { accepts, api } = this.props;
         if (monitor) {
             const { files } = monitor.getItem();
 
             if (mimetypeConformsToOverlay(accepts, files[0])) {
                 this.setState({ assetUploading: true });
 
-                this.props.uploadAssets(api, [files[0]], storyId, (f: any) => {
+                this.props.uploadAssets(api, [files[0]], (f: any) => {
                     this.setState({ assetName: f.name, error: false }, () => {
                         this.setState({ assetUploading: false });
                         this.props.onChange(f);

package/src/components/assets/AssetsTableDurationCell.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ASSET_TYPES } from '../../constants/assets';
-import { getDuration } from '../../Util';
+import { formatAudioDuration, getDuration } from '../../Util';
 
 interface IAssetsTableDurationCell {
     cell: any;
@@ -30,10 +30,7 @@ const AssetsTableDurationCell: React.FC<IAssetsTableDurationCell> = (
     }
 
     if (type === ASSET_TYPES.AUDIO) {
-        const date = new Date(null);
-        date.setSeconds(original.duration);
-        const timestamp = date.toISOString().slice(11, 19);
-        duration = `${timestamp}.x`;
+        duration = formatAudioDuration(original.duration);
     }
 
     if (duration !== null && duration !== undefined) {

package/src/components/assets/AssetsTableGlobalCell.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ICON_GLOBE } from '../../constants/icons';
+
+interface IAssetsTableGlobalCell {
+    cell: any; // React table cell wrapper
+}
+
+const AssetsTableGlobalCell: React.FC<IAssetsTableGlobalCell> = (p: IAssetsTableGlobalCell) => {
+    return (
+        <div className='asset-global-cell'>{p.cell.row.original.story_id ? null : ICON_GLOBE}</div>
+    );
+};
+
+const AssetsTableGlobalCellMemoized = React.memo(AssetsTableGlobalCell);
+export default AssetsTableGlobalCellMemoized;

package/src/components/assets/AssetsTableNameCell.tsx

@@ -6,11 +6,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
 import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
+import { assets as copy } from '../../constants/copy';
 
 interface IAssetsTableNameCell {
     cell: any;
     api: IImposiumAPI;
-    disabled: boolean;
     updateAssetName: (api: any, id: string, name: string, delay?: boolean) => any;
 }
 
@@ -21,8 +21,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
             row: {
                 original: { name, id, percent: uploadProgress }
             }
-        },
-        disabled
+        }
     } = props;
 
     const [localName, setLocalName] = useState(name);
@@ -52,7 +51,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                <span>Preparing asset...</span>
+                <span>{copy.uploads.preparePhase}</span>
             );
         return loader;
     } else {
@@ -60,7 +59,6 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
             <TextField
                 value={localName}
                 width={'100%'}
-                disabled={disabled}
                 onChange={(n) => onUpdate(n)}
             />
         );

package/src/components/assets/AssetsTableRateCell.tsx

@@ -1,20 +1,27 @@
 import * as React from 'react';
+import { ASSET_TYPES } from '../../constants/assets';
 
 interface IAssetsTableRateCell {
     cell: any;
 }
-
 const AssetsTableRateCell: React.FC<IAssetsTableRateCell> = (props: IAssetsTableRateCell) => {
     const {
         cell: {
             row: {
-                original: { rate }
+                original: { type, data, rate }
             }
         }
     } = props;
 
-    if (rate !== null && rate !== undefined) {
-        return <div className='asset-rate-cell'>{Number(rate).toFixed(2)}</div>;
+    let framerate = rate !== null && rate !== undefined ? rate : '';
+
+    if (type === ASSET_TYPES.VIDEO_COMPOSITION && data) {
+        const { rate: frame_rate } = JSON.parse(data);
+        framerate = frame_rate;
+    }
+
+    if (framerate !== null && framerate !== undefined && framerate !== '') {
+        return <div className='asset-rate-cell'>{Number(framerate).toFixed(2)}</div>;
     } else {
         return <div className='asset-rate-cell'></div>;
     }

package/src/components/assets/AssetsTableTypeFilter.tsx

@@ -62,15 +62,14 @@ class AssetsTableTypeFilter extends React.PureComponent<
                     buttonRef={this.typeFilterRef}
                     onClick={() => this.setState({ openMenu: !openMenu })}>
                     <AssetsTypeIcon type={type || 'filter'} />
-
-                    <ImposiumDropdown
-                        show={openMenu}
-                        position='bottomleft'
-                        toggleRef={this.typeFilterRef}
-                        onOutsideClick={() => this.setState({ openMenu: false })}>
-                        {filterButtons}
-                    </ImposiumDropdown>
                 </Button>
+                <ImposiumDropdown
+                    show={openMenu}
+                    position='bottomleft'
+                    toggleRef={this.typeFilterRef}
+                    onOutsideClick={() => this.setState({ openMenu: false })}>
+                    {filterButtons}
+                </ImposiumDropdown>
             </div>
         );
     };