Ran codemod upgrade tool

web/components/admin/VideoLatency.tsx

@@ -95,7 +95,7 @@ export const VideoLatency: FC = () => {
   };
 
   return (
-    <div className="config-video-latency-container">
+    (<div className="config-video-latency-container">
       <Title level={3} className="section-title">
         Latency Buffer
       </Title>
@@ -115,20 +115,21 @@ export const VideoLatency: FC = () => {
           Read to learn more.
         </a>
       </p>
-
       <div className="segment-slider-container">
         <Slider
-          tipFormatter={value => SLIDER_COMMENTS[value]}
           onChange={handleChange}
           min={0}
           max={4}
           marks={SLIDER_MARKS}
           defaultValue={selectedOption}
           value={selectedOption}
+          tooltip={{
+            formatter: value => SLIDER_COMMENTS[value]
+          }}
         />
         <p className="selected-value-note">{SLIDER_COMMENTS[selectedOption]}</p>
         <FormStatusIndicator status={submitStatus} />
       </div>
-    </div>
+    </div>)
   );
 };

web/components/admin/VideoVariantForm.tsx

@@ -113,7 +113,7 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
     'video-passthrough-enabled': videoPassthroughEnabled,
   });
   return (
-    <div className={classes}>
+    (<div className={classes}>
       <div className="video-varient-alert">
         <Alert
           type="info"
@@ -139,7 +139,6 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
           below video encoding settings.
         </p>
       )}
-
       <Row gutter={16}>
         <Col xs={24} lg={{ span: 24, pull: 3 }} className="video-text-field-container">
           <TextField
@@ -157,7 +156,6 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
             </p>
             <div className="segment-slider-container">
               <Slider
-                tipFormatter={value => ENCODER_PRESET_TOOLTIPS[value]}
                 onChange={handleVideoCpuUsageLevelChange}
                 min={0}
                 max={Object.keys(ENCODER_PRESET_SLIDER_MARKS).length - 1}
@@ -165,6 +163,9 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
                 defaultValue={dataState.cpuUsageLevel}
                 value={dataState.cpuUsageLevel}
                 disabled={dataState.videoPassthrough}
+                tooltip={{
+                  formatter: value => ENCODER_PRESET_TOOLTIPS[value]
+                }}
               />
               <p className="selected-value-note">{cpuUsageNote()}</p>
             </div>
@@ -193,7 +194,6 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
             <p className="description">{VIDEO_BITRATE_DEFAULTS.tip}</p>
             <div className="segment-slider-container">
               <Slider
-                tipFormatter={value => `${value} ${VIDEO_BITRATE_DEFAULTS.unit}`}
                 disabled={dataState.videoPassthrough}
                 defaultValue={dataState.videoBitrate}
                 value={dataState.videoBitrate}
@@ -202,6 +202,9 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
                 min={VIDEO_BITRATE_DEFAULTS.min}
                 max={VIDEO_BITRATE_DEFAULTS.max}
                 marks={VIDEO_BITRATE_SLIDER_MARKS}
+                tooltip={{
+                  formatter: value => `${value} ${VIDEO_BITRATE_DEFAULTS.unit}`
+                }}
               />
               <p className="selected-value-note">{selectedVideoBRnote()}</p>
             </div>
@@ -315,7 +318,6 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
             <p className="description">{FRAMERATE_DEFAULTS.tip}</p>
             <div className="segment-slider-container">
               <Slider
-                tipFormatter={value => `${value} ${FRAMERATE_DEFAULTS.unit}`}
                 defaultValue={dataState.framerate}
                 value={dataState.framerate}
                 onChange={handleFramerateChange}
@@ -324,6 +326,9 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
                 max={FRAMERATE_DEFAULTS.max}
                 marks={FRAMERATE_SLIDER_MARKS}
                 disabled={dataState.videoPassthrough}
+                tooltip={{
+                  formatter: value => `${value} ${FRAMERATE_DEFAULTS.unit}`
+                }}
               />
               <p className="selected-value-note">{selectedFramerateNote()}</p>
             </div>
@@ -339,6 +344,6 @@ export const VideoVariantForm: FC<VideoVariantFormProps> = ({
           </div>
         </Panel>
       </Collapse>
-    </div>
+    </div>)
   );
 };

web/components/admin/config/general/EditInstanceDetails.tsx

@@ -40,7 +40,7 @@ const DirectoryInfoModal: FC<DirectoryInfoModalProps> = ({ cancelPressed, okPres
   <Modal
     width="70%"
     title="Owncast Directory"
-    visible
+    open
     onCancel={cancelPressed}
     footer={
       <div>

web/components/modals/FatalErrorStateModal/FatalErrorStateModal.tsx

@@ -9,7 +9,7 @@ export type FatalErrorStateModalProps = {
 export const FatalErrorStateModal: FC<FatalErrorStateModalProps> = ({ title, message }) => (
   <Modal
     title={title}
-    visible
+    open
     footer={null}
     closable={false}
     keyboard={false}

web/pages/admin/config-federation.tsx

@@ -37,7 +37,7 @@ const FederationInfoModal: FC<FederationInfoModalProps> = ({ cancelPressed, okPr
   <Modal
     width="70%"
     title="Enable Social Features"
-    visible
+    open
     onCancel={cancelPressed}
     footer={
       <div>

web/styles/global.less

@@ -1,2 +1,2 @@
-@import '~antd/dist/antd.less'; // Introduce the official dark less style entry file
+/* @import '~antd/dist/antd.less';*/ // Introduce the official dark less style entry file
 @import './theme.less'; // Import ant design theme definition