@imposium-hub/components 2.3.11-0 → 2.4.0-1

package/src/components/Tooltip.tsx

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

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

@@ -5,7 +5,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface IAdvancedNumberFieldProps {
     buttons?: any;
-    label?: any;
+    label?: string;
     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?: any;
+    label?: string;
     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, { IHubSession } from '../../services/Session';
+import SessionService 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,14 +20,13 @@ 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 {
@@ -67,8 +66,7 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     }
 
     public componentDidMount = (): void => {
-        const { auth, access, auth0ClientId, auth0Domain, isFreshUser } = this.props;
-        const session: IHubSession = SessionService.getSession();
+        const { auth0ClientId, auth0Domain } = this.props;
 
         AuthService.bindToClient(auth0ClientId, auth0Domain);
 
@@ -86,22 +84,8 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
             this.setState({ restrictAccess: false });
         }
 
-        // 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);
-        }
+        // Always check the session
+        this.doCheckSession(true);
     };
 
     /*
@@ -122,12 +106,14 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
 
             if (!validSession) {
                 this.props.clearCachedAuth();
-                this.props.clearCachedAccessList();
                 this.doCheckSession();
             }
         }
 
-        if (this.props.organizationId !== prevProps.organizationId) {
+        if (
+            this.props.organizationId !== prevProps.organizationId ||
+            this.props.access !== prevProps.access
+        ) {
             validAccessLevel = validateAccessLevel(
                 this.props.organizationId,
                 this.props.serviceId,
@@ -147,28 +133,99 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     /*
         Emit creds to React parent
      */
-    private propagateCreds = (): void => {
-        const { auth, access, storyId, onAuthenticated } = this.props;
-        const activeOrgId: string = this.determineActiveOrganization(auth, access);
-        let activeStoryId: string = SessionService.getSession().story_id;
+    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 if (firstOrg) {
+                initialOrganizationId = firstOrg.id;
+            }
+        }
 
-        if (storyId) {
-            activeStoryId = storyId;
+        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
+                if (firstOrg) {
+                    initialOrganizationId = firstOrg.id;
+                    const story = firstOrg.stories[0];
+                    if (story) {
+                        initialStoryId = story.id;
+                    } else {
+                        initialStoryId = null;
+                    }
+                } else {
+                    initialOrganizationId = null;
+                    initialStoryId = null;
+                }
+            }
         }
 
-        onAuthenticated(activeOrgId, activeStoryId);
+        // If at least one org was found, propagate that
+        if (initialOrganizationId) {
+            SessionService.buildFreshSession(freshIdentity, initialOrganizationId, initialStoryId);
+            onAuthenticated(initialOrganizationId, initialStoryId);
 
-        if (this.state.blockRender) {
-            this.setState({ blockRender: false });
+            if (this.state.blockRender) {
+                this.setState({ blockRender: false });
+            }
+
+            // If not, show the no-orgs interface
+        } else {
+            this.setState({ restrictAccess: true, blockRender: false });
         }
     };
 
     /*
         Bust cached creds if exist, invoke auth failure handler
      */
-    private handleCheckSessionFailure = (e: Error): void => {
+    private handleCheckSessionFailure = (e: Error, sub?: string): void => {
+        if (sub) {
+            if (this.props.storyId) {
+                SessionService.cacheStoryId(this.props.storyId, sub);
+            } else {
+                SessionService.clearCachedStoryId(sub);
+            }
+
+            if (this.props.organizationId) {
+                SessionService.cacheOrgId(this.props.organizationId, sub);
+            } else {
+                SessionService.clearCachedOrgId(sub);
+            }
+        }
+
         this.props.clearCachedAuth();
-        this.props.clearCachedAccessList();
         this.props.onAuthenticationFailure(e);
     };
 
@@ -181,107 +238,28 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         if (blockRender) {
             this.setState({ blockRender: true });
         }
-
         AuthService.checkSession()
             .then((freshIdentity: IIdentity) => {
-                SessionService.getAccessData(freshIdentity.idToken, baseUrl)
+                const sub = freshIdentity.idTokenPayload.sub;
+                const orgId = this.props.organizationId
+                    ? this.props.organizationId
+                    : SessionService.getCachedOrgId(sub);
+                SessionService.getAccessData(freshIdentity.accessToken, baseUrl, false, orgId)
                     .then((freshAccess: any) => {
+                        this.props.setAccessData(freshAccess);
                         this.props.login(freshIdentity);
-                        this.props.cacheAccessData(freshAccess);
-                        SessionService.buildFreshSession(freshIdentity, freshAccess);
-                        this.propagateCreds();
+                        this.propagateCreds(freshAccess, freshIdentity);
                     })
                     .catch((e: Error) => {
                         console.error(e);
-                        this.handleCheckSessionFailure(e);
+                        this.handleCheckSessionFailure(e, sub);
                     });
             })
             .catch((e: Error) => {
-                console.error(e);
                 this.handleCheckSessionFailure(e);
             });
     };
 
-    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;
@@ -322,9 +300,8 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators(
         {
             login,
-            clearCachedAuth,
-            cacheAccessData,
-            clearCachedAccessList
+            setAccessData,
+            clearCachedAuth
         },
         dispatch
     );

package/src/components/assets/AssetField.tsx

@@ -28,7 +28,12 @@ interface IAssetFieldProps {
     tooltip: string;
     onChange: (asset: any) => any;
     updateFilters: (filters: any) => any;
-    uploadAssets: (api: any, files: File[], bindToOverlay?: (f: any) => any) => any;
+    uploadAssets: (
+        api: any,
+        files: File[],
+        storyId?: string,
+        bindToOverlay?: (f: any) => any
+    ) => any;
     accepts?: string | string[];
     labelPosition?: string;
     onError?: (message: string) => void;
@@ -103,14 +108,14 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     private onFileDrop = (i: any, monitor: any): void => {
-        const { accepts, api } = this.props;
+        const { accepts, storyId, api } = this.props;
         if (monitor) {
             const { files } = monitor.getItem();
 
             if (mimetypeConformsToOverlay(accepts, files[0])) {
                 this.setState({ assetUploading: true });
 
-                this.props.uploadAssets(api, [files[0]], (f: any) => {
+                this.props.uploadAssets(api, [files[0]], storyId, (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 { formatAudioDuration, getDuration } from '../../Util';
+import { getDuration } from '../../Util';
 
 interface IAssetsTableDurationCell {
     cell: any;
@@ -30,7 +30,10 @@ const AssetsTableDurationCell: React.FC<IAssetsTableDurationCell> = (
     }
 
     if (type === ASSET_TYPES.AUDIO) {
-        duration = formatAudioDuration(original.duration);
+        const date = new Date(null);
+        date.setSeconds(original.duration);
+        const timestamp = date.toISOString().slice(11, 19);
+        duration = `${timestamp}.x`;
     }
 
     if (duration !== null && duration !== undefined) {

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,7 +21,8 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
             row: {
                 original: { name, id, percent: uploadProgress }
             }
-        }
+        },
+        disabled
     } = props;
 
     const [localName, setLocalName] = useState(name);
@@ -51,7 +52,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                <span>{copy.uploads.preparePhase}</span>
+                <span>Preparing asset...</span>
             );
         return loader;
     } else {
@@ -59,6 +60,7 @@ 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,27 +1,20 @@
 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: { type, data, rate }
+                original: { rate }
             }
         }
     } = props;
 
-    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>;
+    if (rate !== null && rate !== undefined) {
+        return <div className='asset-rate-cell'>{Number(rate).toFixed(2)}</div>;
     } else {
         return <div className='asset-rate-cell'></div>;
     }

package/src/components/assets/AssetsTableTypeFilter.tsx

@@ -62,14 +62,15 @@ 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>
         );
     };