dyte-sample.tsx

import React, { useEffect, useRef, useState } from 'react';
import {
    provideDyteDesignSystem,
    DyteCameraToggle,
    DyteChatToggle,
    DyteClock,
    DyteControlbar,
    DyteDialogManager,
    DyteGrid,
    DyteGridPagination,
    DyteHeader,
    DyteLeaveButton,
    DyteLogo,
    DyteMeetingTitle,
    DyteMenu,
    DyteMenuList,
    DyteMicToggle,
    DyteMoreToggle,
    DyteNotifications,
    DyteParticipantCount,
    DyteParticipantsAudio,
    DyteParticipantsToggle,
    DytePluginsToggle,
    DyteScreenShareToggle,
    DyteSettingsToggle,
} from '@dytesdk/react-ui-kit';
import { useDyteMeeting } from '@dytesdk/react-web-core';

// Use your own logo here
import logo from '../assets/logo.png';

import './style.css';
import Sidebar from '../components/sidebar';

const Meeting = () => {
  const { meeting } = useDyteMeeting();
  const [states, setStates] = useState<any>({
    prefs: { muteNotificationSounds: false },
  });
  const mainEl = useRef<HTMLDivElement>(null);
  const setState = (s: any) => setStates((states: any) => ({ ...states, ...s }));

  useEffect(() => {
    if (!mainEl.current) return;
    provideDyteDesignSystem(mainEl.current, {
        theme: 'light',
        colors: {
          danger: '#f2294e',
          brand: {
            700: '#3172bd',
            600: '#1e5594',
            500: '#0e3d73',
            400: '#08284d',
            300: '#02152b',
          },
          text: '#071428',
          'text-on-brand': '#ffffff',
          'video-bg': '#E5E7EB',
        },
        borderRadius: 'extra-rounded',
    });

    mainEl.current.addEventListener('dyteStateUpdate', (state: any) => {
        setState(state?.detail);
    })

  }, []);
  
  return (
    <div className='meeting-container' ref={mainEl}>
        <DyteParticipantsAudio meeting={meeting}/>
        <DyteNotifications
            meeting={meeting}
            states={states}
            config={{
                config: {
                  notifications: ['chat', 'participant_joined', 'participant_left'],
                  notification_sounds: ['chat', 'participant_joined', 'participant_left'],
                  participant_joined_sound_notification_limit: 10,
                  participant_chat_message_sound_notification_limit: 10,
                },
            }}
        />
        <DyteDialogManager
            meeting={meeting}
            states={states}
            onDyteStateUpdate={(e) => setState(e.detail)}
        />

        <DyteHeader style={{ width: '100%' }}>
            <DyteLogo config={{ designTokens: { logo }}}/>
            <div className='dyte-row-flex'>
                <DyteMeetingTitle meeting={meeting}/>
            </div>
            <DyteGridPagination meeting={meeting} states={states}/>
            <DyteParticipantCount meeting={meeting}/>

            // To remove clock, comment out the next line
            <DyteClock meeting={meeting}/>
        </DyteHeader>

        <div className='grid-container'>
            <DyteGrid
                meeting={meeting}
                states={states}
            />
            <Sidebar states={states} />
        </div>

        <DyteControlbar style={{ width: '100%' }}>
            <div className='dyte-row big-screen'>
                <DyteSettingsToggle meeting={meeting} states={states}/>
                <DyteScreenShareToggle meeting={meeting}/>
            </div>
            <div className='dyte-row-flex'>
                <DyteMicToggle meeting={meeting} />
                <DyteCameraToggle meeting={meeting}/>
                <DyteLeaveButton />
                <DyteMenu
                    placement="top" 
                    className='small-screen'
                >
                    <DyteMoreToggle size="sm" slot='trigger' />
                    <DyteMenuList >
                        <DyteSettingsToggle
                            meeting={meeting}
                            states={states}
                        />
                        <DyteScreenShareToggle
                            meeting={meeting}
                        />
                        // To remove chat, comment out the next line
                        <DyteChatToggle
                            meeting={meeting}
                        />
                        <DyteParticipantsToggle
                            meeting={meeting}
                        />
                        // To remove plugins, comment out the next line
                        <DytePluginsToggle
                            meeting={meeting}
                        />
                    </DyteMenuList>
                </DyteMenu>
            </div>
            <div className='dyte-row big-screen'>
                // To remove chat, comment out the next line
                <DyteChatToggle meeting={meeting} />
                <DyteParticipantsToggle meeting={meeting}/>
              
                // To remove plugins, comment out the next line
                <DytePluginsToggle meeting={meeting} />
            </div>
        </DyteControlbar>
        
    </div>
  );
}

export default Meeting;