@imposium-hub/components 2.5.0 → 2.5.2

package/dist/styles.less

@@ -1993,6 +1993,10 @@ body{
     }
 }
 
+.total-renders-cell{
+    height:18px;
+}
+
 
 .horizontal-rule{
 	width:100%;

package/less/components/header.less

@@ -399,3 +399,7 @@
         }
     }
 }
+
+.total-renders-cell{
+    height:18px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.5.0",
+    "version": "2.5.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/StoryTableTotalRendersCell.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import Spinner from '../spinner/Spinner';
+
+export const StoryTableTotalRendersCell = (props: any) => {
+    const total = props.cell.row.original.total_renders;
+    return <div className='total-renders-cell'>{props.loading ? <Spinner /> : total}</div>;
+};

package/src/components/header/Header.tsx

@@ -16,6 +16,9 @@ import AssetsTableDateCell from '../assets/AssetsTableDateCell';
 import SessionService, { IHubSession } from '../../services/Session';
 import Button from '../button/Button';
 import Select, { createFilter } from 'react-select';
+import { setAccessData } from '../../redux/actions/access';
+import { bindActionCreators } from 'redux';
+import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
 
 export interface IHeaderProps {
     email?: string;
@@ -49,7 +52,7 @@ export interface IHeaderState {
     activeFirstChar: string;
     order: string;
     orderDirection: string;
-    dataLoading: boolean;
+    totalRendersLoading: boolean;
 }
 
 class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
@@ -87,60 +90,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     private readonly orgsToggleRef: any = null;
 
-    private readonly COLUMNS: any[] = [
-        {
-            accessor: 'name',
-            Header: 'Name',
-            width: 115,
-            minWidth: 115,
-            disableSortBy: false
-        },
-        {
-            accessor: 'total_renders',
-            Header: 'Total Renders',
-            width: 60,
-            minWidth: 60,
-            maxWidth: 60,
-            disableSortBy: false
-        },
-        {
-            accessor: 'last_modified_by',
-            Header: 'Last Modified By',
-            width: 60,
-            minWidth: 60,
-            maxWidth: 60,
-            disableSortBy: true
-        },
-        {
-            accessor: 'date_modified',
-            Header: 'Last Modified',
-            width: 65,
-            minWidth: 65,
-            maxWidth: 65,
-            disableSortBy: false,
-            Cell: (cell: any) => (
-                <AssetsTableDateCell
-                    cell={cell}
-                    date_created={false}
-                />
-            )
-        },
-        {
-            accessor: 'date_created',
-            Header: 'Created Date',
-            width: 65,
-            minWidth: 65,
-            maxWidth: 65,
-            disableSortBy: false,
-            Cell: (cell: any) => (
-                <AssetsTableDateCell
-                    cell={cell}
-                    date_created={true}
-                />
-            )
-        }
-    ];
-
     constructor(p: IHeaderProps) {
         super(p);
 
@@ -156,7 +105,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             activeFirstChar: '',
             order: 'date_modified',
             orderDirection: 'desc',
-            dataLoading: false
+            totalRendersLoading: false
         };
 
         this.serviceToggleRef = React.createRef();
@@ -321,18 +270,81 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             activeOrganization
         } = this.props;
 
-        this.setState({ dataLoading: true });
+        this.setState({ totalRendersLoading: true });
 
         SessionService.getAccessData(accessToken, baseUrl, true, activeOrganization)
             .then((res) => {
-                this.setState({ dataLoading: false });
                 this.props.setAccessData(res);
+                this.setState({ totalRendersLoading: false });
             })
             .catch((e) => {
                 console.error(e);
             });
     };
 
+    private getStoriesColumns() {
+        return [
+            {
+                accessor: 'name',
+                Header: 'Name',
+                width: 115,
+                minWidth: 115,
+                disableSortBy: false
+            },
+            {
+                accessor: 'total_renders',
+                Header: 'Total Renders',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <StoryTableTotalRendersCell
+                        loading={this.state.totalRendersLoading}
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'last_modified_by',
+                Header: 'Last Modified By',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: true
+            },
+            {
+                accessor: 'date_modified',
+                Header: 'Last Modified',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'date_created',
+                Header: 'Created Date',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={true}
+                    />
+                )
+            }
+        ];
+    }
+
     public render() {
         const {
             email,
@@ -357,8 +369,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             dropdownToggleColor,
             showServiceDropdown,
             order,
-            orderDirection,
-            dataLoading
+            orderDirection
         } = this.state;
 
         let currentStory: any;
@@ -529,9 +540,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                 storyMenuInner = (
                     <DataTable
-                        columns={this.COLUMNS}
+                        columns={this.getStoriesColumns()}
                         data={sortedStories}
-                        showInterstitial={dataLoading}
                         sortBy={sortBy}
                         noDataText={ImposiumHeader.NO_STORIES_COPY}
                         itemsPerPage={activeOrganizationBlob.stories.length}
@@ -658,6 +668,15 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     }
 }
 
+const mapDispatchToProps = (dispatch) => {
+    return bindActionCreators(
+        {
+            setAccessData
+        },
+        dispatch
+    );
+};
+
 const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
@@ -666,4 +685,4 @@ const mapStateToProps = (state): any => {
     };
 };
 
-export default connect(mapStateToProps, null)(ImposiumHeader);
+export default connect(mapStateToProps, mapDispatchToProps)(ImposiumHeader);

package/src/index.ts

@@ -32,6 +32,7 @@ import Spinner from './components/spinner/Spinner';
 import NoAccess from './components/no-access/NoAccess';
 import ServiceIcon from './components/service-icon/ServiceIcon';
 import { DeterminateLoader } from './components/determinate-loader/DeterminateLoader';
+import { StoryTableTotalRendersCell } from './components/assets/StoryTableTotalRendersCell';
 import AssetsTableDateCell from './components/assets/AssetsTableDateCell';
 import AssetsTablePreviewCell from './components/assets/AssetsTablePreviewCell';
 import AssetsTableDurationCell from './components/assets/AssetsTableDurationCell';
@@ -222,6 +223,7 @@ export {
     AssetsTableTagsFilter,
     AssetsTableTagsPivot,
     AssetsTableComplexTagCell,
+    StoryTableTotalRendersCell,
     AssetField,
     AssetsUploadMenu,
     FontAssetPreview,

package/src/services/API.ts

@@ -151,6 +151,7 @@ interface ITTSOptions {
     text: string;
     voice: string;
     service: string;
+    model?: string;
 }
 
 interface ICancelTokenCache {
@@ -1596,10 +1597,17 @@ export default class API {
 
     public textToSpeech = (options): Promise<any> => {
         const { text, voice, service } = options;
+
+        let url = `/text-to-speech?text=${encodeURIComponent(
+            text
+        )}&voice=${voice}&service=${service}`;
+
+        if (options.model) {
+            url += `&model=${options.model}`;
+        }
+
         return this.doRequest({
-            url: `/text-to-speech?text=${encodeURIComponent(
-                text
-            )}&voice=${voice}&service=${service}`,
+            url,
             method: 'GET',
             responseType: 'blob'
         });