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

package/dist/typescript/components/Call/CallContent/RTCViewPipNative.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RTCViewPipNative.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallContent/RTCViewPipNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,cAAc,CAAA;KAAE,KAAK,IAAI,CAAC;CAChE,CAAC;AAKF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,QAMlD;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,QAaf;AAED;2CAC2C;AAC3C,eAAO,MAAM,gBAAgB,yFAmB5B,CAAC"}
+{"version":3,"file":"RTCViewPipNative.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallContent/RTCViewPipNative.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,cAAc,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAKF,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,QAMlD;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,QAaf;AAED;2CAC2C;AAC3C,eAAO,MAAM,gBAAgB,yFAqC5B,CAAC"}

package/dist/typescript/components/Call/CallLayout/CallParticipantsGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsGrid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAEL,KAAK,kCAAkC,EACxC,MAAM,8CAA8C,CAAC;AAGtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAIvE;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,6BAA6B,GACnE,IAAI,CAAC,gBAAgB,EAAE,oBAAoB,GAAG,sBAAsB,CAAC,GACrE,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,GAAG,QAAQ,CAAC,GAAG;IACvE;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,6NAYlC,yBAAyB,sBAkF3B,CAAC"}
+{"version":3,"file":"CallParticipantsGrid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAEL,KAAK,kCAAkC,EACxC,MAAM,8CAA8C,CAAC;AAGtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAIvE;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,6BAA6B,GACnE,IAAI,CAAC,gBAAgB,EAAE,oBAAoB,GAAG,sBAAsB,CAAC,GACrE,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,GAAG,QAAQ,CAAC,GAAG;IACvE;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,6NAYlC,yBAAyB,sBAgG3B,CAAC"}

package/dist/typescript/components/Call/CallLayout/CallParticipantsSpotlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsSpotlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AASvC,OAAO,EAEL,KAAK,kCAAkC,EACxC,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,6BAA6B,EACnC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD;;GAEG;AACH,MAAM,MAAM,8BAA8B,GAAG,6BAA6B,GACxE,IAAI,CACF,gBAAgB,EAChB,oBAAoB,GAAG,sBAAsB,GAAG,oBAAoB,CACrE,GACD,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,GAAG,QAAQ,CAAC,GAAG;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,yBAAyB,GAAI,2NAYvC,8BAA8B,sBAwGhC,CAAC"}
+{"version":3,"file":"CallParticipantsSpotlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,OAAO,EAEL,KAAK,kCAAkC,EACxC,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,6BAA6B,EACnC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD;;GAEG;AACH,MAAM,MAAM,8BAA8B,GAAG,6BAA6B,GACxE,IAAI,CACF,gBAAgB,EAChB,oBAAoB,GAAG,sBAAsB,GAAG,oBAAoB,CACrE,GACD,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,GAAG,QAAQ,CAAC,GAAG;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,yBAAyB,GAAI,2NAYvC,8BAA8B,sBAiHhC,CAAC"}

package/dist/typescript/components/Call/CallParticipantsList/CallParticipantsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallParticipantsList/CallParticipantsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,OAAO,EACL,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAEL,KAAK,6BAA6B,EAClC,KAAK,oBAAoB,EAC1B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYvD,MAAM,MAAM,kCAAkC,GAC5C,6BAA6B,GAAG;IAC9B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;IACnE;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,kCAAkC,GACxE,IAAI,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,GAAG;IAC7C;;OAEG;IACH,YAAY,EAAE,sBAAsB,EAAE,CAAC;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,4NAalC,yBAAyB,sBA+K3B,CAAC"}
+{"version":3,"file":"CallParticipantsList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallParticipantsList/CallParticipantsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,OAAO,EACL,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAEL,KAAK,6BAA6B,EAClC,KAAK,oBAAoB,EAC1B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYvD,MAAM,MAAM,kCAAkC,GAC5C,6BAA6B,GAAG;IAC9B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;IACnE;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,kCAAkC,GACxE,IAAI,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,GAAG;IAC7C;;OAEG;IACH,YAAY,EAAE,sBAAsB,EAAE,CAAC;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,4NAalC,yBAAyB,sBA8L3B,CAAC"}

package/dist/typescript/utils/hooks/index.d.ts

@@ -1,3 +1,2 @@
-export * from './useDebouncedValue';
 export * from './usePrevious';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/utils/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "1.29.4";
+export declare const version = "1.30.0";
 //# sourceMappingURL=version.d.ts.map

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()
+    }
+}

package/ios/PictureInPicture/PictureInPictureConnectionQualityIndicator.swift

@@ -0,0 +1,162 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+
+import UIKit
+
+/// A view representing a connection quality indicator for Picture-in-Picture.
+/// Displays three vertical bars that indicate connection quality levels:
+/// - Excellent: All 3 bars green
+/// - Good: 2 bars green, 1 bar gray
+/// - Poor: 1 bar red, 2 bars gray
+/// - Unknown: All bars hidden
+/// This aligns with upstream stream-video-swift ConnectionQualityIndicator.
+final class PictureInPictureConnectionQualityIndicator: UIView {
+
+    // MARK: - Connection Quality Enum
+
+    /// Connection quality levels matching the stream-video-swift/video-client enum
+    enum ConnectionQuality: Int {
+        case unspecified = 0  // Unknown
+        case poor = 1
+        case good = 2
+        case excellent = 3
+    }
+
+    // MARK: - Properties
+
+    /// The current connection quality level
+    var connectionQuality: ConnectionQuality = .unspecified {
+        didSet {
+            updateIndicator()
+        }
+    }
+
+    /// Size of the indicator view
+    private let indicatorSize: CGFloat = 24
+
+    /// Width of each bar
+    private let barWidth: CGFloat = 3
+
+    /// Spacing between bars
+    private let barSpacing: CGFloat = 2
+
+    // MARK: - Colors
+
+    private let goodColor = UIColor(red: 0.2, green: 0.8, blue: 0.4, alpha: 1.0) // Green
+    private let badColor = UIColor(red: 0.9, green: 0.3, blue: 0.3, alpha: 1.0)  // Red
+    private let inactiveColor = UIColor.white.withAlphaComponent(0.5)
+
+    // MARK: - UI Components
+
+    /// Background container with rounded corner
+    private lazy var containerView: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.backgroundColor = UIColor.black.withAlphaComponent(0.6)
+        // Apply rounded corner only to top-left
+        view.layer.cornerRadius = 8
+        view.layer.maskedCorners = [.layerMinXMinYCorner] // top-left only
+        return view
+    }()
+
+    /// Stack view containing the three bars
+    private lazy var barsStackView: UIStackView = {
+        let stack = UIStackView()
+        stack.translatesAutoresizingMaskIntoConstraints = false
+        stack.axis = .horizontal
+        stack.alignment = .bottom
+        stack.spacing = barSpacing
+        stack.distribution = .equalSpacing
+        return stack
+    }()
+
+    /// First (shortest) bar
+    private lazy var bar1: UIView = {
+        createBar(height: barWidth * 2)
+    }()
+
+    /// Second (medium) bar
+    private lazy var bar2: UIView = {
+        createBar(height: barWidth * 3)
+    }()
+
+    /// Third (tallest) bar
+    private lazy var bar3: UIView = {
+        createBar(height: barWidth * 4)
+    }()
+
+    // MARK: - Initialization
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUp()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    // MARK: - Private Methods
+
+    private func setUp() {
+        isUserInteractionEnabled = false
+        isHidden = true // Hidden by default (unknown quality)
+
+        addSubview(containerView)
+        containerView.addSubview(barsStackView)
+
+        barsStackView.addArrangedSubview(bar1)
+        barsStackView.addArrangedSubview(bar2)
+        barsStackView.addArrangedSubview(bar3)
+
+        NSLayoutConstraint.activate([
+            containerView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            containerView.bottomAnchor.constraint(equalTo: bottomAnchor),
+            containerView.widthAnchor.constraint(equalToConstant: indicatorSize),
+            containerView.heightAnchor.constraint(equalToConstant: indicatorSize),
+
+            barsStackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
+            barsStackView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor)
+        ])
+
+        updateIndicator()
+    }
+
+    private func createBar(height: CGFloat) -> UIView {
+        let bar = UIView()
+        bar.translatesAutoresizingMaskIntoConstraints = false
+        bar.backgroundColor = inactiveColor
+        bar.layer.cornerRadius = 1
+        bar.layer.masksToBounds = true
+
+        NSLayoutConstraint.activate([
+            bar.widthAnchor.constraint(equalToConstant: barWidth),
+            bar.heightAnchor.constraint(equalToConstant: height)
+        ])
+
+        return bar
+    }
+
+    private func updateIndicator() {
+        switch connectionQuality {
+        case .excellent:
+            isHidden = false
+            bar1.backgroundColor = goodColor
+            bar2.backgroundColor = goodColor
+            bar3.backgroundColor = goodColor
+        case .good:
+            isHidden = false
+            bar1.backgroundColor = goodColor
+            bar2.backgroundColor = goodColor
+            bar3.backgroundColor = inactiveColor
+        case .poor:
+            isHidden = false
+            bar1.backgroundColor = badColor
+            bar2.backgroundColor = inactiveColor
+            bar3.backgroundColor = inactiveColor
+        case .unspecified:
+            isHidden = true
+        }
+    }
+}

package/ios/PictureInPicture/PictureInPictureContent.swift

@@ -0,0 +1,173 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+// Adapted from stream-video-swift for React Native SDK
+// Original: https://github.com/GetStream/stream-video-swift/blob/develop/Sources/StreamVideoSwiftUI/Utils/PictureInPicture/PictureInPictureContent.swift
+//
+
+import Foundation
+
+/// Represents the content state for the Picture-in-Picture window.
+///
+/// This enum defines the different states that the PiP window can display:
+/// - `inactive`: No content is being shown (PiP is not active)
+/// - `video`: Live video from a participant (camera or screen share)
+/// - `avatar`: Participant avatar placeholder (when video is disabled)
+/// - `screenSharing`: Screen share content with indicator overlay
+/// - `reconnecting`: Connection recovery indicator
+///
+/// The React Native SDK receives content state from the JavaScript layer through
+/// the bridge, unlike the upstream Swift SDK which observes call state internally.
+enum PictureInPictureContent: Equatable, CustomStringConvertible {
+    /// No content - PiP is inactive or transitioning
+    case inactive
+
+    /// Video content from a participant
+    /// - Parameters:
+    ///   - track: The WebRTC video track to render
+    ///   - participantName: The participant's display name (for fallback)
+    ///   - participantImageURL: URL to participant's profile image (for fallback)
+    case video(track: RTCVideoTrack?, participantName: String?, participantImageURL: String?)
+
+    /// Screen sharing content
+    /// - Parameters:
+    ///   - track: The WebRTC video track containing screen share
+    ///   - participantName: Name of the participant sharing their screen
+    case screenSharing(track: RTCVideoTrack?, participantName: String?)
+
+    /// Avatar placeholder shown when video is disabled
+    /// - Parameters:
+    ///   - participantName: The participant's display name (for initials)
+    ///   - participantImageURL: URL to participant's profile image
+    case avatar(participantName: String?, participantImageURL: String?)
+
+    /// Connection recovery indicator
+    case reconnecting
+
+    // MARK: - CustomStringConvertible
+
+    var description: String {
+        switch self {
+        case .inactive:
+            return ".inactive"
+        case let .video(track, name, _):
+            return ".video(track:\(track?.trackId ?? "nil"), name:\(name ?? "-"))"
+        case let .screenSharing(track, name):
+            return ".screenSharing(track:\(track?.trackId ?? "nil"), name:\(name ?? "-"))"
+        case let .avatar(name, _):
+            return ".avatar(name:\(name ?? "-"))"
+        case .reconnecting:
+            return ".reconnecting"
+        }
+    }
+
+    // MARK: - Equatable
+
+    static func == (lhs: PictureInPictureContent, rhs: PictureInPictureContent) -> Bool {
+        switch (lhs, rhs) {
+        case (.inactive, .inactive):
+            return true
+        case let (.video(lhsTrack, lhsName, lhsImage), .video(rhsTrack, rhsName, rhsImage)):
+            return isSameTrackInstance(lhsTrack, rhsTrack)
+                && lhsName == rhsName
+                && lhsImage == rhsImage
+        case let (.screenSharing(lhsTrack, lhsName), .screenSharing(rhsTrack, rhsName)):
+            return isSameTrackInstance(lhsTrack, rhsTrack)
+                && lhsName == rhsName
+        case let (.avatar(lhsName, lhsImage), .avatar(rhsName, rhsImage)):
+            return lhsName == rhsName
+                && lhsImage == rhsImage
+        case (.reconnecting, .reconnecting):
+            return true
+        default:
+            return false
+        }
+    }
+
+    /// Track identity must be reference-based so reconnect-created tracks
+    /// with reused `trackId` still propagate through content updates.
+    private static func isSameTrackInstance(_ lhs: RTCVideoTrack?, _ rhs: RTCVideoTrack?) -> Bool {
+        switch (lhs, rhs) {
+        case (nil, nil):
+            return true
+        case let (lhsTrack?, rhsTrack?):
+            return lhsTrack === rhsTrack
+        default:
+            return false
+        }
+    }
+
+    // MARK: - Convenience Properties
+
+    /// Returns the video track if this content has one, nil otherwise
+    var track: RTCVideoTrack? {
+        switch self {
+        case let .video(track, _, _):
+            return track
+        case let .screenSharing(track, _):
+            return track
+        case .inactive, .avatar, .reconnecting:
+            return nil
+        }
+    }
+
+    /// Returns the participant name if available
+    var participantName: String? {
+        switch self {
+        case let .video(_, name, _):
+            return name
+        case let .screenSharing(_, name):
+            return name
+        case let .avatar(name, _):
+            return name
+        case .inactive, .reconnecting:
+            return nil
+        }
+    }
+
+    /// Returns the participant image URL if available
+    var participantImageURL: String? {
+        switch self {
+        case let .video(_, _, imageURL):
+            return imageURL
+        case let .avatar(_, imageURL):
+            return imageURL
+        case .inactive, .screenSharing, .reconnecting:
+            return nil
+        }
+    }
+
+    /// Whether this content represents an active video stream
+    var hasActiveVideo: Bool {
+        switch self {
+        case .video, .screenSharing:
+            return true
+        case .inactive, .avatar, .reconnecting:
+            return false
+        }
+    }
+
+    /// Whether this content is screen sharing
+    var isScreenSharing: Bool {
+        if case .screenSharing = self {
+            return true
+        }
+        return false
+    }
+
+    /// Whether this content shows an avatar
+    var isShowingAvatar: Bool {
+        if case .avatar = self {
+            return true
+        }
+        return false
+    }
+
+    /// Whether this content shows the reconnection view
+    var isReconnecting: Bool {
+        if case .reconnecting = self {
+            return true
+        }
+        return false
+    }
+}