From 93fecb35d956318477989be135d2922882b52de1 Mon Sep 17 00:00:00 2001
From: Serban Stancu <stancu@adobe.com>
Date: Mon, 3 Jun 2024 09:54:04 -0600
Subject: [PATCH] Changes to the media section in extension configuration.

---
 scripts/helpers/createExtensionManifest.mjs   |  9 +-
 .../formikNumberField.jsx                     |  2 +-
 .../configuration/streamingMediaSection.jsx   | 99 +++++++++++++------
 3 files changed, 77 insertions(+), 33 deletions(-)

diff --git a/scripts/helpers/createExtensionManifest.mjs b/scripts/helpers/createExtensionManifest.mjs
index 7257bfe5b..9c1e702cc 100644
--- a/scripts/helpers/createExtensionManifest.mjs
+++ b/scripts/helpers/createExtensionManifest.mjs
@@ -327,6 +327,8 @@ const createExtensionManifest = ({ version }) => {
                       type: "integer",
                     },
                   },
+                  required: ["channel", "playerName"],
+                  additionalProperties: false,
                 },
                 personalizationStorageEnabled: {
                   type: "boolean",
@@ -1172,7 +1174,12 @@ const createExtensionManifest = ({ version }) => {
                   type: "array",
                   minItems: 1,
                   items: {
-                    enum: ["analytics", "target", "audiencemanager", "audienceManager"]
+                    enum: [
+                      "analytics",
+                      "target",
+                      "audiencemanager",
+                      "audienceManager",
+                    ],
                   },
                   required: ["name"],
                   additionalProperties: false,
diff --git a/src/view/components/formikReactSpectrum3/formikNumberField.jsx b/src/view/components/formikReactSpectrum3/formikNumberField.jsx
index eb8e0c8ad..42d55d85e 100644
--- a/src/view/components/formikReactSpectrum3/formikNumberField.jsx
+++ b/src/view/components/formikReactSpectrum3/formikNumberField.jsx
@@ -33,7 +33,7 @@ const FormikNumberField = ({ name, width, validate, ...otherProps }) => {
   return (
     <NumberField
       {...otherProps}
-      value={value}
+      value={value === "" ? null : value}
       onChange={(val) => {
         setValue(val).then(() => {
           setTouched(true);
diff --git a/src/view/configuration/streamingMediaSection.jsx b/src/view/configuration/streamingMediaSection.jsx
index f75639cba..2e0e3bf43 100644
--- a/src/view/configuration/streamingMediaSection.jsx
+++ b/src/view/configuration/streamingMediaSection.jsx
@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 
 import React from "react";
 import PropTypes from "prop-types";
-import { number, object, string } from "yup";
+import { number, object, string, lazy } from "yup";
 import { useField } from "formik";
 import SectionHeader from "../components/sectionHeader";
 import FormElementContainer from "../components/formElementContainer";
@@ -20,30 +20,50 @@ import FormikTextField from "../components/formikReactSpectrum3/formikTextField"
 import FormikNumberField from "../components/formikReactSpectrum3/formikNumberField";
 import isNonEmptyString from "../utils/isNonEmptyString";
 
-const getDefaultSettings = () => {
-  return {
-    channel: "",
-    playerName: "",
-    appVersion: "",
-    adPingInterval: 10,
-    mainPingInterval: 10,
-  };
-};
+const getDefaultSettings = () => ({
+  channel: "",
+  playerName: "",
+  appVersion: "",
+  adPingInterval: 10,
+  mainPingInterval: 10,
+});
+
 export const bridge = {
   getInstanceDefaults: () => ({
     streamingMedia: getDefaultSettings(),
   }),
+
   getInitialInstanceValues: ({ instanceSettings }) => {
     if (!instanceSettings.streamingMedia) {
-      instanceSettings.streamingMedia = getDefaultSettings();
+      return bridge.getInstanceDefaults();
     }
 
-    return instanceSettings;
+    const streamingMedia = Object.keys(getDefaultSettings()).reduce(
+      (acc, k) => {
+        if (instanceSettings.streamingMedia[k] !== undefined) {
+          acc[k] = instanceSettings.streamingMedia[k];
+        } else {
+          acc[k] = "";
+        }
+
+        return acc;
+      },
+      {},
+    );
+
+    return { streamingMedia };
   },
+
   getInstanceSettings: ({ instanceValues }) => {
     const instanceSettings = {};
     const { streamingMedia } = instanceValues;
 
+    ["appVersion", "adPingInterval", "mainPingInterval"].forEach((key) => {
+      if (!streamingMedia[key]) {
+        delete streamingMedia[key];
+      }
+    });
+
     if (streamingMedia.channel && streamingMedia.playerName) {
       instanceSettings.streamingMedia = streamingMedia;
     }
@@ -66,25 +86,42 @@ export const bridge = {
               "Please provide a player name for streaming media.",
             ),
         }),
-        adPingInterval: number().when(["channel", "playerName"], {
-          is: (channel, playerName) => channel && playerName,
-          then: (schema) =>
-            schema
-              .min(1, "The Ad Ping Interval must be greater than 1 second.")
-              .max(10, "The Ad Ping Interval must be less than 10 seconds.")
-              .default(10),
-        }),
-        mainPingInterval: number().when(["channel", "playerName"], {
-          is: (channel, playerName) => channel && playerName,
-          then: (schema) =>
-            schema
-              .min(
-                10,
-                "The Main Ping Interval must be greater than 10 seconds.",
-              )
-              .max(60, "The Main Ping Interval must be less than 60 seconds.")
-              .default(10),
-        }),
+        adPingInterval: lazy((value) =>
+          /^\d+$/.exec(value)
+            ? number().when(["channel", "playerName"], {
+                is: (channel, playerName) => channel && playerName,
+                then: (schema) =>
+                  schema
+                    .min(
+                      1,
+                      "The Ad Ping Interval must be greater than 1 second.",
+                    )
+                    .max(
+                      10,
+                      "The Ad Ping Interval must be less than 10 seconds.",
+                    )
+                    .default(10),
+              })
+            : string(),
+        ),
+        mainPingInterval: lazy((value) =>
+          /^\d+$/.exec(value)
+            ? number().when(["channel", "playerName"], {
+                is: (channel, playerName) => channel && playerName,
+                then: (schema) =>
+                  schema
+                    .min(
+                      10,
+                      "The Main Ping Interval must be greater than 10 seconds.",
+                    )
+                    .max(
+                      60,
+                      "The Main Ping Interval must be less than 60 seconds.",
+                    )
+                    .default(10),
+              })
+            : string(),
+        ),
       },
       ["channel", "playerName"],
     ),