@imposium-hub/components 2.5.8 → 2.5.10-0

package/dist/esm/redux/reducers/notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../../../src/redux/reducers/notifications.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAS/C,MAAM,YAAY,GAAoB,EAAE,CAAC;AAEzC,MAAM,aAAa,GAAG,CAAC,KAAK,GAAG,YAAY,EAAE,MAAM,EAAO,EAAE;IACxD,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,OAAO,CAAC,GAAG;YACZ,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,CAAC;QAC3C,KAAK,OAAO,CAAC,KAAK;YACd,OAAO,EAAE,CAAC;QACd;YACI,OAAO,KAAK,CAAC;IACrB,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/styles.css

@@ -1708,6 +1708,10 @@ body a {
 .imposium-header .inner-content .inner-right .additional-buttons {
   margin-right: 10px;
 }
+.imposium-header .inner-content .inner-right .additional-buttons .creativeMgrBtn {
+  position: relative;
+  top: 1px;
+}
 .imposium-header .inner-content .inner-right .btn-help {
   -webkit-touch-callout: none;
   -webkit-user-select: none;

package/dist/styles.less

@@ -1793,6 +1793,11 @@ body{
 
             .additional-buttons{
                 margin-right:10px;
+
+                .creativeMgrBtn {
+                    position: relative;
+                    top: 1px;
+                }
             }
             
             .btn-help {

package/less/components/header.less

@@ -195,6 +195,11 @@
 
             .additional-buttons{
                 margin-right:10px;
+
+                .creativeMgrBtn {
+                    position: relative;
+                    top: 1px;
+                }
             }
             
             .btn-help {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.5.8",
+    "version": "2.5.10-0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -44,6 +44,7 @@
         "js-cookie": "^2.2.1",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
+        "react-hotkeys-hook": "^4.4.1",
         "react-merge-refs": "^1.1.0",
         "react-moveable": "^0.26.1",
         "react-select": "^5.8.0",
@@ -56,7 +57,7 @@
         "@fortawesome/pro-light-svg-icons": "^6.1.1",
         "@fortawesome/pro-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-5",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
         "axios": "^0.21.1",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
@@ -81,7 +82,7 @@
         "@fortawesome/react-fontawesome": "^0.1.18",
         "@imposium-hub/eslint-config": "^1.1.0",
         "@imposium-hub/prettier-config": "^2.1.0",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-5",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
         "@storybook/addon-actions": "^6.4.22",
         "@storybook/addon-docs": "^6.4.22",
         "@storybook/addon-essentials": "^6.4.22",

package/src/components/assets/AssetsTypeIcon.tsx

@@ -14,7 +14,8 @@ import {
     ICON_IMAGE_SEQ_TYPE,
     ICON_FILE_CODE,
     ICON_CLAPPERBOARD_PLAY,
-    ICON_FILTERS
+    ICON_FILTERS,
+    ICON_FILE_UPLOAD
 } from '../../constants/icons';
 
 interface IAssetsTypeIconProps {
@@ -109,6 +110,8 @@ const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps)
                     {ICON_CLAPPERBOARD_PLAY}
                 </span>
             );
+        case 'upload':
+            return <span>{ICON_FILE_UPLOAD}</span>;
         default:
             if (filter === 'multi') {
                 return <span>{ICON_FILTERS}</span>;

package/src/components/data-table/DataTable.tsx

@@ -333,11 +333,20 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
 
                         if (
                             props.highlightBy &&
-                            row.original.hasOwnProperty(props.highlightBy.key) &&
-                            row.original[props.highlightBy.key] === props.highlightBy.value
+                            row.original.hasOwnProperty(props.highlightBy.key)
                         ) {
-                            selectedClass = 'selected';
-                            activeRef = activeRowRef;
+                            const {
+                                highlightBy: { key, value }
+                            } = props;
+
+                            if (
+                                (typeof value == 'string' && row.original[key] === value) ||
+                                (typeof value === 'object' &&
+                                    value.indexOf(row.original[key]) !== -1)
+                            ) {
+                                selectedClass = 'selected';
+                                activeRef = activeRowRef;
+                            }
                         }
 
                         prepareRow(row);

package/src/components/data-table/Paginator.tsx

@@ -26,134 +26,102 @@ const Paginator: React.FC<any> = ({
     setPageSize,
     itemsPerPage,
     onItemsPerPage
-}) => {
-    const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
-    const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
-
-    const onItemsPerPageBlur = () => {
-        onItemsPerPage(getItemsPerPage);
-    };
-
-    const onGoToPageBlur = () => {
-        gotoPage(getPageIndex, pageSize);
-    };
-
-    const onItemsPerPageKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            onItemsPerPage(getItemsPerPage);
-        }
-    };
-
-    const onGoToPageKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            gotoPage(getPageIndex, pageSize);
-        }
-    };
-
-    return (
-        <section className='ip-table-pagination'>
+}) => (
+    <section className='ip-table-pagination'>
+        <span>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to first page'
+                disabled={!canPreviousPage}
+                onClick={() => gotoPage(1, pageSize)}>
+                {ICON_ANGLE_DOUBLE_LEFT}
+            </Button>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to previous page'
+                disabled={!canPreviousPage}
+                onClick={() => previousPage()}>
+                {ICON_ANGLE_LEFT}
+            </Button>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to next page'
+                disabled={!canNextPage}
+                onClick={() => nextPage()}>
+                {ICON_ANGLE_RIGHT}
+            </Button>
+            <Button
+                style='subtle'
+                size='small'
+                tooltip='Go to last page'
+                disabled={!canNextPage}
+                onClick={() => gotoPage(pageCount, pageSize)}>
+                {ICON_ANGLE_DOUBLE_RIGHT}
+            </Button>
+            &nbsp;&nbsp;
             <span>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to first page'
-                    disabled={!canPreviousPage}
-                    onClick={() => gotoPage(1, pageSize)}>
-                    {ICON_ANGLE_DOUBLE_LEFT}
-                </Button>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to previous page'
-                    disabled={!canPreviousPage}
-                    onClick={() => previousPage()}>
-                    {ICON_ANGLE_LEFT}
-                </Button>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to next page'
-                    disabled={!canNextPage}
-                    onClick={() => nextPage()}>
-                    {ICON_ANGLE_RIGHT}
-                </Button>
-                <Button
-                    style='subtle'
-                    size='small'
-                    tooltip='Go to last page'
-                    disabled={!canNextPage}
-                    onClick={() => gotoPage(pageCount, pageSize)}>
-                    {ICON_ANGLE_DOUBLE_RIGHT}
-                </Button>
-                &nbsp;&nbsp;
-                <span>
-                    {copy.table.page}&nbsp;&nbsp;
-                    <strong>
-                        {getPageIndex} of {pageCount}
-                    </strong>
-                    &nbsp;&nbsp;
-                </span>
-                <span>
-                    {copy.table.goToPage}&nbsp;&nbsp;
-                    <input
-                        className='paginator-input'
-                        type='number'
-                        placeholder={getPageIndex.toString()}
-                        onChange={(e) => {
-                            const input = e.target.value;
-                            const inputNum = Number(input);
-                            let next: number;
-
-                            clearTimeout(textInputTimeout);
-
-                            if (!input || inputNum < 1 || inputNum > pageCount) {
-                                return;
-                            }
-
-                            if (inputNum >= 1 && inputNum <= pageCount) {
-                                next = inputNum;
-                            }
-
-                            textInputTimeout = window.setTimeout(() => setPageIndex(next), 300);
-                        }}
-                        onBlur={() => onGoToPageBlur()}
-                        onKeyDown={(e) => onGoToPageKeyDown(e)}
-                    />
-                </span>
+                {copy.table.page}&nbsp;&nbsp;
+                <strong>
+                    {pageIndex} of {pageCount}
+                </strong>
                 &nbsp;&nbsp;
-                <span>
-                    {copy.table.itemsPerPage}&nbsp;&nbsp;
-                    <input
-                        className='paginator-input'
-                        type='number'
-                        placeholder={getItemsPerPage.toString()}
-                        min={1}
-                        onChange={(e) => {
-                            const input = e.target.value;
-                            const inputNum = Number(input);
-
-                            clearTimeout(textInputTimeout);
-
-                            if (!input || inputNum < 1) {
-                                return;
-                            }
-
-                            textInputTimeout = window.setTimeout(
-                                () => setItemsPerPage(inputNum),
-                                300
-                            );
-                        }}
-                        onBlur={() => onItemsPerPageBlur()}
-                        onKeyDown={(e) => onItemsPerPageKeyDown(e)}
-                    />
-                </span>
             </span>
-
-            <span className='total-assets'>
-                {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+            <span>
+                {copy.table.goToPage}&nbsp;&nbsp;
+                <input
+                    className='paginator-input'
+                    type='number'
+                    placeholder={pageIndex}
+                    onChange={(e) => {
+                        const input = e.target.value;
+                        const inputNum = Number(input);
+                        let next: number;
+
+                        clearTimeout(textInputTimeout);
+
+                        if (!input || inputNum < 1 || inputNum > pageCount) {
+                            return;
+                        }
+
+                        if (inputNum >= 1 && inputNum <= pageCount) {
+                            next = inputNum;
+                        }
+
+                        textInputTimeout = window.setTimeout(() => gotoPage(next, pageSize), 300);
+                    }}
+                />
+            </span>
+            &nbsp;&nbsp;
+            <span>
+                {copy.table.itemsPerPage}&nbsp;&nbsp;
+                <input
+                    className='paginator-input'
+                    type='number'
+                    placeholder={itemsPerPage}
+                    min={1}
+                    onChange={(e) => {
+                        const input = e.target.value;
+                        const inputNum = Number(input);
+
+                        clearTimeout(textInputTimeout);
+
+                        if (!input || inputNum < 1) {
+                            return;
+                        }
+
+                        textInputTimeout = window.setTimeout(() => onItemsPerPage(inputNum), 300);
+                    }}
+                />
             </span>
-        </section>
-    );
-};
+        </span>
+
+        <span className='total-assets'>
+            {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+        </span>
+    </section>
+);
 
 export default Paginator;

package/src/components/header/Header.tsx

@@ -236,6 +236,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 <Button
                     color='primary'
                     style='bold'
+                    customClass='creativeMgrBtn'
                     size='large'>
                     {ICON_UP_RIGHT_FROM_SQUARE}&nbsp;{'Creative Manager'}
                 </Button>

package/src/constants/icons.tsx

@@ -73,7 +73,7 @@ import {
 } from '@fortawesome/pro-light-svg-icons';
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
-import { faFilters } from '@fortawesome/pro-solid-svg-icons';
+import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -218,3 +218,5 @@ export const ICON_CLAPPERBOARD_PLAY = <FontAwesomeIcon icon={faClapperboardPlay}
 export const ICON_CODE = <FontAwesomeIcon icon={faCode} />;
 
 export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSquare} />;
+
+export const ICON_FILE_UPLOAD = <FontAwesomeIcon icon={faCloudArrowUp} />;

package/src/redux/actions/asset-uploads.ts

@@ -257,7 +257,8 @@ export const replaceAsset = (
     api: IImposiumAPI,
     assetId: any,
     files: File[],
-    storyId: string
+    storyId: string,
+    bindToOverlay?: (f: any) => any
 ): any => {
     return (dispatch, getStore) => {
         return new Promise<void>((resolve) => {
@@ -303,17 +304,23 @@ export const replaceAsset = (
                 )
                     .then((result) => {
                         const currentOngoingJobs = () => {
+                            if (bindToOverlay) {
+                                bindToOverlay(result);
+                            }
                             return {
+                                footageId: result.id,
+                                jobId: result.job_id,
                                 filename: replacedFileBlobs[activeIndex].filename,
                                 onProcessed: () => {
                                     const fileName = ongoingJobs.filter(
-                                        (job: any) => job.jobId === result[0].job_id
+                                        (job: any) => job.jobId === result.job_id
                                     )[0].filename;
                                     dispatch({
                                         type: assetUploadsActions.REMOVE_UPLOAD,
                                         filename: fileName
                                     });
                                     doAssetTableHydration(api, storyId);
+                                    resolve(result);
                                 }
                             };
                         };
@@ -326,23 +333,22 @@ export const replaceAsset = (
                         } else {
                             ongoingJobs = ongoingJobs.filter((j: any, i: number) => {
                                 const jobIdExists: boolean = typeof j.jobId === 'string';
-
                                 if (!jobIdExists) {
                                     dispatch({
                                         type: assetUploadsActions.REMOVE_UPLOAD,
                                         filename: j.filename
                                     });
                                     doAssetTableHydration(api, storyId);
+                                    resolve(result);
                                 }
                                 return jobIdExists;
                             });
-
                             if (ongoingJobs.length > 0) {
                                 pollAssetJobs(api, ongoingJobs, processingTimeout);
                             }
                         }
 
-                        resolve(result);
+                        // resolve(result);
                     })
                     .catch((e: Error[]) => {
                         if (axios.isCancel(e) && currentQueue !== queueLength - 1) {

package/dist/cjs/components/app-wrapper/AppWrapper_BACKUP_73190.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { IIdentity } from '../../services/Auth0';
-export interface IAppWrapperProps {
-    children: React.ReactChildren;
-    auth0Domain: string;
-    auth0ClientId: string;
-    organizationId: string;
-    baseUrl: string;
-    storyId?: string;
-    serviceId: number;
-    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;
-}
-export interface IAppWrapperState {
-    blockRender: boolean;
-    restrictAccess: boolean;
-}
-declare const _default: any;
-export default _default;