@imposium-hub/components 1.60.9 → 1.60.11

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import Timecode from 'smpte-timecode';
 import { TIMECODE } from '../../constants/timecode';
-import { toFixed } from '../../Util';
+import { getSMPTE } from '../../Util';
 
 interface ISMPTEFieldProps {
     label?: string;
@@ -12,6 +11,7 @@ interface ISMPTEFieldProps {
     tooltip?: IToolTipConfig | string;
     width?: string | number;
     onChange?(e): void;
+    onBlur?(e): void;
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
@@ -73,88 +73,49 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
         });
     }
 
-    private validate(e?) {
+    private onBlur(e?) {
         const val = e ? e.target.value : this.inputRef.current.value;
-
-        const isValidSMPTETimeCode = new RegExp(this.regex);
-        const error = isValidSMPTETimeCode.test(val);
+        const isValid = this.smptValidator(val);
 
         if (e && e.key === 'Enter') {
-            this.setDuration(error, val);
+            this.setDuration(isValid, val);
         }
 
         if (e === undefined) {
-            this.setDuration(error, val);
+            this.setDuration(isValid, val);
         }
     }
 
-    private setDuration(error, val) {
-        if (error) {
-            this.setState({ error: !error, errorMsg: null });
-            const smpte = this.getSMPTE(val);
-            if (smpte) {
-                this.props.onChange(smpte);
-            }
-        } else {
-            this.setState({
-                error: !error,
-                errorMsg: TIMECODE.ERROR
-            });
+    private onChange() {
+        const val = this.inputRef.current.value;
+        const isValid = this.smptValidator(val);
+
+        if (isValid) {
+            this.props.onChange(val);
         }
     }
 
-    private getSMPTE(val) {
+    private setDuration(isValid, val) {
         const { frameRate } = this.props;
-        const rates = Math.ceil(frameRate);
-
-        const checkStr = val.includes(';');
-        const valArray = checkStr
-            ? val.replace(';', ':').split(':').map(Number)
-            : val.split(':').map(Number);
-
-        const toFrames = this.toFrames(valArray, rates);
-
-        let duration: string = new Timecode(toFrames, rates).toString();
-
-        if (parseFloat(toFixed(frameRate, 3)) === 29.97) {
-            duration = duration.replace(/:(?=[^:]*$)/, ';');
+        if (isValid) {
+            const smpte = getSMPTE(frameRate, val);
+            if (smpte) {
+                this.props.onBlur(smpte);
+            }
         }
-
-        this.inputRef.current.value = duration;
-        return duration;
     }
 
-    private toFrames(array, rates): number {
-        const length = array.length;
-
-        let hours = 0;
-        let mins = 0;
-        let secs = 0;
-        let frames = 0;
-
-        if (length === 1) {
-            frames = array[0];
-        }
-
-        if (length === 2) {
-            secs = array[0] * rates;
-            frames = array[1];
-        }
-
-        if (length === 3) {
-            mins = array[0] * 60 * rates;
-            secs = array[1] * rates;
-            frames = array[2];
-        }
+    private smptValidator(val) {
+        const isValidSMPTETimeCode = new RegExp(this.regex);
+        const isValid = isValidSMPTETimeCode.test(val);
+        const errorMsg = isValid ? null : TIMECODE.ERROR;
 
-        if (length === 4) {
-            hours = array[0] * 3600 * rates;
-            mins = array[1] * 60 * rates;
-            secs = array[2] * rates;
-            frames = array[3];
-        }
+        this.setState({
+            error: !isValid,
+            errorMsg
+        });
 
-        return hours + mins + secs + frames;
+        return isValid;
     }
 
     public render() {
@@ -175,8 +136,9 @@ class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFieldState>
                     pattern={this.regex}
                     defaultValue={value}
                     placeholder={placeholder}
-                    onBlur={() => this.validate()}
-                    onKeyDown={(e) => this.validate(e)}
+                    onBlur={() => this.onBlur()}
+                    onKeyDown={(e) => this.onBlur(e)}
+                    onChange={(e) => this.onChange()}
                 />
             </FieldWrapper>
         );

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

@@ -776,7 +776,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             <>
                 <TextField
                     readOnly={true}
-                    width='360px'
+                    width='180px'
                     label={copy.expIdField}
                     showCopy={true}
                     value={expId}

package/src/index.ts

@@ -137,7 +137,8 @@ import {
     validateAssetMimetype,
     formatDateDefault,
     validateAccessLevel,
-    formattedTime
+    formattedTime,
+    getSMPTE
 } from './Util';
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
@@ -264,6 +265,7 @@ export {
     mimetypeConformsToOverlay,
     validateAssetMimetype,
     toFixed,
+    getSMPTE,
     padStart,
     formatDateDefault,
     ASSET_TYPES,