[Calling][Release] Update API for 1.7.0 (#37)

Author: iaulakh

README.md

@@ -32,23 +32,23 @@ Link to Authentication Endpoint Sample: [link](https://docs.microsoft.com/en-us/
 
 ## Run Sample App
 
-Navigate to `AzureCommunicationUIDemoApp/`:
+Navigate to `demo/`:
 
 1. Run `yarn install`
 
 Install iOS app dependencies:
-1. In Terminal, navigate to `AzureCommunicationUIDemoApp/ios/`:
+1. In Terminal, navigate to `demo/ios/`:
 2. Run `pod install --repo-update`
 
 Build android app dependencies:
-1. In Terminal, navigate to `AzureCommunicationUIDemoApp/android/`:
+1. In Terminal, navigate to `demo/android/`:
 2. Run `./gradlew build`
 
-Navigate back to `AzureCommunicationUIDemoApp/`
+Navigate back to `demo/`
 1. Run `yarn react-native start`
-2. Open another Terminal, navigate to `AzureCommunicationUIDemoApp/` folder, and run `yarn react-native run-ios` or `yarn react-native run-android`
+2. Open another Terminal, navigate to `demo/` folder, and run `yarn react-native run-ios` or `yarn react-native run-android`
 
-Alternatively, you can also run the iOS app by launching Xcode from the `.xcworkspace` file, and run the app with scheme `AzureCommunicationUIDemoApp` on your simulator or iOS device. 
+Alternatively, you can also run the iOS app by launching Xcode from the `.xcworkspace` file, and run the app with scheme `demo` on your simulator or iOS device. 
 
 To run Android app, you can also launch Android Studio and run on Android emulator or Android device after syncing up gradle. There are two ways to sync gradle either with a command in the android folder`./gradlew build` or via android studio.
 
@@ -60,7 +60,7 @@ To integrate the native UI Library with React Native in this sample, a few key s
 After installing the package and dependencies with CocoaPods from the step above, modify the Podfile in the `/ios` filder as such:
 ```ruby
 platform :ios, '14.0' 
-target 'AzureCommunicationUIDemoApp' do 
+target 'demo' do 
   use_frameworks! 
   pod 'AzureCommunicationUICalling', '1.2.0' 
   ... 
@@ -162,6 +162,6 @@ Depending on what type of Call/Meeting you would like to setup, use the appropri
 ## React native - native app bridging
 In order to support the communication between React Native and native Azure Communication UI library, bridging is needed for both iOS and Android. Please refer to the following bridging file guide for iOS and Android. 
 
-[iOS bridging file guide](AzureCommunicationUIDemoApp/ios/README.md)
+[iOS bridging file guide](demo/ios/README.md)
 
-[Android bridging file guide](AzureCommunicationUIDemoApp/android/README.md)
+[Android bridging file guide](demo/android/README.md)

demo/App.tsx

@@ -38,13 +38,15 @@ const App = () => {
     const [subtitle, onChangeSubtitle] = useState('');
     const [meetingInput, onChangeMeetingInput] = useState('');
     const [isRightToLeft, onChangeIsRightToLeft] = useState(false);
+    const [disableLeaveCallConfirmation, onChangeDisableLeaveCallConfirmation] = useState(false);
     const [localAvatar, onLocalAvatarSet] = useState('');
     const [remoteAvatar, onRemoteAvatarSet] = useState('');
     const [modalVisible, setModalVisible] = useState(false);
     const [selectedLanguage, setSelectedLanguage] = useState('en');
     const [isGroupCall, setIsGroupCall] = useState(true);
     const [localesArray, setLocalesArray] = useState([]);
     const toggleIsRightToLeftSwitch = () => onChangeIsRightToLeft(!isRightToLeft);
+    const disableLeaveCallConfirmationSwitch = () => onChangeDisableLeaveCallConfirmation(!disableLeaveCallConfirmation);
 
     React.useLayoutEffect(() => {
       navigation.setOptions({
@@ -112,14 +114,14 @@ const App = () => {
         const remoteAvatarImageResource = resolveAvatarSource(remoteAvatar);
         await RNAzureCommunicationUICalling.startCallComposite(
           // local options
-          {"displayName": displayName, "title": title, "subtitle": subtitle},
+          {"displayName": displayName, "title": title, "subtitle": subtitle, "disableLeaveCallConfirmation": disableLeaveCallConfirmation},
           localAvatarImageResource,
           // remote options
           {"token": tokenInput, "meeting": meetingInput},
           remoteAvatarImageResource,
           // localization options
-          {"locale": selectedLanguage, "layout": isRightToLeft}
-          // {"setupOrientation": "PORTRAIT", "callOrientation": "PORTRAIT"} 
+          {"locale": selectedLanguage, "layout": isRightToLeft},
+          {"setupOrientation": "PORTRAIT", "callOrientation": "PORTRAIT"} 
         );
       } catch (e) {
         Alert.alert('Error', e.message, [{ text: 'Dismiss' }]);
@@ -298,6 +300,14 @@ const App = () => {
                 <Text style={styles.settingsHeaderText}>Remote Participant View Data</Text>
                 <AvatarsView setAvatar={remoteAvatar} onAvatarSet={setRemoteAvatar} />
               </View>
+
+              <View style={styles.settingsSwitchToggleContainer}>
+                  <Text>Disable leave call confirmation</Text>
+                  <Switch
+                    onValueChange={disableLeaveCallConfirmationSwitch.bind(this)}
+                    value={isRightToLeft}
+                  />
+                </View>
             </View>
           </ScrollView>
         </Modal>

demo/android/README.md

@@ -0,0 +1,171 @@
+# Android Bridging
+ Create a new Java file `RNAzureCommunicationUICalling` in the `AzureCommunicationUIDemoApp` folder. This file will contain all of the methods that will call the native Android UI Library.
+ See [RNAzureCommunicationUICalling.java](app/src/main/java/com/azurecommunicationuidemoapp/RNAzureCommunicationUICalling.java)
+ 
+
+To allow the React Native javascript end to access a funciton, wrap it with `@ReactMethod`. This will allow the javascript end to call the function which will be used to launch the native UI Library. 
+
+Here we create a method `startCallComposite` and launch the calling compsite within it. We then wrap the method with `@ReactMethod` to allow the JavaScript end to be able to call this function which will then launch our calling composite.
+
+ ```java
+@ReactMethod
+public void startCallComposite(String displayName, String tokenInput, String meetingInput, ReadableMap localAvatarImageResource, String selectedLanguage, boolean isRightToLeft, ReadableMap remoteAvatarImageResource, Promise promise) {
+
+  CallComposite callComposite = new CallCompositeBuilder().build();
+  
+  ...
+  
+  //lauching native calling composite
+  callComposite.launch(context, remoteOptions);
+}
+ ```
+
+For the the full `startCallComposite` function, see [RNAzureCommunicationUICalling.java](https://github.com/Azure-Samples/communication-services-ui-library-react-native/blob/main/AzureCommunicationUIDemoApp/android/app/src/main/java/com/azurecommunicationuidemoapp/RNAzureCommunicationUICalling.java#L61)
+ 
+
+After creating `RNAzureCommunicationUICalling`, create another Java file called `RNAzureCommunicationUICallingPackage` in the `AzureCommunicationUIDemoApp` folder. 
+ See [RNAzureCommunicationUICallingPackage.java](app/src/main/java/com/azurecommunicationuidemoapp/RNAzureCommunicationUICallingPackage.java)
+ 
+`RNAzureCommunicationUICallingPackage` implements `ReactPackage` which provides us with an interface to register our `RNAzureCommunicationUICalling` module in React Native. This will allow us to reference the module from the javascript end.
+ 
+  ```java
+public class RNAzureCommunicationUICallingPackage implements ReactPackage {
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new RNAzureCommunicationUICalling(reactContext));
+        return modules;
+    }
+}
+  ```
+
+ # Running the Code
+ You can either run your app on an Android emulator with opening the project in Android Studio or run the app through CLI.
+ 
+ 
+
+# Environment Variables
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+### Mac
+
+Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc (if you are using zsh then ~/.zprofile or ~/.zshrc) config file:
+- export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
+- export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
+- export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
+
+### Windows
+- Open the Windows Control Panel.
+- Click on User Accounts, then click User Accounts again
+- Click on Change my environment variables
+
+Click on New... to create a new ANDROID_HOME user variable that points to the path to your Android SDK.
+
+#### Example
+```groovy
+%LOCALAPPDATA%\Android\Sdk
+
+```
+
+Click on New... to create a new JAVE_HOME user variable that points to the path to your JDK:
+
+#### Example
+```groovy
+org.gradle.java.home=C:\\Program Files\\OpenJDK\\openjdk-11.0.16_8
+
+```
+
+
+ 
+ ## Android Studio
+ You can build and run your app on an Android emulator by creating a new Android Virtual Device (AVD) > Click Run.
+ 
+ For more information: [Run Your App](https://developer.android.com/training/basics/firstapp/running-app)
+ 
+ Tap Start Experience. 
+
+ Accept audio permissions and select device, mic, and video settings. 
+
+ Tap Start Call. 
+ Alternatively, you could also run the React Native application through CLI. First, you need to start Metro, the JavaScript bundler that ships with React Native. 
+
+ To start the Metro Bundler, go to the root folder of the React Native project (root folder) and run the following: 
+
+ ```ruby
+ npx react-native start 
+ ```
+ 
+ Start your Android Virtual Device (AVD) or connect your own. Check if the device is running: 
+ ```ruby
+ adb devices
+ ```
+
+ Let Metro Bundler run in its own terminal. Open a new terminal in the same directory and run the following: 
+ ```ruby
+ npx react-native run-android
+ ```
+
+
+# UI Library functionality
+
+
+## Launching Composite
+The React native library supports all the same features as the native [UI composite](https://github.com/Azure/communication-ui-library-android). Call `startCallComposite` on the `RNAzureCommunicationUICalling` module from your React Native Javascript code, wrapping with `try-catch` statement to handle any errors.
+
+```cs
+try {
+    await RNAzureCommunicationUICalling.startCallComposite(
+       // local options
+       {"displayName": displayName, "title": title, "subtitle": subtitle},
+       localAvatarImageResource,
+       // remote options
+       {"token": tokenInput, "meeting": meetingInput},
+       remoteAvatarImageResource,
+       // localization options
+       {"locale": selectedLanguage, "layout": isRightToLeft} 
+     );
+   } catch (e) {
+     console.log(`startCallComposite error: ${e.message}`)
+   }
+};
+```
+
+### Setup group call or Teams meeting options
+Depending on what type of Call/Meeting you would like to setup, use the appropriate meeting input. Replace `meetingInput` with either your group call ID or Teams meeting url.
+
+### Apply theme configuration
+
+To change the primary color of composite, create a new theme style in `src/main/res/values/styles.xml` and `src/main/res/values-night/styles.xml` by considering AzureCommunicationUICalling.Theme as parent theme. To apply theme, inject the theme ID in CallCompositeBuilder. 
+  
+  
+```xml
+<style name="MyCompany.CallComposite" parent="AzureCommunicationUICalling.Theme">
+    <item name="azure_communication_ui_calling_primary_color">#27AC22</item>
+    <item name="azure_communication_ui_calling_primary_color_tint10">#5EC65A</item>
+    <item name="azure_communication_ui_calling_primary_color_tint20">#A7E3A5</item>
+    <item name="azure_communication_ui_calling_primary_color_tint30">#CEF0CD</item>
+</style>
+```
+To apply theme, inject the theme ID in CallCompositeBuilder. 
+```java
+CallComposite callComposite = 
+    new CallCompositeBuilder()
+        .theme(R.style.MyCompany_CallComposite)
+        .build();
+```
+
+
+ # Limitations 
+
+ Communication between JavaScript and Swift/Kotlin is limited by the available methods (Callbacks/Promises/Events) provided by the React Native framework. Implementing TokenRefresher in JavaScript is not possible due to this limitation. 
+ Only one of the callback events (resolver / rejector) can be called. If one is called the other one will not be called.  
+
+ The React Native team is currently working on the re-architecture of the Native Module system, replacing it with TurboModules. It helps facilitate more efficient type-safe communication between JavaScript and native without relying on the React Native bridge. We could revisit our bridging module and update our wrapper API in the future once they have released TurboModules. More info in the highlighted section here: [Android Native Modules · React Native](https://reactnative.dev/docs/new-architecture-app-modules-android)

demo/android/app/build.gradle

@@ -119,7 +119,7 @@ repositories {
 }
 
 dependencies {
-    implementation 'com.azure.android:azure-communication-ui-calling:1.6.0'
+    implementation 'com.azure.android:azure-communication-ui-calling:1.7.0'
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
 

demo/android/app/src/main/java/com/demo/RNAzureCommunicationUICalling.java

@@ -26,7 +26,10 @@
 import com.azure.android.communication.ui.calling.models.CallCompositeParticipantViewData;
 import com.azure.android.communication.ui.calling.models.CallCompositeSetupScreenViewData;
 import com.azure.android.communication.ui.calling.models.CallCompositeRemoteOptions;
+import com.azure.android.communication.ui.calling.models.CallCompositeCallScreenControlBarOptions;
+import com.azure.android.communication.ui.calling.models.CallCompositeCallScreenOptions;
 import com.azure.android.communication.ui.calling.models.CallCompositeSupportedLocale;
+import com.azure.android.communication.ui.calling.models.CallCompositeLeaveCallConfirmationMode;
 import com.azure.android.communication.ui.calling.models.CallCompositeSupportedScreenOrientation;
 import com.azure.android.communication.ui.calling.models.CallCompositeTeamsMeetingLinkLocator;
 import com.azure.android.communication.ui.calling.models.CallCompositeUserReportedIssueEvent;
@@ -87,6 +90,7 @@ public void startCallComposite(ReadableMap localOptions,
         String displayName = localOptions.getString("displayName");
         String title = localOptions.getString("title");
         String subtitle = localOptions.getString("subtitle");
+        boolean disableLeaveCallConfirmation = localOptions.getBoolean("disableLeaveCallConfirmation");
 
         // remote options
         String tokenInput = remoteOptions.getString("token");
@@ -97,10 +101,10 @@ public void startCallComposite(ReadableMap localOptions,
         boolean isRightToLeft = localizationOptions.getBoolean("layout");
 
         if (URLUtil.isValidUrl(tokenInput.trim())) {
-            getCommunicationToken(tokenInput, displayName, meetingInput, localAvatarImageResource, title, subtitle, selectedLanguage, isRightToLeft, remoteAvatarImageResource, orientationOptions, promise);
+            getCommunicationToken(tokenInput, displayName, meetingInput, localAvatarImageResource, title, subtitle, selectedLanguage, isRightToLeft, disableLeaveCallConfirmation, remoteAvatarImageResource, orientationOptions, promise);
         } else {
             mToken = tokenInput;
-            launchComposite(displayName, meetingInput, localAvatarImageResource, title, subtitle, selectedLanguage, isRightToLeft, remoteAvatarImageResource, orientationOptions, promise);
+            launchComposite(displayName, meetingInput, localAvatarImageResource, title, subtitle, selectedLanguage, isRightToLeft, disableLeaveCallConfirmation, remoteAvatarImageResource, orientationOptions, promise);
         }
     }
 
@@ -152,7 +156,7 @@ public void getDebugInfo(Promise promise) {
     public void removeListeners(Integer count) {}
 
     public void launchComposite(String displayName, String meetingInput, ReadableMap localAvatarImageResource,
-                                String title, String subtitle, String selectedLanguage, boolean isRightToLeft, ReadableMap remoteAvatarImageResource,
+                                String title, String subtitle, String selectedLanguage, boolean isRightToLeft, boolean disableLeaveCallConfirmation, ReadableMap remoteAvatarImageResource,
                                 ReadableMap orientationOptions,
                                 Promise promise) {
         Context context = getCurrentActivity();
@@ -164,11 +168,22 @@ public void launchComposite(String displayName, String meetingInput, ReadableMap
 
         int layoutDirection = isRightToLeft ? LayoutDirection.RTL : LayoutDirection.LTR;
 
+        CallCompositeCallScreenControlBarOptions callScreenControlBarOptions = new CallCompositeCallScreenControlBarOptions();
+        if (disableLeaveCallConfirmation) {
+            callScreenControlBarOptions.setLeaveCallConfirmation(CallCompositeLeaveCallConfirmationMode.ALWAYS_DISABLED);
+        } else {
+            callScreenControlBarOptions.setLeaveCallConfirmation(CallCompositeLeaveCallConfirmationMode.ALWAYS_ENABLED);
+        }
+        
+        CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions();
+        callScreenOptions.setControlBarOptions(callScreenControlBarOptions);
+
         CallComposite callComposite = new CallCompositeBuilder()
                 .localization(new CallCompositeLocalizationOptions(Locale.forLanguageTag(selectedLanguage), layoutDirection))
                 .setupScreenOrientation(getCompositeDefinedOrientation(setupOrientation))
                 .callScreenOrientation(getCompositeDefinedOrientation(callOrientation))
                 .multitasking(new CallCompositeMultitaskingOptions(true))
+                .callScreenOptions(callScreenOptions)
                 .build();
 
         try {
@@ -297,7 +312,7 @@ private String fetchToken() {
     }
 
     private void getCommunicationToken(String tokenInput, String displayName, String meetingInput, ReadableMap localAvatarImageResource, String title, String subtitle, String selectedLanguage,
-                                       boolean isRightToLeft, ReadableMap remoteAvatarImageResource,
+                                       boolean isRightToLeft, boolean disableLeaveCallConfirmation, ReadableMap remoteAvatarImageResource,
                                        ReadableMap orientationOptions,
                                        Promise promise) {
         Thread thread = new Thread(() -> {
@@ -313,7 +328,7 @@ private void getCommunicationToken(String tokenInput, String displayName, String
                 mToken = json.getString("token");
 
                 new Handler(Looper.getMainLooper()).post(() -> {
-                    launchComposite(displayName, meetingInput, localAvatarImageResource, title, subtitle, selectedLanguage, isRightToLeft, remoteAvatarImageResource, orientationOptions, promise);
+                    launchComposite(displayName, meetingInput, localAvatarImageResource, title, subtitle, selectedLanguage, isRightToLeft, disableLeaveCallConfirmation, remoteAvatarImageResource, orientationOptions, promise);
                 });
 
             } catch (Exception e) {

demo/ios/Podfile

@@ -5,7 +5,7 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: [process.argv[1]]},
   )', __dir__]).strip
 
-platform :ios, '14.0'
+platform :ios, '15.0'
 prepare_react_native_project!
 
 # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
@@ -27,7 +27,7 @@ end
 
 target 'demo' do
   use_frameworks!
-  pod 'AzureCommunicationUICalling', '1.6.0'
+  pod 'AzureCommunicationUICalling', '1.7.0'
   config = use_native_modules!
 
   # Flags change depending on the env values.