@stream-io/video-react-native-sdk 1.29.4-beta.0 → 1.30.0

package/expo-config-plugin/dist/withAppDelegate.js

@@ -9,7 +9,7 @@ const addNewLinesToAppDelegateObjc_1 = __importDefault(require("./common/addNewL
 const addToSwiftBridgingHeaderFile_1 = require("./common/addToSwiftBridgingHeaderFile");
 const withAppDelegate = (configuration, props) => {
     return (0, config_plugins_1.withAppDelegate)(configuration, (config) => {
-        if (!props?.ringing &&
+        if (!props?.ringingPushNotifications &&
             !props?.iOSEnableMultitaskingCameraAccess &&
             !props?.addNoiseCancellation) {
             // quit early if no change is necessary
@@ -21,12 +21,19 @@ const withAppDelegate = (configuration, props) => {
                     config.modResults.contents = (0, codeMod_1.addObjcImports)(config.modResults.contents, ['"NoiseCancellationManagerObjc.h"']);
                 }
                 config.modResults.contents = addDidFinishLaunchingWithOptionsObjc(config.modResults.contents, props.iOSEnableMultitaskingCameraAccess, props.addNoiseCancellation);
-                if (props?.ringing) {
-                    config.modResults.contents = (0, codeMod_1.addObjcImports)(config.modResults.contents, ['<PushKit/PushKit.h>', '"StreamVideoReactNative.h"']);
+                if (props?.ringingPushNotifications) {
+                    config.modResults.contents = (0, codeMod_1.addObjcImports)(config.modResults.contents, [
+                        '"RNCallKeep.h"',
+                        '<PushKit/PushKit.h>',
+                        '"RNVoipPushNotificationManager.h"',
+                        '"StreamVideoReactNative.h"',
+                        '<WebRTC/RTCAudioSession.h>',
+                    ]);
                     config.modResults.contents =
-                        addDidFinishLaunchingWithOptionsRingingObjc(config.modResults.contents);
+                        addDidFinishLaunchingWithOptionsRingingObjc(config.modResults.contents, props.ringingPushNotifications);
                     config.modResults.contents = addDidUpdatePushCredentialsObjc(config.modResults.contents);
                     config.modResults.contents = addDidReceiveIncomingPushCallbackObjc(config.modResults.contents);
+                    config.modResults.contents = addAudioSessionMethodsObjc(config.modResults.contents);
                 }
                 return config;
             }
@@ -36,7 +43,7 @@ const withAppDelegate = (configuration, props) => {
         }
         else {
             try {
-                if (props?.ringing) {
+                if (props?.ringingPushNotifications) {
                     // make it public class AppDelegate: ExpoAppDelegate, PKPushRegistryDelegate {
                     const regex = /(class\s+AppDelegate[^{]*)(\s*\{)/;
                     config.modResults.contents = config.modResults.contents.replace(regex, (match, declarationPart, openBrace) => {
@@ -69,12 +76,13 @@ const withAppDelegate = (configuration, props) => {
                     config.modResults.contents = (0, codeMod_1.addSwiftImports)(config.modResults.contents, ['stream_io_noise_cancellation_react_native']);
                 }
                 config.modResults.contents = addDidFinishLaunchingWithOptionsSwift(config.modResults.contents, props.iOSEnableMultitaskingCameraAccess, props.addNoiseCancellation);
-                if (props?.ringing) {
-                    config.modResults.contents = (0, codeMod_1.addSwiftImports)(config.modResults.contents, ['PushKit', 'stream_video_react_native']);
+                if (props?.ringingPushNotifications) {
+                    config.modResults.contents = (0, codeMod_1.addSwiftImports)(config.modResults.contents, ['RNCallKeep', 'PushKit', 'RNVoipPushNotification']);
                     config.modResults.contents =
-                        addDidFinishLaunchingWithOptionsRingingSwift(config.modResults.contents);
+                        addDidFinishLaunchingWithOptionsRingingSwift(config.modResults.contents, props.ringingPushNotifications);
                     config.modResults.contents = addDidUpdatePushCredentialsSwift(config.modResults.contents);
                     config.modResults.contents = addDidReceiveIncomingPushCallbackSwift(config.modResults.contents);
+                    config.modResults.contents = addAudioSessionMethodsSwift(config.modResults.contents);
                 }
                 return config;
             }
@@ -119,26 +127,55 @@ function addDidFinishLaunchingWithOptionsObjc(contents, iOSEnableMultitaskingCam
     }
     return contents;
 }
-function addDidFinishLaunchingWithOptionsRingingSwift(contents) {
+function addDidFinishLaunchingWithOptionsRingingSwift(contents, ringingPushNotifications) {
     const functionSelector = 'application(_:didFinishLaunchingWithOptions:)';
+    const supportsVideoString = ringingPushNotifications.disableVideoIos
+        ? 'false'
+        : 'true';
+    const includesCallsInRecents = ringingPushNotifications.includesCallsInRecentsIos ? 'false' : 'true';
+    const setupCallKeep = `  let localizedAppName = Bundle.main.localizedInfoDictionary?["CFBundleDisplayName"] as? String
+    let appName = Bundle.main.infoDictionary?["CFBundleDisplayName"] as? String
+    RNCallKeep.setup([
+      "appName": localizedAppName != nil ? localizedAppName! : appName as Any,
+      "supportsVideo": ${supportsVideoString},
+      "includesCallsInRecents": ${includesCallsInRecents},
+    ])`;
+    if (!contents.includes('RNCallKeep.setup')) {
+        contents = (0, codeMod_1.insertContentsInsideSwiftFunctionBlock)(contents, functionSelector, setupCallKeep, { position: 'head' });
+    }
     // call the setup of voip push notification
-    const voipSetupMethod = 'StreamVideoReactNative.voipRegistration()';
+    const voipSetupMethod = 'RNVoipPushNotificationManager.voipRegistration()';
     if (!contents.includes(voipSetupMethod)) {
         contents = (0, codeMod_1.insertContentsInsideSwiftFunctionBlock)(contents, functionSelector, '  ' /* indentation */ + voipSetupMethod, { position: 'head' });
     }
     return contents;
 }
-function addDidFinishLaunchingWithOptionsRingingObjc(contents) {
+function addDidFinishLaunchingWithOptionsRingingObjc(contents, ringingPushNotifications) {
     const functionSelector = 'application:didFinishLaunchingWithOptions:';
+    // call the setup RNCallKeep
+    const supportsVideoString = ringingPushNotifications.disableVideoIos
+        ? '@NO'
+        : '@YES';
+    const includesCallsInRecents = ringingPushNotifications.includesCallsInRecentsIos ? '@YES' : '@NO';
+    const setupCallKeep = `NSString *localizedAppName = [[[NSBundle mainBundle] localizedInfoDictionary] objectForKey:@"CFBundleDisplayName"];
+  NSString *appName = [[[NSBundle mainBundle] infoDictionary]objectForKey :@"CFBundleDisplayName"];
+  [RNCallKeep setup:@{
+    @"appName": localizedAppName != nil ? localizedAppName : appName,
+    @"supportsVideo": ${supportsVideoString},
+    @"includesCallsInRecents": ${includesCallsInRecents},
+  }];`;
+    if (!contents.includes('[RNCallKeep setup:@')) {
+        contents = (0, codeMod_1.insertContentsInsideObjcFunctionBlock)(contents, functionSelector, setupCallKeep, { position: 'head' });
+    }
     // call the setup of voip push notification
-    const voipSetupMethod = '[StreamVideoReactNative voipRegistration];';
+    const voipSetupMethod = '[RNVoipPushNotificationManager voipRegistration];';
     if (!contents.includes(voipSetupMethod)) {
         contents = (0, codeMod_1.insertContentsInsideObjcFunctionBlock)(contents, functionSelector, voipSetupMethod, { position: 'head' });
     }
     return contents;
 }
 function addDidUpdatePushCredentialsSwift(contents) {
-    const updatedPushCredentialsMethod = 'StreamVideoReactNative.didUpdate(credentials, forType: type.rawValue)';
+    const updatedPushCredentialsMethod = 'RNVoipPushNotificationManager.didUpdate(credentials, forType: type.rawValue)';
     if (!contents.includes(updatedPushCredentialsMethod)) {
         const functionSelector = 'pushRegistry(_:didUpdate:for:)';
         const codeblock = (0, codeMod_1.findSwiftFunctionCodeBlock)(contents, functionSelector);
@@ -160,7 +197,7 @@ function addDidUpdatePushCredentialsSwift(contents) {
     return contents;
 }
 function addDidUpdatePushCredentialsObjc(contents) {
-    const updatedPushCredentialsMethod = '[StreamVideoReactNative didUpdatePushCredentials:credentials forType: (NSString *) type];';
+    const updatedPushCredentialsMethod = '[RNVoipPushNotificationManager didUpdatePushCredentials:credentials forType:(NSString *)type];';
     if (!contents.includes(updatedPushCredentialsMethod)) {
         const functionSelector = 'pushRegistry:didUpdatePushCredentials:forType:';
         const codeblock = (0, codeMod_1.findObjcFunctionCodeBlock)(contents, functionSelector);
@@ -177,10 +214,112 @@ function addDidUpdatePushCredentialsObjc(contents) {
     }
     return contents;
 }
+function addAudioSessionMethodsSwift(contents) {
+    const audioSessionDidActivateMethod = 'RTCAudioSession.sharedInstance().audioSessionDidActivate(AVAudioSession.sharedInstance())';
+    if (!contents.includes(audioSessionDidActivateMethod)) {
+        const functionSelector = 'provider(_:didActivate:)';
+        if (!contents.includes('didActivateAudioSession')) {
+            contents = (0, codeMod_1.insertContentsInsideSwiftClassBlock)(contents, 'class AppDelegate', `
+  func provider(_ provider: CXProvider, didActivateAudioSession audioSession: AVAudioSession) {
+    ${audioSessionDidActivateMethod}
+  }
+    `, { position: 'tail' });
+        }
+        else {
+            contents = (0, codeMod_1.insertContentsInsideSwiftFunctionBlock)(contents, functionSelector, audioSessionDidActivateMethod, { position: 'tail' });
+        }
+    }
+    const audioSessionDidDeactivateMethod = 'RTCAudioSession.sharedInstance().audioSessionDidDeactivate(AVAudioSession.sharedInstance())';
+    if (!contents.includes(audioSessionDidDeactivateMethod)) {
+        const functionSelector = 'provider(_:didDeactivate:)';
+        if (!contents.includes('didDeactivateAudioSession')) {
+            contents = (0, codeMod_1.insertContentsInsideSwiftClassBlock)(contents, 'class AppDelegate', `
+  func provider(_ provider: CXProvider, didDeactivateAudioSession audioSession: AVAudioSession) {
+    ${audioSessionDidDeactivateMethod}
+  }
+    `, { position: 'tail' });
+        }
+        else {
+            contents = (0, codeMod_1.insertContentsInsideSwiftFunctionBlock)(contents, functionSelector, audioSessionDidDeactivateMethod, { position: 'tail' });
+        }
+    }
+    return contents;
+}
+function addAudioSessionMethodsObjc(contents) {
+    const audioSessionDidActivateMethod = '[[RTCAudioSession sharedInstance] audioSessionDidActivate:[AVAudioSession sharedInstance]];';
+    if (!contents.includes(audioSessionDidActivateMethod)) {
+        const functionSelector = 'provider:didActivateAudioSession:audioSession:';
+        const codeblock = (0, codeMod_1.findObjcFunctionCodeBlock)(contents, functionSelector);
+        if (!codeblock) {
+            contents = (0, addNewLinesToAppDelegateObjc_1.default)(contents, [
+                '- (void) provider:(CXProvider *) provider didActivateAudioSession:(AVAudioSession *) audioSession {',
+                '  ' /* indentation */ + audioSessionDidActivateMethod,
+                '}',
+            ]);
+        }
+        else {
+            contents = (0, codeMod_1.insertContentsInsideObjcFunctionBlock)(contents, functionSelector, audioSessionDidActivateMethod, { position: 'tail' });
+        }
+    }
+    const audioSessionDidDeactivateMethod = '[[RTCAudioSession sharedInstance] audioSessionDidDeactivate:[AVAudioSession sharedInstance]];';
+    if (!contents.includes(audioSessionDidDeactivateMethod)) {
+        const functionSelector = 'provider:didDeactivateAudioSession:audioSession:';
+        const codeblock = (0, codeMod_1.findObjcFunctionCodeBlock)(contents, functionSelector);
+        if (!codeblock) {
+            contents = (0, addNewLinesToAppDelegateObjc_1.default)(contents, [
+                '- (void) provider:(CXProvider *) provider didDeactivateAudioSession:(AVAudioSession *) audioSession {',
+                '  ' /* indentation */ + audioSessionDidDeactivateMethod,
+                '}',
+            ]);
+        }
+        else {
+            contents = (0, codeMod_1.insertContentsInsideObjcFunctionBlock)(contents, functionSelector, audioSessionDidDeactivateMethod, { position: 'tail' });
+        }
+    }
+    return contents;
+}
 function addDidReceiveIncomingPushCallbackSwift(contents) {
     const onIncomingPush = `
-    StreamVideoReactNative.didReceiveIncomingPush(payload, forType: type.rawValue, completionHandler: completion)`;
-    if (!contents.includes('StreamVideoReactNative.didReceiveIncomingPush')) {
+    guard let stream = payload.dictionaryPayload["stream"] as? [String: Any],
+          let createdCallerName = stream["created_by_display_name"] as? String,
+          let cid = stream["call_cid"] as? String else {
+      completion()
+      return
+    }
+
+    // Check if user is busy BEFORE registering the call
+    let shouldReject = StreamVideoReactNative.shouldRejectCallWhenBusy()
+    let hasAnyActiveCall = StreamVideoReactNative.hasAnyActiveCall()
+        
+    if shouldReject && hasAnyActiveCall {
+        // Complete the VoIP notification without showing CallKit UI
+        completion()
+        return
+    }
+    
+    let uuid = UUID().uuidString
+    let videoIncluded = stream["video"] as? String
+    let hasVideo = videoIncluded == "false" ? false : true
+    
+    StreamVideoReactNative.registerIncomingCall(cid, uuid: uuid)
+    
+    RNVoipPushNotificationManager.addCompletionHandler(uuid, completionHandler: completion)
+    
+    RNVoipPushNotificationManager.didReceiveIncomingPush(with: payload, forType: type.rawValue)
+    
+    RNCallKeep.reportNewIncomingCall(uuid,
+                                     handle: createdCallerName,
+                                     handleType: "generic",
+                                     hasVideo: hasVideo,
+                                     localizedCallerName: createdCallerName,
+                                     supportsHolding: false,
+                                     supportsDTMF: false,
+                                     supportsGrouping: false,
+                                     supportsUngrouping: false,
+                                     fromPushKit: true,
+                                     payload: stream,
+                                     withCompletionHandler: nil)`;
+    if (!contents.includes('RNVoipPushNotificationManager.didReceiveIncomingPush')) {
         const functionSelector = 'pushRegistry(_:didReceiveIncomingPushWith:for:completion:)';
         const codeblock = (0, codeMod_1.findSwiftFunctionCodeBlock)(contents, functionSelector);
         if (!codeblock) {
@@ -203,10 +342,49 @@ function addDidReceiveIncomingPushCallbackSwift(contents) {
 }
 function addDidReceiveIncomingPushCallbackObjc(contents) {
     const onIncomingPush = `
-  // process the payload and display the incoming call notification
-  [StreamVideoReactNative didReceiveIncomingPush:payload forType: (NSString *)type completionHandler:completion];
+  // process the payload and store it in the native module's cache
+  NSDictionary *stream = payload.dictionaryPayload[@"stream"];
+  NSString *uuid = [[NSUUID UUID] UUIDString];
+  NSString *createdCallerName = stream[@"created_by_display_name"];
+  NSString *cid = stream[@"call_cid"];
+  
+  // Check if user is busy BEFORE registering the call
+  BOOL shouldReject = [StreamVideoReactNative shouldRejectCallWhenBusy];
+  BOOL hasAnyActiveCall = [StreamVideoReactNative hasAnyActiveCall];
+  
+  if (shouldReject && hasAnyActiveCall) {
+      // Complete the VoIP notification without showing CallKit UI
+      completion();
+      return;
+  }
+  
+  NSString *videoIncluded = stream[@"video"];
+  BOOL hasVideo = [videoIncluded isEqualToString:@"false"] ? NO : YES;
+
+  // store the call cid and uuid in the native module's cache
+  [StreamVideoReactNative registerIncomingCall:cid uuid:uuid];
+
+  // set the completion handler - this one is called by the JS SDK
+  [RNVoipPushNotificationManager addCompletionHandler:uuid completionHandler:completion];
+
+  // send event to JS - the JS SDK will handle the rest and call the 'completionHandler'
+  [RNVoipPushNotificationManager didReceiveIncomingPushWithPayload:payload forType:(NSString *)type];
+
+  // display the incoming call notification
+  [RNCallKeep reportNewIncomingCall: uuid
+                             handle: createdCallerName
+                         handleType: @"generic"
+                           hasVideo: hasVideo
+                localizedCallerName: createdCallerName
+                    supportsHolding: NO
+                       supportsDTMF: NO
+                   supportsGrouping: NO
+                 supportsUngrouping: NO
+                        fromPushKit: YES
+                            payload: stream
+              withCompletionHandler: nil];
 `;
-    if (!contents.includes('[StreamVideoReactNative didReceiveIncomingPush')) {
+    if (!contents.includes('[RNVoipPushNotificationManager didReceiveIncomingPushWithPayload')) {
         const functionSelector = 'pushRegistry:didReceiveIncomingPushWithPayload:forType:withCompletionHandler:';
         const codeblock = (0, codeMod_1.findObjcFunctionCodeBlock)(contents, functionSelector);
         if (!codeblock) {

package/expo-config-plugin/dist/withMainActivity.js

@@ -23,7 +23,7 @@ const withStreamVideoReactNativeSDKMainActivity = (configuration, props) => {
         if (props?.enableScreenshare) {
             config.modResults.contents = addInsideOnCreateScreenshare(config.modResults.contents, isMainActivityJava);
         }
-        if (props?.ringing) {
+        if (props?.ringingPushNotifications?.showWhenLockedAndroid) {
             config.modResults.contents = addInsideOnCreateLockscreen(config.modResults.contents, isMainActivityJava);
         }
         return config;

package/expo-config-plugin/dist/withiOSInfoPlist.js

@@ -12,7 +12,7 @@ const withStreamVideoReactNativeSDKiOSInfoPList = (configuration, props) => {
             }
         }
         addBackgroundMode('audio');
-        if (props?.ringing) {
+        if (props?.ringingPushNotifications) {
             addBackgroundMode('voip');
             addBackgroundMode('fetch');
             addBackgroundMode('processing');
@@ -20,7 +20,8 @@ const withStreamVideoReactNativeSDKiOSInfoPList = (configuration, props) => {
                 '$(PRODUCT_BUNDLE_IDENTIFIER)',
             ];
         }
-        if (props?.enableNonRingingPushNotifications || props?.ringing) {
+        if (props?.enableNonRingingPushNotifications ||
+            props?.ringingPushNotifications) {
             addBackgroundMode('remote-notification');
         }
         return config;

package/ios/PictureInPicture/PictureInPictureAvatarView.swift

@@ -0,0 +1,273 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+
+import UIKit
+
+/// A view that displays an avatar placeholder when video is disabled in PiP mode.
+/// Shows either a loaded image from URL, initials, or a default person icon.
+final class PictureInPictureAvatarView: UIView {
+
+    // MARK: - Properties
+
+    /// The participant's name, used to generate initials
+    var participantName: String? {
+        didSet {
+            PictureInPictureLogger.log("AvatarView.participantName didSet: '\(participantName ?? "nil")'")
+            updateInitials()
+        }
+    }
+
+    /// The URL string for the participant's profile image
+    var imageURL: String? {
+        didSet {
+            loadImage()
+        }
+    }
+
+    /// Whether video is enabled - when true, the avatar should be hidden (alpha = 0)
+    /// Note: We use alpha instead of isHidden to match upstream SwiftUI behavior.
+    /// Using isHidden can cause layout issues because iOS may skip layoutSubviews for hidden views.
+    var isVideoEnabled: Bool = true {
+        didSet {
+            updateVisibility()
+            // When becoming visible (video disabled), refresh content to ensure initials are shown
+            // This is needed when the same avatarView instance is reused across PiP sessions
+            if !isVideoEnabled {
+                PictureInPictureLogger.log("AvatarView isVideoEnabled=false, refreshing content")
+                updateInitials()
+            }
+        }
+    }
+
+    // MARK: - Private Properties
+
+    private let containerView: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.backgroundColor = UIColor(red: 0.12, green: 0.13, blue: 0.15, alpha: 1.0) // Dark background
+        return view
+    }()
+
+    private let avatarContainerView: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.backgroundColor = UIColor(red: 0.0, green: 0.47, blue: 1.0, alpha: 1.0) // Stream blue
+        view.clipsToBounds = true
+        return view
+    }()
+
+    private let initialsLabel: UILabel = {
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.textColor = .white
+        label.textAlignment = .center
+        label.font = UIFont.systemFont(ofSize: 32, weight: .semibold)
+        label.adjustsFontSizeToFitWidth = true
+        label.minimumScaleFactor = 0.5
+        return label
+    }()
+
+    private let imageView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.contentMode = .scaleAspectFill
+        imageView.clipsToBounds = true
+        imageView.isHidden = true
+        return imageView
+    }()
+
+    private let placeholderImageView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.contentMode = .scaleAspectFit
+        imageView.tintColor = .white
+        // Use SF Symbol for person icon
+        if let personImage = UIImage(systemName: "person.fill") {
+            imageView.image = personImage
+        }
+        imageView.isHidden = true
+        return imageView
+    }()
+
+    private var currentImageLoadTask: URLSessionDataTask?
+    private var avatarSizeConstraints: [NSLayoutConstraint] = []
+
+    // MARK: - Lifecycle
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUp()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        PictureInPictureLogger.log("AvatarView layoutSubviews: bounds=\(bounds), isHidden=\(isHidden)")
+        updateAvatarSize()
+    }
+
+    // MARK: - Private Helpers
+
+    private func setUp() {
+        addSubview(containerView)
+        containerView.addSubview(avatarContainerView)
+        avatarContainerView.addSubview(initialsLabel)
+        avatarContainerView.addSubview(imageView)
+        avatarContainerView.addSubview(placeholderImageView)
+
+        NSLayoutConstraint.activate([
+            containerView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            containerView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            containerView.topAnchor.constraint(equalTo: topAnchor),
+            containerView.bottomAnchor.constraint(equalTo: bottomAnchor),
+
+            avatarContainerView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
+            avatarContainerView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
+
+            initialsLabel.leadingAnchor.constraint(equalTo: avatarContainerView.leadingAnchor, constant: 4),
+            initialsLabel.trailingAnchor.constraint(equalTo: avatarContainerView.trailingAnchor, constant: -4),
+            initialsLabel.topAnchor.constraint(equalTo: avatarContainerView.topAnchor, constant: 4),
+            initialsLabel.bottomAnchor.constraint(equalTo: avatarContainerView.bottomAnchor, constant: -4),
+
+            imageView.leadingAnchor.constraint(equalTo: avatarContainerView.leadingAnchor),
+            imageView.trailingAnchor.constraint(equalTo: avatarContainerView.trailingAnchor),
+            imageView.topAnchor.constraint(equalTo: avatarContainerView.topAnchor),
+            imageView.bottomAnchor.constraint(equalTo: avatarContainerView.bottomAnchor),
+
+            placeholderImageView.centerXAnchor.constraint(equalTo: avatarContainerView.centerXAnchor),
+            placeholderImageView.centerYAnchor.constraint(equalTo: avatarContainerView.centerYAnchor),
+            placeholderImageView.widthAnchor.constraint(equalTo: avatarContainerView.widthAnchor, multiplier: 0.5),
+            placeholderImageView.heightAnchor.constraint(equalTo: avatarContainerView.heightAnchor, multiplier: 0.5)
+        ])
+
+        updateAvatarSize()
+        updateVisibility()
+        // Ensure initial content state is correct (show placeholder when no name/image)
+        updateInitials()
+    }
+
+    private func updateAvatarSize() {
+        // Remove old constraints
+        NSLayoutConstraint.deactivate(avatarSizeConstraints)
+
+        // Avatar size should be about 40% of the smaller dimension
+        let minDimension = min(bounds.width, bounds.height)
+        let avatarSize = max(minDimension * 0.4, 60) // Minimum 60pt
+
+        PictureInPictureLogger.log("AvatarView updateAvatarSize: bounds=\(bounds), minDimension=\(minDimension), avatarSize=\(avatarSize)")
+
+        avatarSizeConstraints = [
+            avatarContainerView.widthAnchor.constraint(equalToConstant: avatarSize),
+            avatarContainerView.heightAnchor.constraint(equalToConstant: avatarSize)
+        ]
+        NSLayoutConstraint.activate(avatarSizeConstraints)
+
+        // Force immediate layout to apply the new constraints
+        // This is needed because constraints set during layoutSubviews
+        // won't be resolved until the next layout pass otherwise
+        containerView.setNeedsLayout()
+        containerView.layoutIfNeeded()
+
+        // Update corner radius after layout is complete
+        avatarContainerView.layer.cornerRadius = avatarContainerView.bounds.width / 2
+
+        PictureInPictureLogger.log("AvatarView updateAvatarSize FINAL: avatarContainer.frame=\(avatarContainerView.frame)")
+    }
+
+    private func updateVisibility() {
+        // Hide avatar when video is enabled using alpha (not isHidden)
+        // Using alpha instead of isHidden ensures layoutSubviews is always called,
+        // which is critical for proper constraint-based layout. This matches
+        // upstream SwiftUI's opacity-based visibility switching.
+        let newAlpha: CGFloat = isVideoEnabled ? 0 : 1
+        PictureInPictureLogger.log("AvatarView updateVisibility: isVideoEnabled=\(isVideoEnabled), setting alpha=\(newAlpha)")
+        alpha = newAlpha
+
+        // Force layout update when becoming visible to ensure proper sizing
+        if !isVideoEnabled {
+            PictureInPictureLogger.log("AvatarView updateVisibility: becoming visible, forcing layout")
+            setNeedsLayout()
+            layoutIfNeeded()
+        }
+    }
+
+    private func updateInitials() {
+        guard let name = participantName, !name.isEmpty else {
+            PictureInPictureLogger.log("AvatarView updateInitials: no name, showing placeholder. avatarContainer.frame=\(avatarContainerView.frame)")
+            initialsLabel.text = nil
+            initialsLabel.isHidden = true
+            // Show placeholder when there's no image loaded
+            placeholderImageView.isHidden = imageView.image != nil
+            return
+        }
+
+        let initials = generateInitials(from: name)
+        PictureInPictureLogger.log("AvatarView updateInitials: name=\(name), initials=\(initials), imageView.image=\(imageView.image != nil ? "loaded" : "nil"), avatarContainer.frame=\(avatarContainerView.frame)")
+        initialsLabel.text = initials
+        initialsLabel.isHidden = imageView.image != nil
+        placeholderImageView.isHidden = true
+    }
+
+    private func generateInitials(from name: String) -> String {
+        let components = name.split(separator: " ")
+        if components.count >= 2 {
+            let first = components[0].prefix(1)
+            let last = components[1].prefix(1)
+            return "\(first)\(last)".uppercased()
+        } else if let first = components.first {
+            return String(first.prefix(2)).uppercased()
+        }
+        return ""
+    }
+
+    private func loadImage() {
+        // Cancel any existing task
+        currentImageLoadTask?.cancel()
+        currentImageLoadTask = nil
+
+        guard let urlString = imageURL, !urlString.isEmpty, let url = URL(string: urlString) else {
+            imageView.image = nil
+            imageView.isHidden = true
+            updateInitials()
+            return
+        }
+
+        let requestURLString = urlString
+
+        // Load image asynchronously
+        var requestTask: URLSessionDataTask?
+        let task = URLSession.shared.dataTask(with: url) { [weak self] data, _, error in
+            DispatchQueue.main.async { [weak self] in
+                guard let self = self else { return }
+                guard let requestTask else { return }
+                guard self.currentImageLoadTask === requestTask else { return }
+                defer { self.currentImageLoadTask = nil }
+
+                // Ignore stale/cancelled responses so only the latest request can mutate UI.
+                if let nsError = error as NSError?, nsError.code == NSURLErrorCancelled {
+                    return
+                }
+                guard self.imageURL == requestURLString else { return }
+
+                guard error == nil, let data = data, let image = UIImage(data: data) else {
+                    self.imageView.image = nil
+                    self.imageView.isHidden = true
+                    self.updateInitials()
+                    return
+                }
+
+                self.imageView.image = image
+                self.imageView.isHidden = false
+                self.initialsLabel.isHidden = true
+                self.placeholderImageView.isHidden = true
+            }
+        }
+        requestTask = task
+        currentImageLoadTask = task
+        task.resume()
+    }
+}