feat: add plugin rendering docs

docs/guides/capabilities/plugins/index.mdx → docs/guides/capabilities/plugins/basics.mdx

@@ -1,4 +1,9 @@
-# Plugins
+---
+slug: '/capabilities/plugins'
+sidebar_position: 1
+---
+
+# Basics
 
 Dyte Plugins allow you to build collaborative and immersive experiences in your meetings without ever having to leave the meeting. The guides listed here will help you enable or disable plugins during meetings, configure existing plugins and even create new plugins with the help of Meeting APIs and built-in realtime database.
 

docs/guides/capabilities/plugins/docshare.mdx

@@ -1,3 +1,7 @@
+---
+title: 'Plugin: Document Sharing'
+---
+
 # Document Sharing
 
 DocShare allows you to share, view documents and annotate the documents collaboratively.
@@ -35,3 +39,7 @@ To open the plugin you can call
 ```ts
 docsharePlugin.activate();
 ```
+
+### File format support
+
+Supports PPTX, PPT, DOC, PDF

docs/guides/capabilities/plugins/rendering.mdx

@@ -0,0 +1,98 @@
+---
+sidebar_position: 2
+---
+
+# Rendering
+
+## Usage
+
+### Methods / Properties <div class="header-tag tag-core">Core</div>
+
+Here is an introduction on the basics of rendering plugins in your UI:
+
+<Tabs groupId="framework">
+<TabItem value="js" label="Javascript">
+
+Once a plugin is activated you can render them using an `<iframe>` element
+
+```html
+<iframe id="plugin-view" />
+```
+
+and then pass the iframe to the plugin
+
+```js
+const iframeEl = document.getElementById('plugin-view');
+plugin.addPluginView(this.iframeEl);
+```
+
+A full example might look something like this
+
+```js
+const whiteboard = plugins.find((p) => p.name == 'Whiteboard');
+whiteboard.on('enabled', () => {
+  const iframeEl = document.createElement('iframe');
+  whiteboard.addPluginView(iframeEl);
+  document.body.appendChild(iframeEl);
+});
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+- Setup an iframe element
+
+```jsx
+const PluginView = () => {
+  const pluginEl = useRef();
+
+  return <iframe id="plugin-view" ref={pluginEl} />;
+};
+```
+
+- Send reference of iframe to the plugin
+
+```jsx {4-8}
+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
+
+```jsx
+const Meeting = () => {
+  const activatedPlugins = useDyteSelector((m) => m.plugins.active);
+  return (
+    {
+      activatedPlugins.toArray()
+        .map((p) => <PluginView activatedPlugin={p} />)
+    }
+  )
+}
+```
+
+</TabItem>
+<TabItem value="flutter" label="Flutter">
+
+Once a plugin is activated, use the `PluginView` widget to get a Platform View which renders the plugin
+
+```dart {4}
+SizedBox(
+    height: context.height,
+        child: InteractiveViewer(
+            child: PluginView(widget.plugin),
+        ),
+    )
+```
+
+</TabItem>
+</Tabs>

docs/guides/capabilities/plugins/streamer.mdx

@@ -1,3 +1,7 @@
+---
+title: 'Plugin: Streamer'
+---
+
 # Video Player
 
 Streamer allows you to share & watch your favorite videos together. The plugin exposes a few APIs to control the video playback

docs/guides/capabilities/plugins/whiteboard.mdx

@@ -1,3 +1,7 @@
+---
+title: 'Plugin: Whiteboard'
+---
+
 # Whiteboard
 
 Whiteboard allows you to write, draw and ideate collaboratively. Built on top of tldraw