Skip to content

Instantly share code, notes, and snippets.

@Tushkiz

Tushkiz/DisableControlsAddonApp.tsx

Created February 1, 2024 12:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Tushkiz/73453c7b65c45033c7c71c8072bb9435 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Tushkiz/73453c7b65c45033c7c71c8072bb9435 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Tushkiz created this gist Feb 1, 2024.
    48 changes: 48 additions & 0 deletions DisableControlsAddonApp.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    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);
    const queryToken = url.searchParams.get('authToken')!;

    if (!queryToken) {
    alert('Please add authToken to url query params');
    }

    useEffect(() => {
    const init = async () => {
    initMeeting({
    defaults: { audio: true, video: true },
    authToken: queryToken,
    }).then((meet) => {
    if (!meet) {
    console.log('failed to initialize meeting');
    return;
    }
    const config = generateConfig(meet.self.suggestedTheme, meet).config;
    const builder = new DyteUIBuilder(config);
    const componentsToDisable = ['dyte-mic-toggle', 'dyte-camera-toggle'];
    componentsToDisable.forEach((component) => {
    builder.find('div#setupcontrols-media')?.remove(component);
    builder.find('div#controlbar-center')?.remove(component);
    builder.find('div#controlbar-mobile')?.remove(component);
    });
    setUIConfig(builder.build());
    });
    };
    init();
    }, []);

    if (!meeting) {
    return <div>Loading...</div>;
    }

    return <DyteMeeting meeting={meeting} config={uiConfig} />;
    }

    export default DisableControlsAddonApp;