Add a recommendation in the admin to add a second, lower quality if only one is set (#356)

* ✨ add recommendation box if only one, high-quality video variant is set (#1491)

Related to: https://github.com/owncast/owncast/issues/1491

* Prettified Code!

* Tweak the alert text slightly

Co-authored-by: jeyemwey <jeyemwey@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

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

@@ -1,7 +1,7 @@
 // Updating a variant will post ALL the variants in an array as an update to the API.
 
 import React, { useContext, useState } from 'react';
-import { Typography, Table, Modal, Button } from 'antd';
+import { Typography, Table, Modal, Button, Alert } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { DeleteOutlined } from '@ant-design/icons';
 import { ServerStatusContext } from '../../utils/server-status-context';
@@ -15,6 +15,7 @@ import {
   RESET_TIMEOUT,
   postConfigUpdateToAPI,
   ENCODER_PRESET_TOOLTIPS,
+  ENCODER_RECOMMENDATION_THRESHOLD,
 } from '../../utils/config-constants';
 import {
   createInputStatus,
@@ -183,12 +184,31 @@ export default function CurrentVariantsTable() {
     ...variant,
   }));
 
+  const showSecondVariantRecommendation = (): boolean => {
+    if (videoQualityVariants.length !== 1) {
+      return false;
+    }
+
+    const [variant] = videoQualityVariants;
+
+    return (
+      ENCODER_RECOMMENDATION_THRESHOLD.VIDEO_HEIGHT <= variant.scaledHeight ||
+      ENCODER_RECOMMENDATION_THRESHOLD.VIDEO_BITRATE <= variant.videoBitrate
+    );
+  };
+
   return (
     <>
       <Title level={3} className="section-title">
         Stream output
       </Title>
 
+      {showSecondVariantRecommendation() && (
+        <>
+          <Alert message={ENCODER_RECOMMENDATION_THRESHOLD.HELP_TEXT} type="info" closable />
+        </>
+      )}
+
       <FormStatusIndicator status={submitStatus} />
 
       <Table

web/utils/config-constants.tsx

@@ -290,6 +290,13 @@ export const ENCODER_PRESET_TOOLTIPS = {
   5: 'Highest hardware usage - higher quality video',
 };
 
+export const ENCODER_RECOMMENDATION_THRESHOLD = {
+  VIDEO_HEIGHT: 1080,
+  VIDEO_BITRATE: 3000,
+  HELP_TEXT:
+    'You have only set one video quality variant. If your server has the computing resources, consider adding another, lower-quality variant, so more people can view your content!',
+};
+
 export const DEFAULT_SOCIAL_HANDLE: SocialHandle = {
   url: '',
   platform: '',