feat: add option to configure display name of ios screen broadcast extension (#527)

## Description

This PR adds the option to configure the display name of the extension.
This display name is shown in the native pop-up after starting to share
the screen.

## Motivation and Context

Currently, our app shows `FishjamScreenBroadcast` in the native popup,
which can be confusing for our users, as they have no idea what Fishjam
is.

## Documentation impact

I am not sure about this. I didn't find any related documentation to
update. Similar to tests, I have tested it in the
`internal/fishjam-chat` by running prebuild and checking the
`Info.plist` file manually.

- [ ] Documentation update required
- [ ] Documentation updated [in another PR](_)
- [ ] No documentation update required

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

Author: DarvilCZE

internal/fishjam-chat/app.json

@@ -68,7 +68,8 @@
           "ios": {
             "enableScreensharing": true,
             "enableVoIPBackgroundMode": true,
-            "supportsPictureInPicture": true
+            "supportsPictureInPicture": true,
+            "broadcastExtensionDisplayName": "Fishjam Screen Broadcast"
           }
         }
       ],

packages/react-native-client/plugin/broadcastExtensionFiles/Info.plist

@@ -3,7 +3,7 @@
 <plist version="1.0">
 <dict>
 	<key>CFBundleDisplayName</key>
-	<string>FishjamScreenBroadcast</string>
+	<string>{{DISPLAY_NAME}}</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>

packages/react-native-client/plugin/src/types.ts

@@ -12,6 +12,7 @@ export type FishjamPluginOptions =
         appGroupContainerId?: string;
         mainTargetName?: string;
         broadcastExtensionTargetName?: string;
+        broadcastExtensionDisplayName?: string;
       };
     }
   | undefined;

packages/react-native-client/plugin/src/withFishjamIos.ts

@@ -17,6 +17,10 @@ function getSbeTargetName(props: FishjamPluginOptions) {
   );
 }
 
+function getSbeDisplayName(props: FishjamPluginOptions) {
+  return props?.ios?.broadcastExtensionDisplayName || 'FishjamScreenBroadcast';
+}
+
 export function getSbePodfileSnippet(props: FishjamPluginOptions) {
   const targetName = getSbeTargetName(props);
   return `\ntarget '${targetName}' do\n  pod 'FishjamCloudBroadcastClient'\nend`;
@@ -26,6 +30,7 @@ const TARGETED_DEVICE_FAMILY = `"1,2"`;
 const IPHONEOS_DEPLOYMENT_TARGET = '15.1';
 const GROUP_IDENTIFIER_TEMPLATE_REGEX = /{{GROUP_IDENTIFIER}}/gm;
 const BUNDLE_IDENTIFIER_TEMPLATE_REGEX = /{{BUNDLE_IDENTIFIER}}/gm;
+const DISPLAY_NAME_TEMPLATE_REGEX = /{{DISPLAY_NAME}}/gm;
 
 /**
  * A helper function for updating a value in a file for given regex
@@ -249,6 +254,13 @@ const withFishjamSBE: ConfigPlugin<FishjamPluginOptions> = (config, options) =>
         bundleIdentifier || '',
         options,
       );
+      await updateFileWithRegex(
+        iosPath,
+        'Info.plist',
+        DISPLAY_NAME_TEMPLATE_REGEX,
+        getSbeDisplayName(options),
+        options,
+      );
 
       // Create new PBXGroup for the extension
       const extGroup = xcodeProject.addPbxGroup(