@imposium-hub/components 2.2.42 → 2.2.44-0

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

@@ -7,10 +7,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { login, clearCachedAuth } from '../../redux/actions/auth';
 import { cacheAccessData, clearCachedAccessList } from '../../redux/actions/access';
-import { checkStoryId, getLastModifiedStoryInOrg, validateAccessLevel } from '../../Util';
+import { validateAccessLevel } from '../../Util';
 
 export interface IAppWrapperProps {
     children: React.ReactChildren;
+    auth0Domain: string;
     auth0ClientId: string;
     organizationId: string;
     baseUrl: string;
@@ -49,6 +50,13 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         />
     );
 
+    private static readonly NO_ORGS: JSX.Element = (
+        <NoAccess
+            key='restriction-msg'
+            type='no-orgs'
+        />
+    );
+
     constructor(p: IAppWrapperProps) {
         super(p);
 
@@ -59,10 +67,24 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     }
 
     public componentDidMount = (): void => {
-        const { auth, access, auth0ClientId, isFreshUser } = this.props;
+        const { auth, access, auth0ClientId, auth0Domain, isFreshUser } = this.props;
         const session: IHubSession = SessionService.getSession();
 
-        AuthService.bindToClient(auth0ClientId);
+        AuthService.bindToClient(auth0ClientId, auth0Domain);
+
+        const validAccessLevel = validateAccessLevel(
+            this.props.organizationId,
+            this.props.serviceId,
+            this.props.access
+        );
+
+        if (!this.state.restrictAccess && !validAccessLevel) {
+            this.setState({ restrictAccess: true });
+        }
+
+        if (this.state.restrictAccess && validAccessLevel) {
+            this.setState({ restrictAccess: false });
+        }
 
         // If cookie, auth or access data is missing / mismatched,
         // silently check auth0 session and refresh flow on success
@@ -128,9 +150,11 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
     private propagateCreds = (): void => {
         const { auth, access, storyId, onAuthenticated } = this.props;
         const activeOrgId: string = this.determineActiveOrganization(auth, access);
-        const activeStoryId: string = checkStoryId(storyId, activeOrgId, access)
-            ? storyId
-            : getLastModifiedStoryInOrg(activeOrgId, access);
+        let activeStoryId: string = SessionService.getSession().story_id;
+
+        if (storyId) {
+            activeStoryId = storyId;
+        }
 
         onAuthenticated(activeOrgId, activeStoryId);
 
@@ -265,9 +289,18 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         let innerContent: any;
 
         if (!blockRender && restrictAccess) {
+            const showNoOrgs =
+                this.props.access &&
+                this.props.access.organizations &&
+                this.props.access.organizations.length === 0;
+            const errorIndicator = showNoOrgs
+                ? AppWrapper.NO_ORGS
+                : showRequestAccess
+                ? AppWrapper.RESTRICTED_REQUEST
+                : AppWrapper.RESTRICTED_BLOCK;
             innerContent = [
                 typeof children[0] === 'object' && children[0].type === Header && children[0],
-                showRequestAccess ? AppWrapper.RESTRICTED_REQUEST : AppWrapper.RESTRICTED_BLOCK
+                errorIndicator
             ];
         }
 

package/src/components/assets/AssetsTableDateCell.tsx

@@ -18,6 +18,8 @@ const AssetsTableDateCell: React.FC<IAssetsTableDateCell> = (p: IAssetsTableDate
         return <div>{formatDateDefault(values.date_created)}</div>;
     } else if (values.date_modified) {
         return <div>{formatDateDefault(values.date_modified)}</div>;
+    } else if (values.date_updated) {
+        return <div>{formatDateDefault(values.date_updated)}</div>;
     } else {
         return null;
     }

package/src/components/assets/AssetsTableDurationCell.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { ASSET_TYPES } from '../../constants/assets';
+import { getDuration } from '../../Util';
 
 interface IAssetsTableDurationCell {
     cell: any;
@@ -10,13 +12,20 @@ const AssetsTableDurationCell: React.FC<IAssetsTableDurationCell> = (
     const {
         cell: {
             row: {
-                original: { duration }
+                original: { type, data, rate, frame_count }
             }
         }
     } = props;
 
+    let duration = rate && frame_count ? getDuration(frame_count, rate) : '';
+
+    if (type === ASSET_TYPES.VIDEO_COMPOSITION) {
+        const { frames, rate: frame_rate } = JSON.parse(data);
+        duration = getDuration(frames, frame_rate);
+    }
+
     if (duration !== null && duration !== undefined) {
-        return <div className='asset-duration-cell'>{secondsToTime(duration)}</div>;
+        return <div className='asset-duration-cell'>{duration}</div>;
     } else {
         return <div className='asset-duration-cell'></div>;
     }

package/src/components/auth-gate/AuthGate.tsx

@@ -9,6 +9,7 @@ import { cacheAccessData } from '../../redux/actions/access';
 
 interface IAuthGateProps {
     auth0ClientId: string;
+    auth0Domain: string;
     auth0Hash: string;
     onAuthenticated: () => any;
     baseUrl?: string;
@@ -24,9 +25,9 @@ class AuthGate extends React.PureComponent<IAuthGateProps> {
     }
 
     public componentDidMount = (): void => {
-        const { auth0ClientId, auth0Hash, onAuthenticated, baseUrl } = this.props;
+        const { auth0ClientId, auth0Hash, auth0Domain, onAuthenticated, baseUrl } = this.props;
 
-        AuthService.bindToClient(auth0ClientId);
+        AuthService.bindToClient(auth0ClientId, auth0Domain);
 
         if (!auth0Hash) {
             AuthService.login();

package/src/components/header/Header.tsx

@@ -21,6 +21,7 @@ export interface IHeaderProps {
     auth: any;
     story: any;
     baseUrl: any;
+    access: any;
 }
 
 export interface IHeaderState {
@@ -160,7 +161,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     public componentDidUpdate(prevProps: Readonly<IHeaderProps>): void {
         const { accessData } = this.state;
-        const { activeOrganization } = this.props;
+        const { activeOrganization, access } = this.props;
 
         if (activeOrganization !== prevProps.activeOrganization) {
             if (accessData !== null) {
@@ -169,6 +170,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 this.getAccessDataHandler();
             }
         }
+
+        if (!_.isEqual(access, accessData)) {
+            this.setState({ accessData: access }, () =>
+                this.parseAccessData(access, activeOrganization)
+            );
+        }
     }
 
     private parseAccessData = (accessData: any, activeOrganization: string): void => {
@@ -299,7 +306,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
         this.setState({ dataLoading: true });
 
-        // SessionService.getAccessData(idToken, baseUrl, true, activeOrganization)
         SessionService.getAccessData(idToken, baseUrl)
             .then((res) => {
                 this.setState({ dataLoading: false, accessData: res }, () =>
@@ -457,6 +463,10 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             );
         }
 
+        if (accessData && accessData.organizations && accessData.organizations.length === 0) {
+            storyToggle = null;
+        }
+
         if (accessData && activeOrganizationBlob && !hideStoryPicker) {
             currentStory = activeOrganizationBlob.stories.find((s: any) => s.id === activeStory);
             storyToggle = (
@@ -596,7 +606,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
-        story: state.story
+        story: state.story,
+        access: state.access
     };
 };
 

package/src/components/no-access/NoAccess.tsx

@@ -4,20 +4,22 @@ import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 interface INoAccessProps {
-    type: 'request' | 'restrict';
+    type: 'request' | 'restrict' | 'no-orgs';
 }
 
 const MAIL_TO: string = 'mailto:info@imposium.com?subject=My access to Imposium is restricted';
 const REQUEST_ACCESS_TITLE: string = "You don't have access to Imposium yet";
 const REQUEST_HREF_COPY: string = 'Request Access';
 const RESTRICTED_ACCESS_TITLE: string = 'Service not found';
+const NO_ORGS_TITLE = 'No organizations found';
 
 const NoAccess: React.FC<INoAccessProps> = (p: INoAccessProps) => {
     if (!p.type) {
-        throw new Error('NoAccess requires a type of either: request or restrict');
+        throw new Error('NoAccess requires a type of either: request or restrict or no-orgs');
     }
 
     const isRequest: boolean = p.type === 'request';
+    const isNoOrgs: boolean = p.type === 'no-orgs';
 
     return (
         <div className='no-access'>
@@ -35,8 +37,17 @@ const NoAccess: React.FC<INoAccessProps> = (p: INoAccessProps) => {
 
             <div className='no-access-copy'>
                 <h1 className='no-access-heading'>
-                    {isRequest ? REQUEST_ACCESS_TITLE : RESTRICTED_ACCESS_TITLE}
+                    {isRequest
+                        ? REQUEST_ACCESS_TITLE
+                        : isNoOrgs
+                        ? NO_ORGS_TITLE
+                        : RESTRICTED_ACCESS_TITLE}
                 </h1>
+                <p>
+                    {isNoOrgs
+                        ? 'Please request access from an admin already on the organization'
+                        : null}
+                </p>
                 {isRequest && <a href={MAIL_TO}>{REQUEST_HREF_COPY}</a>}
             </div>
         </div>

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -57,6 +57,7 @@ interface IStoryPreviewerState {
     isTimeOut: boolean;
     error: boolean;
     jobLogLoading: boolean;
+    errorMsg: string;
 }
 
 class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPreviewerState> {
@@ -86,7 +87,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             isTimeOut: false,
             compositionOverride: null,
             error: false,
-            jobLogLoading: false
+            jobLogLoading: false,
+            errorMsg: ''
         };
 
         this.timer = new Timer({
@@ -191,7 +193,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     public componentDidUpdate(prevProps, prevState) {
         if (!prevProps.editor?.autoRender && this.props.editor?.autoRender) {
             this.props.updateEditorConfig({ autoRender: false });
-            this.createExperience();
+            this.evtHandlers.gotExperience = null;
+            this.props.api.cancelExperiencePolling().then(() => this.createExperience());
         }
 
         if (
@@ -225,7 +228,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 const { experienceId } = this.state;
 
                 api.cancelExperiencePolling().then(() => {
-                    onError(copy.runExpError.replace('[expId]', experienceId));
+                    onError(copy.runExpIdError.replace('[expId]', experienceId));
 
                     this.resetState(
                         true,
@@ -507,8 +510,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                                 () => {
                                                                     onError(
                                                                         copy.runExpError.replace(
-                                                                            '[expId]',
-                                                                            experienceId
+                                                                            '[error]',
+                                                                            e.error
                                                                         )
                                                                     );
 
@@ -516,7 +519,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                                         true,
                                                                         () => {
                                                                             this.setState({
-                                                                                isTimeOut: true
+                                                                                isTimeOut: true,
+                                                                                errorMsg: e.error
                                                                             });
                                                                         },
                                                                         experienceId
@@ -525,7 +529,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                             );
                                                         } else {
                                                             onError(
-                                                                copy.runExpError.replace(
+                                                                copy.runExpIdError.replace(
                                                                     '[expId]',
                                                                     experienceId
                                                                 )
@@ -569,10 +573,10 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                     this.resetState();
                                     if (onError) {
                                         if (e.error) {
-                                            onError(e.error);
+                                            onError(copy.runExpError.replace('[error]', e.error));
                                         } else {
                                             onError(
-                                                copy.runExpError.replace('[expId]', experienceId)
+                                                copy.runExpIdError.replace('[expId]', experienceId)
                                             );
                                         }
                                     }
@@ -585,16 +589,10 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private createExperience() {
-        const {
-            storyId,
-            onNotification,
-            onError,
-            api,
-            onExperienceCreated,
-            useWorkingCopy,
-            editor: { fastRender }
-        } = this.props;
+        const { storyId, onNotification, onError, api, onExperienceCreated, useWorkingCopy } =
+            this.props;
 
+        const fastRender = this.props.editor?.fastRender || false;
         const compId = this.getCompId();
 
         this.resetState(false, () => {
@@ -658,13 +656,12 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private renderViewerContent() {
-        const { rendering, experience, timeElapsed, activeOutput, isTimeOut } = this.state;
+        const { rendering, experience, timeElapsed, activeOutput, isTimeOut, errorMsg } =
+            this.state;
 
-        const {
-            api,
-            onError,
-            editor: { playbackRate }
-        } = this.props;
+        const { api, onError } = this.props;
+
+        const playbackRate = this.props.editor?.playbackRate || 1;
 
         if (rendering) {
             return (
@@ -684,6 +681,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                     <p>
                         {copy.time}&nbsp;{formattedTime(timeElapsed)}
                     </p>
+                    <br />
+                    <p>{`${copy.runExpError.replace('[error]', errorMsg)}`}</p>
                 </div>
             );
         } else if (experience && activeOutput) {
@@ -840,23 +839,21 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private changePlaybackRate() {
-        const {
-            editor: { playbackRate }
-        } = this.props;
+        const playbackRate = this.props.editor?.playbackRate || 1;
         let newRate = playbackRate + 0.5;
 
         if (newRate > this.maxPlaybackRate) {
             newRate = 1;
         }
 
-        this.props.updateEditorConfig({ playbackRate: newRate });
+        if (this.props.updateEditorConfig) {
+            this.props.updateEditorConfig({ playbackRate: newRate });
+        }
     }
 
     public render() {
-        const {
-            allowCompOverride,
-            editor: { playbackRate }
-        } = this.props;
+        const { allowCompOverride } = this.props;
+        const playbackRate = this.props.editor?.playbackRate || 1;
         const { rendering, experience, activeOutput, experienceId, error } = this.state;
         const { storyId } = this.props;
         const renderCopy = experience ? copy.btnReRender : copy.btnRender;

package/src/constants/copy.ts

@@ -58,7 +58,8 @@ export const previewer = {
     time: 'Time Elapsed:',
     expRunning: 'Rendering Experience',
     runExpStart: 'Creating Experience',
-    runExpError: 'Error running experience - ID: [expId]',
+    runExpIdError: 'Error running experience - ID: [expId]',
+    runExpError: 'Error running experience: [error]',
     triggerExpError: 'Error triggering experience - ID: [expId]',
     expId: 'Running Experience - ID: [expId]',
     createExpError: 'Error creating experience',

package/src/services/Auth0.ts

@@ -11,7 +11,6 @@ export interface IIdentity {
 
 export default class AuthService {
     private static readonly IMPOSIUM_APP_DEFAULTS: any = {
-        domain: 'imposium.auth0.com',
         scope: 'openid',
         responseType: 'token id_token',
         redirectUri: `${window.location.origin}/auth`
@@ -23,9 +22,10 @@ export default class AuthService {
     /*
         Initialize the auth0 web client with client ID for a given app-wrapper
      */
-    public static bindToClient = (clientID: string): void => {
+    public static bindToClient = (clientID: string, domain: string): void => {
         AuthService.auth0Client = new auth0.WebAuth({
             clientID,
+            domain,
             ...AuthService.IMPOSIUM_APP_DEFAULTS
         });
     };

package/src/services/Session.ts

@@ -98,6 +98,7 @@ export default class SessionService {
         if (
             cachedStoryId &&
             organizationId &&
+            activeOrg.stories &&
             activeOrg.stories.find((s: any) => s.id === cachedStoryId)
         ) {
             activeStoryId = cachedStoryId;
@@ -116,6 +117,8 @@ export default class SessionService {
         // Same for story id if the cache was missing / belonging to a different org
         if (
             !activeStoryId &&
+            organizations &&
+            organizations[0] &&
             organizations[0].stories.length > 0 &&
             typeof organizations[0].stories[0] === 'object' &&
             organizations[0].stories[0].hasOwnProperty('id')