Add confirmation popup for codec selection. Closes https://github.com/owncast/owncast/issues/891

web/components/config/video-codec-selector.tsx

@@ -25,6 +25,8 @@ export default function CodecSelector() {
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const { setMessage } = useContext(AlertMessageContext);
   const [selectedCodec, setSelectedCodec] = useState(videoCodec);
+  const [pendingSaveCodec, setPendingSavecodec] = useState(videoCodec);
+  const [confirmPopupVisible, setConfirmPopupVisible] = React.useState(false);
 
   let resetTimer = null;
 
@@ -38,17 +40,23 @@ export default function CodecSelector() {
     clearTimeout(resetTimer);
   };
 
-  async function handleChange(value) {
+  function handleChange(value) {
-    console.log(`selected ${value}`);
+    setPendingSavecodec(value);
-    setSelectedCodec(value);
+    setConfirmPopupVisible(true);
+  }
+
+  async function save() {
+    setSelectedCodec(pendingSaveCodec);
+    setPendingSavecodec('');
+    setConfirmPopupVisible(false);
 
     await postConfigUpdateToAPI({
       apiPath: API_VIDEO_CODEC,
-      data: { value: value },
+      data: { value: pendingSaveCodec },
       onSuccess: () => {
         setFieldInConfigState({
           fieldName: 'videoCodec',
-          value: value,
+          value: pendingSaveCodec,
           path: 'videoSettings',
         });
         setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Video codec updated.'));
@@ -113,8 +121,8 @@ export default function CodecSelector() {
         Video Codec
       </Title>
       <p className="description">
-        If you have access to specific hardware with the drivers and software installed for them, you
+        If you have access to specific hardware with the drivers and software installed for them,
-        may be able to improve your video encoding performance.
+        you may be able to improve your video encoding performance.
         <p>
           <a
             href="https://owncast.online/docs/codecs?source=admin"
@@ -127,6 +135,14 @@ export default function CodecSelector() {
         </p>
       </p>
       <div className="segment-slider-container">
+        <Popconfirm
+          title={`Are you sure you want to change your video codec to ${pendingSaveCodec} and understand what this means?`}
+          visible={confirmPopupVisible}
+          placement={'leftBottom'}
+          onConfirm={save}
+          okText={'Yes'}
+          cancelText={'No'}
+        >
           <Select
             defaultValue={selectedCodec}
             value={selectedCodec}
@@ -135,7 +151,9 @@ export default function CodecSelector() {
           >
             {items}
           </Select>
+        </Popconfirm>
         <FormStatusIndicator status={submitStatus} />
+
         <p id="selected-codec-note" className="selected-value-note">
           {description}
         </p>