get variant modal to submit to api and update values

web/pages/components/config/constants.tsx

@@ -23,6 +23,8 @@ export const SUCCESS_STATES = {
   },
 };
 
+// CONFIG API ENDPOINTS
+export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
 
 export async function postConfigUpdateToAPI(args: ApiPostArgs) {
   const {

web/pages/components/config/video-variant-form.tsx

@@ -1,6 +1,7 @@
+// This content populates the video variant modal, which is spawned from the variants table.
 import React from 'react';
 import { Slider, Select, Switch, Divider, Collapse } from 'antd';
-import { PRESETS, VideoVariant } from '../../../types/config-section';
+import { FieldUpdaterFunc, PRESET, VideoVariant } from '../../../types/config-section';
 import { ENCODER_PRESETS, DEFAULT_VARIANT_STATE } from './constants';
 import InfoTip from '../info-tip';
 
@@ -46,29 +47,31 @@ const VIDEO_VARIANT_DEFAULTS = {
 
 interface VideoVariantFormProps {
   dataState: VideoVariant;
-  onUpdateField: () => void;
+  onUpdateField: FieldUpdaterFunc;
 }
 
 export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, onUpdateField }: VideoVariantFormProps) {
+  console.log("======form", dataState)
+
   // const [dataState, setDataState] = useState(initialValues);
 
   const handleFramerateChange = (value: number) => {
-    onUpdateField({ fieldname: 'framerate', value });
+    onUpdateField({ fieldName: 'framerate', value });
   };
   const handleVideoBitrateChange = (value: number) => {
-    onUpdateField({ fieldname: 'videoBitrate', value });
+    onUpdateField({ fieldName: 'videoBitrate', value });
   };
   const handleAudioBitrateChange = (value: number) => {
-    onUpdateField({ fieldname: 'audioBitrate', value });
+    onUpdateField({ fieldName: 'audioBitrate', value });
   };
-  const handleEncoderPresetChange = (value: PRESETS) => {
-    onUpdateField({ fieldname: 'encoderPreset', value });
+  const handleEncoderPresetChange = (value: PRESET) => {
+    onUpdateField({ fieldName: 'encoderPreset', value });
   };
   const handleAudioPassChange = (value: boolean) => {
-    onUpdateField({ fieldname: 'audioPassthrough', value });
+    onUpdateField({ fieldName: 'audioPassthrough', value });
   };
   const handleVideoPassChange = (value: boolean) => {
-    onUpdateField({ fieldname: 'videoPassthrough', value });
+    onUpdateField({ fieldName: 'videoPassthrough', value });
   };
 
 
@@ -109,7 +112,10 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
           Encoder Preset:
         </p>
         <div className="form-component">
-          <Select defaultValue={encoderDefaults.defaultValue} style={{ width: 200 }} onChange={handleEncoderPresetChange}>
+          <Select
+            defaultValue={dataState.encoderPreset}
+            value={dataState.encoderPreset}
+            style={{ width: 200 }} onChange={handleEncoderPresetChange}>
             {
               ENCODER_PRESETS.map(preset => (
                 <Option
@@ -135,6 +141,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
           <div className="form-component">
             <Switch
               defaultChecked={dataState.videoPassthrough}
+              checked={dataState.videoPassthrough}
               onChange={handleVideoPassChange}
               checkedChildren="Yes"
               unCheckedChildren="No"
@@ -154,6 +161,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
             tipFormatter={value => `${value} ${videoBRUnit}`}
             disabled={dataState.videoPassthrough === true}
             defaultValue={dataState.videoBitrate}
+            value={dataState.videoBitrate}
             onChange={handleVideoBitrateChange}
             step={videoBitrateDefaults.incrementBy}
             min={videoBRMin}
@@ -188,6 +196,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
                 // tooltipVisible
                 tipFormatter={value => `${value} ${framerateUnit}`}
                 defaultValue={dataState.framerate}
+                value={dataState.framerate}
                 onChange={handleFramerateChange}
                 step={framerateDefaults.incrementBy}
                 min={framerateMin}
@@ -213,6 +222,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
             <div className="form-component">
               <Switch
                 defaultChecked={dataState.audioPassthrough}
+                checked={dataState.audioPassthrough}
                 onChange={handleAudioPassChange}
                 checkedChildren="Yes"
                 unCheckedChildren="No"
@@ -233,6 +243,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
                 tipFormatter={value => `${value} ${audioBRUnit}`}
                 disabled={dataState.audioPassthrough === true}
                 defaultValue={dataState.audioBitrate}
+                value={dataState.audioBitrate}
                 onChange={handleAudioBitrateChange}
                 step={audioBitrateDefaults.incrementBy}
                 min={audioBRMin}
@@ -246,8 +257,6 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
               {selectedAudioBRnote ? <span className="selected-value-note">{selectedAudioBRnote}</span> : null }
             </div>
           </div>
-
-
         </Panel>
       </Collapse>
 

web/pages/components/config/video-variants-table.tsx

@@ -3,39 +3,102 @@ import { Typography, Table, Modal, Button } from 'antd';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/lib/table';
 import { ServerStatusContext } from '../../../utils/server-status-context';
-import { VideoVariant } from '../../../types/config-section';
+import { UpdateArgs, VideoVariant } from '../../../types/config-section';
 import VideoVariantForm from './video-variant-form';
-import { DEFAULT_VARIANT_STATE } from './constants';
+import { API_VIDEO_VARIANTS, DEFAULT_VARIANT_STATE, SUCCESS_STATES, RESET_TIMEOUT,postConfigUpdateToAPI } from './constants';
 
 const { Title } = Typography;
 
 export default function CurrentVariantsTable() {
   const serverStatusData = useContext(ServerStatusContext);
   const [displayModal, setDisplayModal] = useState(false);
+  const [modalProcessing, setModalProcessing] = useState(false);
   const [editId, setEditId] = useState(0);
-  const [dataState, setDataState] = useState(DEFAULT_VARIANT_STATE);
-  const { serverConfig } = serverStatusData || {};
+
+  // current data inside modal
+  const [modalDataState, setModalDataState] = useState(DEFAULT_VARIANT_STATE);
+  
+  const [submitStatus, setSubmitStatus] = useState(null);
+  const [submitStatusMessage, setSubmitStatusMessage] = useState('');
+
+  const { serverConfig, setFieldInConfigState } = serverStatusData || {};
   const { videoSettings } = serverConfig || {};
   const { videoQualityVariants } = videoSettings || {};
+
+  let resetTimer = null;
+
   if (!videoSettings) {
     return null;
   }
 
-  const handleModalOk = () => {
-    setDisplayModal(false);
-    setEditId(-1);
+  const resetStates = () => {
+    setSubmitStatus(null);
+    setSubmitStatusMessage('');
+    resetTimer = null;
+    clearTimeout(resetTimer);
   }
+
   const handleModalCancel = () => {
     setDisplayModal(false);
     setEditId(-1);
+    setModalDataState(DEFAULT_VARIANT_STATE);
+  }
+
+  // posts all the variants at once as an array obj
+  const postUpdateToAPI = async (postValue: any) => {
+    await postConfigUpdateToAPI({
+      apiPath: API_VIDEO_VARIANTS,
+      data: { value: postValue },
+      onSuccess: () => {
+        setFieldInConfigState({ fieldName: 'videoQualityVariants', value: postValue, path: 'videoSettings' });
+
+        // close modal
+        setModalProcessing(false);
+        handleModalCancel();
+
+        setSubmitStatus('success');
+        setSubmitStatusMessage('Variants updated.');
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+      onError: (message: string) => {
+        setSubmitStatus('error');
+        setSubmitStatusMessage(message);
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+      },
+    });
+  };
+
+  // on Ok, send all of dataState to api
+  // show loading
+  // close modal when api is done
+  const handleModalOk = () => {
+    setModalProcessing(true);
+    
+    const postData = [
+      ...videoQualityVariants,
+    ];
+    if (editId === -1) {
+      postData.push(modalDataState);
+    } else {
+      postData.splice(editId, 1, modalDataState);
+    }
+    console.log("==== submit postData", postData)
+
+    postUpdateToAPI(postData);
   }
 
-  const handleUpdateField = (fieldName: string, value: any) => {
-    setDataState({
-      ...dataState,
+  const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
+    console.log("===update field", fieldName, value)
+    setModalDataState({
+      ...modalDataState,
       [fieldName]: value,
     });
   }
+
+  const {
+    icon: newStatusIcon = null,
+    message: newStatusMessage = '',
+  } = SUCCESS_STATES[submitStatus] || {};
   
   const videoQualityColumns: ColumnsType<VideoVariant>  = [
     {
@@ -50,13 +113,7 @@ export default function CurrentVariantsTable() {
       render: (bitrate: number) =>
         !bitrate ? "Same as source" : `${bitrate} kbps`,
     },
-    // {
-    //   title: "Framerate",
-    //   dataIndex: "framerate",
-    //   key: "framerate",
-    //   render: (framerate: number) =>
-    //     !framerate ? "Same as source" : `${framerate} fps`,
-    // },
+
     {
       title: "Encoder preset",
       dataIndex: "encoderPreset",
@@ -64,47 +121,38 @@ export default function CurrentVariantsTable() {
       render: (preset: string) =>
         !preset ? "n/a" : preset,
     },
-    // {
-    //   title: "Audio bitrate",
-    //   dataIndex: "audioBitrate",
-    //   key: "audioBitrate",
-    //   render: (bitrate: number) =>
-    //     !bitrate ? "Same as source" : `${bitrate} kbps`,
-    // },
-    // {
-    //   title: "Audio passthrough",
-    //   dataIndex: "audioPassthrough",
-    //   key: "audioPassthrough",
-    //   render: (item: boolean) => item ? <CheckOutlined />: <CloseOutlined />,
-    // },
-    // {
-    //   title: "Video passthrough",
-    //   dataIndex: "videoPassthrough",
-    //   key: "audioPassthrough",
-    //   render: (item: boolean) => item ? <CheckOutlined />: <CloseOutlined />,
-    // },
     {
       title: '',
       dataIndex: '',
       key: 'edit',
       render: (data: VideoVariant) => (
-      <Button type="primary" size="small" onClick={() =>{
-        setEditId(data.key - 1);
-        setDisplayModal(true);
-      }}>
-        Edit
-      </Button>
+        <Button type="primary" size="small" onClick={() => {
+          const index = data.key - 1;
+          setEditId(index);
+          setModalDataState(videoQualityVariants[index]);
+          setDisplayModal(true);
+        }}>
+          Edit
+        </Button>
       ),
     },
   ];
 
+  const statusMessage = (
+    <div className={`status-message ${submitStatus || ''}`}>
+      {newStatusIcon} {newStatusMessage} {submitStatusMessage}
+    </div>
+  );
 
   const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index + 1, ...variant }));
 
+  // console.log("=========", { modalDataState })
   return (
     <>
       <Title level={3}>Current Variants</Title>
       
+      {statusMessage}
+
       <Table
         pagination={false}
         size="small"
@@ -117,13 +165,23 @@ export default function CurrentVariantsTable() {
         visible={displayModal}
         onOk={handleModalOk}
         onCancel={handleModalCancel}
-        // confirmLoading={confirmLoading}
+        confirmLoading={modalProcessing}
       >
-
-        <VideoVariantForm initialValues={{...videoQualityVariants[editId]}} onUpdateField={handleUpdateField} />
-
-
+        <VideoVariantForm
+          dataState={{...modalDataState}}
+          onUpdateField={handleUpdateField}
+        />
+        
+        {statusMessage}
       </Modal>
+      <br />
+      <Button type="primary" onClick={() => {
+          setEditId(-1);
+          setModalDataState(DEFAULT_VARIANT_STATE);
+          setDisplayModal(true);
+        }}>
+        Add a new variant
+      </Button>
 
     </>
   );

web/pages/config-video.tsx

@@ -43,6 +43,9 @@ export default function VideoConfig() {
       <Title level={2}>Video configuration</Title>
       <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
 
+        <div style={{ wordBreak: 'break-word'}}>
+          {JSON.stringify(videoSettings)}
+        </div>
         <div className="config-video-misc">
           <Form
             form={form}

web/types/config-section.ts

@@ -20,9 +20,11 @@ export interface ToggleSwitchProps {
   disabled?: boolean;
 }
 
+export type FieldUpdaterFunc = (args: UpdateArgs) => void;
+
 export interface UpdateArgs {
   fieldName: string;
-  value: string;
+  value: any;
   path?: string;
 }
 
@@ -50,11 +52,11 @@ export interface ConfigInstanceDetailsFields {
 }
 
 
-export type PRESETS = 'fast' | 'faster' | 'veryfast' | 'superfast' | 'ultrafast';
+export type PRESET = 'fast' | 'faster' | 'veryfast' | 'superfast' | 'ultrafast';
 
 export interface VideoVariant {
   key?: number; // unique identifier generated on client side just for ant table rendering
-  encoderPreset: PRESETS,
+  encoderPreset: PRESET,
   framerate: number;
 
   audioPassthrough: boolean;