Display video passthrough values properly + some tweaks

web/pages/index.tsx

@@ -69,11 +69,15 @@ export default function Home() {
   
   // map out settings
   const videoQualitySettings = configData?.videoSettings?.videoQualityVariants?.map((setting, index) => {
-    const { audioPassthrough, audioBitrate, videoBitrate, framerate } = setting;
+    const { audioPassthrough, videoPassthrough, audioBitrate, videoBitrate, framerate } = setting;
     const audioSetting =
       audioPassthrough || audioBitrate === 0
         ? `${streamDetails.audioCodec} ${streamDetails.audioBitrate} kpbs`
         : `${audioBitrate} kbps`;
+    const videoSetting =
+      videoPassthrough || videoBitrate === 0
+        ? `${streamDetails.videoBitrate} kbps ${streamDetails.framerate}fps ${streamDetails.width}x${streamDetails.height}`
+        : `${videoBitrate} kbps ${framerate}fps`;
     
     let settingTitle = 'Outbound Stream Details';
     settingTitle = (videoQualitySettings?.length > 1) ?
@@ -82,7 +86,7 @@ export default function Home() {
       <Card title={settingTitle} type="inner" key={settingTitle}>
         <StatisticItem
           title="Outbound Video Stream"
-          value={`${videoBitrate} kbps, ${framerate} fps`}
+          value={videoSetting}
           prefix={null}
         />
         <StatisticItem

web/pages/update-server-config.tsx

@@ -98,8 +98,12 @@ function InstanceDetails({ config }) {
 
   return (
     <>
+    <p>
       <KeyValueTable title="Server details" data={data} />
+    </p>
+    <p>
       <KeyValueTable title="Server configuration" data={configData} />
+    </p>
     </>
   );
 }
@@ -125,9 +129,15 @@ export default function ServerConfig() {
 
   return (
     <div>
+      <p>
         <InstanceDetails config={config} />
+        </p>
+        <p>
         <SocialHandles config={config} />
+        </p>
         <PageContent config={config} />
+        <br/>
+        <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
     </div>
   ); 
 }

web/pages/video-config.tsx

@@ -12,29 +12,38 @@ function VideoVariants({ config }) {
   }
 
   const videoQualityColumns = [
+    {
+      title: "#",
+      dataIndex: "key",
+      key: "key"
+    },
     {
       title: "Video bitrate",
       dataIndex: "videoBitrate",
       key: "videoBitrate",
       render: (bitrate) =>
-        bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
+        !bitrate ? "Same as source" : `${bitrate} kbps`,
     },
     {
       title: "Framerate",
       dataIndex: "framerate",
       key: "framerate",
+      render: (framerate) =>
+        !framerate ? "Same as source" : `${framerate} fps`,
     },
     {
       title: "Encoder preset",
       dataIndex: "encoderPreset",
       key: "framerate",
+      render: (preset) =>
+        !preset ? "n/a" : preset,
     },
     {
       title: "Audio bitrate",
       dataIndex: "audioBitrate",
       key: "audioBitrate",
       render: (bitrate) =>
-        bitrate === 0 || !bitrate ? "Passthrough" : `${bitrate} kbps`,
+        !bitrate ? "Same as source" : `${bitrate} kbps`,
     },
   ];
 
@@ -55,27 +64,39 @@ function VideoVariants({ config }) {
     {
       name: "Segment length",
       value: config.videoSettings.segmentLengthSeconds,
+      key: "segmentLength"
     },
     {
       name: "Number of segments",
       value: config.videoSettings.numberOfPlaylistItems,
+      key: "numberOfSegments"
     },
   ];
 
+  const videoQualityVariantData = config.videoSettings.videoQualityVariants.map(function(variant, index) {
+    return {
+      key: index,
+      ...variant
+    }
+  });
+
   return (
     <div>
       <Title>Video configuration</Title>
       <Table
         pagination={false}
         columns={videoQualityColumns}
-        dataSource={config.videoSettings.videoQualityVariants}
+        dataSource={videoQualityVariantData}
       />
 
       <Table
         pagination={false}
         columns={miscVideoSettingsColumns}
         dataSource={miscVideoSettings}
+        rowKey={row => row.name}
       />
+      <br/>
+      <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
     </div>
   );
 }

web/utils/server-status-context.tsx

@@ -12,6 +12,7 @@ export const initialServerConfigState = {
     videoQualityVariants: [
       {
         audioPassthrough: false,
+        videoPassthrough: false,
         videoBitrate: 0,
         audioBitrate: 0,
         framerate: 0,