@imposium-hub/components 2.5.10-11 → 2.5.10-13

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

@@ -26,102 +26,149 @@ const Paginator: React.FC<any> = ({
     setPageSize,
     itemsPerPage,
     onItemsPerPage
-}) => (
-    <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;
+}) => {
+    const [getPageIndex, setPageIndex] = React.useState<number>(pageIndex);
+    const [getItemsPerPage, setItemsPerPage] = React.useState<number>(itemsPerPage);
+
+    React.useEffect(() => {
+        if (pageIndex !== getPageIndex) {
+            setPageIndex(pageIndex);
+        }
+    }, [pageIndex]);
+
+    const onItemsPerPageBlur = () => {
+        clearTimeout(textInputTimeout);
+        onItemsPerPage(getItemsPerPage);
+    };
+
+    const onGoToPageBlur = () => {
+        clearTimeout(textInputTimeout);
+        gotoPage(getPageIndex, pageSize);
+    };
+
+    const onItemsPerPageKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            clearTimeout(textInputTimeout);
+            onItemsPerPage(getItemsPerPage);
+        }
+    };
+
+    const onGoToPageKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            clearTimeout(textInputTimeout);
+            gotoPage(getPageIndex, pageSize);
+        }
+    };
+
+    return (
+        <section className='ip-table-pagination'>
             <span>
-                {copy.table.page}&nbsp;&nbsp;
-                <strong>
-                    {pageIndex} of {pageCount}
-                </strong>
+                <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(
+                                () => gotoPage(next, pageSize),
+                                1000
+                            );
+                        }}
+                        onBlur={() => onGoToPageBlur()}
+                        onKeyDown={(e) => onGoToPageKeyDown(e)}
+                    />
+                </span>
+                &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;
+                            }
+
+                            setItemsPerPage(inputNum);
+
+                            textInputTimeout = window.setTimeout(
+                                () => onItemsPerPage(inputNum),
+                                1000
+                            );
+                        }}
+                        onBlur={() => onItemsPerPageBlur()}
+                        onKeyDown={(e) => onItemsPerPageKeyDown(e)}
+                    />
+                </span>
             </span>
-            <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>
-        </span>
 
-        <span className='total-assets'>
-            {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
-        </span>
-    </section>
-);
+            <span className='total-assets'>
+                {copy.table.total}&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+            </span>
+        </section>
+    );
+};
 
 export default Paginator;

package/src/components/smpte-field/SMPTEField.tsx

@@ -12,6 +12,7 @@ interface ISMPTEFieldProps {
     width?: string | number;
     onChange?(e): void;
     onBlur?(e): void;
+    onError?(e): void;
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
@@ -75,7 +76,7 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onBlur(e?) {
         const val = e ? e.target.value : this.inputRef.current.value;
-        const isValid = this.smptValidator(val);
+        const isValid = this.SMTPEValidator(val);
 
         if (e && e.key === 'Enter') {
             this.setDuration(isValid, val);
@@ -88,10 +89,12 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
 
     private onChange() {
         const val = this.inputRef.current.value;
-        const isValid = this.smptValidator(val);
+        const isValid = this.SMTPEValidator(val);
 
         if (isValid) {
             this.props.onChange(val);
+        } else {
+            this.props.onError(isValid);
         }
     }
 
@@ -101,11 +104,13 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
             const smpte = getSMPTE(frameRate, val);
             if (smpte && this.props.onBlur) {
                 this.props.onBlur(smpte);
+            } else {
+                this.props.onError(isValid);
             }
         }
     }
 
-    private smptValidator(val) {
+    private SMTPEValidator(val) {
         const isValidSMPTETimeCode = new RegExp(this.regex);
         const isValid = isValidSMPTETimeCode.test(val);
         const errorMsg = isValid ? null : TIMECODE.ERROR;

package/src/constants/icons.tsx

@@ -74,6 +74,7 @@ import {
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
 import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -220,3 +221,5 @@ 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} />;
+
+export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;

package/src/index.ts

@@ -40,6 +40,7 @@ import AssetField from './components/assets/AssetField';
 import AssetsTableDropzone from './components/assets/AssetsTableDropzone';
 import AssetsTableNameCell from './components/assets/AssetsTableNameCell';
 import AssetsTableNameFilter from './components/assets/AssetsTableNameFilter';
+import AssetsTableAssetIdFilter from './components/assets/AssetsTableAssetIdFilter';
 import AssetsTableSelectCell from './components/assets/AssetsTableSelectCell';
 import AssetsTableSelectFilter from './components/assets/AssetsTableSelectFilter';
 import AssetsTableTagsCell from './components/assets/AssetsTableTagsCell';
@@ -159,6 +160,7 @@ import ContextMenuTrigger from './components/context-menu/ContextMenuTrigger';
 import CopyPropIdButton from './components/copy-prop-id-button/CopyPropIdButton';
 import Submenu from './components/context-menu/SubMenu';
 import { ConfirmModal } from './components/confirm-modal/ConfirmModal';
+import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
 
 export {
     AppWrapper,
@@ -217,6 +219,8 @@ export {
     AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
+    AssetsTableAssetIdFilter,
+    AssetsTableAssetIdCell,
     AssetsTableNameCell,
     AssetsTableDurationCell,
     AssetsTableRateCell,

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

@@ -78,22 +78,19 @@ export const getAssets = (api: IImposiumAPI, storyId: string): any => {
 
 export const deleteAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to delete ${ids.length} assets?`)) {
-            return new Promise<boolean>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.deleteAssets(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve(true);
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject(false);
-                    });
-            });
-        } else {
-            return Promise.resolve(false);
-        }
+        return new Promise<boolean>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.deleteAssets(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    dispatch(toggleLoading(false));
+                    resolve(true);
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject(false);
+                });
+        });
     };
 };
 
@@ -194,20 +191,18 @@ export const deleteAssetTags = (api: IImposiumAPI, id: string): any => {
 
 export const deleteAssetsTags = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to remove all tags from ${ids.length} assets?`)) {
-            return new Promise<void>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.deleteAssetsTags(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve();
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject();
-                    });
-            });
-        }
+        return new Promise<void>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.deleteAssetsTags(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve();
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject();
+                });
+        });
     };
 };
 
@@ -245,20 +240,18 @@ export const updateAssetStory = (api: IImposiumAPI, id: string, storyId: string)
 
 export const decoupleAssets = (api: IImposiumAPI, ids: string[], storyId: string): any => {
     return (dispatch) => {
-        if (window.confirm(`Are you sure you want to decouple ${ids.length} assets?`)) {
-            return new Promise<void>((resolve, reject) => {
-                dispatch(toggleLoading(true));
-                api.decoupleAssets(ids)
-                    .then(() => {
-                        dispatch(getAssets(api, storyId));
-                        resolve();
-                    })
-                    .catch((errors: Error[]) => {
-                        dispatch(toggleLoading(false));
-                        reject();
-                    });
-            });
-        }
+        return new Promise<void>((resolve, reject) => {
+            dispatch(toggleLoading(true));
+            api.decoupleAssets(ids)
+                .then(() => {
+                    dispatch(getAssets(api, storyId));
+                    resolve();
+                })
+                .catch((errors: Error[]) => {
+                    dispatch(toggleLoading(false));
+                    reject();
+                });
+        });
     };
 };
 

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

@@ -7,7 +7,8 @@ const assetUploadsActions: any = {
     UPDATE_UPLOAD: 'assetUploads/UPDATE_UPLOAD',
     UPDATE_PERCENT_UPLOADED: 'assetUploads/UPDATE_PERCENT_UPLOADED',
     ADD_UPLOAD_ASSET_ID: 'assetUploads/ADD_UPLOAD_ASSET_ID',
-    REMOVE_UPLOAD: 'assetUploads/REMOVE_UPLOAD'
+    REMOVE_UPLOAD: 'assetUploads/REMOVE_UPLOAD',
+    ERROR: 'assetUploads/ERROR'
 };
 
 const POLL_INTERVAL: number = 5000;
@@ -241,6 +242,15 @@ const uploadAssetHandler = (api: IImposiumAPI, dispatch, getStore) => {
                         if (axios.isCancel(e) && currentQueue !== queueLength - 1) {
                             currentQueue = currentQueue + 1;
                             createPromise(currentQueue);
+                        } else {
+                            const error: any = { ...e };
+                            const errorMsg = error.response.data.error.split(':')[0];
+                            dispatch({
+                                type: assetUploadsActions.ERROR,
+                                filename: uploadBlobs[activeIndex].filename,
+                                errorMsg
+                            });
+                            doAssetTableHydration(api, storyId);
                         }
                     });
             }

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

@@ -47,6 +47,19 @@ const assetUploads = (state = initialState, action): any => {
                 ...state,
                 uploads: state.uploads.filter((u: any) => u.filename !== action.filename)
             };
+        case assetUploadsActions.ERROR:
+            const newError = state.uploads.map((u: any) => {
+                if (u.filename === action.filename) {
+                    return { ...u, error: action.errorMsg };
+                }
+
+                return u;
+            });
+
+            return {
+                ...state,
+                uploads: newError
+            };
         default:
             return state;
     }

package/src/services/API.ts

@@ -153,6 +153,9 @@ interface ITTSOptions {
     voice: string;
     service: string;
     model?: string;
+    speed?: string;
+    pause_silences?: boolean;
+    minimum_silence_length?: number;
 }
 
 interface ICancelTokenCache {
@@ -1607,6 +1610,18 @@ export default class API {
             url += `&model=${options.model}`;
         }
 
+        if (options.speed) {
+            url += `&speed=${options.speed}`;
+        }
+
+        if (options.pause_silences) {
+            url += `&pause_silences=${options.pause_silences}`;
+        }
+
+        if (options.minimum_silence_length) {
+            url += `&minimum_silence_length=${options.minimum_silence_length}`;
+        }
+
         return this.doRequest({
             url,
             method: 'GET',