@imposium-hub/components 1.60.14 → 1.60.15

package/src/components/asset-details/AssetDetails.tsx

@@ -54,7 +54,7 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
     public render = (): JSX.Element => {
         const {
             asset,
-            asset: { type, rate, frame_count },
+            asset: { type, rate, frame_count, width, height },
             columns,
             newAsset,
             assetTags
@@ -114,6 +114,22 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
             />
         );
 
+        const widthField = (
+            <TextField
+                label={copy.width}
+                width={isTwoCol ? '25%' : '50%'}
+                value={width}
+            />
+        );
+
+        const heightField = (
+            <TextField
+                label={copy.height}
+                width={isTwoCol ? '25%' : '50%'}
+                value={height}
+            />
+        );
+
         const tags = (
             <FieldWrapper
                 label={copy.assetTag}
@@ -140,6 +156,7 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
                 readOnly
             />
         );
+
         return (
             <div className='asset-details'>
                 <h2>{title}</h2>
@@ -150,6 +167,8 @@ class AssetDetails extends React.Component<IAssetDetailsProps, IAssetDetailsStat
                 {dateField}
                 {newTag}
                 {tags}
+                {width ? widthField : null}
+                {height ? heightField : null}
                 {type !== ASSET_TYPES.VIDEO ? null : frameRateField}
                 {type !== ASSET_TYPES.VIDEO ? null : durationField}
             </div>

package/src/components/assets/AssetsTableNameFilter.tsx

@@ -15,6 +15,7 @@ class AssetsTableNameFilter extends React.PureComponent<IAssetsTableNameFilterPr
 
         return (
             <TextField
+                className='asset-name'
                 submittable
                 submittableType='search'
                 value={assetFilters.name}

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -172,6 +172,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 }
             );
         }
+
+        this.createExperience();
     }
 
     public componentDidUpdate(prevProps, prevState) {
@@ -682,6 +684,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                         maxWidth={mWidth}
                         allowManualScale={true}
                         maxHeight={mHeight}
+                        autoPlay
                     />
                 );
             } else if (type === OUTPUT_TYPES.LOG) {

package/src/components/text-field/TextField.tsx

@@ -43,6 +43,7 @@ interface ITextFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
+    className?: string;
 }
 
 interface ITextFieldState {
@@ -479,10 +480,10 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public render() {
-        const { label, width, tooltip, info, labelPosition, labelWidth } = this.props;
+        const { label, width, tooltip, info, labelPosition, labelWidth, className } = this.props;
         return (
             <FieldWrapper
-                customClass='text-field'
+                customClass={`text-field ${className}`}
                 label={label}
                 buttons={this.renderButtons()}
                 tooltip={tooltip}

package/src/constants/copy.ts

@@ -45,7 +45,9 @@ export const assets = {
     assetTag: 'Tags',
     sessionExpired: 'Your session has expired, please log in again to continue.',
     rate: 'Frame Rate',
-    duration: 'Duration'
+    duration: 'Duration',
+    width: 'Width',
+    height: 'Height'
 };
 
 export const previewer = {