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

package/ios/PictureInPicture/PictureInPictureParticipantOverlayView.swift

@@ -0,0 +1,217 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+
+import UIKit
+
+/// A view that displays participant information overlay in Picture-in-Picture mode.
+/// Shows participant name, pin indicator, sound indicator, and video paused indicator
+/// at the bottom-left of the PiP window.
+/// This aligns with upstream stream-video-swift ParticipantInfoView.
+final class PictureInPictureParticipantOverlayView: UIView {
+
+    // MARK: - Properties
+
+    /// The participant's name to display
+    var participantName: String? {
+        didSet {
+            nameLabel.text = participantName
+            updateVisibility()
+        }
+    }
+
+    /// Whether the participant is pinned
+    var isPinned: Bool = false {
+        didSet {
+            pinIconView.isHidden = !isPinned
+        }
+    }
+
+    /// Whether the participant has audio enabled (not muted)
+    var hasAudio: Bool = true {
+        didSet {
+            updateSoundIndicator()
+        }
+    }
+
+    /// Whether the video track is paused/disabled
+    var isTrackPaused: Bool = false {
+        didSet {
+            updateVideoPausedIndicator()
+        }
+    }
+
+    /// Controls whether the overlay is shown
+    var isOverlayEnabled: Bool = true {
+        didSet {
+            updateVisibility()
+        }
+    }
+
+    // MARK: - UI Components
+
+    /// Container for the bottom info bar with gradient background
+    private lazy var containerView: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    /// Gradient layer for the bottom fade effect
+    private lazy var gradientLayer: CAGradientLayer = {
+        let layer = CAGradientLayer()
+        layer.colors = [
+            UIColor.clear.cgColor,
+            UIColor.black.withAlphaComponent(0.6).cgColor
+        ]
+        layer.locations = [0.0, 1.0]
+        return layer
+    }()
+
+    /// Container for the content (name + indicators)
+    private lazy var contentStackView: UIStackView = {
+        let stack = UIStackView()
+        stack.translatesAutoresizingMaskIntoConstraints = false
+        stack.axis = .horizontal
+        stack.spacing = 4
+        stack.alignment = .center
+        return stack
+    }()
+
+    /// Pin indicator icon (shown when participant is pinned)
+    private lazy var pinIconView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.contentMode = .scaleAspectFit
+        imageView.tintColor = .white
+
+        // Use SF Symbol for pin
+        let config = UIImage.SymbolConfiguration(pointSize: 10, weight: .medium)
+        imageView.image = UIImage(systemName: "pin.fill", withConfiguration: config)
+        imageView.isHidden = true // Hidden by default
+        imageView.setContentHuggingPriority(.required, for: .horizontal)
+        imageView.setContentCompressionResistancePriority(.required, for: .horizontal)
+        return imageView
+    }()
+
+    /// Label showing participant name
+    private lazy var nameLabel: UILabel = {
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.font = .systemFont(ofSize: 11, weight: .medium)
+        label.textColor = .white
+        label.lineBreakMode = .byTruncatingTail
+        label.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        return label
+    }()
+
+    /// Video paused indicator icon (wifi.slash when track is paused)
+    private lazy var videoPausedIconView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.contentMode = .scaleAspectFit
+        imageView.tintColor = .white
+
+        // Use SF Symbol for video paused (wifi.slash as in upstream)
+        let config = UIImage.SymbolConfiguration(pointSize: 10, weight: .medium)
+        imageView.image = UIImage(systemName: "wifi.slash", withConfiguration: config)
+        imageView.isHidden = true // Hidden by default
+        imageView.setContentHuggingPriority(.required, for: .horizontal)
+        imageView.setContentCompressionResistancePriority(.required, for: .horizontal)
+        return imageView
+    }()
+
+    /// Sound indicator icon (microphone on/off)
+    private lazy var soundIndicatorView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.contentMode = .scaleAspectFit
+        imageView.tintColor = .white
+        imageView.setContentHuggingPriority(.required, for: .horizontal)
+        imageView.setContentCompressionResistancePriority(.required, for: .horizontal)
+        return imageView
+    }()
+
+    // MARK: - Initialization
+
+    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()
+        // Update gradient frame when view bounds change
+        CATransaction.begin()
+        CATransaction.setDisableActions(true)
+        gradientLayer.frame = containerView.bounds
+        CATransaction.commit()
+    }
+
+    // MARK: - Private Methods
+
+    private func setUp() {
+        isUserInteractionEnabled = false
+        isHidden = true // Hidden by default until participant info is set
+
+        addSubview(containerView)
+        containerView.layer.insertSublayer(gradientLayer, at: 0)
+        containerView.addSubview(contentStackView)
+
+        contentStackView.addArrangedSubview(pinIconView)
+        contentStackView.addArrangedSubview(nameLabel)
+        contentStackView.addArrangedSubview(videoPausedIconView)
+        contentStackView.addArrangedSubview(soundIndicatorView)
+
+        NSLayoutConstraint.activate([
+            // Container positioned at the bottom
+            containerView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            containerView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            containerView.bottomAnchor.constraint(equalTo: bottomAnchor),
+            containerView.heightAnchor.constraint(equalToConstant: 28),
+
+            // Content stack with padding
+            contentStackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 8),
+            contentStackView.trailingAnchor.constraint(lessThanOrEqualTo: containerView.trailingAnchor, constant: -8),
+            contentStackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -6),
+
+            // Icon sizes
+            pinIconView.widthAnchor.constraint(equalToConstant: 12),
+            pinIconView.heightAnchor.constraint(equalToConstant: 12),
+            videoPausedIconView.widthAnchor.constraint(equalToConstant: 12),
+            videoPausedIconView.heightAnchor.constraint(equalToConstant: 12),
+            soundIndicatorView.widthAnchor.constraint(equalToConstant: 12),
+            soundIndicatorView.heightAnchor.constraint(equalToConstant: 12)
+        ])
+
+        // Initialize indicators
+        updateSoundIndicator()
+        updateVideoPausedIndicator()
+    }
+
+    private func updateVisibility() {
+        // Show overlay only if enabled and we have a participant name
+        let hasName = participantName != nil && !(participantName?.isEmpty ?? true)
+        isHidden = !isOverlayEnabled || !hasName
+    }
+
+    private func updateSoundIndicator() {
+        let config = UIImage.SymbolConfiguration(pointSize: 10, weight: .medium)
+        if hasAudio {
+            soundIndicatorView.image = UIImage(systemName: "mic.fill", withConfiguration: config)
+            soundIndicatorView.tintColor = .white
+        } else {
+            soundIndicatorView.image = UIImage(systemName: "mic.slash.fill", withConfiguration: config)
+            soundIndicatorView.tintColor = UIColor(white: 0.7, alpha: 1.0) // Slightly dimmed when muted
+        }
+    }
+
+    private func updateVideoPausedIndicator() {
+        videoPausedIconView.isHidden = !isTrackPaused
+    }
+}

package/ios/PictureInPicture/PictureInPictureReconnectionView.swift

@@ -0,0 +1,193 @@
+//
+// Copyright © 2024 Stream.io Inc. All rights reserved.
+//
+
+import UIKit
+
+/// A view that displays a reconnection indicator when the call connection is being recovered.
+/// Shows three pulsing dots with a "Reconnecting" message, matching upstream CallingIndicator style.
+final class PictureInPictureReconnectionView: UIView {
+
+    // MARK: - Properties
+
+    /// Whether the view should be visible (when reconnecting)
+    var isReconnecting: Bool = false {
+        didSet {
+            updateVisibility()
+        }
+    }
+
+    // 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: 0.85)
+        return view
+    }()
+
+    private let contentStackView: UIStackView = {
+        let stack = UIStackView()
+        stack.translatesAutoresizingMaskIntoConstraints = false
+        stack.axis = .vertical
+        stack.alignment = .center
+        stack.spacing = 8
+        return stack
+    }()
+
+    private let messageLabel: UILabel = {
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.text = "Reconnecting"
+        label.textColor = .white
+        label.textAlignment = .center
+        label.font = UIFont.systemFont(ofSize: 16, weight: .medium)
+        label.accessibilityIdentifier = "reconnectingMessage"
+        return label
+    }()
+
+    /// Three dots indicator matching upstream CallingIndicator style
+    private let dotsStackView: UIStackView = {
+        let stack = UIStackView()
+        stack.translatesAutoresizingMaskIntoConstraints = false
+        stack.axis = .horizontal
+        stack.alignment = .center
+        stack.spacing = 2  // Matches upstream
+        stack.accessibilityIdentifier = "callingIndicator"
+        return stack
+    }()
+
+    private let dotSize: CGFloat = 4  // Matches upstream
+    private var dots: [UIView] = []
+
+    // MARK: - Lifecycle
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUp()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    deinit {
+        stopAnimation()
+    }
+
+    // MARK: - Private Helpers
+
+    private func createDot() -> UIView {
+        let dot = UIView()
+        dot.translatesAutoresizingMaskIntoConstraints = false
+        dot.backgroundColor = .white
+        dot.layer.cornerRadius = dotSize / 2
+        dot.alpha = 0  // Start invisible (matches upstream)
+        NSLayoutConstraint.activate([
+            dot.widthAnchor.constraint(equalToConstant: dotSize),
+            dot.heightAnchor.constraint(equalToConstant: dotSize)
+        ])
+        return dot
+    }
+
+    private func setUp() {
+        addSubview(containerView)
+        containerView.addSubview(contentStackView)
+
+        // Order matches upstream: text first, then dots indicator
+        contentStackView.addArrangedSubview(messageLabel)
+        contentStackView.addArrangedSubview(dotsStackView)
+
+        // Add three dots (matches upstream)
+        for _ in 0..<3 {
+            let dot = createDot()
+            dots.append(dot)
+            dotsStackView.addArrangedSubview(dot)
+        }
+
+        NSLayoutConstraint.activate([
+            containerView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            containerView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            containerView.topAnchor.constraint(equalTo: topAnchor),
+            containerView.bottomAnchor.constraint(equalTo: bottomAnchor),
+
+            contentStackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
+            contentStackView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
+            contentStackView.leadingAnchor.constraint(greaterThanOrEqualTo: containerView.leadingAnchor, constant: 16),
+            contentStackView.trailingAnchor.constraint(lessThanOrEqualTo: containerView.trailingAnchor, constant: -16)
+        ])
+
+        // Initially hidden
+        updateVisibility()
+    }
+
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        // Restart animation when view is added to window (animations are removed when view leaves window)
+        if window != nil && isReconnecting && !isHidden {
+            startAnimation()
+        }
+    }
+
+    private func updateVisibility() {
+        isHidden = !isReconnecting
+
+        if isReconnecting {
+            startAnimation()
+        } else {
+            stopAnimation()
+        }
+    }
+
+    // MARK: - Animation (matches upstream CallingIndicator)
+
+    /// Starts the pulsing animation matching upstream exactly:
+    /// - All dots animate from alpha 0 → 1
+    /// - Same 0.2s delay for all dots
+    /// - 1 second duration
+    /// - Different easing: easeOut, easeInOut, easeIn
+    /// - Repeat forever with autoreverse
+    private func startAnimation() {
+        // Only animate if we're in a window
+        guard window != nil else {
+            PictureInPictureLogger.log("ReconnectionView: startAnimation called but not in window yet")
+            return
+        }
+
+        PictureInPictureLogger.log("ReconnectionView: starting dot animation with CABasicAnimation")
+
+        // Stop any existing animations first
+        stopAnimation()
+
+        // Use CABasicAnimation for better compatibility with PiP
+        // Matches upstream: easeOut, easeInOut, easeIn timing functions
+        let timingFunctions: [CAMediaTimingFunction] = [
+            CAMediaTimingFunction(name: .easeOut),
+            CAMediaTimingFunction(name: .easeInEaseOut),
+            CAMediaTimingFunction(name: .easeIn)
+        ]
+
+        for (index, dot) in dots.enumerated() {
+            let animation = CABasicAnimation(keyPath: "opacity")
+            animation.fromValue = 0.0
+            animation.toValue = 1.0
+            animation.duration = 1.0
+            animation.beginTime = CACurrentMediaTime() + 0.2  // 0.2s delay
+            animation.timingFunction = timingFunctions[index]
+            animation.autoreverses = true
+            animation.repeatCount = .infinity
+            animation.fillMode = .forwards
+            animation.isRemovedOnCompletion = false
+
+            dot.layer.add(animation, forKey: "pulseAnimation")
+            dot.alpha = 0  // Set initial state
+        }
+    }
+
+    private func stopAnimation() {
+        dots.forEach { dot in
+            dot.layer.removeAllAnimations()
+            dot.alpha = 0
+        }
+    }
+}

package/ios/PictureInPicture/StreamAVPictureInPictureVideoCallViewController.swift

@@ -7,13 +7,13 @@ import Foundation
 
 /// Describes an object that can be used to present picture-in-picture content.
 protocol StreamAVPictureInPictureViewControlling: AnyObject {
-    
+
     /// The closure to call whenever the picture-in-picture window size changes.
     var onSizeUpdate: ((CGSize) -> Void)? { get set }
-    
+
     /// The track that will be rendered on picture-in-picture window.
     var track: RTCVideoTrack? { get set }
-    
+
     /// The preferred size for the picture-in-picture window.
     /// - Important: This should **always** be greater to ``CGSize.zero``. If not, iOS throws
     /// a cryptic error with content `PGPegasus code:-1003`
@@ -24,17 +24,65 @@ protocol StreamAVPictureInPictureViewControlling: AnyObject {
     
     /// The layer that renders the incoming frames from WebRTC.
     var displayLayer: CALayer { get }
+
+    // MARK: - Avatar Placeholder Properties
+
+    /// The participant's name for the avatar placeholder
+    var participantName: String? { get set }
+
+    /// The URL string for the participant's profile image
+    var participantImageURL: String? { get set }
+
+    /// Whether video is enabled - when false, shows avatar placeholder
+    var isVideoEnabled: Bool { get set }
+
+    // MARK: - Reconnection Properties
+
+    /// Whether the call is reconnecting - when true, shows reconnection view
+    var isReconnecting: Bool { get set }
+
+    // MARK: - Screen Sharing Properties
+
+    /// Whether screen sharing is active (used for content state tracking)
+    var isScreenSharing: Bool { get set }
+
+    // MARK: - Participant Overlay Properties
+
+    /// Whether the participant has audio enabled (shown in participant overlay)
+    var hasAudio: Bool { get set }
+
+    /// Whether the video track is paused (shown in participant overlay)
+    var isTrackPaused: Bool { get set }
+
+    /// Whether the participant is pinned (shown in participant overlay)
+    var isPinned: Bool { get set }
+
+    /// Whether the participant is currently speaking (shows border highlight)
+    var isSpeaking: Bool { get set }
+
+    /// The connection quality level (0: unknown, 1: poor, 2: good, 3: excellent)
+    var connectionQuality: Int { get set }
+
+    // MARK: - Content State System
+
+    /// The content state manager for unified state handling.
+    /// When set, the view controller subscribes to content changes automatically.
+    var contentState: PictureInPictureContentState? { get set }
+
+    /// The current content being displayed.
+    /// Can be set directly for one-off updates or managed via contentState for reactive updates.
+    var content: PictureInPictureContent { get set }
 }
 
 @available(iOS 15.0, *)
 final class StreamAVPictureInPictureVideoCallViewController: AVPictureInPictureVideoCallViewController,
                                                              StreamAVPictureInPictureViewControlling {
-    
+
     private let contentView: StreamPictureInPictureVideoRenderer =
         .init(windowSizePolicy: StreamPictureInPictureAdaptiveWindowSizePolicy())
-    
+
     var onSizeUpdate: ((CGSize) -> Void)?
-    
+
     var track: RTCVideoTrack? {
         get { contentView.track }
         set { contentView.track = newValue }
@@ -46,7 +94,77 @@ final class StreamAVPictureInPictureVideoCallViewController: AVPictureInPictureV
     }
     
     var displayLayer: CALayer { contentView.displayLayer }
-    
+
+    // MARK: - Avatar Placeholder Properties
+
+    var participantName: String? {
+        get { contentView.participantName }
+        set { contentView.participantName = newValue }
+    }
+
+    var participantImageURL: String? {
+        get { contentView.participantImageURL }
+        set { contentView.participantImageURL = newValue }
+    }
+
+    var isVideoEnabled: Bool {
+        get { contentView.isVideoEnabled }
+        set { contentView.isVideoEnabled = newValue }
+    }
+
+    // MARK: - Reconnection Properties
+
+    var isReconnecting: Bool {
+        get { contentView.isReconnecting }
+        set { contentView.isReconnecting = newValue }
+    }
+
+    // MARK: - Screen Sharing Properties
+
+    var isScreenSharing: Bool {
+        get { contentView.isScreenSharing }
+        set { contentView.isScreenSharing = newValue }
+    }
+
+    // MARK: - Participant Overlay Properties
+
+    var hasAudio: Bool {
+        get { contentView.hasAudio }
+        set { contentView.hasAudio = newValue }
+    }
+
+    var isTrackPaused: Bool {
+        get { contentView.isTrackPaused }
+        set { contentView.isTrackPaused = newValue }
+    }
+
+    var isPinned: Bool {
+        get { contentView.isPinned }
+        set { contentView.isPinned = newValue }
+    }
+
+    var isSpeaking: Bool {
+        get { contentView.isSpeaking }
+        set { contentView.isSpeaking = newValue }
+    }
+
+    var connectionQuality: Int {
+        get { contentView.connectionQuality }
+        set { contentView.connectionQuality = newValue }
+    }
+
+    // MARK: - Content State System
+
+    var contentState: PictureInPictureContentState? {
+        get { contentView.contentState }
+        set { contentView.contentState = newValue }
+    }
+
+    var content: PictureInPictureContent {
+        get { contentView.content }
+        set { contentView.content = newValue }
+    }
+
     // MARK: - Lifecycle
 
      @available(*, unavailable)