From 6669d9e425fcdaab4cc1dde2fba1b0efa13ccc4d Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 11 Mar 2021 13:39:36 -0800
Subject: [PATCH] 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   | 11 +++++++++++
 web/components/config/video-variants-table.tsx |  5 +++++
 web/types/config-section.ts                    |  2 ++
 web/utils/config-constants.tsx                 | 10 ++++++++++
 4 files changed, 28 insertions(+)

diff --git a/web/components/config/video-variant-form.tsx b/web/components/config/video-variant-form.tsx
index edf3af684..46f7663bd 100644
--- a/web/components/config/video-variant-form.tsx
+++ b/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">
diff --git a/web/components/config/video-variants-table.tsx b/web/components/config/video-variants-table.tsx
index 5db47fe30..051bc53f7 100644
--- a/web/components/config/video-variants-table.tsx
+++ b/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',
diff --git a/web/types/config-section.ts b/web/types/config-section.ts
index 05484c9df..31cdd1ba4 100644
--- a/web/types/config-section.ts
+++ b/web/types/config-section.ts
@@ -59,6 +59,8 @@ export interface VideoVariant {
 
   scaledWidth: number;
   scaledHeight: number;
+
+  name: string;
 }
 export interface VideoSettingsFields {
   latencyLevel: number;
diff --git a/web/utils/config-constants.tsx b/web/utils/config-constants.tsx
index 30f107785..909ae2580 100644
--- a/web/utils/config-constants.tsx
+++ b/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,