Support setting a custom name for a stream output variant (#64)

* Display+set video stream output variant names

* Merge in admin updates

* Prettified Code!

* Fix build

* Prettified Code!

Co-authored-by: gabek <gabek@users.noreply.github.com>

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

@@ -8,6 +8,7 @@ import TextField from './form-textfield';
 import {
   DEFAULT_VARIANT_STATE,
   VIDEO_VARIANT_SETTING_DEFAULTS,
+  VIDEO_NAME_DEFAULTS,
   ENCODER_PRESET_SLIDER_MARKS,
   ENCODER_PRESET_TOOLTIPS,
   VIDEO_BITRATE_DEFAULTS,
@@ -69,6 +70,10 @@ export default function VideoVariantForm({
     }
   };
 
+  const handleNameChanged = (args: UpdateArgs) => {
+    onUpdateField({ fieldName: 'name', value: args.value });
+  };
+
   // Slider notes
   const selectedVideoBRnote = () => {
     if (videoPassthroughEnabled) {
@@ -122,6 +127,12 @@ export default function VideoVariantForm({
       )}
 
       <Row gutter={16}>
+        <TextField
+          maxLength="10"
+          {...VIDEO_NAME_DEFAULTS}
+          value={dataState.name}
+          onChange={handleNameChanged}
+        />
         <Col sm={24} md={12}>
           {/* ENCODER PRESET (CPU USAGE) FIELD */}
           <div className="form-module cpu-usage-container">

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

@@ -125,6 +125,11 @@ export default function CurrentVariantsTable() {
   };
 
   const videoQualityColumns: ColumnsType<VideoVariant> = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      render: (name: string) => (!name ? 'No name' : name),
+    },
     {
       title: 'Video bitrate',
       dataIndex: 'videoBitrate',

web/types/config-section.ts

@@ -59,6 +59,8 @@ export interface VideoVariant {
 
   scaledWidth: number;
   scaledHeight: number;
+
+  name: string;
 }
 export interface VideoSettingsFields {
   latencyLevel: number;

web/utils/config-constants.tsx

@@ -156,6 +156,7 @@ export const DEFAULT_VARIANT_STATE: VideoVariant = {
   cpuUsageLevel: 3,
   scaledHeight: null,
   scaledWidth: null,
+  name: '',
 };
 
 export const VIDEO_VARIANT_SETTING_DEFAULTS = {
@@ -223,6 +224,15 @@ export const VIDEO_BITRATE_DEFAULTS = {
   incrementBy: 100,
   tip: 'The overall quality of your stream is generally impacted most by bitrate.',
 };
+
+export const VIDEO_NAME_DEFAULTS = {
+  fieldName: 'name',
+  label: 'Name',
+  maxLength: 12,
+  placeholder: 'HD or Low',
+  tip: 'Human-readable name for for displaying in the quality selector.',
+};
+
 export const VIDEO_BITRATE_SLIDER_MARKS = {
   [VIDEO_BITRATE_DEFAULTS.min]: `${VIDEO_BITRATE_DEFAULTS.min} ${VIDEO_BITRATE_DEFAULTS.unit}`,
   3000: 3000,