diff --git a/docs/ios/Pre-Built-Plugins_Guides/Plugins.mdx b/docs/ios/Pre-Built-Plugins_Guides/Plugins.mdx new file mode 100644 index 0000000000..ec0ac72c53 --- /dev/null +++ b/docs/ios/Pre-Built-Plugins_Guides/Plugins.mdx @@ -0,0 +1,36 @@ +--- +description: >- + Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit + with our detailed documentation. +--- + +# Pre-built Plugin screen +## Overview: How to use existing plugins screen. +We have to use a class [DytePluginViewController](/ios/components/dyte-plugins), which is used to show exising list of plugins +supported in current meeting. +Screen is build with [UITableView](https://developer.apple.com/documentation/uikit/uitableview). + + +```swift + private func showPluginScreen() { + let controller = DytePluginViewController(plugins: meeting.plugins.all) + let navigationController = UINavigationController(rootViewController: controller) + navigationController.modalPresentationStyle = .fullScreen + presentingViewController.present(navigationController, + animated: false, + completion: nil) +} +``` +We can use above code to launch list of plugin screen inside app. + +Example Image + +Every Cell of UITableView we are showing a plugin with activate/deactivate icon on the extreme right. + +For example Plugin name "Rustpad v2" in 3rd cell is showing a cross icon to deactivate plugin and every other cell is showing icon +to activate plugin. + + + + iOS DyteAvatarView + diff --git a/docs/ios/Pre-Built-Plugins_Guides/_category_.json b/docs/ios/Pre-Built-Plugins_Guides/_category_.json new file mode 100644 index 0000000000..5772922e2f --- /dev/null +++ b/docs/ios/Pre-Built-Plugins_Guides/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 8, + "label": "Plugins", + "collapsible": true +} diff --git a/docs/ios/Pre-Built-Plugins_Guides/load-plugin.mdx b/docs/ios/Pre-Built-Plugins_Guides/load-plugin.mdx new file mode 100644 index 0000000000..5e7f44a144 --- /dev/null +++ b/docs/ios/Pre-Built-Plugins_Guides/load-plugin.mdx @@ -0,0 +1,53 @@ +--- +description: >- + Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit + with our detailed documentation. +--- + + +# Load Plugins +## Overview: How to display plugins inside plugins view. +To display individual plugin inside App. We will be using component [DytePluginsView](/ios/components/dyte-plugin-view) + +### Creating plugin view + +```swift + let viewModel = VideoPeerViewModel(mobileClient: meeting, + participant: meeting.localUser, + showSelfPreviewVideo: false, + showScreenShareVideoView: true) + let pluginView = DytePluginsView(videoPeerViewModel:viewModel) + self.view.addSubview(pluginView) +``` +Use above code to create instance of DytePluginsView and add this view to any view of your choice. + +#### Loading pluginView with plugins + +You can get the list of active plugins with the help of below API + +```swift +let plugins: [DytePlugin] = self.dyteMobileClient.plugins.active +let arrButtons = [DytePluginScreenShareTabButton]() + +for plugin in plugins { + let button = DytePluginScreenShareTabButton(image: plugin.picture, title: plugin.name, id: plugin.id) + arrButtons.append(button) +} +``` +To show `arrButtons` created from above code on the [DytePluginsView](/ios/components/dyte-plugin-view), We will be using +below API. + +```swift +self.pluginView.setButtons(buttons: arrButtons, selectedIndex: 0) { [weak self] button, pluginIsClicked in + guard let self = self else {return} + // We are having plugin button tapped by the user. + // So to load this plugin inside PluginsView we need to call this API. + self.pluginView.show(pluginView: button.plugin.getPluginView()) +} + +``` + + + + iOS DyteAvatarView + diff --git a/docs/ios/Pre-Built-Polls_Guides/Polls.mdx b/docs/ios/Pre-Built-Polls_Guides/Polls.mdx new file mode 100644 index 0000000000..d30ff74097 --- /dev/null +++ b/docs/ios/Pre-Built-Polls_Guides/Polls.mdx @@ -0,0 +1,29 @@ +--- +description: >- + Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit + with our detailed documentation. +--- + +# Pre-built create poll Scren +## Overview: How to use existing create polls screen. +We have to use a class [DyteCreatePollsViewController](/ios/components/dyte-poll-form), which is used to create polls for the participant. + +Example Image + +When user press the create poll button, use below code +```swift +@objc func createPollClick(button: DyteButton) { + let controller = DyteCreatePollsViewController(dyteMobileClient: dyteMobileClient) { [weak self] result in + guard let self = self else {return} + self.controller?.view.removeFromSuperview() + self.controller = nil + } + controller.view.backgroundColor = self.view.backgroundColor + self.view.addSubview(controller.view) + self.creatPollController = controller +} +``` + + + iOS DyteAvatarView + diff --git a/docs/ios/Pre-Built-Polls_Guides/_category_.json b/docs/ios/Pre-Built-Polls_Guides/_category_.json new file mode 100644 index 0000000000..634d8c5d64 --- /dev/null +++ b/docs/ios/Pre-Built-Polls_Guides/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 11, + "label": "Polls", + "collapsible": true +} diff --git a/docs/ios/Pre-Built-Polls_Guides/prebuilt_polls.mdx b/docs/ios/Pre-Built-Polls_Guides/prebuilt_polls.mdx new file mode 100644 index 0000000000..3d484d91ee --- /dev/null +++ b/docs/ios/Pre-Built-Polls_Guides/prebuilt_polls.mdx @@ -0,0 +1,25 @@ +--- +description: >- + Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit + with our detailed documentation. +--- + +# Pre-built Polls Screen +## Overview: How to use existing polls screen. +We have to use a class [DyteShowPollsViewController](/ios/components/dyte-polls), which is used to show exising list of polls +created by participants in current meeting. With a button at the bottom to create polls. + +Example Image + +### To launch this screen we have to use below API. + +```swift +func launchPollsScreen() { + let controller = DyteShowPollsViewController(meeting: self.meeting) + self.presentingViewController.present(controller, animated: true) +} +``` + + + iOS DyteAvatarView + diff --git a/docs/ios/Pre-Built-Settings_Guides/Settings.mdx b/docs/ios/Pre-Built-Settings_Guides/Settings.mdx new file mode 100644 index 0000000000..f3a39d935f --- /dev/null +++ b/docs/ios/Pre-Built-Settings_Guides/Settings.mdx @@ -0,0 +1,37 @@ +--- +description: >- + Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit + with our detailed documentation. +--- + +# Pre-built Settings screen + +## Overview: How to use existing Settings screen. + +We have to use a class [DyteSettingViewController](/ios/components/dyte-settings), which is used to select Audio device and Camera device +from the list of available devices. + +Example Image + +### Launch prebuilt setting screen + +```swift +private func launchSettingScreen() { + let controller = DyteSettingViewController(nameTag: self.meeting.localUser.name, + meeting: self.meeting, + completion: {}) + controller.modalPresentationStyle = .fullScreen + self.present(controller, animated: true) +} +``` + +`completion` param is a clouser of type `(()->Void)? = nil` + + + iOS DyteAvatarView + diff --git a/docs/ios/Pre-Built-Settings_Guides/_category_.json b/docs/ios/Pre-Built-Settings_Guides/_category_.json new file mode 100644 index 0000000000..fdc3a9779c --- /dev/null +++ b/docs/ios/Pre-Built-Settings_Guides/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 7, + "label": "Settings", + "collapsible": true +} diff --git a/docs/ios/build-pre-call-ui/_category_.json b/docs/ios/build-pre-call-ui/_category_.json new file mode 100644 index 0000000000..ff59d70cc0 --- /dev/null +++ b/docs/ios/build-pre-call-ui/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 5, + "label": "Pre-call preview UI", + "collapsible": true +} diff --git a/docs/ios/build-pre-call-ui/build-your-own/_category_.json b/docs/ios/build-pre-call-ui/build-your-own/_category_.json new file mode 100644 index 0000000000..ec59ec7c2d --- /dev/null +++ b/docs/ios/build-pre-call-ui/build-your-own/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 5, + "label": "Build your own", + "collapsible": true +} diff --git a/docs/ios/build-pre-call-ui/build-your-own/dyte-setting.mdx b/docs/ios/build-pre-call-ui/build-your-own/dyte-setting.mdx new file mode 100644 index 0000000000..90b88af729 --- /dev/null +++ b/docs/ios/build-pre-call-ui/build-your-own/dyte-setting.mdx @@ -0,0 +1,51 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-settings.svg +sidebar_position: 2 +description: >- + Learn how to use and customize the DyteSettingViewController component in Dyte's + iOS UiKit with our detailed documentation. +--- + +# Setting Screen + +## Overview + +A screen that is used to show settings to switch between different audio/video devices. + +### Create DyteSettingViewController + +```swift +init(nameTag: String, meeting: DyteMobileClient, completion:(()->Void)? = nil) +``` + +Creates settings screen with name tag. + +#### Parameters: + +_Required:_ +**nameTag:** An String representing participant name. +**meeting:** Default meeting object +_Optional:_ +**completion:** Closure to get a callback when user presses back button present on [DyteNavigationBar](/ios/components/dyte-navigationbar) + +### Hide/Show top bar + +```swift +var shouldShowTopBar: Bool = true +``` + +Default value is `true`. To hide the topbar assign this to `false`. + +### To show DyteSettingViewController do in iOS as follows: + +```swift +let controller = DyteSettingViewController(nameTag: participant.name, + meeting: mobileClient) +controller.view.backgroundColor = self.view.backgroundColor +controller.modalPresentationStyle = .fullScreen +self.present(controller, animated: true) +``` + + + iOS DyteSettingViewController + diff --git a/docs/ios/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx b/docs/ios/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx new file mode 100644 index 0000000000..344ca5dc60 --- /dev/null +++ b/docs/ios/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx @@ -0,0 +1,73 @@ +--- +title: Basic structure +sidebar_position: 1 +--- + +## What are we building? + +We are deconstructing the default setup screen. + +At the end of this group of docs, we should have the following screen built using low level components. + +![meeting UI screenshot with labeled parts](/static/ios/meeting-setup.png) + +Let's put a basic skeleton and the initial boilerplate code. + +Barebone ui needed to redner for name textField and a button to join the meeting will look as follow: + +```swift +let joinButton = DyteJoinButton(meeting: self.mobileClient) { [weak self] button, success in + guard let self = self else {return} + if success { + self.delegate?.userJoinedMeetingSuccessfully(sender: self) + } + } + +let textFieldBottom: DyteTextField = { + let textField = DyteTextField() + textField.setPlaceHolder(text: "Insert your name") + return textField + }() +``` + +Now inside your `setup screen` you'll need to set name for user + +```swift +public override func viewDidLoad() { + super.viewDidLoad() + textFieldBottom.text = self.meeting.localUser.name +} +``` + +A common use case of pre-call UI is to give the user a option to set / edit their name. + +### Permissions + +Requires `meeting.localUser.permissions.miscellaneous.canEditDisplayName` to be `true` + +In the preset editor, ensure `Miscellaneous > Edit Name` is toggled enabled. + + + +Observe and change textField on text changes + +```swift + +func setupTextField() { + textFieldBottom.addTarget(self, action: #selector(textFieldEditingDidChange), for: .editingChanged) + textFieldBottom.delegate = self +} + +@objc func textFieldEditingDidChange(_ sender: Any) { + if !((textFieldBottom.text?.trimmingCharacters(in: .whitespaces).isEmpty) ?? false) { + if let text = textFieldBottom.text { + self.meeting.localUser.name = text + } + } +} + +``` + +`meeting.localUser.name = text` sets the new name for the participant. + +At the end, we let user join the meeting using `meeting.joinRoom()`. diff --git a/docs/ios/build-pre-call-ui/default-setup-screen.mdx b/docs/ios/build-pre-call-ui/default-setup-screen.mdx new file mode 100644 index 0000000000..05c9469c03 --- /dev/null +++ b/docs/ios/build-pre-call-ui/default-setup-screen.mdx @@ -0,0 +1,55 @@ +--- +title: DyteSetupScreen +sidebar_position: 4 +--- + +Dyte provides a default pre-call preview UI, also known as setup screen as part of our UI components. + +# SetupViewController + +## Overview + +A screen shown before joining the meeting, where you can edit your display name, +and media settings. This screen initialize the meeting and on successfull initialization +it shows a join button to join meeting. + +## Topics: + +### Create SetupViewController + +```swift + init(meetingInfo: DyteMeetingInfoV2, mobileClient: DyteMobileClient, completion:@escaping()->Void) + +``` + +Creates setup screen with the configuration object of type `DyteMeetingInfoV2` + +#### Parameters: + +Required: +meetingInfo: An instance of type `DyteMeetingInfoV2` +meeting: Default meeting object +completion: escaping closure to get a callback when Meetings ends up. For eg. When user leaved the meeting then +you want to present the starting screen. + +```swift +let controller = SetupViewController(meetingInfo: dyteMeetingInfo, + meeting: metting) { [weak self] in + guard let self = self else {return} + self.dismiss(animated: true) + self.view.hideActivityIndicator() +} +controller.modalPresentationStyle = .fullScreen +self.present(controller, animated: true) + +``` + +### Customising flow of SetupViewController using protocol + +[SetupViewControllerDelegate](/ios/components/dyte-setup-screen-delegate) + +```swift + weak var delegate: SetupViewControllerDelegate? +``` + +The delegate of the [SetupViewController](/ios/components/dyte-setup-screen) object. diff --git a/docs/ios/chat/_category_.json b/docs/ios/chat/_category_.json new file mode 100644 index 0000000000..fce8ca11dd --- /dev/null +++ b/docs/ios/chat/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 7, + "label": "Chat", + "collapsible": true +} diff --git a/docs/ios/chat/attachments-in-chat.mdx b/docs/ios/chat/attachments-in-chat.mdx new file mode 100644 index 0000000000..b3805c6b70 --- /dev/null +++ b/docs/ios/chat/attachments-in-chat.mdx @@ -0,0 +1,46 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-chat.svg +sidebar_position: 3 +description: >- + Learn how to use and customize the CustomChatViewController component in Dyte's iOS UiKit with + send file and image documentation. +--- + +# Attachments in Chat + +## Overview + +A custom chat view controller used to show chat screen with image & file upload. + +### Topics: + +Add selectors to file and image button, on tap of file and image buttons +we can open respective pickers like follows: + +```swift + @objc func addFileButtonTapped() { + var filePicker: UIDocumentPickerViewController + if #available(iOS 14.0, *) { + filePicker = UIDocumentPickerViewController(forOpeningContentTypes: [.pdf, .text, .plainText, .audio, .video, .movie, .image, .livePhoto], asCopy: false) + } else { + filePicker = UIDocumentPickerViewController(documentTypes: [], in: .import) + } + messageTextView.resignFirstResponder() + filePicker.delegate = self + present(filePicker, animated: true, completion: nil) +} + +@objc func addImageButtonTapped() { + messageTextView.resignFirstResponder() + imagePicker.delegate = self + imagePicker.sourceType = .photoLibrary + present(imagePicker, animated: true, completion: nil) +} +``` + +Implement delegates of pickerViews and once you have path to image/file this can be sent using +`meeting.chat.sendFileMessage(filePath: selectedFileURL.path)` + + + iOS CustomChatViewController + diff --git a/docs/ios/chat/components-in-chat.mdx b/docs/ios/chat/components-in-chat.mdx new file mode 100644 index 0000000000..73661d34eb --- /dev/null +++ b/docs/ios/chat/components-in-chat.mdx @@ -0,0 +1,129 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-chat.svg +sidebar_position: 2 +description: >- + Learn how to use and customize the CustomChatViewController component in Dyte's iOS UiKit with + our detailed documentation. +--- + +# Chat Components + +## Overview + +A custom chat view controller used to show chat screen with image & file upload. + +### Topics: + +Listen to chat message updates using `meeting.addChatEventsListener(chatEventsListener: self)` & get callbacks: + +```swift +extension ChatViewController: DyteChatEventsListener { + public func onNewChatMessage(message: DyteChatMessage) { + //This can be used to show local notifications + } + + public func onChatUpdates(messages: [DyteChatMessage]) { + loadChatMessages() + } +} +``` + +Creating a custom chat screen, you need following things: + +```swift +var messages: [DyteChatMessage]? +let messageTableView = UITableView() +let sendFileButton = DyteButton(style: .iconOnly(icon: DyteImage(image: sendFileImageIcon)), dyteButtonState: .focus) +let sendImageButton = DyteButton(style: .iconOnly(icon: DyteImage(image: sendImageIcon)), dyteButtonState: .active) +let sendMessageButton = DyteButton(style: .iconOnly(icon: DyteImage(image: sendMessageIcon)), dyteButtonState: .active) +var documentsViewController: DocumentsViewController? +let imagePicker = UIImagePickerController() +let messageTextView = UITextView() +``` + +`CustomChatViewController` will have a tableView and at bottom buttons to select image/file and button to send message +Load messages & scroll to bottom to show latest message: + +```swift +private func loadChatMessages() { + self.messages = self.meeting.chat.messages + if messages.count > 0 { + messageTableView.reloadData(completion: { + DispatchQueue.main.async { [weak self] in + let indexPath = IndexPath(row: (self?.messages?.count ?? 1)-1, section: 0) + self?.messageTableView.scrollToRow(at: indexPath, at: .bottom, animated: true) + } + }) + } +} +``` + +Send text message, if it is correct and empty `textView` once done: + +```swift +@objc func sendButtonTapped() { + if !messageTextView.text.isEmpty { + let spacing = CharacterSet.whitespacesAndNewlines + let message = messageTextView.text.trimmingCharacters(in: spacing) + try?meeting.chat.sendTextMessage(message: message) + messageTextView.text = "" + } +} +``` + +Few helper functions: + +```swift + +public extension UITableView { + + func reloadData(completion: @escaping () -> ()) { + UIView.animate(withDuration: 0, animations: { + self.reloadData() + }, completion: { _ in + completion() + }) + } + + func scrollToFirstCell() { + if numberOfSections > 0 { + if numberOfRows(inSection: 0) > 0 { + scrollToRow(at: IndexPath(row: 0, section: 0), at: .top, animated: true) + } + } + } + + func scrollToLastCell(animated: Bool) { + if numberOfSections > 0 { + let nRows = numberOfRows(inSection: numberOfSections - 1) + if nRows > 0 { + scrollToRow(at: IndexPath(row: nRows - 1, section: numberOfSections - 1), at: .bottom, animated: animated) + } + } + } + + func stopScrolling() { + + guard isDragging else { + return + } + + var offset = self.contentOffset + offset.y -= 1.0 + setContentOffset(offset, animated: false) + + offset.y += 1.0 + setContentOffset(offset, animated: false) + } + + func scrolledToBottom() -> Bool { + return contentOffset.y >= (contentSize.height - bounds.size.height) + } +} +``` + +`DyteChatMessage` can be of type `DyteTextMessage`, `DyteFileMessage` or `DyteImageMessage`. + + + iOS CustomChatViewController + diff --git a/docs/ios/chat/pre-built-chat-screen.mdx b/docs/ios/chat/pre-built-chat-screen.mdx new file mode 100644 index 0000000000..33d68c02d7 --- /dev/null +++ b/docs/ios/chat/pre-built-chat-screen.mdx @@ -0,0 +1,64 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-chat.svg +sidebar_position: 1 +description: >- + Learn how to use and customize the DyteChatViewController component in Dyte's iOS UiKit with + our detailed documentation. +--- + +# Pre-built Chat Screen + +## Introduction to Chat in Dyte Meetings + +In Dyte meetings, participants can also engage in real-time communication by sending chat messages. +These messages can be text, images, or files, depending on the [chat permissions](/guides/livestream/advanced/configuring-permissions#chat) +set in their preset. + +## Dyte's Prebuilt Chat Screen + +Dyte's iOS UiKit includes prebuilt Chat screen that handle the complete chat logic and offer +a range of features to enhance the chat experience in Dyte meetings: + +- **Display Messages**: Displays all chat messages, including text, images, and files, in a clear and organized manner +- **Image Preview**: Allows users to tap on an image message to view it in full screen +- **File Download**: Enables users to download files sent in chat messages with a simple tap +- **Message Composer**: Provides a user-friendly interface for composing messages, supporting text, + image, and file messages. It automatically adjusts the UI based on the user's chat permissions, + hiding or disabling options that are not permitted +- **Auto-Scroll**: Auto-scrolls to new messages as they are received but stops auto-scrolling if the user + has scrolled up to read an old message +- **Device Permissions**: Handles device permissions elegantly on all supported Android versions for sending images, files, + and downloading files to the device. This saves developers effort, allowing them to focus on building their apps + +### Topics: + +Creating a chat screen. + +```swift + let chatView = ChatViewController(dyteMobileClient: self.meeting) +``` + +Add this `chatView` to your View hierarchy. In case you need to add this to a `ViewController` you can +add it inside a view of sub `ViewController`, following example shows how to show chat screen on tap of button. + +```swift +private var splitContentViewController: UIViewController? +private let splitContentBaseView = UIView() + +func chatClick(button: DyteControlBarButton) { + if button.isSelected { + let controller = ChatViewController(dyteMobileClient: self.meeting) + self.splitContentBaseView.addSubview(controller.view) + controller.view.set(.fillSuperView(self.splitContentBaseView)) + self.splitContentViewController = controller + } +} +``` + +#### Parameters: + +meeting: Current ongoing meeting object. + + + iOS DyteChatViewController + diff --git a/docs/ios/components/_category_.json b/docs/ios/components/_category_.json index 674879114a..6c81c57fdb 100644 --- a/docs/ios/components/_category_.json +++ b/docs/ios/components/_category_.json @@ -1,5 +1,5 @@ { - "position": 5, + "position": 11, "label": "Components", "collapsible": true } diff --git a/docs/ios/components/dyte-active-tab-selector-view.mdx b/docs/ios/components/dyte-active-tab-selector-view.mdx new file mode 100644 index 0000000000..f96ae4ec49 --- /dev/null +++ b/docs/ios/components/dyte-active-tab-selector-view.mdx @@ -0,0 +1,41 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-plugins.svg +description: >- + Learn how to use and customize the DytePluginViewController component in Dyte's + iOS UiKit with our detailed documentation. +--- + +# DyteActiveTabSelectorView +## Overview +A view which show list of button of Type [DytePluginScreenShareTabButton](/ios/components/dyte-pluginScreenShareTab-button) shown + horizontally. + +Example Image + + +```swift +var buttons: [DytePluginScreenShareTabButton] +``` +Array of buttons of Type [DytePluginScreenShareTabButton](/ios/components/dyte-pluginScreenShareTab-button) which are shown inside this list. + + +```swift +func scrollToVisible(button: DytePluginScreenShareTabButton) +``` +When there are buttons more than width of this view, Then use this method to scroll to button. +#### Parameters: +**button:** button which should must be present inside `var buttons: [DytePluginScreenShareTabButton]` + + +```swift +func setAndDisplayButtons(_ buttons: [DytePluginScreenShareTabButton]) +``` +This method is used to update buttons on this view. Setting buttons will reset buttons on this view. +#### Parameters: +**buttons:** Array of [DytePluginScreenShareTabButton](/ios/components/dyte-pluginScreenShareTab-button) + to be shown on `DyteActiveTabSelectorView` + + + + iOS DytePluginViewController + diff --git a/docs/ios/components/dyte-avatar.mdx b/docs/ios/components/dyte-avatar.mdx index 935b617e41..8860d377b4 100644 --- a/docs/ios/components/dyte-avatar.mdx +++ b/docs/ios/components/dyte-avatar.mdx @@ -5,20 +5,41 @@ description: >- --- # DyteAvatarView +## Overview -Avatar component which renders a participant's image or their initials. +View which renders a participant's image or their initials. If image is present then name initials are not +shown vice versa. + +### Topics: + +### Creating a Avatar view for the participant passed. ```swift -DyteAvatarView(participant: dyteMeetingParticipant) +init(participant: DyteMeetingParticipant) ``` +Creates DyteAvatarView for the participant object you passed. + +#### Parameters: +**participant:** Participant object for which you want to show image/name initials. + + +### Explicit update the participant object for this view to show. + +```swift +func set(participant: DyteMeetingParticipant) +``` +Update Avatar view with recent participant object. +#### Parameters: +**participant:** Participant object for which you want to show image/name initials. + -And to setup DyteAvatarView inside your iOS code use as follow: +### Refreshing DyteAvatarView with latest values. ```swift -val dyteAvatarView = DyteAvatarView(participant: dyteMeetingParticipant) -self.dyteAvatarView.set(participant: dyteMeetingParticipant) -self.dyteAvatarView.refresh() +func refresh() ``` +Call this method to refresh the view. +For example if someone update the participant name. Then call this to show latest values. iOS DyteAvatarView diff --git a/docs/ios/components/dyte-button.mdx b/docs/ios/components/dyte-button.mdx index 474f40b595..2843d9e45b 100644 --- a/docs/ios/components/dyte-button.mdx +++ b/docs/ios/components/dyte-button.mdx @@ -6,21 +6,73 @@ description: >- --- # DyteButton - +## Overview A button that follows Dyte's Design System. +### Topics: + +### Creating a button. + +```swift +public init(style: Style = .solid, dyteButtonState: States = .active, size: Size = .large, appearance: DyteButtonAppearance = DyteButtonAppearanceModel()) +``` +Creates DyteButton for the **Style** **States** **Size** you passed. + +#### Parameters: +*Optional* +**style:** passed any type of Style. Default value of style is `solid`. +**dyteButtonState:** passed any type of States. Default value of states is `active`. +**size:** passed any type of Size. Default value of size is `large`. +**appearance:** Any type which conforms to protocol `DyteButtonAppearance` + +### Style +```swift +public enum Style { + case solid + case line + case iconLeftLable(icon: DyteImage) + case iconRightLable(icon: DyteImage) + case text + case textIconLeft(icon: DyteImage) + case textIconRight(icon: DyteImage) + case iconOnly(icon: DyteImage) + case splitButton +} +``` + +### States +```swift +public enum States +{ + case active + case disabled + case hover + case focus + case pressed +} +``` + +### Size +```swift +public enum Size { + case small + case medium + case large +} +``` +For example we can use DyteButton as follows ```swift let dyteImage = DyteImage(image:ImageProvider.image(named: "icon_down_arrow")) let downloadButton: DyteButton = { - let button = DyteButton(style: .iconOnly(icon: dyteImage), - dyteButtonState: .active) - button.backgroundColor = dyteSharedTokenColor.background.shade800 - button.isUserInteractionEnabled = false - button.tintColor = .white - // Set additional button properties if needed - button.selectedStateTintColor = DesignLibrary.shared.color.status.danger - return button - }() + let button = DyteButton(style: .iconOnly(icon: dyteImage), + dyteButtonState: .active) + button.backgroundColor = dyteSharedTokenColor.background.shade800 + button.isUserInteractionEnabled = false + button.tintColor = .white + // Set additional button properties if needed + button.selectedStateTintColor = DesignLibrary.shared.color.status.danger + return button +}() ``` diff --git a/docs/ios/components/dyte-camera-toggle.mdx b/docs/ios/components/dyte-camera-toggle.mdx index f8b91bd139..a13a3419d7 100644 --- a/docs/ios/components/dyte-camera-toggle.mdx +++ b/docs/ios/components/dyte-camera-toggle.mdx @@ -5,13 +5,26 @@ description: >- --- # DyteSwitchCameraButtonControlBar +## Overview +This button is use to implement the action for toggling the Camera from front to back and vice-versa. -A button which toggles your camera. +### Topics: + +### Creating a Camera toggles button. + +```swift + init(meeting: DyteMobileClient) +``` +#### Parameters: +**meeting:** Current ongoing meeting object. + + +### Override the onClick action. ```swift -let cameraSwitchButton = DyteSwitchCameraButtonControlBar(mobileClient: meeting) -cameraSwitchButton.backgroundColor = self.backgroundColor +func onClick(button: DyteControlBarButton) ``` +You can override this method inside the subclass of `DyteSwitchCameraButtonControlBar` to customize the functionality when user presses this button. iOS DyteCameraToggle diff --git a/docs/ios/components/dyte-chat.mdx b/docs/ios/components/dyte-chat.mdx index 56f64122b9..143cd88f67 100644 --- a/docs/ios/components/dyte-chat.mdx +++ b/docs/ios/components/dyte-chat.mdx @@ -1,18 +1,26 @@ --- image: /static/ui-kit/1.x.x/components/dyte-chat.svg description: >- - Learn how to use and customize the ChatViewController component in Dyte's iOS UiKit with + Learn how to use and customize the DyteChatViewController component in Dyte's iOS UiKit with our detailed documentation. --- -# ChatViewController +# DyteChatViewController +## Overview +A view controller used to show chat screen with image & file upload and auto-scroll functionality. -Fully featured chat screen with image & file upload and auto-scroll. + +### Topics: + +### Creating a chat screen. ```swift -let controller = ChatViewController(dyteMobileClient: self.meeting) + init(meeting: DyteMobileClient) ``` +#### Parameters: +**meeting:** Current ongoing meeting object. + - iOS ChatViewController + iOS DyteChatViewController diff --git a/docs/ios/components/dyte-clock.mdx b/docs/ios/components/dyte-clock.mdx index 40eff4cdb9..7a4b330618 100644 --- a/docs/ios/components/dyte-clock.mdx +++ b/docs/ios/components/dyte-clock.mdx @@ -5,14 +5,34 @@ description: >- with our detailed documentation. --- + + # DyteClockView +## Overview +This view is used to show elapsed time for the meeting in the format Hours:Minute:Seconds. + + +### Topics: + +### Creating a clock view + +```swift + init(meeting: DyteMobileClient, appearance: DyteTextAppearance = AppTheme.shared.clockViewAppearance) +``` +Creates a DyteClockView for meeting passed. + +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +*Optional* +**appearance:** Any type which conforms to protocol "DyteTextAppearance" ```swift private lazy var clockView: DyteClockView = { - let label = DyteClockView(meeting: self.meeting) - label.textAlignment = .left - return label - }() + let label = DyteClockView(meeting: self.meeting) + label.textAlignment = .left + return label +}() ``` diff --git a/docs/ios/components/dyte-configure-alertview-protocol.mdx b/docs/ios/components/dyte-configure-alertview-protocol.mdx new file mode 100644 index 0000000000..b7fe90d3bb --- /dev/null +++ b/docs/ios/components/dyte-configure-alertview-protocol.mdx @@ -0,0 +1,64 @@ +--- +description: >- + Learn how to use and customize the ConfigureWebinerAlertView component in Dyte's iOS UiKit + with our detailed documentation. +--- + +# ConfigureWebinerAlertView +## Overview +Methods and properties for managing Webinar AlertView. This will create an alert which will tells user about their +Audio and Video status before joining the webinar stage. + +## Topics: + +### Creating an alertview + +```swift + init(meeting: DyteMobileClient, participant: DyteJoinedMeetingParticipant) { +``` +#### Parameters: +Required: +meeting: Current ongoing meeting object. +participant: Participant to join stage. + +### Show AlertView to user + +```swift +func show(on view: UIView) +``` +#### Parameters: +Required: +view: Parent View on which this alertView will be shown + +### Button with functionality to join stage + +```swift +var confirmAndJoinButton: DyteButton {get} +``` +Define it as follows + +```swift +public let confirmAndJoinButton: DyteButton = { + let button = DyteUIUTility.createButton(text: "Confirm & join stage") + return button +}() +``` + +### Button with functionality to remove the alertview + +```swift +var cancelButton: DyteButton {get } +``` +Define it as follows + + ```swift +public let cancelButton: DyteButton = { + let button = DyteUIUTility.createButton(text: "Cancel") + button.backgroundColor = dyteSharedTokenColor.background.shade800 + return button +}() + ``` + + + iOS ConfigureWebinerAlertView + diff --git a/docs/ios/components/dyte-controlbar-button.mdx b/docs/ios/components/dyte-controlbar-button.mdx index 4c4b987fcb..2ba6211020 100644 --- a/docs/ios/components/dyte-controlbar-button.mdx +++ b/docs/ios/components/dyte-controlbar-button.mdx @@ -6,32 +6,22 @@ description: >- --- # DyteControlBarButton +## Overview +Subclass of [UIButton](https://developer.apple.com/documentation/uikit/uibutton) +A skeleton component used for composing Dyte buttons which are mostly add inside DyteTabbarBar +This is a base class for component likes [DyteAudioButtonControlBar](/ios/components/dyte-mic-toggle) [DyteMoreButtonControlBar](/ios/components/dyte-more-toggle) -A skeleton component used for composing buttons. - -```swift -let dyteImage = DyteImage(image: ImageProvider.image(named: "icon_more_tabbar")) -let moreButton = DyteControlBarButton(image: dyteImage, title: "More") +### Creating button +```swift +init(image: DyteImage, title: String = "", appearance: DyteControlBarButtonAppearance = DyteControlBarButtonAppearanceModel()) ``` +#### Parameters +*Required* +**image:** Instance of type `DyteImage` to be passed +*Optional* +**title:** title to be shown below the DyteImage. Default value of this is Empty Strings. +**appearance:** Any type that follows `DyteControlBarButtonAppearance` -To setup the controlbar button inside kotlin/Java code do as follows - -```swift -let controlBar = DyteTabbarBar(delegate: nil) -let moreImage = DyteImage(image: ImageProvider.image(named: "icon_more_tabbar")) -let moreButton = DyteControlBarButton(image: moreImage, title: "More") -moreButton.addTarget(self, action: #selector(clickMore(button:)), for: .touchUpInside) -let liveImage = DyteImage(image: ImageProvider.image(named: "icon_go_live")) -let liveButton = DyteControlBarButton(image: liveImage, title: "Go Live") -let endLiveImage = DyteImage(image: ImageProvider.image(named: "icon_end_live")) -liveButton.setSelected(image: endLiveImage, title: "End Live") -liveButton.addTarget(self, action: #selector(clickLive(button:)), for: .touchUpInside) -controlBar.setButtons([liveButton, moreButton, endCallButton]) -self.view.addSubview(controlBar) -// In case you want to set constraints programmatically -controlBar.set(.sameLeadingTrailing(self.view), - .bottom(self.view)) -``` iOS DyteControlBarButton diff --git a/docs/ios/components/dyte-end-meeting.mdx b/docs/ios/components/dyte-end-meeting.mdx new file mode 100644 index 0000000000..1380d25c54 --- /dev/null +++ b/docs/ios/components/dyte-end-meeting.mdx @@ -0,0 +1,31 @@ + +# DyteEndMeetingControlBarButton +## Overview +This button is use to implement the action for leaving the meeting. You can add functionality to leave the meeting +inside the app by using this button. + + +### Topics: + +### Creating a End meeting button which you mostly add inside Control Bar + +```swift +init(meeting: DyteMobileClient, alertViewController: UIViewController , onClick:((DyteEndMeetingControlBarButton, DyteLeaveDialog.DyteLeaveDialogAlertButtonType)->Void)? = nil, appearance: DyteControlBarButtonAppearance = AppTheme.shared.controlBarButtonAppearance) +``` +Creates a DyteEndMeetingControlBarButton with multiple parameters. + +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +**alertViewController:** UIViewController object on which you want to present the UIAlertViewController. UIAlertView shown as final confirmation +to leave meeting from the user. +*Optional* +**onClick:** Closure that you passed to get callback when user take action on UIAlertView +appearance: Any type which conforms to protocol "DyteControlBarButtonAppearance" + + +### Override the onClick action. +```swift +open func onClick(button: DyteEndMeetingControlBarButton) +``` +You can override this method inside the subclass of `DyteEndMeetingControlBarButton` to customize the functionality when user presses this button. diff --git a/docs/ios/components/dyte-grid.mdx b/docs/ios/components/dyte-grid.mdx index 4dcb5e6475..eb0b1c0502 100644 --- a/docs/ios/components/dyte-grid.mdx +++ b/docs/ios/components/dyte-grid.mdx @@ -12,20 +12,20 @@ it for you. ```swift gridView = GridView(showingCurrently: 9, getChildView: { - return DyteParticipantTileContainerView() - }) + return DyteParticipantTileContainerView() +}) ``` To setup the grid inside kotlin/Java code do as follows ```swift self.gridView.settingFramesForPluginsActiveInLandscapeMode(visibleItemCount: 7, - animation: true) { finish in - completion() + animation: true) { finish in + completion() } //Get a peerView if let peerView = self.gridView.childView(index: index)?.tileView { - peerView.pinView(show: show) + peerView.pinView(show: show) } ``` diff --git a/docs/ios/components/dyte-join-stage.mdx b/docs/ios/components/dyte-join-stage.mdx index 830e3fb420..9c3a36a371 100644 --- a/docs/ios/components/dyte-join-stage.mdx +++ b/docs/ios/components/dyte-join-stage.mdx @@ -1,16 +1,31 @@ --- description: >- - Learn how to use and customize the WebinarAlertView component in Dyte's iOS UiKit + Learn how to use and customize the DyteWebinarAlertView component in Dyte's iOS UiKit with our detailed documentation. --- -# WebinarAlertView - +# DyteWebinarAlertView +## Overview A confirmation dialog screen which is shown - - When the user's request to Join Stage is approved by the meeting host. - When host invites the localUser to join stage. +### Topics: + +### Creating a Audio control button which you mostly add inside Control Bar + +```swift +init(meeting: DyteMobileClient, participant: DyteJoinedMeetingParticipant) { +``` +Creates a [DyteAudioButtonControlBar](/ios/components/dyte-mic-toggle) with multiple parameters. + +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +**participant:** Participant to join stage. + +For example below code to join stage. + ```swift let alert = WebinarAlertView(meetingClient: meeting, participant: meeting.localUser) alert.layer.zPosition = 1.0 diff --git a/docs/ios/components/dyte-leave-alert-actions.mdx b/docs/ios/components/dyte-leave-alert-actions.mdx new file mode 100644 index 0000000000..5dde97d504 --- /dev/null +++ b/docs/ios/components/dyte-leave-alert-actions.mdx @@ -0,0 +1,25 @@ + + +# DyteLeaveDialogAlertButtonType +## Overview +Button types to show different action which can be taken by user when decided to leave meeting. + + +### Topics: + +#### Types. +*case* **willLeaveMeeting** + Action type which tells the client that user is about to leave a meeting. + +*case* **didLeaveMeeting** + Action type which tells the client that user leaved a meeting. + +*case* **willEndMeetingForAll** + Action type which tells the client that user is about to end meeting for all participants. + +*case* **didEndMeetingForAll** + Action type which tells the client that user has ended meeting for all participants. + +*case* **cancel** + Action type that tells the client that user revert his action. + diff --git a/docs/ios/components/dyte-leave-meeting-alert.mdx b/docs/ios/components/dyte-leave-meeting-alert.mdx new file mode 100644 index 0000000000..5aa7c475ad --- /dev/null +++ b/docs/ios/components/dyte-leave-meeting-alert.mdx @@ -0,0 +1,35 @@ + +# DyteLeaveDialog +## Overview +This class is use to show UIAlertView with various option present to user before ending the meeting. + + +### Topics: + +### Creating a Leave Dialog shown to user. + +```swift +init(meeting: DyteMobileClient, onClick:((DyteLeaveDialogAlertButtonType)->Void)? = nil) +``` +Creates a `DyteLeaveDialog` to end meeting with options to be selected by user of type `DyteLeaveDialogAlertButtonType`. + +#### Parameters: +*Required* +**meeting:** Default meeting object + +*Optional* +**onClick:** Callback is used to tell the action taken by user. Action is of type `DyteLeaveDialogAlertButtonType` + + +### Show alert to user. +```swift +func show(on viewController: UIViewController) +``` +Call this method to present an alert on viewController passed. +#### Parameters: +*Required* +**viewController:** ViewController on which you want to present this alert. + + + iOS DyteLeaveDialog + diff --git a/docs/ios/components/dyte-leave-meeting.mdx b/docs/ios/components/dyte-leave-meeting.mdx deleted file mode 100644 index 35c07b6db0..0000000000 --- a/docs/ios/components/dyte-leave-meeting.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -image: /static/ui-kit/1.x.x/components/dyte-leave-meeting.svg -description: >- - Learn how to use and customize the DyteLeaveDialog component in Dyte's - iOS UiKit with our detailed documentation. ---- - -# DyteLeaveDialog - -A component which allows you to leave a meeting or end meeting for all, if you -have the permission. - -To use the component do in kotlin/java as follows: - -```swift -let dialog = DyteLeaveDialog(meeting: self.meeting) { alertAction in - if alertAction == .willLeaveMeeting || alertAction == .willEndMeetingForAll { - self.showActivityIndicator() - } else if alertAction == .didLeaveMeeting || alertAction == .didEndMeetingForAll { - self.hideActivityIndicator() - if alertAction == .didLeaveMeeting { - self.onClick?(self , .didLeaveMeeting) - } else if alertAction == .didEndMeetingForAll { - self.onClick?(self, .didEndMeetingForAll) - } - } -} -dialog.show(on: self.alertPresentingController) -``` - - - iOS DyteLeaveMeetingView - diff --git a/docs/ios/components/dyte-meeting-title.mdx b/docs/ios/components/dyte-meeting-title.mdx deleted file mode 100644 index 6e77ec8ec7..0000000000 --- a/docs/ios/components/dyte-meeting-title.mdx +++ /dev/null @@ -1,18 +0,0 @@ ---- -image: /static/ui-kit/1.x.x/components/dyte-meeting-title.svg -description: >- - Learn how to use and customize the DyteMeetingTitleView component in Dyte's - iOS UiKit with our detailed documentation. ---- - -# DyteMeetingTitleView - -A component which displays the title of the meeting. - -```swift -let title = DyteMeetingTitle(meeting: self.meeting) -``` - - - iOS DyteMeetingTitleView - diff --git a/docs/ios/components/dyte-meeting-titlelabel.mdx b/docs/ios/components/dyte-meeting-titlelabel.mdx new file mode 100644 index 0000000000..8e06b4a826 --- /dev/null +++ b/docs/ios/components/dyte-meeting-titlelabel.mdx @@ -0,0 +1,32 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-meeting-title.svg +description: >- + Learn how to use and customize the DyteMeetingTitleView component in Dyte's + iOS UiKit with our detailed documentation. +--- + +# DyteMeetingTitleLabel +Subclass of [UILabel](https://developer.apple.com/documentation/uikit/uilabel) which displays the title of the meeting. + +### Topics: +### Creating a DyteMeetingTitleLabel. + +```swift +init(meeting: DyteMobileClient, appearance: DyteTextAppearance = AppTheme.shared.meetingTitleAppearance) +``` +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +*Optional* +**appearance:** Any type which conforms to protocol "DyteTextAppearance" + +For example you can use this as below. + +```swift +let title = DyteMeetingTitleLabel(meeting: self.meeting) +self.view.addSubview(title) +``` + + + iOS DyteMeetingTitleLabel + diff --git a/docs/ios/components/dyte-mic-toggle.mdx b/docs/ios/components/dyte-mic-toggle.mdx index 65925a5394..0d3d930267 100644 --- a/docs/ios/components/dyte-mic-toggle.mdx +++ b/docs/ios/components/dyte-mic-toggle.mdx @@ -5,16 +5,33 @@ description: >- --- # DyteAudioButtonControlBar +## Overview +Subclass of [DyteControlBarButton](/ios/components/dyte-controlbar-button) +This button is use to implement the action for mute/unmute microphone for the ongoing meeting. -A button which toggles your microphone. +### Topics: + +### Creating a Audio control button which you mostly add inside Control Bar ```swift -var buttons = [DyteControlBarButton]() -if meeting.localUser.permissions.media.canPublishAudio { - let micButton = DyteAudioButtonControlBar(meeting: meeting) - buttons.append(micButton) -} +init(meeting: DyteMobileClient, onClick:((DyteAudioButtonControlBar)->Void)? = nil, appearance: DyteControlBarButtonAppearance = AppTheme.shared.controlBarButtonAppearance) +``` +Creates a `DyteAudioButtonControlBar` with multiple parameters. + +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +*Optional* +**onClick:** Closure that you passed to get callback when user click this button. +**appearance:** Any type which conforms to protocol `DyteControlBarButtonAppearance` + + +### Override the onClick action. +```swift +open func onClick(button: DyteAudioButtonControlBar) ``` +You can override this method inside the subclass of `DyteAudioButtonControlBar` to customize the functionality when user presses this button. + iOS DyteAudioButtonControlBar diff --git a/docs/ios/components/dyte-more-toggle.mdx b/docs/ios/components/dyte-more-toggle.mdx index 659a63c123..b4e48566ff 100644 --- a/docs/ios/components/dyte-more-toggle.mdx +++ b/docs/ios/components/dyte-more-toggle.mdx @@ -4,27 +4,44 @@ description: >- iOS UiKit with our detailed documentation. --- -# DyteMoreMenuBottomSheet +# DyteMoreButtonControlBar +## Overview +Subclass of [DyteControlBarButton](/ios/components/dyte-controlbar-button) +This button is use to show/hide bottom sheet. Pressing this button again and again will toggle show/hide bottom sheet. You can add this button to show various action which are applicable according +to your presets for eg. You can show below actions +1. Mute audio for all participants +2. Mute video for all participants +3. Start/Stop meeting recording. +4. Can launch plugins. +5. Can launch polls. +6. Can lauch chats screen. +7. Can launch settings screen. -A button which toggles visibility of a more menu. +All options depends on Users presets. -```swift -var menus = [MenuType]() -if meeting.localUser.permissions.host.canMuteAudio { - menus.append(.muteAllAudio) -} +### Topics: + +### Creating a More Menu meeting button which you mostly add inside Control Bar. + +```swift +init(meeting: DyteMobileClient, presentingViewController: UIViewController, settingViewControllerCompletion:(()->Void)? = nil) { +``` +Creates a DyteMoreButtonControlBar with multiple parameters. -if meeting.localUser.permissions.host.canMuteVideo { - menus.append(.muteAllVideo) -} +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +**presentingViewController:** UIViewController object on which you want to present this bottom sheet. +*Optional* +**settingViewControllerCompletion:** Closure that you passed to get callback when user open Setting screen from setting option +from bottom sheet and closed it. When user press back from setting screen then you get this callback. -self.bottomSheet = DyteMoreMenuBottomSheet( - menus: menus, - meeting: self.meeting, - presentingViewController: self.presentingViewController) -self.bottomSheet.show() +### Override the onClick action. +```swift +func onClick(button: DyteControlBarButton) ``` +You can override this method inside the subclass of `DyteMoreButtonControlBar` to customize the functionality when user presses this button. iOS DyteMoreToggleButton diff --git a/docs/ios/components/dyte-name-tag.mdx b/docs/ios/components/dyte-name-tag.mdx index fefde81c9b..ec04c07036 100644 --- a/docs/ios/components/dyte-name-tag.mdx +++ b/docs/ios/components/dyte-name-tag.mdx @@ -6,12 +6,43 @@ description: >- --- # DyteMeetingNameTag +## Overview +This view is use show participant name followed by mic image (mute/unmute). -A component which shows a participant's name. + +### Topics: + +### Creating a meeting tag. + +```swift +init(meeting: DyteMobileClient, participant: DyteMeetingParticipant, appearance: DyteNameTagAppearance = AppTheme.shared.nameTagAppearance) +``` + +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +**participant:** Participant object for which you want to show name and Mic state enabled/disbaled. +*Optional* +**appearance:** Any type which conforms to protocol "DyteNameTagAppearance" + +### Explicit update the participant object for this view to show. ```swift -let nameTag = DyteMeetingNameTag(meeting: meeting, participant: participant) +func set(participant: DyteMeetingParticipant) ``` +Update Meeting tag view with recent participant object. +#### Parameters: +**participant:** Participant object for which you want to show name and Mic state enabled/disbaled. + + +### Refreshing DyteMeetingNameTag with latest values. + +```swift +func refresh() +``` +Call this method to refresh the view. +For example if someone update the participant name. Then call this to show latest values. + iOS DyteMeetingNameTag diff --git a/docs/ios/components/dyte-navigationbar.mdx b/docs/ios/components/dyte-navigationbar.mdx new file mode 100644 index 0000000000..0fe005c632 --- /dev/null +++ b/docs/ios/components/dyte-navigationbar.mdx @@ -0,0 +1,51 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-clock.svg +description: >- + Learn how to use and customize the DyteNavigationBar component in Dyte's iOS UiKit + with our detailed documentation. +--- + + + +# DyteNavigationBar +## Overview +This view is used as Navigation bar and can be added anywhere on any UIView. +This view consist of title and back button. +We can add custom action to back button by using +`func setClicks(previousButton:@escaping(DyteControlBarButton)->Void)` + + +### Topics: + +### Creating a Navigation bar view + +```swift + init(title: String) +``` +Creates a DyteNavigationBar with title. + +#### Parameters: +**title:** Title shown at the center of NavigationBar. + +### Getting titleLabel which is of type UILabel +```swift +let titleLabel: DyteLabel +``` + +### Getting backButton which is of type `DyteControlBarButton` + +```swift +let leftButton: DyteControlBarButton +``` + +### Setting back button click action. + +```swift +func setBackButtonClick(callBack: @escaping(DyteControlBarButton)->Void) +``` +This method is used to set the callback which is called when the user presses the back button. + + + + iOS DyteNavigationBar + diff --git a/docs/ios/components/dyte-participant-count.mdx b/docs/ios/components/dyte-participant-count.mdx index de044976e0..a2e6c40f6f 100644 --- a/docs/ios/components/dyte-participant-count.mdx +++ b/docs/ios/components/dyte-participant-count.mdx @@ -6,15 +6,29 @@ description: >- --- # DyteParticipantCountView +## Overview +Subclass of [UILabel](https://developer.apple.com/documentation/uikit/uilabel) which shows count of total joined participants in a meeting. -A component which shows count of total joined participants in a meeting. +### Topics: +### Creating a DyteParticipantCountView. + +```swift + init(meeting: DyteMobileClient, appearance: DyteTextAppearance = AppTheme.shared.participantCountAppearance) { +``` +#### Parameters: +*Required* +**meeting:** Current ongoing meeting object. +*Optional:* +**appearance:** Any type which conforms to protocol "DyteTextAppearance" + +For example you can use this as below. ```swift public lazy var lblSubtitle: DyteParticipantCountView = { - let label = DyteParticipantCountView(meeting: self.meeting) - label.textAlignment = .left - return label - }() + let label = DyteParticipantCountView(meeting: self.meeting) + label.textAlignment = .left + return label +}() ``` diff --git a/docs/ios/components/dyte-participant-tile-view.mdx b/docs/ios/components/dyte-participant-tile-view.mdx new file mode 100644 index 0000000000..19811eca54 --- /dev/null +++ b/docs/ios/components/dyte-participant-tile-view.mdx @@ -0,0 +1,40 @@ +--- +description: >- + Learn how to use and customize the DyteStageActionButtonControlBar component in + Dyte's iOS UiKit with our detailed documentation. +--- + +# DyteParticipantTileView +## Overview +This view will show Video of participant with combination of [DyteMeetingNameTag](/ios/components/dyte-name-tag) and [DyteAvatarView](/ios/components/dyte-avatar) + +Example Image + + +If video is disabled then [DyteAvatarView](/ios/components/dyte-avatar) is visible to user. + +Example Image + + + +### Create Tile view + +```swift +init(viewModel: VideoPeerViewModel) +``` +#### Parameters +**viewModel:** Instance of type [VideoPeerViewModel](/ios/Helper-Classes/dyte-plugin-view-model) + + +### Showing pin image on top left +```swift +func pinView(show: Bool) +``` +This method is used to show/hide pin image on top left. + +#### Parameters +**show:** `true` to show pin image and `false` to hide. + + + iOS DyteWebinarStageToggleButton + diff --git a/docs/ios/components/dyte-participants.mdx b/docs/ios/components/dyte-participants.mdx index 7df75d0d4a..2e84b1ddb6 100644 --- a/docs/ios/components/dyte-participants.mdx +++ b/docs/ios/components/dyte-participants.mdx @@ -10,11 +10,10 @@ description: >- A component which lists all participants, with ability to run privileged actions on each participant according to your permissions. -To show DyteParticipantsFragment do in kotlin/Java as follows: +To show ParticipantViewController do as follows: ```swift -let controller = ParticipantViewController(viewModel: - ParticipantViewControllerModel(mobileClient: meeting)) +let controller = ParticipantViewController(viewModel: ParticipantViewControllerModel(mobileClient: meeting)) controller.modalPresentationStyle = .fullScreen self.present(controller, animated: true) ``` diff --git a/docs/ios/components/dyte-plugin-view.mdx b/docs/ios/components/dyte-plugin-view.mdx new file mode 100644 index 0000000000..9cbfb10458 --- /dev/null +++ b/docs/ios/components/dyte-plugin-view.mdx @@ -0,0 +1,43 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-plugins.svg +description: >- + Learn how to use and customize the DytePluginViewController component in Dyte's + iOS UiKit with our detailed documentation. +--- + +# DytePluginsView +## Overview +A view which show individual (plugin/screen share) view. On top of this view we are showing instance of +[DyteActiveTabSelectorView](/ios/components/dyte-active-tab-selector-view). +In case of Mutliple(Count more than 1) plugins or Screen share, We are showing `DyteActiveTabSelectorView` +else it will be hidden. + +Below is the image of plugin view with 3 plugins. You can select one plugin at a time. + Now plugin name: "DocShare". +Example Image + + +## Topics: + +### Create plugins view +```swift +init(videoPeerViewModel: VideoPeerViewModel) +``` +#### Parameters +**videoPeerViewModel** Instance of type [VideoPeerViewModel](/ios/Helper-Classes/dyte-plugin-view-model) + +### Adding plugins tab button + +```swift +func setButtons(buttons: [DytePluginScreenShareTabButton], selectedIndex: Int?, clickAction:@escaping(DytePluginScreenShareTabButton, Bool)->Void) +``` +#### Parameters +**buttons:** Array of DytePluginScreenShareTabButton to be shown inside [DyteActiveTabSelectorView](/ios/components/dyte-active-tab-selector-view) +**selectedIndex:** Index of plugin button which needs to be selected from `buttons: [DytePluginScreenShareTabButton]` +**clickAction:** Call back of type `(DytePluginScreenShareTabButton, Bool)->Void`.
*First parameter* is the button selected by user +.
*Second parameter* is bool that tells whether button tapped is plugin or either screen share button. `true` is plugin/screen share button clicked. + + + + iOS DytePluginViewController + diff --git a/docs/ios/components/dyte-pluginScreenShareTab-button.mdx b/docs/ios/components/dyte-pluginScreenShareTab-button.mdx new file mode 100644 index 0000000000..c37062d69d --- /dev/null +++ b/docs/ios/components/dyte-pluginScreenShareTab-button.mdx @@ -0,0 +1,53 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-plugins.svg +description: >- + Learn how to use and customize the DytePluginViewController component in Dyte's + iOS UiKit with our detailed documentation. +--- + +# DytePluginScreenShareTabButton +## Overview +Subclass of [UIButton](https://developer.apple.com/documentation/uikit/uibutton) +Mostly used to add plugin button to [DyteActiveTabSelectorView](/ios/components/dyte-active-tab-selector-view) + +## Topics: + +### Creating button + +```swift +init(image: DyteImage?, title: String = "", id: String = "", appearance: DytePluginScreenShareTabButtonDesignDependency = DytePluginScreenShareTabButtonDesignDependencyModel()) +``` +#### Parameters +*Required* +**image:** Image of type `DyteImage` to be shown on extreme left. +*Optional* +**title:** Title of type String to be shown as button title. +**id:** identifier used to identify this button. +**appearance:** Any type that confirms to DytePluginScreenShareTabButtonDesignDependency + +Example Image + +For example in above image , We have created three buttons +1. With title "Rustpad V2" and isSelected = `false` +2. With title "Excalidraw" and isSelected = `false` +3. With title "DocShare" and isSelected = `true` + +### Setting the image and title +Set the image and title which is used when client sets `UIButton` [isSelected](https://developer.apple.com/documentation/uikit/uicontrol/1618203-isselected) property + +```swift +func setSelected(image: DyteImage) +``` +#### Parameters +**image:** Image of type `DyteImage` to be shown on extreme left when [isSelected](https://developer.apple.com/documentation/uikit/uicontrol/1618203-isselected) sets to `true`. + +```swift +func setSelected(title: String) +``` +#### Parameters +**title:** Title of type String to be shown when [isSelected](https://developer.apple.com/documentation/uikit/uicontrol/1618203-isselected) sets to `true`. + + + + iOS DytePluginViewController + diff --git a/docs/ios/components/dyte-plugins.mdx b/docs/ios/components/dyte-plugins.mdx index 9e7f8b89fd..64c809c103 100644 --- a/docs/ios/components/dyte-plugins.mdx +++ b/docs/ios/components/dyte-plugins.mdx @@ -1,22 +1,34 @@ --- image: /static/ui-kit/1.x.x/components/dyte-plugins.svg description: >- - Learn how to use and customize the PluginViewController component in Dyte's + Learn how to use and customize the DytePluginViewController component in Dyte's iOS UiKit with our detailed documentation. --- -# PluginViewController - -A component which lists all available plugins from their preset, and ability to +# DytePluginViewController +## Overview +A viewcontroller which lists all available plugins from their preset, and ability to enable or disable plugins. + +### Topics: +### Creating a DytePluginViewController. + +```swift +init(plugins: [DytePlugin]) +``` +#### Parameters: +**meeting:** Current ongoing meeting object. + + + ```swift -let controller = PluginViewController(polls: dyteMobileClient.plugins.all) +let controller = DytePluginViewController(plugins: dyteMobileClient.plugins.all) let navigationController = UINavigationController(rootViewController: controller) navigationController.modalPresentationStyle = .fullScreen present(navigationController, animated: true, completion: nil) ``` - iOS PluginViewController + iOS DytePluginViewController diff --git a/docs/ios/components/dyte-poll-form.mdx b/docs/ios/components/dyte-poll-form.mdx index 4f5450efd3..ab89d5b02c 100644 --- a/docs/ios/components/dyte-poll-form.mdx +++ b/docs/ios/components/dyte-poll-form.mdx @@ -1,20 +1,29 @@ --- description: >- - Learn how to use and customize the CreatePollsViewController component in + Learn how to use and customize the DyteCreatePollsViewController component in Dyte's iOS UiKit with our detailed documentation. --- -# CreatePollsViewController +# DyteCreatePollsViewController +## Overview +A view controller used to create and publish a poll. -A component that lets you create a poll. +### Topics: +### Creating a DyteCreatePollsViewController. -To show CreatePollsViewController do in iOS as follows: +```swift + init(meeting: DyteMobileClient) +``` +#### Parameters: +**meeting:** Current ongoing meeting object. + +### To show DyteCreatePollsViewController do in iOS as follows: ```swift -let controller = CreatePollsViewController(dyteMobileClient: dyteMobileClient) +let controller = DyteCreatePollsViewController(dyteMobileClient: dyteMobileClient) self.present(controller, animated: true) ``` - iOS CreatePollsViewController + iOS DyteCreatePollsViewController diff --git a/docs/ios/components/dyte-polls.mdx b/docs/ios/components/dyte-polls.mdx index 4db9253a54..6c215b1c0a 100644 --- a/docs/ios/components/dyte-polls.mdx +++ b/docs/ios/components/dyte-polls.mdx @@ -1,20 +1,32 @@ --- description: >- - Learn how to use and customize the ShowPollsViewController component in + Learn how to use and customize the DyteShowPollsViewController component in Dyte's iOS UiKit with our detailed documentation. --- -# ShowPollsViewController +# DyteShowPollsViewController -A component that lets you create a poll. +## Overview +A view controller used to show list of existing polls and a button to create polls -To show ShowPollsViewController do in iOS as follows: +### Topics: + +### Creating a show polls screen. + +```swift + init(meeting: DyteMobileClient) +``` +#### Parameters: +**meeting:** Current ongoing meeting object. + + +### To present DyteShowPollsViewController do in iOS as follows: ```swift -let controller = ShowPollsViewController(dyteMobileClient: self.dyteMobileClient) +let controller = DyteShowPollsViewController(dyteMobileClient: self.dyteMobileClient) self.present(controller, animated: true) ``` - iOS ShowPollsViewController + iOS DyteShowPollsViewController diff --git a/docs/ios/components/dyte-recording-indicator.mdx b/docs/ios/components/dyte-recording-indicator.mdx index 2a6b846674..ef1138ef71 100644 --- a/docs/ios/components/dyte-recording-indicator.mdx +++ b/docs/ios/components/dyte-recording-indicator.mdx @@ -6,22 +6,43 @@ description: >- --- # DyteRecordingView +## Overview +This view is used to show Recording status of an ongoing meeting. When a participant starts recording meeting, this view will automatically get visible to user and start blinking. +When participant stop recording then this view get automatically hide. -A component which indicates the recording status of a meeting. -It will not render anything if no recording is taking place. +### Topics: + +### Creating a recording view +```swift +init(meeting: DyteMobileClient, title: String = "Rec", image: DyteImage? = nil, appearance: DyteRecordingViewAppearance = DyteRecordingViewAppearanceModel(designLibrary: DesignLibrary.shared)) +``` +Creates a DyteRecordingView with specified title and other informations. + +#### Parameters: +*Required* +**meeting:** Default meeting object +*Optional:* +**title:** String which you want to show. Default value is “Rec” +**image:** Image of type DtyeImage. Default value of it is nil. +**appearance:** Any type which conforms to protocol “DyteRecordingViewAppearance” ```swift private lazy var recordingView: DyteRecordingView = { - let view = DyteRecordingView( - meeting: self.meeting, - title: "Rec", - image: nil, - appearance: AppTheme.shared.recordingViewAppearance) - view.isHidden = true - return view - }() + let view = DyteRecordingView( + meeting: self.meeting) + return view +}() +``` + +### Managing the recording view +```swift +func blinking(start: Bool) ``` +Force start and stop blinking of the recording view. +#### Parameters: +**start:** +`true` for start blinking, if you specify `false` then blinking is stop and view automatically gets disappear. iOS DyteRecordingView diff --git a/docs/ios/components/dyte-settings.mdx b/docs/ios/components/dyte-settings.mdx index 458cd2b261..4cfec50fa4 100644 --- a/docs/ios/components/dyte-settings.mdx +++ b/docs/ios/components/dyte-settings.mdx @@ -1,24 +1,45 @@ --- image: /static/ui-kit/1.x.x/components/dyte-settings.svg description: >- - Learn how to use and customize the SettingViewController component in Dyte's + Learn how to use and customize the DyteSettingViewController component in Dyte's iOS UiKit with our detailed documentation. --- -# SettingViewController +# DyteSettingViewController +## Overview +A screen that is used to show settings to switch between different audio/video devices. -A settings component to see and change your audio/video devices. -To show SettingViewController do in iOS as follows: +### Create DyteSettingViewController +```swift +init(nameTag: String, meeting: DyteMobileClient, completion:(()->Void)? = nil) +``` +Creates settings screen with name tag. + +#### Parameters: +*Required:* +**nameTag:** An String representing participant name. +**meeting:** Default meeting object +*Optional:* +**completion:** Closure to get a callback when user presses back button present on [DyteNavigationBar](/ios/components/dyte-navigationbar) + +### Hide/Show top bar +```swift +var shouldShowTopBar: Bool = true +``` + +Default value is `true`. To hide the topbar assign this to `false`. + +### To show DyteSettingViewController do in iOS as follows: ```swift -let controller = SettingViewController(nameTag: participant.name, - dyteMobileClient: mobileClient) +let controller = DyteSettingViewController(nameTag: participant.name, + meeting: mobileClient) controller.view.backgroundColor = self.view.backgroundColor controller.modalPresentationStyle = .fullScreen self.present(controller, animated: true) ``` - iOS SettingViewController + iOS DyteSettingViewController diff --git a/docs/ios/components/dyte-setup-screen-delegate.mdx b/docs/ios/components/dyte-setup-screen-delegate.mdx new file mode 100644 index 0000000000..4d50177624 --- /dev/null +++ b/docs/ios/components/dyte-setup-screen-delegate.mdx @@ -0,0 +1,29 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-setup-screen.svg +description: >- + Learn how to use and customize the SetupViewController component in Dyte's + iOS UiKit with our detailed documentation. +--- + +# SetupViewControllerDelegate +## Overview +A protocol which will be used as delegate to [SetupViewController](/ios/components/dyte-setup-screen). + +## Topics: + +```swift +protocol SetupViewControllerDelegate +``` +The interface for an object that serves as a Setup ViewController's delegate. + +### Methods: + + ```swift + func userJoinedMeetingSuccessfully(sender: UIViewController) + ``` + Tells delegate object when a user successfully joined the meeting so your app can take the next indicated action. + + + + iOS SetupViewController + diff --git a/docs/ios/components/dyte-setup-screen.mdx b/docs/ios/components/dyte-setup-screen.mdx index dce14dde65..bcc0f88c70 100644 --- a/docs/ios/components/dyte-setup-screen.mdx +++ b/docs/ios/components/dyte-setup-screen.mdx @@ -5,20 +5,47 @@ description: >- iOS UiKit with our detailed documentation. --- -# SetupViewController - +# DyteSetupViewController +## Overview A screen shown before joining the meeting, where you can edit your display name, -and media settings. +and media settings. This screen initialize the meeting and on successfull initialization +it shows a join button to join meeting. + +## Topics: + +### Create SetupViewController +```swift + init(meetingInfo: DyteMeetingInfoV2, + mobileClient: DyteMobileClient, + completion:@escaping()->Void) +``` +Creates setup screen with the configuration object of type `DyteMeetingInfoV2` -To show SetupViewController do in iOS as follows: +#### Parameters: +Required: +meetingInfo: An instance of type `DyteMeetingInfoV2` +meeting: Default meeting object +completion: escaping closure to get a callback when Meetings ends up. For example. When user leaved the meeting then +you want to present the starting screen. ```swift let controller = SetupViewController(meetingInfo: dyteMeetingInfo, - mobileClient: metting, - completion: {}) + meeting: metting) { [weak self] in + guard let self = self else {return} + self.dismiss(animated: true) + self.view.hideActivityIndicator() +} +controller.modalPresentationStyle = .fullScreen self.present(controller, animated: true) ``` +### Customising flow of SetupViewController using protocol [SetupViewControllerDelegate](/ios/components/dyte-setup-screen-delegate) + +```swift +weak var delegate: SetupViewControllerDelegate? +``` +The delegate of the [SetupViewController](/ios/components/dyte-setup-screen) object. + iOS SetupViewController diff --git a/docs/ios/helper-classes/_category_.json b/docs/ios/helper-classes/_category_.json new file mode 100644 index 0000000000..e332e33d18 --- /dev/null +++ b/docs/ios/helper-classes/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 11, + "label": "Helper-Classes", + "collapsible": true +} diff --git a/docs/ios/helper-classes/dyte-plugin-view-model.mdx b/docs/ios/helper-classes/dyte-plugin-view-model.mdx new file mode 100644 index 0000000000..0d3ff0c050 --- /dev/null +++ b/docs/ios/helper-classes/dyte-plugin-view-model.mdx @@ -0,0 +1,68 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-plugins.svg +description: >- + Learn how to use and customize the DytePluginViewController component in Dyte's + iOS UiKit with our detailed documentation. +--- + +# VideoPeerViewModel +## Overview +A view model for instances of class [DyteParticipantTileView](/ios/components/dyte-participant-tile-view). + +### Create instance of this class + +```swift +init(meeting: DyteMobileClient, participant: DyteJoinedMeetingParticipant, showSelfPreviewVideo: Bool, showScreenShareVideoView: Bool = false) +``` +#### Parameters +**meeting:** Current ongoing meeting. +**participant:** Participant for whom you want to load video. +**showSelfPreviewVideo**: This flags tell whether you want load video of self or not. `true` load video of self +**showScreenShareVideoView:** This flag will tell wheter to load screen share view' + +### Update the participant +```swift +func set(participant: DyteJoinedMeetingParticipant) +``` + +### Call back when audio state gets updated + +```swift +var audioUpdate: (()->Void)? +``` +Whenever `func onAudioUpdate(isEnabled: Bool)` protocol method of `DyteParticipantUpdateListener` get called, + this Call back is generated. + +### Call back when video state gets updated + +```swift +var videoUpdate: (()->Void)? +``` +Whenever `func onVideoUpdate(isEnabled: Bool)` protocol method of `DyteParticipantUpdateListener` get called, + this Call back is generated. + + +### Call back when participants gets updated +```swift +var loadNewParticipant: ((DyteJoinedMeetingParticipant)->Void)? +``` +Whenever `func set(participant: DyteJoinedMeetingParticipant)` get called, Call back is generated + + +### Call back when name initials of participant gets updated +```swift +var nameInitialsUpdate: (()->Void)? +``` +Whenever `func refreshInitialName` get called, Call back is generated + +### Call back when name of participant gets updated + +```swift +var nameUpdate: (()->Void)? +``` +Whenever `func refreshNameTag` get called, Call back is generated + + + + iOS DytePluginViewController + diff --git a/docs/ios/participants/_category_.json b/docs/ios/participants/_category_.json new file mode 100644 index 0000000000..e6fd581d33 --- /dev/null +++ b/docs/ios/participants/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 9, + "label": "Participants", + "collapsible": true +} diff --git a/docs/ios/participants/host-controls.mdx b/docs/ios/participants/host-controls.mdx new file mode 100644 index 0000000000..929020bcac --- /dev/null +++ b/docs/ios/participants/host-controls.mdx @@ -0,0 +1,72 @@ +--- +image: /static/ui-kit/1.x.x/components/more-menu.svg +sidebar_position: 4 +description: >- + Learn how to create and use a "More" menu for host control in your iOS app + with our detailed documentation. +--- + +# Host Controls + +This documentation explains how to create and utilize a "More" menu for host control in your iOS app. + +To create the More menu, use the following code: + +```swift +private func createMoreMenu(participantListener: DyteParticipantUpdateEventListener, indexPath: IndexPath) -> Bool { + var menus = [MenuType]() + let participant = participantListener.participant + let hostPermission = self.viewModel.mobileClient.localUser.permissions.host + + if hostPermission.canPinParticipant { + if !participant.isPinned { + menus.append(.pin) + } else { + menus.append(.unPin) + } + } + + if hostPermission.canMuteAudio && participant.audioEnabled { + menus.append(.muteAudio) + } + + if hostPermission.canMuteVideo && participant.videoEnabled { + menus.append(.muteVideo) + } + + if hostPermission.canKickParticipant && participant != self.viewModel.mobileClient.localUser { + menus.append(.kick) + } + + if menus.isEmpty { + return false + } + menus.append(contentsOf: [.cancel]) + + let moreMenu = DyteMoreMenu(title: participant.name, features: menus, onSelect: { [weak self] menuType in + guard let self = self else { return } + switch menuType { + case .pin: + try? participant.pin() + case .unPin: + try? participant.unpin() + case .muteAudio: + try? participant.disableAudio() + case .muteVideo: + try? participant.disableVideo() + case .kick: + try? participant.kick() + case .cancel: + print("Operation cancelled") + default: + print("No action needed") + } + }) + moreMenu.show(on: self.view) + return true +} +``` + +This code creates a "More" menu with various options based on the host's permissions and +the participant's current state. The menu allows the host to perform actions like pinning/unpinning +a participant, muting their audio or video, and kicking them from the session. diff --git a/docs/ios/participants/introduction.mdx b/docs/ios/participants/introduction.mdx new file mode 100644 index 0000000000..d0efde8644 --- /dev/null +++ b/docs/ios/participants/introduction.mdx @@ -0,0 +1,35 @@ +--- +title: Introduction +sidebar_position: 1 +--- + +# Introduction + +the data regarding all meeting participants is stored under `meeting.participants`. These **does not** include the local user. Use the methods and events to consume the participants data. For example, to get all the participants who joined the meeting: + +```swift +// get all joined participants [DyteJoinedMeetingParticipant] +let joined = meeting.participants.joined + +// get all participants [DyteParticipant] +val allParticipants = meeting.participants.all +``` + +The `meeting.participants` object has the following **array** of participants + +- **all**: A list that contains all the participants who have joined the meeting except the local user +- **joined**: A list that contains all the participants who are currently in the meeting + except the local user +- **waitlisted**: A list that contains all the participants waiting to join the + meeting. +- **active**: A list that contains all the participants except the local user whose media is subscribed to i.e + participants are supposed to be on the screen at the moment except the local user +- **pinned**: A list that contains all the pinned participants of the meeting. +- **screenShares**: A list that contains all the participants who are sharing their screen. + +Therefore if you were to make a video / audio grid of participants, you'd use the `active` map, but to display the +list of all participants in the meeting you'd use the `joined` map. + +Each participant in each of the `joined`, `active`, `pinned` and `screenShares` list are of +type `DyteJoinedMeetingParticipant`, `waitlisted` list is of type `DyteWaitlistedParticipant` and `all` list +is of type `DyteParticipant`. diff --git a/docs/ios/participants/pre-built-participants-screen.mdx b/docs/ios/participants/pre-built-participants-screen.mdx new file mode 100644 index 0000000000..fd0157006d --- /dev/null +++ b/docs/ios/participants/pre-built-participants-screen.mdx @@ -0,0 +1,25 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-participants.svg +sidebar_position: 2 +description: >- + Learn how to use and customize the ParticipantViewController component in + Dyte's iOS UiKit with our detailed documentation. +--- + +# Pre-built Participants Screen + +A component which lists all participants, with ability to run privileged actions +on each participant according to your permissions. + +To show ParticipantViewController do as follows: + +```swift +let controller = ParticipantViewController(viewModel: + ParticipantViewControllerModel(mobileClient: meeting)) +controller.modalPresentationStyle = .fullScreen +self.present(controller, animated: true) +``` + + + iOS ParticipantViewController + diff --git a/docs/ios/participants/type-of-participants.mdx b/docs/ios/participants/type-of-participants.mdx new file mode 100644 index 0000000000..d07e74c1bf --- /dev/null +++ b/docs/ios/participants/type-of-participants.mdx @@ -0,0 +1,61 @@ +--- +image: /static/ui-kit/1.x.x/components/participant-types.svg +sidebar_position: 3 +description: >- + Learn how to handle various types of participants in your iOS app using Dyte's participant view controllers with our detailed documentation. +--- + +# Participant Types + +This documentation explains how to handle different types of participants in your iOS app using Dyte's participant view controllers. + +## Participant Cell Configuration + +We need a `tableView` to show different types of participants on this screen. +The following code snippet demonstrates how to configure participant cells based on their types. + +```swift +public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { + let cell = self.viewModel.dataSourceTableView.configureCell(tableView: tableView, indexPath: indexPath) + if let cell = cell as? ParticipantInCallTableViewCell { + cell.buttonMoreClick = { [weak self] button in + guard let self = self else {return} + //createMoreMenu is covered in host control docs + self.createMoreMenu(participantListner: cell.model.participantUpdateEventListner, indexPath: indexPath) + } + } else if let cell = cell as? ParticipantWaitingTableViewCell { + cell.buttonCrossClick = { [weak self] button in + guard let self = self else {return} + self.viewModel.waitlistEventListner.rejectWaitingRequest(participant: cell.model.participant) + } + cell.buttonTickClick = { [weak self] button in + guard let self = self else {return} + self.viewModel.waitlistEventListner.acceptWaitingRequest(participant: cell.model.participant) + } + } else if let cell = cell as? OnStageWaitingRequestTableViewCell { + cell.buttonCrossClick = { [weak self] button in + guard let self = self else {return} + self.viewModel.mobileClient.stage.denyAccess(id: cell.model.participant.id) + self.reloadScreen() + } + cell.buttonTickClick = { [weak self] button in + guard let self = self else {return} + self.viewModel.mobileClient.stage.grantAccess(id: cell.model.participant.id) + self.reloadScreen() + } + } else if let cell = cell as? AcceptButtonTableViewCell { + cell.buttonClick = { [weak self] button in + guard let self = self else {return} + self.viewModel.acceptAll() + self.reloadScreen() + } + } else if let cell = cell as? RejectButtonTableViewCell { + cell.buttonClick = { [weak self] button in + guard let self = self else {return} + self.viewModel.rejectAll() + self.reloadScreen() + } + } + return cell +} +``` diff --git a/docs/ios/rendering-participant-video/_category_.json b/docs/ios/rendering-participant-video/_category_.json new file mode 100644 index 0000000000..90a28ba35f --- /dev/null +++ b/docs/ios/rendering-participant-video/_category_.json @@ -0,0 +1,5 @@ +{ + "position": 6, + "label": "Rendering participant video", + "collapsible": true +} diff --git a/docs/ios/rendering-participant-video/build-your-own-grid.mdx b/docs/ios/rendering-participant-video/build-your-own-grid.mdx new file mode 100644 index 0000000000..607810ffe5 --- /dev/null +++ b/docs/ios/rendering-participant-video/build-your-own-grid.mdx @@ -0,0 +1,71 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-grid.svg +sidebar_position: 2 +description: >- + Learn how to create a custom grid view component in Dyte's iOS UIKit with our detailed documentation. +--- + +# Custom Grid View + +## Introduction + +The `GridView` class provided in Dyte's iOS UIKit allows you to create custom grid views to display content +in a structured layout. This guide will walk you through the process of understanding, customizing, and +utilizing the `GridView` class to create your custom grid views. + +## Step 1: Understanding the GridView Class + +The `GridView` class is a customizable UIView subclass designed to display a grid of views. It provides properties +and methods to manage the arrangement and presentation of child views within the grid. + +### Key Components: + +- **Properties Needed to manage GridView**: + + - `maxItems`: Maximum number of items the grid can contain. + - `currentVisibleItem`: Number of items currently visible in the grid. + - `scrollView`: UIScrollView for enabling scrolling if the grid overflows. + - `views`: Array holding the child views of the grid. + +### Example Usage: + +```swift +let tile = DyteParticipantTileView(mobileClient: meeting, + participant: participant, + isForLocalUser: false, + showScreenShareVideoView: false) +``` + +These tiles stored in `views` array can be rendered in `scrollView` and `currentVisibleItem`, `maxItems` can +manage state of grid to show/hide certain tiles if pagination is needed. + +Remove tile from view using `tileView?.removeFromSuperview()` + +## Integrating Participant Tile Views + +To display video views within the `GridView`, you can utilize the `DyteParticipantTileContainerView` and +`DyteParticipantTileView` classes provided by Dyte's iOS UIKit. These classes encapsulate the logic for +rendering video streams of meeting participants. + +### `DyteParticipantTileContainerView` + +The `DyteParticipantTileContainerView` is a UIView subclass designed to contain a single `DyteParticipantTileView`. +It provides methods for preparing the view for reuse and setting the participant whose video stream should be displayed. + +#### Example Usage: + +```swift +let tileContainerView = DyteParticipantTileContainerView() +tileContainerView.setParticipant(meeting: myMeetingClient, + participant: meetingParticipant) +``` + +### DyteParticipantTileView + +The [DyteParticipantTileView](/ios/components/dyte-participant-tile-view) class represents a single tile +within the grid view, displaying the video stream of a meeting participant. +It manages the layout and presentation of the participant's video view, along with +additional features such as participant name tags and pin indicators. + +You can add instances of DyteParticipantTileView to the GridView to render multiple video streams within the grid, +providing a comprehensive view of meeting participants during video conferences. diff --git a/docs/ios/rendering-participant-video/using-dyteGrid.mdx b/docs/ios/rendering-participant-video/using-dyteGrid.mdx new file mode 100644 index 0000000000..b2d39134b2 --- /dev/null +++ b/docs/ios/rendering-participant-video/using-dyteGrid.mdx @@ -0,0 +1,37 @@ +--- +image: /static/ui-kit/1.x.x/components/dyte-grid.svg +sidebar_position: 1 +description: >- + Learn how to use and customize the GridView component in Dyte's iOS UiKit + with our detailed documentation. +--- + +# Using Dyte GridView + +The main grid component which abstracts all the grid handling logic and renders +it for you. + +```swift +var gridView = GridView(showingCurrently: 9, getChildView: { + return DyteParticipantTileContainerView() + }) +``` + +# Populate Grid Child Views + +To setup the grid & set Participant inside code do as follows + +```swift +func populateGridChildViews(participants: [DyteJoinedMeetingParticipant]) { + for i in 0.. + iOS DyteGridViewV2 + diff --git a/static/static/ios/iOS_plugins.png b/static/static/ios/iOS_plugins.png new file mode 100644 index 0000000000..01aef6f75a Binary files /dev/null and b/static/static/ios/iOS_plugins.png differ diff --git a/static/static/ios/iOS_show_plugin.jpg b/static/static/ios/iOS_show_plugin.jpg new file mode 100644 index 0000000000..b579e5006c Binary files /dev/null and b/static/static/ios/iOS_show_plugin.jpg differ diff --git a/static/static/ios/ios_active_HorizontalView.png b/static/static/ios/ios_active_HorizontalView.png new file mode 100644 index 0000000000..7a6ecd539a Binary files /dev/null and b/static/static/ios/ios_active_HorizontalView.png differ diff --git a/static/static/ios/ios_create_polls.png b/static/static/ios/ios_create_polls.png new file mode 100644 index 0000000000..3ab91f276f Binary files /dev/null and b/static/static/ios/ios_create_polls.png differ diff --git a/static/static/ios/ios_participant-tile-avatar-view.png b/static/static/ios/ios_participant-tile-avatar-view.png new file mode 100644 index 0000000000..115ead237a Binary files /dev/null and b/static/static/ios/ios_participant-tile-avatar-view.png differ diff --git a/static/static/ios/ios_participant-tile-view.png b/static/static/ios/ios_participant-tile-view.png new file mode 100644 index 0000000000..6bdff416b0 Binary files /dev/null and b/static/static/ios/ios_participant-tile-view.png differ diff --git a/static/static/ios/ios_settings.jpg b/static/static/ios/ios_settings.jpg new file mode 100644 index 0000000000..90da3ccaa6 Binary files /dev/null and b/static/static/ios/ios_settings.jpg differ diff --git a/static/static/ios/ios_settings_avatar.png b/static/static/ios/ios_settings_avatar.png new file mode 100644 index 0000000000..d62e4a31a0 Binary files /dev/null and b/static/static/ios/ios_settings_avatar.png differ diff --git a/static/static/ios/ios_show_polls.png b/static/static/ios/ios_show_polls.png new file mode 100644 index 0000000000..73d79b994b Binary files /dev/null and b/static/static/ios/ios_show_polls.png differ