Tushkiz

import { useCallback, useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import {
	DyteCameraToggle,
	DyteControlbarButton,
	DyteDialogManager,
	DyteGrid,
	DyteLeaveButton,
	DyteMicToggle,
	DyteParticipantsAudio,

Tushkiz

import { useEffect } from 'react';
import {
	DyteProvider,
	useDyteClient,
	useDyteMeeting,
	useDyteSelector,
} from '@dytesdk/react-web-core';
import { DytePluginMain, DytePlugins } from '@dytesdk/react-ui-kit';

function PluginApp() {

Tushkiz

import { BreakoutRoomsManager } from '@dytesdk/ui-kit';
import DyteClient from '@dytesdk/web-core';

class BreakoutRooms {
	private manager: BreakoutRoomsManager;
	private meeting: DyteClient;

	constructor(meeting: DyteClient) {
		this.manager = new BreakoutRoomsManager();
		this.meeting = meeting;

Tushkiz

/**
 * required packages
 * "@dytesdk/react-ui-kit": "^1.64.0",
 * "@dytesdk/react-web-core": "^1.35.20",
 */

import { useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteBreakoutRoomsToggle, DyteDialogManager, DyteGrid } from '@dytesdk/react-ui-kit';

Tushkiz

import { useEffect, useState } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteMeeting, DyteUIBuilder, generateConfig } from '@dytesdk/react-ui-kit';

type UIConfig = ReturnType<typeof generateConfig>['config'];

function DisableControlsAddonApp() {
	const [meeting, initMeeting] = useDyteClient();
	const [uiConfig, setUIConfig] = useState<UIConfig>();
	const url = new URL(window.location.href);

Tushkiz

import { useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import {
	DyteCameraToggle,
	DyteControlbarButton,
	DyteMicToggle,
	DyteParticipantTile,
	defaultIconPack,
} from '@dytesdk/react-ui-kit';

Tushkiz

import { useEffect, useState } from 'react';
import DyteClient from '@dytesdk/web-core';
import { DyteMeeting, registerAddons } from '@dytesdk/react-ui-kit';
import VideoBackgroundAddon from '@dytesdk/ui-kit-addons/video-background';

const videoBackground = new VideoBackgroundAddon({
	modes: ['blur', 'virtual'],
	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',

Tushkiz

import { useDyteSelector } from '@dytesdk/react-web-core';
import { useEffect, useRef, useState } from 'react';

const addZero = (n: number) => Math.trunc(n).toString().padStart(2, '0');

export default function MeetingTimer() {
	const [time, setTime] = useState('');
	const timerId = useRef<number>();
	const timestamp = useDyteSelector((meeting) => meeting.meta.meetingStartedTimestamp);

Tushkiz

import { useCallback, useEffect, useRef, useState } from 'react';
import DyteClient from '@dytesdk/web-core';
import { DyteGrid, DyteUIBuilder, generateConfig } from '@dytesdk/react-ui-kit';

type UIConfig = ReturnType<typeof generateConfig>['config'];

function ParticipantTileApp() {
	const [meeting, setMeeting] = useState<DyteClient | null>(null);
	const [uiConfig, setUIConfig] = useState<UIConfig>();
	const timerId = useRef<number>();

Tushkiz

export default function PortraitMeeting() {
  const { meeting } = useDyteMeeting();

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'rgb(0 0 0)',
        height: '100%',