feat: Added customization of incoming/outgoing call screen (#513)

* handling push params in iOS native call registration

* full customization

* changelog added

Author: Brazol

development.md

@@ -32,8 +32,8 @@
 - [x] Deeplinking
 - [ ] Tap to focus (flutter_webrtc) [Kanat]
 - [ ] Push notifications [Maciej]
-- - [ ] Customization of the notification
-- - [ ] Customizing call.kt ringing calls
+- - [x] Customization of the incoming/outgoing call screens
+- - [x] Customizing CallKit ringing calls
 - - [ ] Bug app crashes when notification button is tapped
 - [ ] Native packages refactor [Maciej]
 - - [ ] Create the native projects in stream_video_flutter

docusaurus/docs/Flutter/05-advanced/02-ringing.mdx

@@ -93,6 +93,7 @@ a push notification is received.
 - Replace `yourUserCredentialsGetMethod()` with your implementation to get logged in user credentials
 - For `androidPushProvider` use the provider name created in [Step 2](#Step-2---Upload-the-Firebase-Credentials-to-Stream)
 - For `iosPushProvider` use the provider name we will create later in [APN integration](#Integrating-APNs-for-iOS​)
+- Add app icon Asset in Xcode for displaying in CallKit screen dedicated button (named `IconMask` in the code below). [See details here](https://developer.apple.com/documentation/callkit/cxproviderconfiguration/2274376-icontemplateimagedata)
 
 ```dart
 // As this runs in a separate isolate, we need to setup the app again.

packages/stream_video_flutter/lib/src/call_screen/call_container.dart

@@ -25,6 +25,22 @@ typedef CallContentBuilder = Widget Function(
   CallState callState,
 );
 
+/// Builder used to create a custom widget for participants avatars.
+typedef ParticipantsAvatarBuilder = Widget Function(
+  BuildContext context,
+  Call call,
+  CallState callState,
+  List<UserInfo> participants,
+);
+
+/// Builder used to create a custom widget for participants display names.
+typedef ParticipantsDisplayNameBuilder = Widget Function(
+  BuildContext context,
+  Call call,
+  CallState callState,
+  List<UserInfo> participants,
+);
+
 /// Represents different call content based on the call state.
 class StreamCallContainer extends StatefulWidget {
   /// Creates a new instance of [StreamCallContainer].

packages/stream_video_flutter/lib/src/call_screen/incoming_call/incoming_call_content.dart

@@ -23,6 +23,8 @@ class StreamIncomingCallContent extends StatefulWidget {
     this.singleParticipantTextStyle,
     this.multipleParticipantTextStyle,
     this.callingLabelTextStyle,
+    this.participantsAvatarBuilder,
+    this.participantsDisplayNameBuilder,
   });
 
   /// Represents a call.
@@ -58,6 +60,12 @@ class StreamIncomingCallContent extends StatefulWidget {
   /// Text style for the calling label.
   final TextStyle? callingLabelTextStyle;
 
+  /// Builder used to create a custom widget for participants avatars.
+  final ParticipantsAvatarBuilder? participantsAvatarBuilder;
+
+  /// Builder used to create a custom widget for participants display names.
+  final ParticipantsDisplayNameBuilder? participantsDisplayNameBuilder;
+
   @override
   State<StreamIncomingCallContent> createState() =>
       _StreamIncomingCallContentState();
@@ -93,19 +101,33 @@ class _StreamIncomingCallContentState extends State<StreamIncomingCallContent> {
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             const Spacer(),
-            ParticipantAvatars(
-              participants: users,
-              singleParticipantAvatarTheme: singleParticipantAvatarTheme,
-              multipleParticipantAvatarTheme: multipleParticipantAvatarTheme,
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 64, vertical: 32),
-              child: CallingParticipants(
-                participants: users,
-                singleParticipantTextStyle: singleParticipantTextStyle,
-                multipleParticipantTextStyle: multipleParticipantTextStyle,
-              ),
-            ),
+            widget.participantsAvatarBuilder?.call(
+                  context,
+                  widget.call,
+                  widget.callState,
+                  users,
+                ) ??
+                ParticipantAvatars(
+                  participants: users,
+                  singleParticipantAvatarTheme: singleParticipantAvatarTheme,
+                  multipleParticipantAvatarTheme:
+                      multipleParticipantAvatarTheme,
+                ),
+            widget.participantsDisplayNameBuilder?.call(
+                  context,
+                  widget.call,
+                  widget.callState,
+                  users,
+                ) ??
+                Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 64, vertical: 32),
+                  child: CallingParticipants(
+                    participants: users,
+                    singleParticipantTextStyle: singleParticipantTextStyle,
+                    multipleParticipantTextStyle: multipleParticipantTextStyle,
+                  ),
+                ),
             Text(
               // TODO hardcoded text
               'Incoming Call...',

packages/stream_video_flutter/lib/src/call_screen/outgoing_call/outgoing_call_content.dart

@@ -1,3 +1,5 @@
+import 'dart:ffi';
+
 import 'package:flutter/material.dart';
 
 import '../../../stream_video_flutter.dart';
@@ -23,6 +25,8 @@ class StreamOutgoingCallContent extends StatefulWidget {
     this.singleParticipantTextStyle,
     this.multipleParticipantTextStyle,
     this.callingLabelTextStyle,
+    this.participantsAvatarBuilder,
+    this.participantsDisplayNameBuilder,
   });
 
   /// Represents a call.
@@ -55,6 +59,12 @@ class StreamOutgoingCallContent extends StatefulWidget {
   /// Text style for the calling label.
   final TextStyle? callingLabelTextStyle;
 
+  /// Builder used to create a custom widget for participants avatars.
+  final ParticipantsAvatarBuilder? participantsAvatarBuilder;
+
+  /// Builder used to create a custom widget for participants display names.
+  final ParticipantsDisplayNameBuilder? participantsDisplayNameBuilder;
+
   @override
   State<StreamOutgoingCallContent> createState() =>
       _StreamOutgoingCallContentState();
@@ -90,19 +100,33 @@ class _StreamOutgoingCallContentState extends State<StreamOutgoingCallContent> {
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             const Spacer(),
-            ParticipantAvatars(
-              participants: participants,
-              singleParticipantAvatarTheme: singleParticipantAvatarTheme,
-              multipleParticipantAvatarTheme: multipleParticipantAvatarTheme,
-            ),
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 64, vertical: 32),
-              child: CallingParticipants(
-                participants: participants,
-                singleParticipantTextStyle: singleParticipantTextStyle,
-                multipleParticipantTextStyle: multipleParticipantTextStyle,
-              ),
-            ),
+            widget.participantsAvatarBuilder?.call(
+                  context,
+                  widget.call,
+                  widget.callState,
+                  participants,
+                ) ??
+                ParticipantAvatars(
+                  participants: participants,
+                  singleParticipantAvatarTheme: singleParticipantAvatarTheme,
+                  multipleParticipantAvatarTheme:
+                      multipleParticipantAvatarTheme,
+                ),
+            widget.participantsDisplayNameBuilder?.call(
+                  context,
+                  widget.call,
+                  widget.callState,
+                  participants,
+                ) ??
+                Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 64, vertical: 32),
+                  child: CallingParticipants(
+                    participants: participants,
+                    singleParticipantTextStyle: singleParticipantTextStyle,
+                    multipleParticipantTextStyle: multipleParticipantTextStyle,
+                  ),
+                ),
             Text(
               'Calling…',
               style: callingLabelTextStyle,

packages/stream_video_push_notification/.metadata

@@ -1,26 +1,23 @@
 # This file tracks properties of this Flutter project.
 # Used by Flutter tool to assess capabilities and perform upgrades etc.
 #
-# This file should be version controlled.
+# This file should be version controlled and should not be manually edited.
 
 version:
-  revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849
-  channel: stable
+  revision: "2f708eb8396e362e280fac22cf171c2cb467343c"
+  channel: "stable"
 
 project_type: plugin
 
 # Tracks metadata for the flutter migrate command
 migration:
   platforms:
     - platform: root
-      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849
-      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849
-    - platform: android
-      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849
-      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849
+      create_revision: 2f708eb8396e362e280fac22cf171c2cb467343c
+      base_revision: 2f708eb8396e362e280fac22cf171c2cb467343c
     - platform: ios
-      create_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849
-      base_revision: b8f7f1f9869bb2d116aa6a70dbeac61000b52849
+      create_revision: 2f708eb8396e362e280fac22cf171c2cb467343c
+      base_revision: 2f708eb8396e362e280fac22cf171c2cb467343c
 
   # User provided section
 
@@ -30,4 +27,4 @@ migration:
   # Files that are not part of the templates will be ignored by default.
   unmanaged_files:
     - 'lib/main.dart'
-    - 'ios/Runner.xcodeproj/project.pbxproj'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

packages/stream_video_push_notification/CHANGELOG.md

@@ -1,3 +1,28 @@
+## Upcoming
+
+ ✅ Added
+
+ * `incomingCallerNameOverride` and `incomingCallerHandlerOverride` to `StreamVideoPushParams` to allow customization of CallKit call screen
+ * `participantsAvatarBuilder` and `participantsDisplayNameBuilder` to `StreamOutgoingCallContent` and `StreamIncomingCallContent` to allow customiztion of Incoming and Outgoing call screens
+
+Example usage:
+ ```dart
+ StreamCallContainer(
+    ...
+    outgoingCallBuilder: (context, call, callState) =>
+            StreamOutgoingCallContent(
+                call: call,
+                callState: callState,
+                participantsDisplayNameBuilder:
+                    (context, call, callState, participants) => your widget here,
+            ),
+ )
+ ```
+
+ 🐞 Fixed
+
+ * App icon in CallKit screen is now visible in dedicated button when correctly configured.
+
 ## 0.1.1
 
 * Aligned version with other Stream Video packages

packages/stream_video_push_notification/ios/Classes/StreamVideoPKDelegateManager.swift

@@ -1,10 +1,12 @@
 import Foundation
 import PushKit
+import flutter_callkit_incoming
 
 public class StreamVideoPKDelegateManager: NSObject, PKPushRegistryDelegate {
     public static let shared = StreamVideoPKDelegateManager()
 
     private var pushRegistry: PKPushRegistry?
+    private var defaultData: [String: Any]?
 
     private override init() {
         super.init()
@@ -15,9 +17,12 @@ public class StreamVideoPKDelegateManager: NSObject, PKPushRegistryDelegate {
         pushRegistry?.delegate = self
         pushRegistry?.desiredPushTypes = [.voIP]
     }
+
+    public func initData(data: [String: Any]) {
+        defaultData = data
+    }
 
     // MARK: - PKPushRegistryDelegate
-    
     @objc public func pushRegistry(_ registry: PKPushRegistry, didUpdate pushCredentials: PKPushCredentials, for type: PKPushType) {
         let deviceToken = pushCredentials.token.map { String(format: "%02x", $0) }.joined()
         return StreamVideoPushNotificationPlugin.setDevicePushTokenVoIP(deviceToken: deviceToken)
@@ -32,19 +37,32 @@ public class StreamVideoPKDelegateManager: NSObject, PKPushRegistryDelegate {
         guard type == .voIP else {
             return completion()
         }
-        
+
+        let defaultCallText = "Unknown Caller"
+
         // Prepare call kit incoming notification.
         let streamDict = payload.dictionaryPayload["stream"] as? [String: Any]
         let callCid = streamDict?["call_cid"] as? String ?? ""
+
         let createdByName = streamDict?["created_by_display_name"] as? String
         let createdById = streamDict?["created_by_id"] as? String
-        
+
+        let data: StreamVideoPushParams
+        if let jsonData = defaultData {
+            data = StreamVideoPushParams(args: jsonData)
+        } else {
+            data = StreamVideoPushParams(args: [String: Any]())
+        }
+
+        data.callKitData.uuid = UUID().uuidString
+        data.callKitData.nameCaller = data.incomingCallerNameOverride ?? createdByName ?? defaultCallText
+        data.callKitData.handle = data.incomingCallerHandlerOverride ?? createdById ?? defaultCallText
+        data.callKitData.type = 1 //video
+        data.callKitData.extra = ["callCid": callCid]
+
         // Show call incoming notification.
         StreamVideoPushNotificationPlugin.showIncomingCall(
-            uuid: UUID().uuidString,
-            callCid: callCid,
-            handle: createdById,
-            nameCaller: createdByName,
+            data: data.callKitData,
             fromPushKit: true
         )
 

packages/stream_video_push_notification/ios/Classes/StreamVideoPushNotificationPlugin.swift

@@ -5,54 +5,41 @@ import flutter_callkit_incoming
 public class StreamVideoPushNotificationPlugin: NSObject, FlutterPlugin {
 
     public static func register(with registrar: FlutterPluginRegistrar) {
-        // no-op
+        let channel = FlutterMethodChannel(name: "stream_video_push_notifications", binaryMessenger: registrar.messenger())
+        let instance = StreamVideoPushNotificationPlugin()
+
+        registrar.addMethodCallDelegate(instance, channel: channel)
     }
+
+    public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
+        switch call.method {
+            case "initData":
+                if let arguments = call.arguments as? [String: Any] {
+                    StreamVideoPKDelegateManager.shared.initData(data: arguments)
+                    result(nil)
+                } else {
+                    result(FlutterError(code: "INVALID_ARGUMENT", message: "Invalid argument", details: nil))
+                }
+            default:
+                result(FlutterMethodNotImplemented)
+        }
+    }       
 
     @objc public static func setDevicePushTokenVoIP(deviceToken: String) {
         SwiftFlutterCallkitIncomingPlugin.sharedInstance?.setDevicePushTokenVoIP(deviceToken)
     }
 
     @objc public static func startOutgoingCall(
-        uuid: String,
-        callCid: String,
-        avatar: String? = nil,
-        handle: String? = nil,
-        nameCaller: String? = nil,
-        hasVideo: Bool = true,
+        data: flutter_callkit_incoming.Data,
         fromPushKit: Bool
     ) {
-        let defaultCallText = "Unknown Caller"
-        
-        let data = flutter_callkit_incoming.Data(
-            id: uuid,
-            nameCaller: nameCaller ?? defaultCallText,
-            handle: handle ?? defaultCallText,
-            type: hasVideo ? 1 : 0
-        )
-        data.extra = ["callCid": callCid]
-        
         SwiftFlutterCallkitIncomingPlugin.sharedInstance?.startCall(data, fromPushKit: fromPushKit)
     }
 
     @objc public static func showIncomingCall(
-        uuid: String,
-        callCid: String,
-        avatar: String? = nil,
-        handle: String? = nil,
-        nameCaller: String? = nil,
-        hasVideo: Bool = true,
+        data: flutter_callkit_incoming.Data,
         fromPushKit: Bool
     ) {
-        let defaultCallText = "Unknown Caller"
-        
-        let data = flutter_callkit_incoming.Data(
-            id: uuid,
-            nameCaller: nameCaller ?? defaultCallText,
-            handle: handle ?? defaultCallText,
-            type: hasVideo ? 1 : 0
-        )
-        data.extra = ["callCid": callCid]
-        
         SwiftFlutterCallkitIncomingPlugin.sharedInstance?.showCallkitIncoming(data, fromPushKit: fromPushKit)
     }