@dytesdk/ui-kit-addons

v4.1.0

Published

2 months ago

A collection of Dyte UI-kit addons

0High
0Medium
0Low

dyteindia

roerohan

About The Project

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

A comprehensive guide detailing the usage of these ui-kit addons is available here.

Samples

Here are the list of available samples at the moment.

Usage

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

Install the addon package:

npm install @dytesdk/ui-kit-addons

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

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

Configure the addon

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

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

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,
});

Starting v4.0.0, Video Background Addon also has been migrated to the same structure to make it easier to handle state internally.

  const videoBackground = await DyteVideoBackground.init({
      modes: ["blur", "virtual", "random"],
      blurStrength: 30, // 0 - 100 for opacity
      meeting,
      images: [
          "https://images.unsplash.com/photo-1487088678257-3a541e6e3922?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3",
          "https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3",
          "https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3"
      ],
      randomCount: 10,
      onVideoBackgroundUpdate: ({backgroundMode, backgroundURL}) => { 
        console.log('videoBackgroundUpdated => ', {backgroundMode, backgroundURL});
      }, // Listen to background update action
  });

you can now apply, replace, or remove a background programmatically.

await videoBackground.applyVirtualBackground('https://images.unsplash.com/photo-1600431521340-491eca880813?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3')
await videoBackground.applyBlurBackground();

// Common for virtual and blur backgrounds.
await videoBackground.removeBackground();

About

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

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents

About The Project

Samples

Usage

Version Compatibility

About