提交

TUIKit/TUICallKit/TUICallKit-Swift/View/Component/UserInfoView/Group/GroupBackgroundView.swift

@@ -0,0 +1,83 @@
+//
+//  GroupBackgroundView.swift
+//  TUICallKit
+//
+//  Created by noah on 2023/11/8.
+//
+
+import Foundation
+
+class GroupBackgroundView: UIView {
+    
+    let selfUserObserver = Observer()
+    
+    let userHeadImageView: UIImageView = {
+        let userHeadImageView = UIImageView(frame: CGRect.zero)
+        userHeadImageView.contentMode = .scaleAspectFill
+        return userHeadImageView
+    }()
+    
+    let blurEffectView: UIVisualEffectView = {
+        let blurEffect = UIBlurEffect(style: .light)
+        let blurEffectView = UIVisualEffectView(effect: blurEffect)
+        blurEffectView.alpha = 0.65
+        return blurEffectView
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUserImage()
+        registerObserveState()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    deinit {
+        TUICallState.instance.selfUser.removeObserver(selfUserObserver)
+    }
+    
+    // MARK: UI Specification Processing
+    private var isViewReady: Bool = false
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if isViewReady { return }
+        constructViewHierarchy()
+        activateConstraints()
+        isViewReady = true
+    }
+    
+    func constructViewHierarchy() {
+        addSubview(userHeadImageView)
+        addSubview(blurEffectView)
+    }
+    
+    func activateConstraints() {
+        self.userHeadImageView.snp.makeConstraints { make in
+            make.edges.equalTo(self)
+        }
+        self.blurEffectView.snp.makeConstraints { make in
+            make.edges.equalTo(self)
+        }
+    }
+    
+    // MARK: Register TUICallState Observer && Update UI
+    func registerObserveState() {
+        selfUserChanged()
+    }
+    
+    func selfUserChanged() {
+        TUICallState.instance.selfUser.addObserver(selfUserObserver, closure: { [weak self] newValue, _ in
+            guard let self = self else { return }
+            self.setUserImage()
+        })
+    }
+    
+    // MARK: Update UI
+    func setUserImage() {
+        let selfUser = TUICallState.instance.selfUser.value
+        userHeadImageView.sd_setImage(with: URL(string: selfUser.avatar.value),
+                                      placeholderImage: TUICallKitCommon.getBundleImage(name: "default_user_icon"))
+    }
+}

TUIKit/TUICallKit/TUICallKit-Swift/View/Component/UserInfoView/Group/GroupCallerUserInfoView.swift

@@ -0,0 +1,109 @@
+//
+//  GroupCallerUserInfoView.swift
+//  TUICallKit
+//
+//  Created by vincepzhang on 2023/3/7.
+//
+
+import Foundation
+
+class GroupCallerUserInfoView: UIView {
+    
+    let remoteUserListObserver = Observer()
+    
+    let userHeadImageView: UIImageView = {
+        let userHeadImageView = UIImageView(frame: CGRect.zero)
+        userHeadImageView.layer.masksToBounds = true
+        userHeadImageView.layer.cornerRadius = 6.0
+        if let image = TUICallKitCommon.getBundleImage(name: "default_user_icon") {
+            userHeadImageView.image = image
+        }
+        return userHeadImageView
+    }()
+    
+    let userNameLabel: UILabel = {
+        let userNameLabel = UILabel(frame: CGRect.zero)
+        userNameLabel.textColor = UIColor.t_colorWithHexString(color: "#D5E0F2")
+        userNameLabel.font = UIFont.boldSystemFont(ofSize: 24.0)
+        userNameLabel.backgroundColor = UIColor.clear
+        userNameLabel.textAlignment = .center
+        return userNameLabel
+    }()
+    
+    let waitingInviteLabel: UILabel = {
+        let waitingInviteLabel = UILabel(frame: CGRect.zero)
+        waitingInviteLabel.textColor = UIColor.t_colorWithHexString(color: "#8F9AB2")
+        waitingInviteLabel.font = UIFont.boldSystemFont(ofSize: 14.0)
+        waitingInviteLabel.backgroundColor = UIColor.clear
+        waitingInviteLabel.text = TUICallKitLocalize(key: "TUICallKit.Group.inviteToGroupCall") ?? ""
+        waitingInviteLabel.textAlignment = .center
+        return waitingInviteLabel
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUserImageAndName()
+        registerObserveState()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    deinit {
+        TUICallState.instance.remoteUserList.removeObserver(remoteUserListObserver)
+    }
+    
+    // MARK: UI Specification Processing
+    private var isViewReady: Bool = false
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if isViewReady { return }
+        constructViewHierarchy()
+        activateConstraints()
+        isViewReady = true
+    }
+    
+    func constructViewHierarchy() {
+        addSubview(userHeadImageView)
+        addSubview(userNameLabel)
+        addSubview(waitingInviteLabel)
+    }
+    
+    func activateConstraints() {
+        userHeadImageView.snp.makeConstraints { make in
+            make.top.centerX.equalTo(self)
+            make.size.equalTo(CGSize(width: 100.scaleWidth(), height: 100.scaleWidth()))
+        }
+        userNameLabel.snp.makeConstraints { make in
+            make.top.equalTo(userHeadImageView.snp.bottom).offset(10.scaleHeight())
+            make.centerX.equalTo(self)
+            make.width.equalTo(self)
+            make.height.equalTo(30)
+        }
+        waitingInviteLabel.snp.makeConstraints { make in
+            make.top.equalTo(userNameLabel.snp.bottom).offset(20.scaleHeight())
+            make.centerX.equalTo(self)
+            make.width.equalTo(self)
+            make.height.equalTo(20)
+        }
+    }
+    
+    // MARK: Register TUICallState Observer && Update UI
+    func registerObserveState() {
+        TUICallState.instance.remoteUserList.addObserver(remoteUserListObserver, closure: { [weak self] newValue, _ in
+            guard let self = self else { return }
+            self.setUserImageAndName()
+        })
+    }
+    
+    // MARK: Update UI
+    func setUserImageAndName() {
+        let remoteUser = TUICallState.instance.remoteUserList.value.first ?? User()
+        userNameLabel.text = User.getUserDisplayName(user: remoteUser)
+        
+        if let url = URL(string: remoteUser.avatar.value) {
+            userHeadImageView.sd_setImage(with: url)
+        }
+    }
+}

TUIKit/TUICallKit/TUICallKit-Swift/View/Component/UserInfoView/Group/InviteeAvatarCell.swift

@@ -0,0 +1,67 @@
+//
+//  InviteeAvatarCell.swift
+//  TUICallKit
+//
+//  Created by vincepzhang on 2023/3/2.
+//
+
+import Foundation
+
+class InviteeAvatarCell: UICollectionViewCell {
+    
+    private var user: User = User()
+    private let userIcon = {
+        let imageView = UIImageView(frame: CGRect.zero)
+        imageView.contentMode = .scaleAspectFill
+        imageView.layer.masksToBounds = true
+        imageView.layer.cornerRadius = 2.0
+        if let image = TUICallKitCommon.getBundleImage(name: "default_user_icon") {
+            imageView.image = image
+        }
+        return imageView
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    // MARK: UI Specification Processing
+    private var isViewReady: Bool = false
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if isViewReady { return }
+        constructViewHierarchy()
+        activateConstraints()
+        isViewReady = true
+    }
+    
+    private func constructViewHierarchy() {
+        contentView.addSubview(userIcon)
+    }
+    
+    private func activateConstraints() {
+        userIcon.snp.makeConstraints { make in
+            make.edges.equalTo(self.contentView)
+        }
+    }
+    
+    func initCell(user: User) {
+        self.user = user
+        setUserIcon()
+    }
+    
+    private func setUserIcon() {
+        let userImage: UIImage? = TUICallKitCommon.getBundleImage(name: "default_user_icon")
+        
+        if user.avatar.value == "" {
+            guard let image = userImage else { return }
+            userIcon.image = image
+        } else {
+            userIcon.sd_setImage(with: URL(string: user.avatar.value), placeholderImage: userImage)
+        }
+    }
+}

TUIKit/TUICallKit/TUICallKit-Swift/View/Component/UserInfoView/Group/InviteeAvatarListView.swift

@@ -0,0 +1,157 @@
+//
+//  InviteeAvatarListView.swift
+//  TUICallKit
+//
+//  Created by vincepzhang on 2023/3/2.
+//
+
+import Foundation
+
+private let kItemWidth = 32.scaleWidth()
+private let kSpacing = 5.scaleWidth()
+
+class InviteeAvatarListView: UIView, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
+    
+    let remoteUserListObserver = Observer()
+    let dataSource: Observable<[User]> = Observable(Array())
+    
+    lazy var describeLabel: UILabel = {
+        let describeLabel = UILabel()
+        describeLabel.font = UIFont.systemFont(ofSize: 12.0)
+        describeLabel.textColor = UIColor.t_colorWithHexString(color: "#D5E0F2")
+        describeLabel.textAlignment = .center
+        describeLabel.isUserInteractionEnabled = false
+        describeLabel.text = TUICallKitLocalize(key: "TUICallKit.calleeTip") ?? ""
+        return describeLabel
+    }()
+    
+    lazy var calleeCollectionView = {
+        let layout = UICollectionViewFlowLayout()
+        layout.scrollDirection = .horizontal
+        let calleeCollectionView = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
+        calleeCollectionView.delegate = self
+        calleeCollectionView.dataSource = self
+        calleeCollectionView.showsVerticalScrollIndicator = false
+        calleeCollectionView.showsHorizontalScrollIndicator = false
+        calleeCollectionView.backgroundColor = UIColor.clear
+        return calleeCollectionView
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        var dataList = TUICallState.instance.remoteUserList.value
+        dataList.append(TUICallState.instance.selfUser.value)
+        dataSource.value = removeCallUser(remoteUserList: dataList)
+        registerObserveState()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    deinit {
+        TUICallState.instance.remoteUserList.removeObserver(remoteUserListObserver)
+    }
+    
+    func removeCallUser(remoteUserList: [User]) -> [User] {
+        let userList = remoteUserList.filter { $0.callRole.value != .call }
+        return userList
+    }
+    
+    // MARK: UI Specification Processing
+    private var isViewReady: Bool = false
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if isViewReady { return }
+        constructViewHierarchy()
+        activateConstraints()
+        bindInteraction()
+        updateDescribeLabel()
+        isViewReady = true
+    }
+    
+    func constructViewHierarchy() {
+        addSubview(describeLabel)
+        addSubview(calleeCollectionView)
+    }
+    
+    func activateConstraints() {
+        describeLabel.snp.makeConstraints { make in
+            make.bottom.equalTo(calleeCollectionView.snp.top).offset(-5.scaleWidth())
+            make.centerX.equalTo(self)
+            make.width.equalTo(Screen_Width)
+            make.height.equalTo(20)
+        }
+        calleeCollectionView.snp.makeConstraints { make in
+            make.centerX.equalTo(self)
+            make.width.equalTo(Screen_Width)
+            make.height.equalTo(40)
+        }
+    }
+    
+    func bindInteraction() {
+        calleeCollectionView.register(InviteeAvatarCell.self, forCellWithReuseIdentifier: "InviteeAvatarCell")
+    }
+    
+    // MARK: Register TUICallState Observer && Update UI
+    func registerObserveState() {
+        remoteUserChanged()
+    }
+    
+    func remoteUserChanged() {
+        TUICallState.instance.remoteUserList.addObserver(remoteUserListObserver, closure: { [weak self] newValue, _ in
+            guard let self = self else { return }
+            var dataList = newValue
+            dataList.append(TUICallState.instance.selfUser.value)
+            self.dataSource.value = self.removeCallUser(remoteUserList: dataList)
+            
+            self.updateDescribeLabel()
+            self.calleeCollectionView.reloadData()
+            self.calleeCollectionView.layoutIfNeeded()
+        })
+    }
+    
+    func updateDescribeLabel() {
+        let count = dataSource.value.count
+        
+        if count >= 1 {
+            describeLabel.isHidden = false
+        } else {
+            describeLabel.isHidden = true
+        }
+    }
+}
+
+// MARK: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout
+extension InviteeAvatarListView {
+    
+    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+        return dataSource.value.count
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "InviteeAvatarCell", for: indexPath) as! InviteeAvatarCell
+        cell.initCell(user: dataSource.value[indexPath.row])
+        return cell
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+        return CGSize(width: kItemWidth, height: kItemWidth)
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
+        return kSpacing
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
+        return kSpacing
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+        let cellCount = collectionView.numberOfItems(inSection: section)
+        var inset = (collectionView.bounds.size.width - ((CGFloat(cellCount)) * kItemWidth) - ((CGFloat(cellCount) - 1) * kSpacing)) * 0.5
+        inset = max(inset, 0.0)
+        return UIEdgeInsets(top: 0.0, left: inset, bottom: 0.0, right: 0.0)
+    }
+    
+}

TUIKit/TUICallKit/TUICallKit-Swift/View/Component/UserInfoView/Single/BackgroundView.swift

@@ -0,0 +1,85 @@
+//
+//  AvatarBackgroundView.swift
+//  TUICallKit
+//
+//  Created by noah on 2023/11/2.
+//
+
+import Foundation
+
+class BackgroundView: UIView {
+    
+    let remoteUserListObserver = Observer()
+    
+    let userHeadImageView: UIImageView = {
+        let userHeadImageView = UIImageView(frame: CGRect.zero)
+        userHeadImageView.contentMode = .scaleAspectFill
+        if let image = TUICallKitCommon.getBundleImage(name: "default_user_icon") {
+            userHeadImageView.image = image
+        }
+        return userHeadImageView
+    }()
+    
+    let blurEffectView: UIVisualEffectView = {
+        let blurEffect = UIBlurEffect(style: .light)
+        let blurEffectView = UIVisualEffectView(effect: blurEffect)
+        blurEffectView.alpha = 0.65
+        return blurEffectView
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUserImage()
+        registerObserveState()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    deinit {
+        TUICallState.instance.remoteUserList.removeObserver(remoteUserListObserver)
+    }
+    
+    // MARK: UI Specification Processing
+    private var isViewReady: Bool = false
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if isViewReady { return }
+        constructViewHierarchy()
+        activateConstraints()
+        isViewReady = true
+    }
+    
+    func constructViewHierarchy() {
+        addSubview(userHeadImageView)
+        addSubview(blurEffectView)
+    }
+    
+    func activateConstraints() {
+        self.userHeadImageView.snp.makeConstraints { make in
+            make.edges.equalTo(self)
+        }
+        self.blurEffectView.snp.makeConstraints { make in
+            make.edges.equalTo(self)
+        }
+    }
+    
+    // MARK: Register TUICallState Observer && Update UI
+    func registerObserveState() {
+        remoteUserListChanged()
+    }
+    
+    func remoteUserListChanged() {
+        TUICallState.instance.remoteUserList.addObserver(remoteUserListObserver, closure: { [weak self] newValue, _ in
+            guard let self = self else { return }
+            self.setUserImage()
+        })
+    }
+    
+    // MARK: Update UI
+    func setUserImage() {
+        let remoteUser = TUICallState.instance.remoteUserList.value.first ?? User()
+        userHeadImageView.sd_setImage(with: URL(string: remoteUser.avatar.value))
+    }
+}

TUIKit/TUICallKit/TUICallKit-Swift/View/Component/UserInfoView/Single/CallStatusTipView.swift

@@ -0,0 +1,139 @@
+//
+//  CallStatusView.swift
+//  TUICallKit
+//
+//  Created by vincepzhang on 2023/2/15.
+//
+
+import Foundation
+
+class CallStatusTipView: UIView {
+    
+    let selfCallStatusObserver = Observer()
+    let networkQualityObserver = Observer()
+    private var isFirstShowAccept: Bool = true
+    
+    let callStatusLabel: UILabel = {
+        let callStatusLabel = UILabel(frame: CGRect.zero)
+        callStatusLabel.textColor = UIColor.t_colorWithHexString(color: "#FFFFFF")
+        callStatusLabel.font = UIFont.systemFont(ofSize: 15.0)
+        callStatusLabel.backgroundColor = UIColor.clear
+        callStatusLabel.textAlignment = .center
+        return callStatusLabel
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        isFirstShowAccept = (TUICallState.instance.selfUser.value.callStatus.value == .accept) ? false : true
+        updateStatusText()
+        registerObserveState()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    deinit {
+        TUICallState.instance.selfUser.value.callStatus.removeObserver(selfCallStatusObserver)
+        TUICallState.instance.networkQualityReminder.removeObserver(networkQualityObserver)
+    }
+    
+    // MARK: UI Specification Processing
+    private var isViewReady: Bool = false
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if isViewReady { return }
+        constructViewHierarchy()
+        activateConstraints()
+        isViewReady = true
+    }
+    
+    func constructViewHierarchy() {
+        addSubview(callStatusLabel)
+    }
+    
+    func activateConstraints() {
+        self.callStatusLabel.snp.makeConstraints { make in
+            make.edges.equalTo(self)
+        }
+    }
+    
+    // MARK: Register TUICallState Observer && Update UI
+    func registerObserveState() {
+        callStatusChange()
+        networkQualityChange()
+    }
+    
+    func callStatusChange() {
+        TUICallState.instance.selfUser.value.callStatus.addObserver(selfCallStatusObserver, closure: { [weak self] newValue, _ in
+            guard let self = self else { return }
+            self.updateStatusText()
+        })
+    }
+    
+    func networkQualityChange() {
+        TUICallState.instance.networkQualityReminder.addObserver(networkQualityObserver, closure: { [weak self] newValue, _ in
+            guard let self = self else { return }
+            self.updateNetworkQualityText()
+        })
+    }
+    
+    func updateNetworkQualityText() {
+        switch TUICallState.instance.networkQualityReminder.value {
+        case .Local:
+            self.callStatusLabel.text = TUICallKitLocalize(key: "TUICallKit.Self.NetworkLowQuality") ?? ""
+            break
+        case .Remote:
+            self.callStatusLabel.text = TUICallKitLocalize(key: "TUICallKit.OtherParty.NetworkLowQuality") ?? ""
+            break
+        case .None:
+            updateStatusText()
+            break
+        }
+    }
+    
+    func updateStatusText() {
+        switch TUICallState.instance.selfUser.value.callStatus.value {
+        case .waiting:
+            self.callStatusLabel.text = self.getCurrentWaitingText()
+            break
+        case .accept:
+            if isFirstShowAccept {
+                self.callStatusLabel.text = TUICallKitLocalize(key: "TUICallKit.accept") ?? ""
+                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+                    self.isFirstShowAccept = false
+                }
+            } else {
+                self.callStatusLabel.text = ""
+            }
+            break
+        case .none:
+            break
+        default:
+            break
+        }
+    }
+    
+    func getCurrentWaitingText() -> String {
+        var waitingText = String()
+        switch TUICallState.instance.mediaType.value {
+        case .audio:
+            if TUICallState.instance.selfUser.value.callRole.value == .call {
+                waitingText = TUICallKitLocalize(key: "TUICallKit.waitAccept") ?? ""
+            } else {
+                waitingText = TUICallKitLocalize(key: "TUICallKit.inviteToAudioCall") ?? ""
+            }
+        case .video:
+            if TUICallState.instance.selfUser.value.callRole.value == .call {
+                waitingText = TUICallKitLocalize(key: "TUICallKit.waitAccept") ?? ""
+            } else {
+                waitingText = TUICallKitLocalize(key: "TUICallKit.inviteToVideoCall") ?? ""
+            }
+        case .unknown:
+            break
+        default:
+            break
+        }
+        return waitingText
+    }
+}

TUIKit/TUICallKit/TUICallKit-Swift/View/Component/UserInfoView/Single/CallUserInfoView.swift

@@ -0,0 +1,96 @@
+//
+//  CallUserInfoView.swift
+//  TUICallKit
+//
+//  Created by vincepzhang on 2023/2/15.
+//
+
+import Foundation
+
+class CallUserInfoView: UIView {
+    
+    let remoteUserListObserver = Observer()
+    
+    let userHeadImageView: UIImageView = {
+        let userHeadImageView = UIImageView(frame: CGRect.zero)
+        userHeadImageView.layer.masksToBounds = true
+        userHeadImageView.layer.cornerRadius = 6.0
+        if let image = TUICallKitCommon.getBundleImage(name: "default_user_icon") {
+            userHeadImageView.image = image
+        }
+        return userHeadImageView
+    }()
+    
+    let userNameLabel: UILabel = {
+        let userNameLabel = UILabel(frame: CGRect.zero)
+        userNameLabel.textColor = UIColor.t_colorWithHexString(color: "#D5E0F2")
+        userNameLabel.font = UIFont.boldSystemFont(ofSize: 18.0)
+        userNameLabel.backgroundColor = UIColor.clear
+        userNameLabel.textAlignment = .center
+        return userNameLabel
+    }()
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUserImageAndName()
+        registerObserveState()
+    }
+    
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    deinit {
+        TUICallState.instance.remoteUserList.removeObserver(remoteUserListObserver)
+    }
+    
+    // MARK: UI Specification Processing
+    private var isViewReady: Bool = false
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+        if isViewReady { return }
+        constructViewHierarchy()
+        activateConstraints()
+        isViewReady = true
+    }
+    
+    func constructViewHierarchy() {
+        addSubview(userHeadImageView)
+        addSubview(userNameLabel)
+    }
+    
+    func activateConstraints() {
+        self.userHeadImageView.snp.makeConstraints { make in
+            make.top.centerX.equalTo(self)
+            make.size.equalTo(CGSize(width: 100.scaleWidth(), height: 100.scaleWidth()))
+        }
+        self.userNameLabel.snp.makeConstraints { make in
+            make.top.equalTo(userHeadImageView.snp.bottom).offset(10.scaleHeight())
+            make.centerX.equalTo(self)
+            make.width.equalTo(self)
+            make.height.equalTo(30)
+        }
+    }
+    
+    // MARK: Register TUICallState Observer && Update UI
+    func registerObserveState() {
+        remoteUserListChanged()
+    }
+    
+    func remoteUserListChanged() {
+        TUICallState.instance.remoteUserList.addObserver(remoteUserListObserver, closure: { [weak self] newValue, _ in
+            guard let self = self else { return }
+            self.setUserImageAndName()
+        })
+    }
+    
+    // MARK: Update UI
+    func setUserImageAndName() {
+        let remoteUser = TUICallState.instance.remoteUserList.value.first ?? User()
+        userNameLabel.text = User.getUserDisplayName(user: remoteUser)
+        
+        if let url = URL(string: remoteUser.avatar.value) {
+            userHeadImageView.sd_setImage(with: url)
+        }
+    }
+}