Dyte Ui Kit addon

A collection of ui-kit addons that extends the Dyte's prebuilt ui-kit capability.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
• Samples
• Usage
• About

About The Project

This repository contains all the ui-kit addons available for the Dyte Web SDK.

Samples

Here are the list of available samples at the moment.

1. Camera Host Control
2. Chat Host Control
3. Custom Controlbar button
4. Hand Raise
5. Mic Host Control
6. Participant Menu Item
7. Participant Tile Menu
8. Participants Tab Action
9. Participant Tab Toggle
10. Video Background

Usage

To use these addons you would need to do the following steps:

1. Install the addon package:

npm install @dytesdk/ui-kit-addons

2. Import the addon that you need, for example: custom-controlbar-button:

import CustomControlbarButton from '@dytesdk/ui-kit-addons/custom-controlbar-button';

3. Configure the addon

const myButton = new CustomControlbarButton({
   position: 'left',
   icon: svgIcon,
   label: 'Click Me!',
   onClick: () => alert('Clicked!')
});

4. Register addon

import { registerAddons } from dytesdk/ui-kit;
...
const newConfig = registerAddons([myButton], meeting);

5. Pass the config to meeting UI

<dyte-meeting meeting={meeting} config={newConfig}></dyte-meeting> 

Version Compatibility

This version of UI Kit addon requires Web Core 2.x for Video Background addon to work properly. Without Web Core 2.x, a blank screen might get shown instead of the user's video.

If in case you haven't migrated to Web Core 2.x yet, Please use 1.1.13 of this UI Kit addon package instead.

Few of the addons such as HandRaise, Chat Host Control & Mic Host Control have been migrated to use an async static init method instead of the constructor, to utilise meeting store APIs, with async await.

For all such addons, rather than calling their constructor, init method should be called.

const handRaise = await HandRaise.init({
    meeting,
    canRaiseHand: true,
    canManageRaisedHand: true,
    handRaiseIcon: '<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 12.02c0 1.06.2 2.1.6 3.08l.6 1.42c.22.55.64 1.01 1.17 1.29.27.14.56.21.86.21h2.55c.77 0 1.49-.41 1.87-1.08.5-.87 1.02-1.7 1.72-2.43l1.32-1.39c.44-.46.97-.84 1.49-1.23l.59-.45a.6.6 0 0 0 .23-.47c0-.75-.54-1.57-1.22-1.79a3.34 3.34 0 0 0-2.78.29V4.5a1.5 1.5 0 0 0-2.05-1.4 1.5 1.5 0 0 0-2.9 0A1.5 1.5 0 0 0 6 4.5v.09A1.5 1.5 0 0 0 4 6v6.02ZM8 4.5v4a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0v5a.5.5 0 0 0 1 0v-4a.5.5 0 0 1 1 0v6a.5.5 0 0 0 .85.37h.01c.22-.22.44-.44.72-.58.7-.35 2.22-.57 2.4.5l-.53.4c-.52.4-1.04.78-1.48 1.24l-1.33 1.38c-.75.79-1.31 1.7-1.85 2.63-.21.36-.6.58-1.01.58H7.23a.87.87 0 0 1-.4-.1 1.55 1.55 0 0 1-.71-.78l-.59-1.42a7.09 7.09 0 0 1-.53-2.7V6a.5.5 0 0 1 1 0v3.5a.5.5 0 0 0 1 0v-5a.5.5 0 0 1 1 0Z" fill="#ff0000"></path></svg>'
});

const chatHostControl = await ChatHostControl.init({
    meeting,
    hostPresets: ['webinar_presenter'],
    targetPresets: ['webinar_viewer'],
    addActionInParticipantMenu: true,

});

const micHostControl = await MicHostControl.init({
    meeting,
    hostPresets: ['webinar_presenter'],
    targetPresets: ['webinar_viewer'],
    addActionInParticipantMenu: true,
});

const cameraHostControl = await CameraHostControl.init({
    meeting,
    hostPresets: ['webinar_presenter'],
    targetPresets: ['webinar_viewer'],
    addActionInParticipantMenu: true,
});

About

This project is created & maintained by dyte, Inc. You can find us on Twitter - @dyte_io or write to us at dev@dyte.io.

The names and logos for Dyte are trademarks of dyte, Inc.

We love open source software! See our other projects and our products.