@imposium-hub/components 2.2.44-1 → 2.2.44-2

package/dist/styles.less

@@ -830,8 +830,8 @@ body{
     position: relative;
     box-sizing: border-box;
 
-    .form-field{
-        margin:0;
+    .form-field {
+        margin: 0;
     }
 
     .ip-table {
@@ -860,6 +860,10 @@ body{
             z-index: 2;
         }
 
+        .ip-table-header.pin {
+            position: sticky !important;
+            right: 0px;
+        }
         .ip-table-header, .ip-table-col, .ip-table-filter {
             margin: 0;
             padding: 0.15rem 0.25rem;
@@ -872,20 +876,17 @@ body{
                 width: 10px;
                 height: 100%;
                 touch-action: none;
-
-                &.resizing {
-
-                }
             }
         }
 
-        &.tight-rows{
-            .ip-table-col{
+        &.tight-rows {
+            .ip-table-col {
                 padding: 0.15rem 0.25rem;
             }
         }
-        
-        .ip-table-header, .ip-table-filter {
+
+        .ip-table-header,
+        .ip-table-filter {
             background-color: darken(@background, 1%);
             font-family: 'Roboto Condensed', sans-serif;
             font-weight: 600;
@@ -902,7 +903,8 @@ body{
                 font-size: 11px;
             }
 
-            .searchable-sort-area, .filterable-cell-wrapper {
+            .searchable-sort-area,
+            .filterable-cell-wrapper {
                 display: flex;
                 align-items: center;
             }
@@ -947,6 +949,10 @@ body{
 
                 &.overflow-visible {
                     overflow: visible;
+                    &.pin {
+                        position: sticky;
+                        right: 0px;
+                    }
                 }
 
                 .form-field-content {
@@ -2517,6 +2523,7 @@ body{
 
         .content-wrapper{
             .layer;
+            background-color: rgb(35,35,35);
             top:@storyViewerHeaderHeight;
             height:calc(100% - @storyViewerHeaderHeight);
         }

package/less/components/data-table.less

@@ -5,8 +5,8 @@
     position: relative;
     box-sizing: border-box;
 
-    .form-field{
-        margin:0;
+    .form-field {
+        margin: 0;
     }
 
     .ip-table {
@@ -35,6 +35,10 @@
             z-index: 2;
         }
 
+        .ip-table-header.pin {
+            position: sticky !important;
+            right: 0px;
+        }
         .ip-table-header, .ip-table-col, .ip-table-filter {
             margin: 0;
             padding: 0.15rem 0.25rem;
@@ -47,20 +51,17 @@
                 width: 10px;
                 height: 100%;
                 touch-action: none;
-
-                &.resizing {
-
-                }
             }
         }
 
-        &.tight-rows{
-            .ip-table-col{
+        &.tight-rows {
+            .ip-table-col {
                 padding: 0.15rem 0.25rem;
             }
         }
-        
-        .ip-table-header, .ip-table-filter {
+
+        .ip-table-header,
+        .ip-table-filter {
             background-color: darken(@background, 1%);
             font-family: 'Roboto Condensed', sans-serif;
             font-weight: 600;
@@ -77,7 +78,8 @@
                 font-size: 11px;
             }
 
-            .searchable-sort-area, .filterable-cell-wrapper {
+            .searchable-sort-area,
+            .filterable-cell-wrapper {
                 display: flex;
                 align-items: center;
             }
@@ -122,6 +124,10 @@
 
                 &.overflow-visible {
                     overflow: visible;
+                    &.pin {
+                        position: sticky;
+                        right: 0px;
+                    }
                 }
 
                 .form-field-content {

package/less/components/story-previewer.less

@@ -253,6 +253,7 @@
 
         .content-wrapper{
             .layer;
+            background-color: rgb(35,35,35);
             top:@storyViewerHeaderHeight;
             height:calc(100% - @storyViewerHeaderHeight);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.2.44-1",
+    "version": "2.2.44-2",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/assets/AssetsTableGlobalCell.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ICON_GLOBE } from '../../constants/icons';
+
+interface IAssetsTableGlobalCell {
+    cell: any; // React table cell wrapper
+}
+
+const AssetsTableGlobalCell: React.FC<IAssetsTableGlobalCell> = (p: IAssetsTableGlobalCell) => {
+    return (
+        <div className='asset-global-cell'>{p.cell.row.original.story_id ? null : ICON_GLOBE}</div>
+    );
+};
+
+const AssetsTableGlobalCellMemoized = React.memo(AssetsTableGlobalCell);
+export default AssetsTableGlobalCellMemoized;

package/src/components/assets/AssetsTableNameCell.tsx

@@ -6,6 +6,7 @@ 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;
@@ -50,7 +51,7 @@ const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTable
                     text={name}
                 />
             ) : (
-                <span>Preparing asset...</span>
+                <span>{copy.uploads.preparePhase}</span>
             );
         return loader;
     } else {

package/src/components/assets/AssetsTableRateCell.tsx

@@ -1,20 +1,27 @@
 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: { rate }
+                original: { type, data, rate }
             }
         }
     } = props;
 
-    if (rate !== null && rate !== undefined) {
-        return <div className='asset-rate-cell'>{Number(rate).toFixed(2)}</div>;
+    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>;
     } else {
         return <div className='asset-rate-cell'></div>;
     }

package/src/components/assets/AssetsUploadMenu.tsx

@@ -2,17 +2,7 @@ import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
 import { DeterminateLoader } from '../determinate-loader/DeterminateLoader';
-import {
-    toggleAssignToStory,
-    cancelAssetUpload,
-    toggleTagFileName,
-    setDelimiter,
-    toggleTagDelimiter,
-    toggleManualTagging,
-    addManualTag,
-    deleteManualTag,
-    deleteManualTags
-} from '../../redux/actions/asset-uploads';
+import { cancelAssetUpload } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Button from '../button/Button';
@@ -29,16 +19,9 @@ interface IAssetsUploadMenuProps {
     assetUploads: any;
     assetTags: string[];
     api: any;
-    toggleAutoTag: (toggle: boolean) => any;
-    toggleTagFileName: (toggle: boolean) => any;
-    toggleAssignToStory: (toggle: boolean) => any;
-    toggleTagDelimiter: (togglle: boolean) => any;
-    setDelimiter: (delimiter: string) => any;
-    toggleManualTagging: (togglle: boolean) => any;
-    addManualTag: (tag: string) => any;
-    deleteManualTag: (tag: string) => any;
-    deleteManualTags: () => void;
     cancelAssetUpload: (fileName: string, api: IImposiumAPI) => any;
+    updateEditorConfig(c): void;
+    editor: any;
 }
 
 class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
@@ -51,16 +34,40 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
         this.props.cancelAssetUpload(fileName, api);
     }
 
+    private uploadsSetting(state) {
+        const currState = this.props.editor.assetUploads;
+
+        const newState = { ...currState, ...state };
+        this.props.updateEditorConfig({
+            assetUploads: newState
+        });
+    }
+
+    private deleteManualTag(tag) {
+        const { manualTags } = this.props.editor.assetUploads;
+        const updatedManualTags = manualTags.filter((t: string) => t !== tag);
+        this.uploadsSetting({ manualTags: updatedManualTags });
+    }
+
+    private addManualTag(tag) {
+        const { manualTags } = this.props.editor.assetUploads;
+        const updatedManualTags = manualTags ? manualTags : [];
+        updatedManualTags.push(tag);
+        this.uploadsSetting({ manualTags: updatedManualTags });
+    }
+
     public render() {
         const {
-            assetUploads: {
-                uploads,
-                assignToStory,
-                tagByFileName,
-                tagByDelimiter,
-                delimiter,
-                tagManually,
-                manualTags
+            assetUploads: { uploads },
+            editor: {
+                assetUploads: {
+                    tagByDelimiter,
+                    delimiter,
+                    assignToStory,
+                    tagByFileName,
+                    tagManually,
+                    manualTags
+                }
             },
             assetTags
         } = this.props;
@@ -105,7 +112,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                 width='35%'
                 options={DELIMITER_OPTIONS}
                 value={delimiter}
-                onChange={(c) => this.props.setDelimiter(c)}
+                onChange={(c) => this.uploadsSetting({ delimiter: c })}
             />
         );
         const tagsArray = [...new Set(manualTags)];
@@ -114,7 +121,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                 key={tag}
                 copy={tag}
                 colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                removeHandler={() => this.props.deleteManualTag(tag)}
+                removeHandler={() => this.deleteManualTag(tag)}
             />
         ));
         const removeTagsBtn =
@@ -122,7 +129,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                 <Button
                     tooltip='Remove All Tags'
                     style='sublte'
-                    onClick={() => this.props.deleteManualTags()}>
+                    onClick={() => this.uploadsSetting({ manualTags: [] })}>
                     <FontAwesomeIcon icon={faEraser} />
                 </Button>
             ) : null;
@@ -134,7 +141,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                     suggestions={assetTags}
                     label={copy.tags.add}
                     width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                    doSubmit={(t) => this.props.addManualTag(t)}
+                    doSubmit={(t) => this.addManualTag(t)}
                 />
                 {tagsMarkup}
                 {removeTagsBtn}
@@ -148,27 +155,27 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                         width='50%'
                         label={copy.uploads.autoTagDelimiter}
                         value={tagByDelimiter}
-                        onChange={() => this.props.toggleTagDelimiter(!tagByDelimiter)}
+                        onChange={() => this.uploadsSetting({ tagByDelimiter: !tagByDelimiter })}
                     />
                     {delimiterSelector}
                     <CheckboxField
                         width='50%'
                         label={copy.uploads.manualTagging}
                         value={tagManually}
-                        onChange={() => this.props.toggleManualTagging(!tagManually)}
+                        onChange={() => this.uploadsSetting({ tagManually: !tagManually })}
                     />
                     <CheckboxField
                         width='50%'
                         label={copy.uploads.autoTagFilname}
                         value={tagByFileName}
-                        onChange={() => this.props.toggleTagFileName(!tagByFileName)}
+                        onChange={() => this.uploadsSetting({ tagByFileName: !tagByFileName })}
                     />
                     <CheckboxField
                         width='50%'
                         label={copy.uploads.assignToProjectInput}
                         info={copy.uploads.assignToProjectInfo}
-                        value={assignToStory}
-                        onChange={() => this.props.toggleAssignToStory(!assignToStory)}
+                        value={!assignToStory}
+                        onChange={() => this.uploadsSetting({ assignToStory: !assignToStory })}
                     />
                 </div>
                 {tagsColumn}
@@ -181,15 +188,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
 const mapDispatchToProps = (dispatch): any => {
     return bindActionCreators(
         {
-            toggleAssignToStory,
-            toggleTagFileName,
-            cancelAssetUpload,
-            toggleTagDelimiter,
-            setDelimiter,
-            toggleManualTagging,
-            addManualTag,
-            deleteManualTag,
-            deleteManualTags
+            cancelAssetUpload
         },
         dispatch
     );
@@ -198,7 +197,8 @@ const mapDispatchToProps = (dispatch): any => {
 const mapStateToProps = (state): any => {
     return {
         assetUploads: state.assetUploads,
-        assetTags: state.assetTags
+        assetTags: state.assetTags,
+        editor: state.editor
     };
 };
 

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

@@ -265,7 +265,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                                 {...column.getHeaderProps()}
                                                 className={`ip-table-header ${
                                                     column.canSort ? 'ip-sortable' : ''
-                                                }`}>
+                                                } ${column.pin ? 'pin' : ''}`}>
                                                 {!searchable && (
                                                     <div
                                                         {...toggleProps}
@@ -371,7 +371,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                 {...cell.getCellProps()}
                                 className={`ip-table-col ${
                                     cell.column.overflowVisible ? 'overflow-visible' : ''
-                                }`.trim()}>
+                                } ${cell.column.pin ? 'pin' : ''}`.trim()}>
                                 {cell.render('Cell')}
                             </td>
                         ));

package/src/components/publish-wizard/PublishWizard.tsx

@@ -25,7 +25,6 @@ import { connect } from 'react-redux';
 interface IPublishWizardProps {
     story: any;
     project: any;
-    updateEditorConfig(c): void;
     editor: any;
     updateScene(d): void;
     editStory(s): void;

package/src/constants/copy.ts

@@ -23,9 +23,9 @@ export const assets = {
         autoTagDelimiter: 'Tag by Delimiter',
         delimiterOptions: 'Delimiter Options',
         manualTagging: 'Tag Manually',
-        assignToProjectInput: 'Assign to Project',
+        assignToProjectInput: 'Make Global',
         assignToProjectInfo:
-            'If selected, any assets uploaded will only be available to use with the currently selected project.',
+            'If selected, any assets uploaded will be available to use with all projects on the current organization.',
         uploadButton: 'Upload',
         cancelButton: 'Cancel'
     },

package/src/index.ts

@@ -46,6 +46,7 @@ import AssetsTableTagsFilter from './components/assets/AssetsTableTagsFilter';
 import AssetsTableTagsPivot from './components/assets/AssetsTableTagsPivot';
 import AssetsTableComplexTagCell from './components/assets/AssetsTableComplexTagCell';
 import AssetsTableTypeCell from './components/assets/AssetsTableTypeCell';
+import AssetsTableGlobalCell from './components/assets/AssetsTableGlobalCell';
 import AssetsTableStatusCell from './components/assets/AssetsTableStatusCell';
 import AssetsTableTypeFilter from './components/assets/AssetsTableTypeFilter';
 import AssetsTypeIcon from './components/assets/AssetsTypeIcon';
@@ -103,12 +104,7 @@ import {
     updateAssetStory
 } from './redux/actions/asset-list';
 import { getAssetTagList, addAssetTagToList } from './redux/actions/asset-tags';
-import {
-    cancelAssetUpload,
-    toggleTagFileName,
-    uploadAssets,
-    replaceAsset
-} from './redux/actions/asset-uploads';
+import { cancelAssetUpload, uploadAssets, replaceAsset } from './redux/actions/asset-uploads';
 import { selectAsset, deselectAsset, resetSelection } from './redux/actions/selected-assets';
 import assetFilters from './redux/reducers/asset-filters';
 import assetList from './redux/reducers/asset-list';
@@ -216,6 +212,7 @@ export {
     AssetsTableSelectCell,
     AssetsTableTypeFilter,
     AssetsTableTypeCell,
+    AssetsTableGlobalCell,
     AssetsTableStatusCell,
     AssetsTableNameFilter,
     AssetsTableNameCell,
@@ -251,7 +248,6 @@ export {
     updateAssetName,
     updateAssetData,
     doAssetTableHydration,
-    toggleTagFileName,
     uploadAssets,
     replaceAsset,
     selectAsset,

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

@@ -19,45 +19,6 @@ const assetUploadsActions: any = {
 
 const POLL_INTERVAL: number = 5000;
 
-export const toggleTagFileName = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_TAG_BY_FILENAME,
-    toggle
-});
-
-export const toggleAssignToStory = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_ASSIGN_TO_STORY,
-    toggle
-});
-
-export const toggleTagDelimiter = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_TAG_BY_DELIMITER,
-    toggle
-});
-
-export const setDelimiter = (delimiter: string): any => ({
-    type: assetUploadsActions.SET_DELIMITER,
-    delimiter
-});
-
-export const toggleManualTagging = (toggle: boolean): any => ({
-    type: assetUploadsActions.TOGGLE_MANUAL_TAGGING,
-    toggle
-});
-
-export const addManualTag = (tag: string): any => ({
-    type: assetUploadsActions.ADD_MANUAL_TAG,
-    tag
-});
-
-export const deleteManualTag = (tag: string): any => ({
-    type: assetUploadsActions.DELETE_MANUAL_TAG,
-    tag
-});
-
-export const deleteManualTags = (): any => ({
-    type: assetUploadsActions.DELETE_MANUAL_TAGS
-});
-
 export const uploadAssets = (
     api: IImposiumAPI,
     files: File[],
@@ -66,15 +27,8 @@ export const uploadAssets = (
 ): any => {
     return (dispatch, getStore) => {
         const {
-            assetUploads: {
-                uploads,
-                assignToStory,
-                tagByFileName,
-                tagByDelimiter,
-                delimiter,
-                tagManually,
-                manualTags
-            }
+            assetUploads: { uploads, assignToStory, tagByFileName, tagManually, manualTags },
+            editor: { tagByDelimiter, delimiter }
         } = getStore();
         let currentQueue: number = 0;
         let ongoingJobs: any[] = [];

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

@@ -1,59 +1,11 @@
 import assetUploadsActions from '../actions/asset-uploads';
 
 const initialState: any = {
-    tagByDelimiter: true,
-    delimiter: '_',
-    tagManually: false,
-    manualTags: [],
-    tagByFileName: false,
-    assignToStory: true,
     uploads: []
 };
 
 const assetUploads = (state = initialState, action): any => {
     switch (action.type) {
-        case assetUploadsActions.TOGGLE_TAG_BY_FILENAME:
-            return {
-                ...state,
-                tagByFileName: action.toggle
-            };
-        case assetUploadsActions.TOGGLE_TAG_BY_DELIMITER:
-            return {
-                ...state,
-                tagByDelimiter: action.toggle
-            };
-        case assetUploadsActions.SET_DELIMITER:
-            return {
-                ...state,
-                delimiter: action.delimiter
-            };
-        case assetUploadsActions.TOGGLE_MANUAL_TAGGING:
-            return {
-                ...state,
-                tagManually: action.toggle
-            };
-        case assetUploadsActions.ADD_MANUAL_TAG:
-            const newManualTags = [...state.manualTags];
-            newManualTags.push(action.tag);
-            return {
-                ...state,
-                manualTags: newManualTags
-            };
-        case assetUploadsActions.DELETE_MANUAL_TAG:
-            return {
-                ...state,
-                manualTags: state.manualTags.filter((t: string) => t !== action.tag)
-            };
-        case assetUploadsActions.DELETE_MANUAL_TAGS:
-            return {
-                ...state,
-                manualTags: []
-            };
-        case assetUploadsActions.TOGGLE_ASSIGN_TO_STORY:
-            return {
-                ...state,
-                assignToStory: action.toggle
-            };
         case assetUploadsActions.ADD_UPLOAD:
             return {
                 ...state,