Merge branch 'upstream/release52' into upstream/release53

# Conflicts:
#	packages/webui/src/client/ui/Settings/Studio/PackageManager/AccessorTableRow.tsx

Author: nytamin

packages/webui/src/client/ui/Settings/Studio/PackageManager/AccessorTableRow.tsx

@@ -17,6 +17,7 @@ import { TextInputControl } from '../../../../lib/Components/TextInput.js'
 import { DropdownInputControl, getDropdownInputOptions } from '../../../../lib/Components/DropdownInput.js'
 import { OverrideOpHelper, WrappedOverridableItemNormal } from '../../util/OverrideOpHelper.js'
 import { CheckboxControl } from '../../../../lib/Components/Checkbox.js'
+import { IntInputControl } from '../../../../lib/Components/IntInput'
 import Button from 'react-bootstrap/Button'
 
 interface AccessorTableRowProps {
@@ -307,7 +308,19 @@ export function AccessorTableRow({
 										itemKey={`container.accessors.${accessorId}.ISAUrls`}
 										overrideHelper={overrideHelper}
 									>
-										{(value, handleUpdate) => <TextInputControl value={value} handleUpdate={handleUpdate} />}
+										{(value, handleUpdate) => {
+											// Convert array of strings into comma-separated string for the input:
+											const strValue = Array.isArray(value) ? value.join(', ') : value
+											return (
+												<TextInputControl
+													value={strValue}
+													handleUpdate={(value: string) => {
+														// Convert comma-separated string into array of strings
+														handleUpdate(value.split(',').map((s) => s.trim()))
+													}}
+												/>
+											)
+										}}
 									</LabelAndOverrides>
 									<LabelAndOverrides
 										label={t('Quantel Zone ID')}
@@ -329,7 +342,7 @@ export function AccessorTableRow({
 										itemKey={`container.accessors.${accessorId}.serverId`}
 										overrideHelper={overrideHelper}
 									>
-										{(value, handleUpdate) => <TextInputControl value={value} handleUpdate={handleUpdate} />}
+										{(value, handleUpdate) => <IntInputControl value={value} handleUpdate={handleUpdate} />}
 									</LabelAndOverrides>
 									<LabelAndOverrides
 										label={t('Quantel transformer URL')}
@@ -362,6 +375,63 @@ export function AccessorTableRow({
 										{(value, handleUpdate) => <TextInputControl value={value} handleUpdate={handleUpdate} />}
 									</LabelAndOverrides>
 								</>
+							) : accessor.type === Accessor.AccessType.ATEM_MEDIA_STORE ? (
+								<>
+									<LabelAndOverrides
+										label={t('Resource Id')}
+										hint={t('(Optional) This could be the name of the compute')}
+										item={packageContainer}
+										//@ts-expect-error can't be 4 levels deep
+										itemKey={`container.accessors.${accessorId}.resourceId`}
+										overrideHelper={overrideHelper}
+									>
+										{(value, handleUpdate) => <TextInputControl value={value} handleUpdate={handleUpdate} />}
+									</LabelAndOverrides>
+									<LabelAndOverrides
+										label={t('Network Id')}
+										hint={t('(Optional) A name/identifier of the local network where the Atem is located')}
+										item={packageContainer}
+										//@ts-expect-error can't be 4 levels deep
+										itemKey={`container.accessors.${accessorId}.networkId`}
+										overrideHelper={overrideHelper}
+									>
+										{(value, handleUpdate) => <TextInputControl value={value} handleUpdate={handleUpdate} />}
+									</LabelAndOverrides>
+
+									<LabelAndOverrides
+										label={t('Network address')}
+										hint={t('Hostname or IP address of the Atem')}
+										item={packageContainer}
+										//@ts-expect-error can't be 4 levels deep
+										itemKey={`container.accessors.${accessorId}.atemHost`}
+										overrideHelper={overrideHelper}
+									>
+										{(value, handleUpdate) => <TextInputControl value={value} handleUpdate={handleUpdate} />}
+									</LabelAndOverrides>
+									<LabelAndOverrides
+										label={t('Bank Index')}
+										hint={t(' The index of the Atem media/clip banks')}
+										item={packageContainer}
+										//@ts-expect-error can't be 4 levels deep
+										itemKey={`container.accessors.${accessorId}.bankIndex`}
+										overrideHelper={overrideHelper}
+									>
+										{(value, handleUpdate) => <IntInputControl value={value} handleUpdate={handleUpdate} />}
+									</LabelAndOverrides>
+									<LabelAndOverridesForDropdown
+										label={t('Media Type')}
+										hint={t('What type of bank')}
+										item={packageContainer}
+										//@ts-expect-error can't be 4 levels deep
+										itemKey={`container.accessors.${accessorId}.mediaType`}
+										overrideHelper={overrideHelper}
+										options={getDropdownInputOptions(['clip', 'still'])}
+									>
+										{(value, handleUpdate, options) => {
+											return <DropdownInputControl options={options} value={value} handleUpdate={handleUpdate} />
+										}}
+									</LabelAndOverridesForDropdown>
+								</>
 							) : null}
 
 							<LabelAndOverridesForCheckbox