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

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

package/ios/PictureInPicture/PictureInPictureContentState.swift

@@ -0,0 +1,123 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+// Adapted from stream-video-swift PictureInPictureStore for React Native SDK
+// The React Native SDK receives state from the JavaScript bridge rather than
+// observing call state internally, so this is a simplified state container.
+//
+
+import Combine
+import Foundation
+
+/// Manages the content state for the Picture-in-Picture window.
+///
+/// This class provides centralized state management for the PiP content view system.
+/// Unlike the upstream `PictureInPictureStore` which uses a Flux-like action/dispatch pattern,
+/// this implementation is optimized for the React Native bridge where state updates come
+/// from the JavaScript layer.
+///
+/// State changes are published via Combine to allow reactive updates in the view layer.
+///
+/// Concurrency model:
+/// - This state container is main-thread confined.
+/// - `RTCVideoTrack` references are never sent across queues.
+final class PictureInPictureContentState {
+
+    /// A full state snapshot that can be applied atomically.
+    struct Snapshot {
+        var track: RTCVideoTrack?
+        var participantName: String?
+        var participantImageURL: String?
+        var isVideoEnabled: Bool
+        var isScreenSharing: Bool
+        var isReconnecting: Bool
+    }
+
+    // MARK: - Published State
+
+    /// The current content being displayed in the PiP window.
+    @Published private(set) var content: PictureInPictureContent = .inactive
+
+    /// Publisher for observing content changes.
+    var contentPublisher: AnyPublisher<PictureInPictureContent, Never> {
+        $content.eraseToAnyPublisher()
+    }
+
+    // MARK: - Private
+
+    private var snapshot: Snapshot = makeDefaultSnapshot()
+
+    // MARK: - Initialization
+
+    init() {}
+
+    // MARK: - State Update
+
+    /// Applies all content inputs in one step to avoid parallel update paths.
+    func apply(_ snapshot: Snapshot) {
+        ensureMainThread()
+        self.snapshot = snapshot
+        publishIfNeeded(for: snapshot)
+    }
+
+    /// Resets all state to defaults.
+    /// Called when cleaning up after a call ends.
+    func reset() {
+        ensureMainThread()
+        snapshot = Self.makeDefaultSnapshot()
+        if content != .inactive {
+            content = .inactive
+        }
+    }
+
+    /// Computes and publishes content based on the latest snapshot.
+    private func publishIfNeeded(for snapshot: Snapshot) {
+        let newContent: PictureInPictureContent
+
+        // Priority order: reconnecting > screen sharing > avatar (video disabled) > video > avatar fallback
+        if snapshot.isReconnecting {
+            newContent = .reconnecting
+        } else if snapshot.isScreenSharing {
+            newContent = .screenSharing(
+                track: snapshot.track,
+                participantName: snapshot.participantName
+            )
+        } else if !snapshot.isVideoEnabled {
+            newContent = .avatar(
+                participantName: snapshot.participantName,
+                participantImageURL: snapshot.participantImageURL
+            )
+        } else if snapshot.isVideoEnabled, snapshot.track != nil {
+            newContent = .video(
+                track: snapshot.track,
+                participantName: snapshot.participantName,
+                participantImageURL: snapshot.participantImageURL
+            )
+        } else {
+            newContent = .avatar(
+                participantName: snapshot.participantName,
+                participantImageURL: snapshot.participantImageURL
+            )
+        }
+
+        if content != newContent {
+            content = newContent
+        }
+    }
+
+    /// PiP content state is expected to be mutated on the main thread only.
+    private func ensureMainThread() {
+        dispatchPrecondition(condition: .onQueue(.main))
+    }
+
+    private static func makeDefaultSnapshot() -> Snapshot {
+        Snapshot(
+            track: nil,
+            participantName: nil,
+            participantImageURL: nil,
+            isVideoEnabled: true,
+            isScreenSharing: false,
+            isReconnecting: false
+        )
+    }
+}

package/ios/PictureInPicture/PictureInPictureDelegateProxy.swift

@@ -0,0 +1,89 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+
+import AVKit
+import Combine
+
+/// A wrapper around AVPictureInPictureControllerDelegate that publishes all
+/// delegate method calls via a single Combine publisher.
+///
+/// This proxy enables reactive handling of PiP lifecycle events and allows
+/// multiple subscribers to observe PiP state changes through a unified interface.
+final class PictureInPictureDelegateProxy: NSObject, AVPictureInPictureControllerDelegate {
+
+    /// Enum representing each AVPictureInPictureControllerDelegate method call
+    /// with its respective associated values.
+    enum Event: CustomStringConvertible {
+        case willStart(AVPictureInPictureController)
+        case didStart(AVPictureInPictureController)
+        case failedToStart(AVPictureInPictureController, Error)
+        case willStop(AVPictureInPictureController)
+        case didStop(AVPictureInPictureController)
+        case restoreUI(AVPictureInPictureController, (Bool) -> Void)
+
+        var description: String {
+            switch self {
+            case .willStart:
+                return ".willStart"
+            case .didStart:
+                return ".didStart"
+            case let .failedToStart(_, error):
+                return ".failedToStart(error: \(error.localizedDescription))"
+            case .willStop:
+                return ".willStop"
+            case .didStop:
+                return ".didStop"
+            case .restoreUI:
+                return ".restoreUI"
+            }
+        }
+    }
+
+    /// The Combine publisher that emits Picture-in-Picture delegate events.
+    var publisher: AnyPublisher<Event, Never> {
+        eventSubject.eraseToAnyPublisher()
+    }
+
+    private let eventSubject = PassthroughSubject<Event, Never>()
+
+    // MARK: - AVPictureInPictureControllerDelegate
+
+    func pictureInPictureControllerWillStartPictureInPicture(
+        _ pictureInPictureController: AVPictureInPictureController
+    ) {
+        eventSubject.send(.willStart(pictureInPictureController))
+    }
+
+    func pictureInPictureControllerDidStartPictureInPicture(
+        _ pictureInPictureController: AVPictureInPictureController
+    ) {
+        eventSubject.send(.didStart(pictureInPictureController))
+    }
+
+    func pictureInPictureController(
+        _ pictureInPictureController: AVPictureInPictureController,
+        failedToStartPictureInPictureWithError error: Error
+    ) {
+        eventSubject.send(.failedToStart(pictureInPictureController, error))
+    }
+
+    func pictureInPictureControllerWillStopPictureInPicture(
+        _ pictureInPictureController: AVPictureInPictureController
+    ) {
+        eventSubject.send(.willStop(pictureInPictureController))
+    }
+
+    func pictureInPictureControllerDidStopPictureInPicture(
+        _ pictureInPictureController: AVPictureInPictureController
+    ) {
+        eventSubject.send(.didStop(pictureInPictureController))
+    }
+
+    func pictureInPictureController(
+        _ pictureInPictureController: AVPictureInPictureController,
+        restoreUserInterfaceForPictureInPictureStopWithCompletionHandler completionHandler: @escaping (Bool) -> Void
+    ) {
+        eventSubject.send(.restoreUI(pictureInPictureController, completionHandler))
+    }
+}