dyte-io · kumarSudhir7891 · Apr 2, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/docs/ios/Pre-Built-Plugins_Guides/Plugins.mdx 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.
+
+<img src="/static/ios/iOS_plugins.png" alt="Example Image" width="200" height="100"/>
+
+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.
+
+
+<head>
+ <title>iOS DyteAvatarView</title>
+</head>
diff --git a/docs/ios/Pre-Built-Plugins_Guides/_category_.json 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
@@ -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())
+}
+
+```
+
+
+<head>
+ <title>iOS DyteAvatarView</title>
+</head>
diff --git a/docs/ios/Pre-Built-Polls_Guides/Polls.mdx 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.
+
+<img src="/static/ios/ios_create_polls.png" alt="Example Image" width="200" height="100"/>
+
+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
+}
+```
+
+<head>
+ <title>iOS DyteAvatarView</title>
+</head>
diff --git a/docs/ios/Pre-Built-Polls_Guides/_category_.json 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
@@ -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.
+
+<img src="/static/ios/ios_show_polls.png" alt="Example Image" width="200" height="100"/>
+
+### 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)
+}
+```
+
+<head>
+ <title>iOS DyteAvatarView</title>
+</head>
diff --git a/docs/ios/Pre-Built-Settings_Guides/Settings.mdx 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.
+
+<img
+ src="/static/ios/ios_settings.jpg"
+ alt="Example Image"
+ width="200"
+ height="100"
+/>
+
+### 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`
+
+<head>
+ <title>iOS DyteAvatarView</title>
+</head>
diff --git a/docs/ios/Pre-Built-Settings_Guides/_category_.json 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
@@ -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
@@ -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
@@ -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)
+```
+
+<head>
+ <title>iOS DyteSettingViewController</title>
+</head>
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
@@ -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.
+
+<img src="/static/react/preset-edit-name.png" />
+
+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
@@ -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.