Merge pull request #247 from dyte-io/fix/general

fix: general fixes
dyte-io · Jan 21, 2024 · b48233a · b48233a
2 parents 1d61e5a + 0c4dae6
commit b48233a
Show file tree

Hide file tree

Showing 24 changed files with 51 additions and 332 deletions.
diff --git a/docs/android-core/plugins.mdx b/docs/android-core/plugins.mdx
@@ -15,7 +15,7 @@ are currently being used in this meeting.
 ## Playing with plugins
 
 Plugins are webviews which can be added in any view group in android. To be able
-to get webview from DytePlugin one needs to first acivate a plugin. To do that
+to get webview from DytePlugin one needs to first activate a plugin. To do that
 all we need to do is call `plugin.active()` which will trigger a callback in
 `onPluginActivated()`. Similarly to deactivate a plugin one can call
 `plugin.deactivate()` and that plugin will be deactivated in the meeting.

diff --git a/docs/android/components/gallery.mdx b/docs/android/components/gallery.mdx
@@ -5,9 +5,6 @@ slug: /components
 
 # Gallery
 
-Here are all the available components, grouped according the
-[Atomic Design philosophy](https://bradfrost.com/blog/post/atomic-web-design/).
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
@@ -36,4 +33,4 @@ Here are all the available components, grouped according the
     { name: 'Plugins', component: 'dyte-plugins' },
     { name: 'Settings', component: 'dyte-settings' },
   ]}
-/>
+/>
diff --git a/docs/angular-ui-kit/components/_category_.json b/docs/angular-ui-kit/components/_category_.json
@@ -1,5 +1,6 @@
 {
   "position": 6,
   "label": "Components",
-  "collapsible": true
-}
+  "collapsible": true,
+  "collapsed": false
+}
diff --git a/docs/angular-ui-kit/components/gallery.mdx b/docs/angular-ui-kit/components/gallery.mdx
@@ -5,11 +5,6 @@ slug: /components
 
 # Gallery
 
-Here are all the available components, grouped according the
-[Atomic Design philosophy](https://bradfrost.com/blog/post/atomic-web-design/).
-
-## Atoms
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
@@ -25,8 +20,6 @@ Here are all the available components, grouped according the
   ]}
 />
 
-## Molecules
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
@@ -43,8 +36,6 @@ Here are all the available components, grouped according the
   ]}
 />
 
-## Organisms
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
@@ -65,8 +56,6 @@ Here are all the available components, grouped according the
   ]}
 />
 
-## Pages
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[

diff --git a/docs/angular-ui-kit/introduction.mdx b/docs/angular-ui-kit/introduction.mdx
@@ -4,77 +4,25 @@ slug: /
 image: /static/ui-kit/1.x.x/ui-kit-cover.jpg
 ---
 
-# Introduction to Angular UI Kit
+# Introduction
 
 Dyte's UI Kit is a prebuilt design library of UI components that makes it easy
 to integrate video and voice calls into any app or website within minutes.
 
-## The Anatomy of Angular UI Kit
+## Usage
 
 The UI Kit is a design library of prebuilt UI components built on top of the
 core SDKs. Core SDK handles all the low-level media and network handling parts
-of a meeting and exposes simpler APIs to use. You can create a meeting object
-using the web-core components and pass it to the UI Kit components.
+of a meeting and exposes simpler APIs to use.
 
-Uses a layered design structure, allowing you to start with one prebuilt
-component and slowly add further layers as the needs evolve.
+Uses a layered design structure, allowing you to start with one prebuilt component and slowly go down layers and add custom UI incrementally as your needs evolve.
 
-## How to Use Angular UI Kit?
-
-Dyte's UI Kit offers a couple of ways to get started with your live video and
-voice calling applications.
-
-- **Use prebuilt components**: You can use prebuilt `dyte-meeting` component to
+- **Use prebuilt component**: You can use prebuilt `dyte-meeting` component to
   create your meeting quickly. With this component, you don't have to handle all
-  the states, dialogs, and other aspects of managing the application. This loads
-  your preset and renders the UI based on it. For more information, see
-  [Angular UI Kit Quickstart](/angular-ui-kit/quickstart).
-- **Build your own UI**: Dyte also offers the flexibility to build your own UI
-  using various individual components. This offers limitless customization
-  options, ranging from colors and font to spacing, participant tiles, screen
-  share views, logo, height, width and more, you can tailor the UI to fit your
-  exact needs. See Build your own UI section.
-
-## Components of `dyte-meeting`
-
-The DyteMeeting component can be broken down into 3 major subcomponents:
-
-<img
-  src="/static/ui-kit/1.x.x/grid-comps.png"
-  width="500"
-  height="400"
-  alt="grid-uikit"
-  className="comps-uikit"
-/>
-
-### Dyte Header
-
-Displays information about the meeting, such as the meeting title and the participant count.
-
-### Dyte Grid
-
-The grid displays the video feeds of meeting participants. The grid component in Dyte's UI Kit adjusts the layout of video feeds based on the meeting's participant count, ensuring a smooth meeting experience. It provides a variety of layouts and variants.
-
-### Dyte Control Bar
-
-The control bar displays various controls for the meetings. It can easily be customized to match the look and feel of your web application. Customizing the control bar gives you the flexibility to show or hide controls, add or remove buttons, and make other adjustments to enhance the meeting experience for your users.
-
-## Supported Browser
-
-Here are the browser requirements:
-
-- Chrome (or Chromium based) 74+
-- Firefox 78+
-- Opera 64+
-- Safari 12+
-- Edge 79+
-- iOS (Safari) 12.1+
-- iOS (Non-Safari) 15+
-
-## SDK Size
+  the states, dialogs, and other aspects of managing the application. The UI kit
+  also respect your permissions and theming configuration from the preset.
 
-The entire UI has a small <500KB bundle size. If you use individual components,
-the size will be even smaller.
+- **Mix and match**: Use some components from our component library, build some custom components yourself. Read the [basics of our component design](/angular-ui-kit/basics/components-basics) and checkout the [gallery of available components](/angular-ui-kit/components)
 
 ## Features
 

diff --git a/docs/angular-ui-kit/quickstart.mdx b/docs/angular-ui-kit/quickstart.mdx
@@ -30,23 +30,10 @@ You'll learn how to:
 
 - Make sure you've read the [Getting Started with Dyte](/getting-started) topic
   and completed the following steps:
+
   - Create a [Dyte Developer Account](https://dev.dyte.io/)
-  - Create [Presets](https://dev.dyte.io/roles-presets). Dyte also includes the
-    following pre-configured presets for group call and webinar. You can simply
-    use the default preset if you don't wish to create one.
-    - webinar_viewer
-    - webinar_presenter
-    - group_call_host
-    - group_call_participant
   - Create a [Dyte Meeting](/api/?v=v2#/operations/create_meeting)
   - [Add Participant](/api/?v=v2#/operations/add_participant) to the meeting
-- [Install the Angular CLI](https://angular.io/guide/setup-local#install-the-angular-cli)
-- [Create an Angular workspace](https://angular.io/guide/setup-local#create-a-workspace-and-initial-application)
-  with initial application. If you don't have a project, create one using ng new
-  `<project-name>`, where `<project-name>` is the name of your Angular
-  application.
-- Read the [Introduction to Angular UI Kit](/angular-ui-kit) to understand the
-  UI Kit and its relationship with web core SDKs.
 
 ## Step 1: Install the SDK
 

diff --git a/docs/flutter-core/livestream.mdx b/docs/flutter-core/livestream.mdx
@@ -44,7 +44,7 @@ There can be 6 livestream statuses:
 
 ### Viewer Count
 
-The current viewer count for livestream can be accessed via `viewerCount`peroperty of `DyteLivestreamData` instance.
+The current viewer count for livestream can be accessed via `viewerCount`property of `DyteLivestreamData` instance.
 
 ```dart
 final int? viewerCount = dyteClient.livestream.data.viewerCount;
@@ -111,7 +111,7 @@ Future<Widget> fetchLivestreamView () async {
 
 ## Events
 
-You need to subscrible to LivestreamEventListener to be able to listen livestream events. You can do it as follows:
+You need to subscribe to LivestreamEventListener to be able to listen livestream events. You can do it as follows:
 
 ```dart
 class LivestreamListener implements DyteLivestreamEventsListener{

diff --git a/docs/flutter-core/waiting-room.mdx b/docs/flutter-core/waiting-room.mdx
@@ -6,7 +6,7 @@ tags: [flutter-core, stage, livestream, webinar]
 
 ## Events
 
-To subscrible to waiting room events, you need to attach a waiting room listener as:
+To subscribe to waiting room events, you need to attach a waiting room listener as:
 
 ```dart
 

diff --git a/docs/flutter/design-token.mdx b/docs/flutter/design-token.mdx
@@ -20,7 +20,8 @@ In the Flutter UI kit, design tokens are shared and managed using `themes`. Them
 Let's understand how you can customize your UI with Dyte's Flutter UI Kit using design tokens.
 
 ### Customize themes with design tokens
-Dyte offers the `DyteDesignToken` class to customize the theme of the UI kit. Pass the `DyteDesignToken` object within the `DyteUIKitInfo` object to customize the theme. 
+
+Dyte offers the `DyteDesignToken` class to customize the theme of the UI kit. Pass the `DyteDesignToken` object within the `DyteUIKitInfo` object to customize the theme.
 
 With `DyteDesignToken`, you can customize the following design properties:
 
@@ -34,14 +35,12 @@ With `DyteDesignToken`, you can customize the following design properties:
 - `success`: The success color of the UI Kit.
 - `warning`: The warning color of the UI Kit.
 
-
 You have two options to customize the UI Kit's theme:
 
 ** Pass a single color. **
 
 You can pass a single color to the `backgroundColor`, `brandColor` parameters. Or you can use a combination of `backgroundColorSwatch` and `brandColor` to customize the theme.
 
-
 ** Use a color swatch. **
 
 For the brand color swatch, make sure it contains 5 entries with keys 300, 400, 500, 600, and 700.
@@ -60,27 +59,28 @@ final primarySwatch = DyteColorSwatch(
       700: Colors.blue.shade700,
     },
   );
-  ```
+```
+
 ### Customize borders with configuration
+
 To customize the border radius and border width of the UI Kit, you can use the `DyteBorderRadius` and `DyteBorderWidth` enum values in the design token.
 
 Here are the available `DyteBorderRadius` values:
 
-| Token Name | values |
-| --- | --- |
+| Token Name         | values                                         |
+| ------------------ | ---------------------------------------------- |
 | `DyteBorderRadius` | `sharp`, `rounded`, `extraRounded`, `circular` |
 
 Here are the available `DyteBorderWidth` values:
 
-| Token Name | values |
-| --- | --- |
+| Token Name        | values                |
+| ----------------- | --------------------- |
 | `DyteBorderWidth` | `none`, `thin`, `fat` |
 
 ## Example
 
 Here's an example of how you can customize the Flutter UI Kit using the design token:
 
-
 ```dart
 final uikitInfo = DyteUIKitInfo(meetingInfo,
     designToken: DyteDesignToken(

diff --git a/docs/guides/capabilities/video/add-virtual-background.mdx b/docs/guides/capabilities/video/add-virtual-background.mdx
@@ -35,7 +35,6 @@ Throughout the process, the middleware components operate on a per-frame basis,
 Make sure you've read the Getting Started with Dyte topic and completed the following steps:
 
 - Create a [Dyte Developer Account](https://dev.dyte.io/)
-- Create [Presets](https://dev.dyte.io/roles-presets)
 - Create a [Dyte Meeting](/api/?v=v2#/operations/create_meeting)
 - [Add Participant](/api/?v=v2#/operations/add_participant)
   to the meeting

diff --git a/docs/ios-core/plugins.mdx b/docs/ios-core/plugins.mdx
@@ -15,7 +15,7 @@ are currently being used in this meeting.
 ## Playing with plugins
 
 Plugins are webviews which can be added in any view. To be able to get webview
-from DytePlugin one needs to first acivate a plugin. To do that all we need to
+from DytePlugin one needs to first activate a plugin. To do that all we need to
 do is call `plugin.active()` which will trigger a callback in
 `onPluginActivated()`. Similarly to deactivate a plugin one can call
 `plugin.deactivate()` and that plugin will be deactivated in the meeting.

diff --git a/docs/react-ui-kit/components/_category_.json b/docs/react-ui-kit/components/_category_.json
@@ -1,5 +1,6 @@
 {
   "position": 5,
   "label": "Components",
-  "collapsible": true
-}
+  "collapsible": true,
+  "collapsed": false
+}
diff --git a/docs/react-ui-kit/components/gallery.mdx b/docs/react-ui-kit/components/gallery.mdx
@@ -5,11 +5,6 @@ slug: /components
 
 # Gallery
 
-Here are all the available components, grouped according the
-[Atomic Design philosophy](https://bradfrost.com/blog/post/atomic-web-design/).
-
-## Atoms
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
@@ -25,8 +20,6 @@ Here are all the available components, grouped according the
   ]}
 />
 
-## Molecules
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
@@ -43,8 +36,6 @@ Here are all the available components, grouped according the
   ]}
 />
 
-## Organisms
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
@@ -65,8 +56,6 @@ Here are all the available components, grouped according the
   ]}
 />
 
-## Pages
-
 <ComponentsGrid
   basePath="/static/ui-kit/1.x.x/components"
   items={[
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ tags: [flutter-core, stage, livestream, webinar] @@
     ## Events
-    To subscrible to waiting room events, you need to attach a waiting room listener as:
+    To subscribe to waiting room events, you need to attach a waiting room listener as:
     ```dart
@@ Expand Down @@