Skip to content

Instantly share code, notes, and snippets.

View Tushkiz's full-sized avatar

Tushar Sonawane Tushkiz

45 followers · 76 following
View GitHub Profile
@Tushkiz
Tushkiz / keybase.md
Created November 5, 2019 11:26

Keybase proof

I hereby claim:

  • I am tushkiz on github.

  • I am tushkiz (https://keybase.io/tushkiz) on keybase.

  • I have a public key ASDjhNVj97ZR0ajgyFIiADImZDcP51fwlVO0V6OqsiHcTwo

@Tushkiz
Tushkiz / bg-addons.html
Last active January 17, 2024 09:16
Dyte Video Background in vanilla html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Virtual Background Addons | Dyte UI Kit</title>
<!-- Import helper to load UI Kit components -->
@Tushkiz
Tushkiz / PortraitMeeting.tsx
Last active January 17, 2024 09:15
Portrait Meeting Layout using Dyte
export default function PortraitMeeting() {
const { meeting } = useDyteMeeting();
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
backgroundColor: 'rgb(0 0 0)',
height: '100%',
@Tushkiz
Tushkiz / ParticipantTileApp.tsx
Last active January 17, 2024 09:15
show/hide name tag dyte component on mouse move
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
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);
@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 / 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 / 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 / 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 / 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;