Skip to content

Instantly share code, notes, and snippets.

View Tushkiz's full-sized avatar

Tushar Sonawane Tushkiz

View GitHub Profile
@Tushkiz
Tushkiz / Meeting.tsx
Created May 21, 2024 12:43
Meeting with self video in PiP
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-web-core';
import {
DyteAudioVisualizer,
DyteParticipantTile,
DyteNameTag,
DyteAvatar,
DyteMeetingTitle,
DyteClock,
DyteMicToggle,
DyteCameraToggle,
@Tushkiz
Tushkiz / App.tsx
Created May 17, 2024 10:10
Remove Dyte clock using DyteUIBuilder
import { useEffect, useState } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteUIBuilder, DyteMeeting } from '@dytesdk/react-ui-kit';
function App() {
const [meeting, initMeeting] = useDyteClient({ resetOnLeave: true });
const [uiConfig, setUiConfig] = useState<any>();
const url = new URL(window.location.href);
const queryToken = url.searchParams.get('authToken');
@Tushkiz
Tushkiz / CameraSwitchApp.tsx
Created March 5, 2024 13:46
Dyte sample app which switches between front and back camera on mobile
import { useCallback, useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import {
DyteCameraToggle,
DyteControlbarButton,
DyteDialogManager,
DyteGrid,
DyteLeaveButton,
DyteMicToggle,
DyteParticipantsAudio,
@Tushkiz
Tushkiz / PluginApp.tsx
Created February 29, 2024 06:11
Sample app which just has Dyte plugin in UI
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
Tushkiz / DyteBreakout.ts
Last active February 26, 2024 09:20
Sample for creating Breakout rooms using Dyte
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
Tushkiz / BreakoutApp.tsx
Created February 8, 2024 12:53
Breakout rooms sample app using Dyte react-ui-kit and react-web-core
/**
* 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
Tushkiz / DisableControlsAddonApp.tsx
Created February 1, 2024 12:29
Sample app where mic and camera toggles are removed using addons
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
Tushkiz / App.tsx
Last active January 17, 2024 11:38
PiP App sample using Dyte
import { useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import {
DyteCameraToggle,
DyteControlbarButton,
DyteMicToggle,
DyteParticipantTile,
defaultIconPack,
} from '@dytesdk/react-ui-kit';
@Tushkiz
Tushkiz / VideoBgAddon.tsx
Created December 20, 2023 12:42
VirtualBackground Addon
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
Tushkiz / MeetingTimer.tsx
Created December 20, 2023 10:19
dyte meeting timer
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);