@imposium-hub/components 2.2.44-7 → 2.2.44

package/less/components/assets.less

@@ -1,29 +1,30 @@
-.new-tag {
+
+.new-tag{
     display: inline-block;
-    width: 150px;
-    height: @inputHeight;
+    width:150px;
+    height:@inputHeight;
     vertical-align: top;
     margin-top: 1px;
-    margin-left: 2px;
-    input {
-        width: 100%;
-        height: @inputHeight;
+    margin-left:2px;
+    input{
+        width:100%;
+        height:@inputHeight;
         display: inline-block;
-        background: none;
-        border: none;
-        color: @textDefault;
-        font-size: @fontSizeSmall;
-        box-sizing: border-box;
+        background:none;
+        border:none;
+        color:@textDefault;
+        font-size:@fontSizeSmall;
+        box-sizing:border-box;
         vertical-align: top;
-        border-radius: 0px;
-        appearance: none;
+        border-radius:0px;
+        appearance:none;
 
-        &:hover {
-            background: rgba(0, 0, 0, 0.2);
+        &:hover{
+            background:rgba(0,0,0,0.2);
         }
 
-        &:focus {
-            background: rgba(0, 0, 0, 0.2);
+        &:focus{
+            background:rgba(0,0,0,0.2);
         }
     }
 }
@@ -41,52 +42,9 @@
     display: none;
 }
 
-.no-ongoing-uploads {
-    text-align: center;
-    margin: auto;
-}
-
-.uploads-dropzone {
-    &.show {
-        position: absolute;
-        top: 0;
-        height: 100%;
-        z-index: 200000;
-    }
-
-    &.table-hover {
-        .uploads-menu {
-            display: none;
-        }
-    }
-    &.asset-over {
-        .uploads-menu {
-            opacity: 0.3;
-        }
-        .overlay {
-            border-style: dashed;
-            border-color: hsl(225, 100%, 50%);
-            border-width: medium;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            -ms-transform: translate(-50%, -50%);
-            text-align: center;
-            height: 98%;
-            width: 99%;
-            display: flex;
-            z-index: 1;
-            p {
-                vertical-align: middle;
-                margin: auto;
-            }
-        }
-    }
-}
-
 .uploads-menu {
-    height: 100%;
+    width: 670px;
+    height: 175px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -103,12 +61,11 @@
 
     .uploads-list {
         width: 100%;
-        height: 100%;
         box-sizing: border-box;
         margin-top: 5px;
         padding: 5px;
         border-top: 1px solid #494949;
-        margin-bottom: 25px;
+
         .ongoing-upload {
             display: flex;
             flex-direction: column;
@@ -117,30 +74,15 @@
         }
     }
 
-    .uploads-confirm {
-        display: flex;
-        flex-direction: row;
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        border-top: 1px solid #494949;
-        background: #272727;
-        .checkbox-field {
-            top: 2px;
-        }
-        .imposium-btn {
-            padding-top: 3px;
-        }
-    }
+    .form-field{
 
-    .form-field {
-        vertical-align: top;
-        label {
-            width: 120px;
+        vertical-align:top;
+        label{
+            width:120px;
         }
 
-        .form-field-content {
-            width: calc(100% - 120px);
+        .form-field-content{
+            width:calc(100% - 120px);
         }
     }
 }
@@ -149,9 +91,9 @@
     padding: 7px;
     border-bottom: 1px solid #494949;
     background: @background;
-    display: inline-block;
-    &:hover {
-        background: @backgroundLight;
+    display:inline-block;
+    &:hover{
+        background:@backgroundLight;
     }
 }
 
@@ -185,8 +127,8 @@
 }
 
 .tags-column {
-    position: relative;
-    padding-right: 50px;
+    position:relative;
+    padding-right:50px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -198,36 +140,34 @@
     .form-field {
         margin: 0 0.6rem 0 0;
 
-        .form-field-buttons {
+        .form-field-buttons{
             height: 22px;
         }
-        textarea {
+        textarea{
             height: unset;
         }
     }
 }
 
-.tags-column,
-.new-tag,
-.asset-details {
+.tags-column, .new-tag, .asset-details {
     .rta {
         margin-left: 5px;
         .rta__textarea {
             height: 22px;
         }
-        .rta__autocomplete {
+        .rta__autocomplete{
             position: absolute;
             top: 22px !important;
             z-index: 1;
             background: #161616;
             border: 1px solid #272727;
             overflow: auto;
-            .rta__list {
+            .rta__list{
                 list-style: none;
                 height: 60px;
-                .rta__item {
+                .rta__item{
                     padding-bottom: 1px;
-                    .rta__entity--selected {
+                    .rta__entity--selected{
                         background-color: #353535;
                     }
                     .variable {
@@ -239,12 +179,11 @@
     }
 }
 
-.tags-column,
-.asset-details {
+.tags-column, .asset-details {
     .rta .rta__autocomplete {
         left: 105px !important;
     }
-}
+} 
 
 .tags-column .rta .rta__autocomplete {
     width: 173px;
@@ -279,82 +218,53 @@
     margin-top: -3px;
 }
 
-.asset-status-cell {
-    width: 100%;
-    height: 100%;
+.asset-status-cell{
+    width:100%;
+    height:100%;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    .status-indicator {
-        width: 5px;
-        height: 100%;
-        box-sizing: border-box;
+    .status-indicator{
+        width:5px;
+        height:100%;
+        box-sizing:border-box;
 
-        &.processing {
-            background: #c5b73d;
+        &.processing{
+            background:#c5b73d;
         }
 
-        &.complete {
-            background: #307f35;
+        &.complete{
+            background:#307f35;
         }
     }
 }
 
-.ongoing-upload-inner {
+.ongoing-upload-inner{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    width: 100%;
-    .tags-column {
-        width: unset;
-        padding: unset;
-        bottom: 2px;
-        margin-right: auto;
-    }
-
-    .upload-filename {
-        display: inline-block;
-        background: #1d1d1d;
-        border: none;
-        color: #dfdfdf;
-        font-size: 12px;
-        box-sizing: border-box;
-        vertical-align: top;
-        height: 20px;
-        width: 200px;
-        font-family: 'Roboto Condensed', sans-serif;
-        border-radius: 0;
-        appearance: none;
-        padding: 4px;
-        margin-right: 5px;
-    }
-
-    .imposium-btn {
-        height: fit-content;
-        position: relative;
-        top: 2px;
-    }
+    width: 100%
 }
 
-.asset-preview-background {
-    border: 1px solid @backgroundDark;
+.asset-preview-background{
+    border:1px solid @backgroundDark;
     background-color: @background;
-
-    &.transparent {
+    
+    &.transparent{
         .chess;
     }
 
-    &.hidden {
+    &.hidden{
         opacity: 0;
     }
 }
-.close-icon-preview {
+.close-icon-preview{
     z-index: 9999 !important;
     justify-content: flex-end;
     display: flex;
     height: 30px !important;
-    align-items: center;
+    align-items: center
 }
 
 .error-preview {
@@ -365,4 +275,4 @@
     &.audio {
         height: 30px !important;
     }
-}
+}

package/less/components/button.less

@@ -16,12 +16,6 @@
 	vertical-align: top;
 	min-width:20px;
 	
-	&.small{
-		font-size:@fontSizeSmall;
-		line-height: @fontSizeSmall;
-		padding:2px 2px 2px 2px;
-	}
-
 	&.large{
 		font-size:@fontSizeLarge + 1;
 		line-height: @fontSizeLarge;
@@ -162,4 +156,4 @@
 	box-sizing: border-box;
 	line-height: 19px;
 	margin:0px;
-}
+}

package/less/components/context-menu.less

@@ -43,7 +43,6 @@
 	padding: 3px;
     box-sizing: border-box; 
     cursor: pointer;
-	font-size: 12px;
 	&:hover {
 		&:not(.contextmenu__item--disabled) {
 			background-color: #393939;

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,10 +35,6 @@
             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;
@@ -51,17 +47,20 @@
                 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;
@@ -78,8 +77,7 @@
                 font-size: 11px;
             }
 
-            .searchable-sort-area,
-            .filterable-cell-wrapper {
+            .searchable-sort-area, .filterable-cell-wrapper {
                 display: flex;
                 align-items: center;
             }
@@ -124,10 +122,6 @@
 
                 &.overflow-visible {
                     overflow: visible;
-                    &.pin {
-                        position: sticky;
-                        right: 0px;
-                    }
                 }
 
                 .form-field-content {

package/less/components/publish-wizard.less

@@ -147,23 +147,3 @@
     background-color: @backgroundDark;
     font-size:14px;
 }
-
-.batch-job-error {
-    padding:10px;
-    color: red;
-    background-color: @backgroundDark;
-    h2 {
-        color: red;
-    }
-    table{
-      td{
-        min-width:75px;
-        vertical-align: top;
-      }
-    }
-  
-    .error-title{
-      font-weight: bold;
-      font-size:14px;
-    }
-}

package/less/components/story-previewer.less

@@ -253,7 +253,6 @@
 
         .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-7",
+    "version": "2.2.44",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -34,7 +34,6 @@
     },
     "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
     "dependencies": {
-        "@imposium-hub/react-color": "^2.19.4",
         "ansi_up": "^5.1.0",
         "auth0-js": "^9.11.3",
         "cogo-toast": "^4.2.3",
@@ -44,6 +43,7 @@
         "js-cookie": "^2.2.1",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
+        "react-color": "^2.18.0",
         "react-merge-refs": "^1.1.0",
         "react-moveable": "^0.26.1",
         "react-transition-group": "^4.4.5"
@@ -55,7 +55,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-1",
         "axios": "^0.21.1",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
@@ -68,7 +68,7 @@
         "react-resize-detector": "^6.7.1",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
-        "react-tooltip": "^5.27.0",
+        "react-tooltip": "^4.2.21",
         "smpte-timecode": "^1.2.3"
     },
     "devDependencies": {
@@ -80,7 +80,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-1",
         "@storybook/addon-actions": "^6.4.22",
         "@storybook/addon-docs": "^6.4.22",
         "@storybook/addon-essentials": "^6.4.22",
@@ -118,7 +118,7 @@
         "react-resize-detector": "^6.7.1",
         "react-spinners": "^0.6.1",
         "react-table": "^7.7.0",
-        "react-tooltip": "^5.27.1",
+        "react-tooltip": "^4.2.21",
         "run-sequence": "^2.2.1",
         "sb": "^6.4.22",
         "smpte-timecode": "^1.2.3",

package/src/Util.ts

@@ -26,8 +26,6 @@ export const getFirstStoryInOrg = (orgId: string, access: any): string => {
 };
 
 export const checkStoryId = (storyId: string, orgId: string, access: any): any => {
-    if (!access) return false;
-
     const activeOrg: any = getActiveOrg(orgId, access);
     if (activeOrg) {
         const story = activeOrg.stories.find((s) => s.id === storyId);
@@ -40,7 +38,6 @@ export const checkStoryId = (storyId: string, orgId: string, access: any): any =
         return false;
     }
 };
-
 export const getLastModifiedStoryInOrg = (orgId: string, access: any): string => {
     const activeOrg: any = getActiveOrg(orgId, access);
     const sortByLastModified = activeOrg.stories.sort((a, b) => b.date_modified - a.date_modified);
@@ -347,16 +344,6 @@ export const formattedTime = (millis: number) => {
     return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
 
-export const formatAudioDuration = (duration: number) => {
-    const hours: any = Math.floor(duration / 3600);
-    const minutes: any = Math.floor((duration % 3600) / 60);
-    const seconds: any = duration % 60;
-
-    return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${
-        seconds < 10 ? '0' : ''
-    }${seconds.toFixed(2)}`;
-};
-
 export const s3Url = (cloudFrontUrl: string, distro, origin): string => {
     if (cloudFrontUrl) {
         return cloudFrontUrl.replace(distro, origin);

package/src/components/Tooltip.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Tooltip as ReactTooltip, PlacesType } from 'react-tooltip';
+import ReactTooltip, { Place } from 'react-tooltip';
 
 export interface IToolTipConfig {
     content: string;
-    position?: PlacesType;
+    position?: Place;
     theme?: string;
 }
 
@@ -12,8 +12,8 @@ export const renderTooltipProps = (id: string, config: IToolTipConfig | string):
     if (config) {
         const content = typeof config === 'object' ? config.content : config;
         return {
-            'data-tooltip-content': content,
-            'data-tooltip-id': id
+            'data-tip': content,
+            'data-for': id
         };
     } else {
         return {};
@@ -25,7 +25,7 @@ export const renderTooltip = (id: string, config: IToolTipConfig | string): any
 
     if (config && tooltipLayer) {
         let theme = 'light';
-        let place: PlacesType = 'top';
+        let place: Place = 'top';
 
         if (typeof config === 'object') {
             theme = config.theme ? config.theme : 'light';
@@ -34,12 +34,12 @@ export const renderTooltip = (id: string, config: IToolTipConfig | string): any
 
         const tooltipComponent = (
             <ReactTooltip
-                data-tooltip-place={place}
-                data-tooltip-offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
+                place={place}
+                offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
                 id={id}
                 className={`imposium-button-tooltip-${theme}`}
-                delayShow={500}
-                noArrow={true}
+                delayShow={1000}
+                effect='solid'
             />
         );
 

package/src/components/advanced-number-field/AdvancedNumberField.tsx

@@ -5,7 +5,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface IAdvancedNumberFieldProps {
     buttons?: any;
-    label?: any;
+    label?: string;
     placeholder?: string;
     readOnly?: boolean;
     value: number;

package/src/components/anchor-field/AnchorField.tsx

@@ -21,7 +21,7 @@ interface IAnchorFieldProps {
     labelPosition?: string;
     tooltip?: IToolTipConfig | string;
     width?: string | number;
-    label?: any;
+    label?: string;
     labelWidth?: string | number;
 }
 

package/src/components/app-wrapper/AppWrapper.tsx

@@ -151,9 +151,14 @@ class AppWrapper extends React.Component<IAppWrapperProps, IAppWrapperState> {
         const { auth, access, storyId, onAuthenticated } = this.props;
         const activeOrgId: string = this.determineActiveOrganization(auth, access);
         let activeStoryId: string = SessionService.getSession().story_id;
+        let activeOrg: any;
 
-        if (storyId) {
-            activeStoryId = storyId;
+        if (this.props.storyId) {
+            activeOrg = access.organizations.find((o: any) => o.id === activeOrgId);
+
+            if (activeOrg && activeOrg.stories.find((s: any) => s.id === storyId)) {
+                activeStoryId = storyId;
+            }
         }
 
         onAuthenticated(activeOrgId, activeStoryId);

package/src/components/assets/AssetsTableDurationCell.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { ASSET_TYPES } from '../../constants/assets';
-import { formatAudioDuration, getDuration } from '../../Util';
 
 interface IAssetsTableDurationCell {
     cell: any;
@@ -12,29 +10,13 @@ const AssetsTableDurationCell: React.FC<IAssetsTableDurationCell> = (
     const {
         cell: {
             row: {
-                original,
-                original: { type, data, rate, frame_count }
+                original: { duration }
             }
         }
     } = props;
 
-    let duration = rate && frame_count ? getDuration(frame_count, rate) : '';
-
-    if (type === ASSET_TYPES.IMAGE_SEQUENCE) {
-        duration = `${original.duration} frames`;
-    }
-
-    if (type === ASSET_TYPES.VIDEO_COMPOSITION) {
-        const { frames, rate: frame_rate } = JSON.parse(data);
-        duration = getDuration(frames, frame_rate);
-    }
-
-    if (type === ASSET_TYPES.AUDIO) {
-        duration = formatAudioDuration(original.duration);
-    }
-
     if (duration !== null && duration !== undefined) {
-        return <div className='asset-duration-cell'>{duration}</div>;
+        return <div className='asset-duration-cell'>{secondsToTime(duration)}</div>;
     } else {
         return <div className='asset-duration-cell'></div>;
     }