add default extension settings in the send media event view

src/view/actions/sendStreamingMediaEvent.jsx

@@ -44,18 +44,28 @@ const wrapGetInitialValues =
       eventType,
       playerId,
       handleMediaSessionAutomatically = false,
-      instanceName,
+      instanceName = initInfo.extensionSettings.instances[0].name,
       xdm = {}
     } = initInfo.settings || {};
 
     const { mediaCollection = {} } = xdm;
+
+    const instanceSettings = initInfo.extensionSettings.instances.find(
+      instance => instance.name === instanceName
+    );
     const {
       playhead,
       qoeDataDetails,
-      advertisingDetails,
+      advertisingDetails = {
+        playerName: instanceSettings?.streamingMedia?.playerName || ""
+      },
       chapterDetails,
       advertisingPodDetails,
-      sessionDetails,
+      sessionDetails = {
+        channel: instanceSettings?.streamingMedia?.channel || "",
+        playerName: instanceSettings?.streamingMedia?.playerName || "",
+        appVersion: instanceSettings?.streamingMedia?.appVersion || ""
+      },
       errorDetails,
       customMetadata,
       statesEnd,
@@ -331,8 +341,9 @@ const advertisingDetailsSection = dataElementSection(
     textField({
       name: "playerName",
       label: "Ad player name",
-      isRequired: true,
-      description: "The name of the player responsible for rendering the ad."
+      description: "The name of the player responsible for rendering the ad.",
+      dataElementSupported: false,
+      isDisabled: true
     })
   ]
 );
@@ -432,9 +443,10 @@ const sessionDetailsSection = dataElementSection(
     textField({
       name: "channel",
       label: "Channel",
-      isRequired: true,
+      isDisabled: true,
       description:
-        "Distribution station or channels where the content is played. Any string value is accepted here."
+        "Distribution station or channels where the content is played. Any string value is accepted here.",
+      dataElementSupported: false
     }),
     numberField({
       name: "length", // integer
@@ -456,8 +468,9 @@ const sessionDetailsSection = dataElementSection(
     textField({
       name: "playerName",
       label: "Content player name",
-      isRequired: true,
-      description: "Name of the media player."
+      dataElementSupported: false,
+      isDisabled: true,
+      description: "The name of the player responsible for playing the media."
     }),
     textField({
       name: "adLoad",
@@ -474,9 +487,10 @@ const sessionDetailsSection = dataElementSection(
     textField({
       name: "appVersion",
       label: "Application version",
-      isRequired: false,
       description:
-        "The SDK version used by the player. This could have any custom value that makes sense for your player."
+        "The SDK version used by the player. This could have any custom value that makes sense for your player.",
+      dataElementSupported: false,
+      isDisabled: true
     }),
     textField({
       name: "artist",
@@ -715,13 +729,41 @@ const eventBasedDetailFormConditionals = [
   )
 ];
 
+const onInstanceChange = ({ context, instanceName, initInfo }) => {
+  const extensionSettings = initInfo.extensionSettings;
+  const instanceSettings = extensionSettings.instances.find(
+    instance => instance.name === instanceName
+  );
+
+  context.setFieldValue(
+    `sessionDetails.channel`,
+    instanceSettings.streamingMedia.channel || "",
+    true
+  );
+  context.setFieldValue(
+    `sessionDetails.playerName`,
+    instanceSettings.streamingMedia.playerName || "",
+    true
+  );
+  context.setFieldValue(
+    `sessionDetails.appVersion`,
+    instanceSettings.streamingMedia.appVersion || "",
+    true
+  );
+  context.setFieldValue(
+    `advertisingDetails.playerName`,
+    instanceSettings.streamingMedia.playerName || "",
+    true
+  );
+};
+
 const sendEventForm = form(
   {
     wrapGetInitialValues,
     wrapGetSettings
   },
   [
-    instancePicker({ name: "instanceName" }),
+    instancePicker({ name: "instanceName", onInstanceChange }),
     comboBox({
       name: "eventType",
       label: "Media event type",

src/view/components/formikReactSpectrum3/formikPicker.jsx

@@ -15,7 +15,7 @@ import { useField } from "formik";
 import PropTypes from "prop-types";
 import React from "react";
 
-const FormikPicker = ({ name, width, validate, ...otherProps }) => {
+const FormikPicker = ({ name, width, validate, onChange, ...otherProps }) => {
   const [{ value }, { touched, error }, { setValue, setTouched }] = useField({
     name,
     validate
@@ -24,7 +24,10 @@ const FormikPicker = ({ name, width, validate, ...otherProps }) => {
   return (
     <Picker
       selectedKey={value}
-      onSelectionChange={setValue}
+      onSelectionChange={key => {
+        setValue(key);
+        onChange(key);
+      }}
       onBlur={() => {
         setTouched(true);
       }}
@@ -39,7 +42,8 @@ const FormikPicker = ({ name, width, validate, ...otherProps }) => {
 FormikPicker.propTypes = {
   name: PropTypes.string.isRequired,
   width: PropTypes.string,
-  validate: PropTypes.func
+  validate: PropTypes.func,
+  onChange: PropTypes.func
 };
 
 export default FormikPicker;

src/view/components/instanceNamePicker.jsx

@@ -21,7 +21,8 @@ const InstanceNamePicker = ({
   name,
   initInfo,
   description,
-  disabledDescription
+  disabledDescription,
+  onChange
 }) => {
   const items = getInstanceOptions(initInfo);
   const isDisabled = items.length <= 1;
@@ -36,6 +37,7 @@ const InstanceNamePicker = ({
       description={
         isDisabled && disabledDescription ? disabledDescription : description
       }
+      onChange={onChange}
     >
       {item => <Item key={item.value}>{item.label}</Item>}
     </FormikPicker>
@@ -47,7 +49,8 @@ InstanceNamePicker.propTypes = {
   name: PropTypes.string.isRequired,
   initInfo: PropTypes.object.isRequired,
   description: PropTypes.string,
-  disabledDescription: PropTypes.string
+  disabledDescription: PropTypes.string,
+  onChange: PropTypes.func
 };
 
 export default InstanceNamePicker;

src/view/forms/instancePicker.jsx

@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 */
 import React from "react";
 import PropTypes from "prop-types";
+import { useFormikContext } from "formik";
 import InstanceNamePicker from "../components/instanceNamePicker";
 
 /** @typedef {import("./form").Form} Form */
@@ -20,7 +21,7 @@ import InstanceNamePicker from "../components/instanceNamePicker";
  * @param {string} options.name - The formik key to use for this field.
  * @returns {Form} A form field for an instance name picker.
  */
-export default function instancePicker({ name }) {
+export default function instancePicker({ name, onInstanceChange }) {
   const form = {
     getInitialValues({ initInfo }) {
       const { [name]: value = initInfo.extensionSettings.instances[0].name } =
@@ -35,11 +36,18 @@ export default function instancePicker({ name }) {
       return settings;
     },
     Component({ namePrefix = "", initInfo }) {
+      const formikContext = useFormikContext();
+      const onChange = context => key => {
+        if (onInstanceChange) {
+          onInstanceChange({ context, instanceName: key, initInfo });
+        }
+      };
       return (
         <InstanceNamePicker
           data-test-id={`${namePrefix}${name}Picker`}
           name={`${namePrefix}${name}`}
           initInfo={initInfo}
+          onChange={onChange(formikContext)}
         />
       );
     }

src/view/forms/textField.jsx

@@ -36,7 +36,8 @@ export default function textField({
   label,
   description,
   width = "size-5000",
-  validationSchemaBase = string()
+  validationSchemaBase = string(),
+  isDisabled = false
 }) {
   let validationSchema = validationSchemaBase;
   if (isRequired) {
@@ -61,6 +62,7 @@ export default function textField({
             isRequired={isRequired}
             description={description}
             width={width}
+            isDisabled={isDisabled}
           />
         </DataElementSelector>
       );
@@ -84,6 +86,7 @@ export default function textField({
           isRequired={isRequired}
           description={description}
           width={width}
+          isDisabled={isDisabled}
         />
       );
     };