feat: add global API for controlling the widget

Co-authored-by: Yurii Kinakh <yuriikinakh5@gmail.com>

Author: ye231101

README.md

@@ -79,6 +79,44 @@ Builds the widget as a standalone UMD bundle (`viewpro-widget.js`) in the `dist`
 
 2. The widget will automatically initialize and render when the page loads.
 
+### Controlling the Widget
+
+The widget exposes a global `ViewProWidget` API on `window` that you can use to control it programmatically from your website.
+
+#### Show / Hide the Floating Button
+
+```js
+// Hide the default floating button
+ViewProWidget.hideButton();
+
+// Show it again
+ViewProWidget.showButton();
+```
+
+#### Open / Close the Room Screen
+
+Use this to trigger the video call from your own custom button:
+
+```js
+// Open the room screen (same as clicking the floating button)
+ViewProWidget.open();
+
+// Close the room screen
+ViewProWidget.close();
+```
+
+#### Example: Custom Button with Hidden Default Button
+
+```html
+<script src="https://viewpro.com/viewpro-widget.js"></script>
+<script>
+  // Hide the default floating button once the widget loads
+  ViewProWidget.hideButton();
+</script>
+
+<button onclick="ViewProWidget.open()">Start Video Call</button>
+```
+
 ## Git Workflow & Commit Guidelines
 
 ### Commit Message Format

src/components/LobbyScreen.js

@@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import { api } from '../utils/api';
 import { SSE_URL, AVATAR_URL, username } from '../utils/constants';
+import controller from '../utils/controller';
 
 export default function LobbyScreen({ setOpen }) {
   const [userList, setUserList] = useState([]);
+  const [buttonVisible, setButtonVisible] = useState(controller._state.buttonVisible);
 
   const getCheck = async () => {
     try {
@@ -36,14 +38,17 @@ export default function LobbyScreen({ setOpen }) {
       console.error('SSE error:', error);
     };
 
+    const unsubVisibility = controller.on('buttonVisibility', setButtonVisible);
+
     return () => {
       eventSource.removeEventListener('user:logout', getCheck);
       eventSource.removeEventListener('user:status', getCheck);
       eventSource.close();
+      unsubVisibility();
     };
   }, []);
 
-  if (userList.length > 0) {
+  if (buttonVisible && userList.length > 0) {
     return (
       <div onClick={() => setOpen(true)} className="vp-floating-button">
         <div className="vp-floating-button-gradient">

src/components/VideoCall.js

@@ -1,13 +1,28 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import LobbyScreen from './LobbyScreen';
 import RoomScreen from './RoomScreen';
+import controller from '../utils/controller';
 
 export default function VideoCall() {
   const [isOpen, setIsOpen] = useState(false);
 
+  useEffect(() => {
+    const unsubOpen = controller.on('open', () => setIsOpen(true));
+    const unsubClose = controller.on('close', () => setIsOpen(false));
+    return () => {
+      unsubOpen();
+      unsubClose();
+    };
+  }, []);
+
+  const handleSetOpen = (value) => {
+    controller._setOpen(value);
+    setIsOpen(value);
+  };
+
   if (isOpen) {
-    return <RoomScreen setOpen={setIsOpen} />;
+    return <RoomScreen setOpen={handleSetOpen} />;
   }
 
-  return <LobbyScreen setOpen={setIsOpen} />;
+  return <LobbyScreen setOpen={handleSetOpen} />;
 }

src/index.js

@@ -2,21 +2,18 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
+import controller from './utils/controller';
 
 const initViewProWidget = () => {
-  // Use document instead of window.top.document to avoid cross-origin issues
-  // Try window.top.document first (for iframe scenarios), fallback to document
   let doc;
   try {
     doc = window.top && window.top !== window ? window.top.document : document;
   } catch (e) {
-    // Cross-origin error, use current document
     doc = document;
   }
 
   let container = doc.getElementById('viewpro-widget');
   if (!container) {
-    // Wait for body to be available
     if (!doc.body) {
       console.warn('ViewProWidget: Document body not ready yet');
       return;
@@ -34,21 +31,26 @@ const initViewProWidget = () => {
   }
 };
 
-// Wait for DOM to be ready before rendering
 const renderViewProWidget = () => {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initViewProWidget);
   } else {
-    // DOM is already ready
     initViewProWidget();
   }
 };
 
-// Initialize when script loads
 renderViewProWidget();
 
 const ViewProWidget = {
   render: renderViewProWidget,
+  showButton: () => controller.showButton(),
+  hideButton: () => controller.hideButton(),
+  open: () => controller.open(),
+  close: () => controller.close(),
 };
 
+if (typeof window !== 'undefined') {
+  window.ViewProWidget = ViewProWidget;
+}
+
 export default ViewProWidget;

src/utils/controller.js

@@ -0,0 +1,46 @@
+const listeners = {};
+
+const controller = {
+  _state: {
+    buttonVisible: true,
+    isOpen: false,
+  },
+
+  on(event, callback) {
+    if (!listeners[event]) listeners[event] = [];
+    listeners[event].push(callback);
+    return () => {
+      listeners[event] = listeners[event].filter((cb) => cb !== callback);
+    };
+  },
+
+  _emit(event, data) {
+    (listeners[event] || []).forEach((cb) => cb(data));
+  },
+
+  showButton() {
+    this._state.buttonVisible = true;
+    this._emit('buttonVisibility', true);
+  },
+
+  hideButton() {
+    this._state.buttonVisible = false;
+    this._emit('buttonVisibility', false);
+  },
+
+  open() {
+    this._state.isOpen = true;
+    this._emit('open');
+  },
+
+  close() {
+    this._state.isOpen = false;
+    this._emit('close');
+  },
+
+  _setOpen(value) {
+    this._state.isOpen = value;
+  },
+};
+
+export default controller;