@capgo/capacitor-stream-call 0.0.2

package/ios/Sources/StreamCallPlugin/CustomCallView.swift

@@ -0,0 +1,257 @@
+//
+// Copyright © 2025 Stream.io Inc. All rights reserved.
+//
+
+import StreamVideo
+import StreamWebRTC
+import SwiftUI
+import StreamVideoSwiftUI
+
+// Custom class to hold bindable settings
+class BindableCallSettings: ObservableObject {
+    @Published var settings: CallSettings
+
+    init(settings: CallSettings) {
+        self.settings = settings
+    }
+}
+
+public struct CustomCallView<Factory: ViewFactory>: View {
+
+    @Injected(\.streamVideo) var streamVideo
+    @Injected(\.images) var images
+    @Injected(\.colors) var colors
+
+    var viewFactory: Factory
+    @ObservedObject var viewModel: CallViewModel
+    @StateObject private var bindableSettings: BindableCallSettings
+
+    public init(
+        viewFactory: Factory = DefaultViewFactory.shared,
+        viewModel: CallViewModel
+    ) {
+        self.viewFactory = viewFactory
+        self.viewModel = viewModel
+        self._bindableSettings = StateObject(wrappedValue: BindableCallSettings(settings: viewModel.callSettings))
+    }
+
+    public var body: some View {
+        VStack {
+            GeometryReader { videoFeedProxy in
+                ZStack {
+                    contentView(videoFeedProxy.frame(in: .global))
+
+                    cornerDraggableView(videoFeedProxy)
+                }
+            }
+            .padding([.leading, .trailing], 8)
+        }
+        .background(Color(colors.callBackground).edgesIgnoringSafeArea(.all))
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .onAppear {
+            UIApplication.shared.isIdleTimerDisabled = true
+        }
+        .onDisappear {
+            UIApplication.shared.isIdleTimerDisabled = false
+        }
+        .enablePictureInPicture(viewModel.isPictureInPictureEnabled)
+        .presentParticipantListView(viewModel: viewModel, viewFactory: viewFactory)
+        .onChange(of: viewModel.callSettings) { newSettings in
+            bindableSettings.settings = newSettings
+        }
+    }
+
+    @ViewBuilder
+    private func contentView(_ availableFrame: CGRect) -> some View {
+        if viewModel.localVideoPrimary, viewModel.participantsLayout == .grid {
+            localVideoView(bounds: availableFrame)
+                .accessibility(identifier: "localVideoView")
+        } else if
+            let screenSharingSession = viewModel.call?.state.screenSharingSession,
+            viewModel.call?.state.isCurrentUserScreensharing == false {
+            viewFactory.makeScreenSharingView(
+                viewModel: viewModel,
+                screensharingSession: screenSharingSession,
+                availableFrame: availableFrame
+            )
+        } else {
+            participantsView(bounds: availableFrame)
+        }
+    }
+
+    private var shouldShowDraggableView: Bool {
+        let participantsCount = viewModel.participants.count
+        return (viewModel.call?.state.screenSharingSession == nil || viewModel.call?.state.isCurrentUserScreensharing == true)
+            && viewModel.participantsLayout == .grid
+            && participantsCount > 0
+            && participantsCount <= 3
+    }
+
+    @ViewBuilder
+    private func cornerDraggableView(_ proxy: GeometryProxy) -> some View {
+        if shouldShowDraggableView {
+            CornerDraggableView(
+                content: { cornerDraggableViewContent($0) },
+                proxy: proxy,
+                onTap: {
+                    withAnimation {
+                        if participants.count == 1 {
+                            viewModel.localVideoPrimary.toggle()
+                        }
+                    }
+                }
+            )
+            .accessibility(identifier: "cornerDraggableView")
+            .opacity(viewModel.hideUIElements ? 0 : 1)
+            .padding()
+        } else {
+            EmptyView()
+        }
+    }
+
+    @ViewBuilder
+    private func cornerDraggableViewContent(_ bounds: CGRect) -> some View {
+        if viewModel.localVideoPrimary {
+            minimizedView(bounds: bounds)
+        } else {
+            localVideoView(bounds: bounds)
+        }
+    }
+
+    @ViewBuilder
+    private func minimizedView(bounds: CGRect) -> some View {
+        if let firstParticipant = viewModel.participants.first {
+            viewFactory.makeVideoParticipantView(
+                participant: firstParticipant,
+                id: firstParticipant.id,
+                availableFrame: bounds,
+                contentMode: .scaleAspectFit,
+                customData: [:],
+                call: viewModel.call
+            )
+            .modifier(
+                viewFactory.makeVideoCallParticipantModifier(
+                    participant: firstParticipant,
+                    call: viewModel.call,
+                    availableFrame: bounds,
+                    ratio: bounds.width / bounds.height,
+                    showAllInfo: true
+                )
+            )
+            .accessibility(identifier: "minimizedParticipantView")
+        } else {
+            EmptyView()
+        }
+    }
+
+    @ViewBuilder
+    private func localVideoView(bounds: CGRect) -> some View {
+        if let localParticipant = viewModel.localParticipant {
+            CustomLocalVideoView(
+                viewFactory: viewFactory,
+                participant: localParticipant,
+                callSettings: bindableSettings.settings,
+                call: viewModel.call,
+                availableFrame: bounds
+            )
+            .modifier(viewFactory.makeLocalParticipantViewModifier(
+                localParticipant: localParticipant,
+                callSettings: $bindableSettings.settings,
+                call: viewModel.call
+            ))
+        } else {
+            EmptyView()
+        }
+    }
+
+    private func participantsView(bounds: CGRect) -> some View {
+        viewFactory.makeVideoParticipantsView(
+            viewModel: viewModel,
+            availableFrame: bounds,
+            onChangeTrackVisibility: viewModel.changeTrackVisibility(for:isVisible:)
+        )
+    }
+
+    public func makeVideoParticipantsView(
+        viewModel: CallViewModel,
+        availableFrame: CGRect,
+        onChangeTrackVisibility: @escaping @MainActor(CallParticipant, Bool) -> Void
+    ) -> some View {
+        VideoParticipantsView(
+            viewFactory: self.viewFactory,
+            viewModel: viewModel,
+            availableFrame: availableFrame,
+            onChangeTrackVisibility: onChangeTrackVisibility
+        )
+    }
+
+    private var participants: [CallParticipant] {
+        viewModel.participants
+    }
+}
+
+// Custom modifier that doesn't require binding
+struct CustomLocalParticipantViewModifier: ViewModifier {
+    let localParticipant: CallParticipant
+    let callSettings: CallSettings
+    let call: Call?
+
+    func body(content: Content) -> some View {
+        content
+            .overlay(
+                VStack {
+                    HStack {
+                        Text(localParticipant.name)
+                            .foregroundColor(.white)
+                            .padding(.horizontal, 8)
+                            .padding(.vertical, 4)
+                            .background(Color.black.opacity(0.5))
+                            .cornerRadius(8)
+                        Spacer()
+                    }
+                    Spacer()
+                }
+                .padding(8)
+            )
+    }
+}
+
+public struct CustomLocalVideoView<Factory: ViewFactory>: View {
+
+    @Injected(\.streamVideo) var streamVideo
+
+    private let callSettings: CallSettings
+    private var viewFactory: Factory
+    private var participant: CallParticipant
+    private var idSuffix: String
+    private var call: Call?
+    private var availableFrame: CGRect
+
+    public init(
+        viewFactory: Factory = DefaultViewFactory.shared,
+        participant: CallParticipant,
+        idSuffix: String = "local",
+        callSettings: CallSettings,
+        call: Call?,
+        availableFrame: CGRect
+    ) {
+        self.viewFactory = viewFactory
+        self.participant = participant
+        self.idSuffix = idSuffix
+        self.callSettings = callSettings
+        self.call = call
+        self.availableFrame = availableFrame
+    }
+
+    public var body: some View {
+        viewFactory.makeVideoParticipantView(
+            participant: participant,
+            id: "\(streamVideo.user.id)-\(idSuffix)",
+            availableFrame: availableFrame,
+            contentMode: .scaleAspectFit,
+            customData: ["videoOn": .bool(callSettings.videoOn)],
+            call: call
+        )
+        .adjustVideoFrame(to: availableFrame.width, ratio: availableFrame.width / availableFrame.height)
+    }
+}

package/ios/Sources/StreamCallPlugin/CustomVideoParticipantsView.swift

@@ -0,0 +1,107 @@
+import StreamVideo
+import StreamVideoSwiftUI
+import StreamWebRTC
+import SwiftUI
+
+public struct CustomVideoCallParticipantView<Factory: ViewFactory>: View {
+
+    @Injected(\.images) var images
+    @Injected(\.streamVideo) var streamVideo
+
+    var viewFactory: Factory
+    let participant: CallParticipant
+    var id: String
+    var availableFrame: CGRect
+    var contentMode: UIView.ContentMode
+    var edgesIgnoringSafeArea: Edge.Set
+    var customData: [String: RawJSON]
+    var call: Call?
+
+    @State private var isUsingFrontCameraForLocalUser: Bool = false
+
+    public init(
+        viewFactory: Factory = DefaultViewFactory.shared,
+        participant: CallParticipant,
+        id: String? = nil,
+        availableFrame: CGRect,
+        contentMode: UIView.ContentMode,
+        edgesIgnoringSafeArea: Edge.Set = .all,
+        customData: [String: RawJSON],
+        call: Call?
+    ) {
+        print("size: \(availableFrame.size)")
+        self.viewFactory = viewFactory
+        self.participant = participant
+        self.id = id ?? participant.id
+        self.availableFrame = availableFrame
+        self.contentMode = contentMode
+        self.edgesIgnoringSafeArea = edgesIgnoringSafeArea
+        self.customData = customData
+        self.call = call
+    }
+
+    public var body: some View {
+        withCallSettingsObservation {
+            VideoRendererView(
+                id: id,
+                size: availableFrame.size,
+                contentMode: contentMode,
+                showVideo: showVideo,
+                handleRendering: { [weak call, participant] view in
+                    guard call != nil else { return }
+                    view.handleViewRendering(for: participant) { [weak call] size, participant in
+                        Task { [weak call] in
+                            await call?.updateTrackSize(size, for: participant)
+                        }
+                    }
+                }
+            )
+        }
+        .opacity(showVideo ? 1 : 0)
+        .edgesIgnoringSafeArea(edgesIgnoringSafeArea)
+        .accessibility(identifier: "callParticipantView")
+        .streamAccessibility(value: showVideo ? "1" : "0")
+        .overlay(
+            //            CustomCallParticipantImageView(
+            //                viewFactory: viewFactory,
+            //                id: participant.id,
+            //                name: participant.name,
+            //                imageURL: participant.profileImageURL
+            //                // frame: availableFrame.size
+            //            )
+            Color.green
+                .frame(width: availableFrame.width, height: availableFrame.height)
+                .opacity(showVideo ? 0 : 1)
+        )
+    }
+
+    private var showVideo: Bool {
+        participant.shouldDisplayTrack || customData["videoOn"]?.boolValue == true
+    }
+
+    @MainActor
+    @ViewBuilder
+    private func withCallSettingsObservation(
+        @ViewBuilder _ content: () -> some View
+    ) -> some View {
+        if participant.id == streamVideo.state.activeCall?.state.localParticipant?.id {
+            content()
+                .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+                .onReceive(call?.state.$callSettings) { self.isUsingFrontCameraForLocalUser = $0.cameraPosition == .front }
+        } else {
+            content()
+        }
+    }
+}
+
+extension Color {
+    init(hex: UInt, alpha: Double = 1) {
+        self.init(
+            .sRGB,
+            red: Double((hex >> 16) & 0xff) / 255,
+            green: Double((hex >> 8) & 0xff) / 255,
+            blue: Double(hex & 0xff) / 255,
+            opacity: alpha
+        )
+    }
+}

package/ios/Sources/StreamCallPlugin/ParticipantsView.swift

@@ -0,0 +1,206 @@
+//
+//  ParticipantsView.swift
+//  Pods
+//
+//  Created by Michał Tremblay on 05/02/2025.
+//
+
+import SwiftUI
+import StreamVideo
+import StreamVideoSwiftUI
+
+// Data structure to hold a label and a frame.
+struct ViewFramePreferenceData: Equatable {
+    let label: String
+    let frame: CGRect
+}
+
+// PreferenceKey to collect frames.
+struct ViewFramePreferenceKey: PreferenceKey {
+    static var defaultValue: [ViewFramePreferenceData] = []
+
+    static func reduce(value: inout [ViewFramePreferenceData], nextValue: () -> [ViewFramePreferenceData]) {
+        value.append(contentsOf: nextValue())
+    }
+}
+
+// An extension to attach a label and record the view's frame.
+extension View {
+    func labelFrame(_ label: String) -> some View {
+        self.background(
+            GeometryReader { geo in
+                Color.clear
+                    .preference(key: ViewFramePreferenceKey.self,
+                                value: [ViewFramePreferenceData(label: label,
+                                                                frame: geo.frame(in: .global))])
+                    .onAppear {
+                        print("ParticipantsView - Collecting frame for label: \(label)")
+                        print("Frame: \(geo.frame(in: .global))")
+                    }
+            }
+        )
+    }
+}
+
+struct ParticipantsView: View {
+
+    var call: Call
+    var participants: [CallParticipant]
+    var onChangeTrackVisibility: (CallParticipant?, Bool) -> Void
+    var localParticipant: CallParticipant
+    @State private var labeledFrames: [ViewFramePreferenceData] = []
+
+    private func findTouchInterceptView() -> TouchInterceptView? {
+        // Find the TouchInterceptView by traversing up the view hierarchy
+        var currentView = UIApplication.shared.windows.first?.rootViewController?.view
+        while let view = currentView {
+            if let touchInterceptView = view as? TouchInterceptView {
+                return touchInterceptView
+            }
+            currentView = view.superview
+        }
+        return nil
+    }
+
+    var body: some View {
+        GeometryReader { proxy in
+            if !participants.isEmpty {
+                ZStack {
+                    if participants.count >= 5 && participants.count <= 6 {
+                        let nonLocalParticipants = participants.filter { $0.userId != localParticipant.userId }
+                        let hStackSpacing: CGFloat = 8
+                        let vStackSpacing: CGFloat = 8
+                        let columnWidth = (proxy.size.width - hStackSpacing) / 2  // Account for spacing between columns
+
+                        HStack(spacing: hStackSpacing) {
+                            VStack(spacing: vStackSpacing) {
+                                ForEach(nonLocalParticipants.prefix(3)) { participant in
+                                    let frame = CGRect(
+                                        x: proxy.frame(in: .global).origin.x,
+                                        y: proxy.frame(in: .global).origin.y,
+                                        width: columnWidth,
+                                        height: (proxy.size.height - (vStackSpacing * 2)) / 3  // Account for 2 spaces between 3 rows
+                                    )
+                                    makeCallParticipantView(participant, frame: frame)
+                                        .frame(width: frame.width, height: frame.height)
+                                }
+                            }
+                            .frame(width: columnWidth, height: proxy.size.height)
+
+                            VStack(spacing: vStackSpacing) {
+                                ForEach(nonLocalParticipants.dropFirst(3)) { participant in
+                                    let frame = CGRect(
+                                        x: proxy.frame(in: .global).origin.x + columnWidth + hStackSpacing,
+                                        y: proxy.frame(in: .global).origin.y,
+                                        width: columnWidth,
+                                        height: (proxy.size.height - (vStackSpacing * 2)) / 3  // Account for 2 spaces between 3 rows
+                                    )
+                                    makeCallParticipantView(participant, frame: frame)
+                                        .frame(width: frame.width, height: frame.height)
+                                }
+                                let localFrame = CGRect(
+                                    x: proxy.frame(in: .global).origin.x + columnWidth + hStackSpacing,
+                                    y: proxy.frame(in: .global).origin.y,
+                                    width: columnWidth,
+                                    height: (proxy.size.height - (vStackSpacing * 2)) / 3  // Account for 2 spaces between 3 rows
+                                )
+                                makeCallParticipantView(localParticipant, frame: localFrame)
+                                    .frame(width: localFrame.width, height: localFrame.height)
+                            }
+                            .frame(width: columnWidth, height: proxy.size.height)
+                        }
+                        .frame(width: proxy.size.width, height: proxy.size.height)
+                        .padding(4)
+                    } else {
+                        ScrollView {
+                            LazyVStack {
+                                if participants.count == 1, let participant = participants.first {
+                                    let frame = CGRect(
+                                        x: proxy.frame(in: .global).origin.x,
+                                        y: proxy.frame(in: .global).origin.y,
+                                        width: proxy.size.width,
+                                        height: proxy.size.height
+                                    )
+
+                                    makeCallParticipantView(participant, frame: frame)
+                                        .frame(width: frame.width, height: frame.height)
+                                } else {
+                                    ForEach(participants.filter { $0.userId != localParticipant.userId }) { participant in
+                                        let frame = CGRect(
+                                            x: proxy.frame(in: .global).origin.x,
+                                            y: proxy.frame(in: .global).origin.y,
+                                            width: proxy.size.width,
+                                            height: participants.count == 4 ? proxy.size.height / 3 : (participants.count == 2 ? proxy.size.height : proxy.size.height / 2)
+                                        )
+
+                                        makeCallParticipantView(participant, frame: frame)
+                                            .frame(width: frame.width, height: frame.height)
+                                    }
+                                }
+                            }
+                        }
+
+                        if participants.count >= 2 && participants.count <= 4 {
+                            CornerDraggableView(
+                                content: { availableFrame in
+                                    LocalVideoView(
+                                        viewFactory: DefaultViewFactory.shared,
+                                        participant: localParticipant,
+                                        callSettings: call.state.callSettings,
+                                        call: call,
+                                        availableFrame: CGRect(
+                                            x: availableFrame.origin.x,
+                                            y: availableFrame.origin.y,
+                                            width: availableFrame.width,
+                                            height: availableFrame.height * 0.8
+                                        )
+                                    )
+                                    .frame(width: availableFrame.width, height: availableFrame.height * 0.8)
+                                    .cornerRadius(12)
+                                    .labelFrame("abc")
+                                },
+                                proxy: proxy
+                            ) {
+                                withAnimation {
+                                    if participants.count == 1 {
+                                        // call.state.callSettings.localVideoPrimary.toggle()
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                .onPreferenceChange(ViewFramePreferenceKey.self) { frames in
+                    print("ParticipantsView - Received frame updates:")
+                    print("Number of frames: \(frames.count)")
+                    frames.forEach { frame in
+                        print("Label: \(frame.label), Frame: \(frame.frame)")
+                    }
+                    self.labeledFrames = frames
+                    if let touchInterceptView = findTouchInterceptView() {
+                        print("ParticipantsView - Found TouchInterceptView, updating frames")
+                        touchInterceptView.updateLabeledFrames(frames)
+                    } else {
+                        print("ParticipantsView - Failed to find TouchInterceptView!")
+                    }
+                }
+            } else {
+                Color.gray
+            }
+        }
+        .edgesIgnoringSafeArea(.all)
+    }
+
+    @ViewBuilder
+    private func makeCallParticipantView(_ participant: CallParticipant, frame: CGRect) -> some View {
+        CustomVideoCallParticipantView(
+            participant: participant,
+            availableFrame: frame,
+            contentMode: .scaleAspectFit,
+            customData: [:],
+            call: call
+        )
+        //        .onAppear { onChangeTrackVisibility(participant, true) }
+        //        .onDisappear{ onChangeTrackVisibility(participant, false) }
+    }
+}