@imposium-hub/components 2.2.42 → 2.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.2.42",
+    "version": "2.2.43",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -72,7 +72,6 @@
         "smpte-timecode": "^1.2.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.17.10",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-brands-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -91,13 +90,12 @@
         "@storybook/react": "^7.0.7",
         "@storybook/testing-library": "^0.0.11",
         "@types/hoist-non-react-statics": "^3.3.1",
-        "@types/lodash": "^4.14.178",
+        "@types/offscreencanvas": "^2019.6.4",
         "@types/react": "^17.0.37",
         "@types/resize-observer-browser": "^0.1.5",
-        "@typescript-eslint/eslint-plugin": "^5.21.0",
-        "@typescript-eslint/parser": "^5.24.0",
+        "@typescript-eslint/eslint-plugin": "^5.26.0",
+        "@typescript-eslint/parser": "^5.26.0",
         "axios": "^0.21.1",
-        "babel-loader": "^8.2.5",
         "concurrently": "^7.1.0",
         "eslint": "^8.14.0",
         "eslint-config-prettier": "^8.5.0",

package/src/Util.ts

@@ -2,8 +2,13 @@ import Timecode from 'smpte-timecode';
 
 export const isLocal = (): boolean => window.location.hostname === 'localhost';
 
-export const getActiveOrg = (activeOrgId: string, access: any): any =>
-    access.organizations.find((o: any) => o.id === activeOrgId);
+export const getActiveOrg = (activeOrgId: string, access: any): any => {
+    if (access && access.organizations && access.organizations.length > 0) {
+        return access.organizations.find((o: any) => o.id === activeOrgId);
+    } else {
+        return false;
+    }
+};
 
 export const validateAccessLevel = (orgId: string, serviceId: number, access: any): boolean => {
     const activeOrg: any = getActiveOrg(orgId, access);
@@ -39,10 +44,19 @@ export const getLastModifiedStoryInOrg = (orgId: string, access: any): string =>
 
     return sortByLastModified[0].id;
 };
-export const scrapeEmail = (auth: any): string =>
-    auth && auth.idTokenPayload && auth.idTokenPayload['https://imposium.com/email']
-        ? auth.idTokenPayload['https://imposium.com/email']
-        : '';
+export const scrapeEmail = (auth: any): string => {
+    if (auth && auth.idTokenPayload) {
+        if (auth.idTokenPayload['https://imposium.com/email']) {
+            return auth.idTokenPayload['https://imposium.com/email'];
+        } else if (auth.idTokenPayload['userEmail']) {
+            return auth.idTokenPayload['userEmail'];
+        } else {
+            return '';
+        }
+    } else {
+        return '';
+    }
+};
 
 export const parameterizeServiceUrl = (
     activeOrg: string,

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,16 @@ 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;
+        let activeOrg: any;
+
+        if (this.props.storyId) {
+            activeOrg = access.organizations.find((o: any) => o.id === activeOrgId);
+
+            if (activeOrg && activeOrg.stories.find((s: any) => s.id === storyId)) {
+                activeStoryId = storyId;
+            }
+        }
 
         onAuthenticated(activeOrgId, activeStoryId);
 
@@ -265,9 +294,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/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

@@ -457,6 +457,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 = (

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

@@ -585,16 +585,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, () => {
@@ -660,11 +654,9 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     private renderViewerContent() {
         const { rendering, experience, timeElapsed, activeOutput, isTimeOut } = this.state;
 
-        const {
-            api,
-            onError,
-            editor: { playbackRate }
-        } = this.props;
+        const { api, onError } = this.props;
+
+        const playbackRate = this.props.editor?.playbackRate || 1;
 
         if (rendering) {
             return (
@@ -840,23 +832,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/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')