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

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)