Rendering

Usage

Methods / Properties

Core

Here is an introduction on the basics of rendering plugins in your UI:

Javascript

Once a plugin is activated you can render them using an <iframe> element

<iframe id="plugin-view" />

and then pass the iframe to the plugin

const iframeEl = document.getElementById('plugin-view');
plugin.addPluginView(this.iframeEl);

A full example might look something like this

const whiteboard = plugins.find((p) => p.name == 'Whiteboard');
whiteboard.on('enabled', () => {
  const iframeEl = document.createElement('iframe');
  whiteboard.addPluginView(iframeEl);
  document.body.appendChild(iframeEl);
});

React

• Setup an iframe element

const PluginView = () => {
  const pluginEl = useRef();

  return <iframe id="plugin-view" ref={pluginEl} />;
};

• Send reference of iframe to the plugin

const PluginView = (activatedPlugin) => {
  const pluginEl = useRef();

  useEffect(() => {
    if (activatedPlugin) {
      activatedPlugin.addPluginView(pluginEl.current);
    }
  }, [activatedPlugin]);

  return <iframe id="plugin-view" ref={pluginEl} />;
};

• Render all activated plugins

const Meeting = () => {
  const activatedPlugins = useDyteSelector((m) => m.plugins.active);
  return (
    {
      activatedPlugins.toArray()
        .map((p) => <PluginView activatedPlugin={p} />)
    }
  )
}

Flutter

Once a plugin is activated, use the PluginView widget to get a Platform View which renders the plugin

SizedBox(
    height: context.height,
        child: InteractiveViewer(
            child: PluginView(widget.plugin),
        ),
    )