Skip to content

Instantly share code, notes, and snippets.

@Tushkiz
Created February 1, 2024 12:29
Show Gist options
  • Save Tushkiz/73453c7b65c45033c7c71c8072bb9435 to your computer and use it in GitHub Desktop.
Save Tushkiz/73453c7b65c45033c7c71c8072bb9435 to your computer and use it in GitHub Desktop.
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);
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment