WIP: obs form fields.

app/components-react/obs/ObsForm.tsx

@@ -122,13 +122,19 @@ function ObsInput(p: IObsInputProps) {
       if (textVal.multiline) {
         return <TextAreaInput {...inputProps} debounce={300} />;
       } else if (textVal.infoField) {
-        let style = {};
-        if (textVal.infoType == obs.ETextInfoType.Warning) {
-          Object.assign(style, { color: 'var(--info)' });
-        } else if (textVal.infoType == obs.ETextInfoType.Error) {
-          Object.assign(style, { color: 'var(--warning)' });
+        const infoField = (textVal.infoField as unknown) as obs.ETextInfoType;
+        switch (textVal.infoField) {
+          case infoField === obs.ETextInfoType.Warning:
+            return (
+              <InputWrapper style={{ color: 'var(--info)' }}>{textVal.description}</InputWrapper>
+            );
+          case infoField === obs.ETextInfoType.Error:
+            return (
+              <InputWrapper style={{ color: 'var(--warning)' }}>{textVal.description}</InputWrapper>
+            );
+          default:
+            return <InputWrapper>{textVal.description}</InputWrapper>;
         }
-        return <InputWrapper style={style}>{textVal.description}</InputWrapper>;
       } else {
         return <TextInput {...inputProps} isPassword={inputProps.masked} />;
       }
@@ -376,10 +382,13 @@ export function ObsTabbedFormGroup(p: IObsTabbedFormGroupProps) {
           )}
 
           {currentTab === 'Audio' && sectionProps.nameSubCategory.startsWith('Audio - Track') && (
-            <ObsForm
-              value={sectionProps.parameters}
-              onChange={formData => p.onChange(formData, ind)}
-            />
+            <div style={{ backgroundColor: 'var(--checkbox)', padding: '8px' }}>
+              <h2 className="section-title">{$t(sectionProps.nameSubCategory)}</h2>
+              <ObsForm
+                value={sectionProps.parameters}
+                onChange={formData => p.onChange(formData, ind)}
+              />
+            </div>
           )}
         </div>
       ))}
@@ -432,8 +441,10 @@ function ObsInputResolutionField(p: IObsInputResolutionFieldProps) {
   const [customResolution, setCustomResolution] = useState(p.inputProps.value);
 
   // const form = useForm();
+  const formContext = useFormContext();
 
   function onChange(val: string) {
+    formContext?.antForm.validateFields();
     // form.validateFields();
     setCustomResolution(val);
 
@@ -443,6 +454,7 @@ function ObsInputResolutionField(p: IObsInputResolutionFieldProps) {
   }
 
   function onClick() {
+    formContext?.antForm.validateFields();
     // form.validateFields();
     const isValid = /^[0-9]+x[0-9]+$/.test(customResolution);
     if (custom && !isValid) return;
@@ -478,6 +490,12 @@ function ObsInputResolutionField(p: IObsInputResolutionFieldProps) {
           {...p.inputProps}
           allowClear={false}
           options={p.options}
+          rules={[
+            {
+              message: $t('The resolution must be in the format [width]x[height] (i.e. 1920x1080)'),
+              pattern: /^[0-9]+x[0-9]+$/,
+            },
+          ]}
           placeholder={$t('Select Option')}
         />
       )}

app/components-react/windows/settings/ObsSettings.tsx

@@ -16,7 +16,9 @@ export function ObsSettings(p: { page: string }) {
   setPage(p.page);
   const PageComponent = getPageComponent(p.page);
 
-  const showTabs = ['Output', 'Audio', 'Advanced'].includes(p.page);
+  // TODO: Comment in when switched to new API
+  // const showTabs = ['Output', 'Audio', 'Advanced'].includes(p.page);
+  const showTabs = false;
   return (
     <div className={css.obsSettingsWindow}>
       {showTabs && <Tabs onChange={setDisplay} />}

app/themes.g.less

@@ -45,6 +45,7 @@
   --dark-background: @light-2;
   --section: @light-3;
   --section-alt: @light-3;
+  --section-wrapper: @dark-1;
   --titlebar: @dark-4;
   --title: @dark-2;
   --titlebar-title: @light-5;
@@ -129,6 +130,7 @@
   --dark-background: @dark-2;
   --section: @dark-2;
   --section-alt: @dark-4;
+  --section-wrapper: @dark-1;
   --titlebar: @dark-1;
   --titlebar-title: @light-5;
   --title: @light-1;
@@ -196,6 +198,7 @@
   --dark-background: @primedark-2;
   --section: @primedark-2;
   --section-alt: @primedark-4;
+  --section-wrapper: @dark-1;
   --titlebar: @primedark-1;
   --titlebar-title: @primelight-1;
   --title: @primelight-1;
@@ -263,6 +266,7 @@
   --dark-background: @primelight-2;
   --section: @primelight-2;
   --section-alt: @primelight-4;
+  --section-wrapper: @dark-1;
   --titlebar: @primedark-4;
   --title: @primedark-2;
   --titlebar-title: @primelight-1;