feat(api): add toolbarVisibilityChanged event to the IFrame API (#16659)

* Change toolbar background color from IFrame API #16468 fixed

* fix(toolbar #16468): implement toolbar background color via configOverwrite for web and mobile

* keep toolbarConfig defaults commented in config.js

* add trailing comma to commented toolbarConfig.backgroundColor

* fix: resolve linting errors

* feat(api): add toolbarVisibilityChanged event to IFrame API

* fix lint

modules/API/API.js

@@ -1242,6 +1242,20 @@ class API {
         });
     }
 
+    /**
+     * Notify external application (if API is enabled) that the in-page toolbox
+     * visibility changed.
+     *
+     * @param {boolean} visible - True if the toolbox is visible, false otherwise.
+     * @returns {void}
+     */
+    notifyToolbarVisibilityChanged(visible) {
+        this._sendEvent({
+            name: 'toolbar-visibility-changed',
+            visible
+        });
+    }
+
     /**
      * Notifies the external application (spot) that the local jitsi-participant
      * has a status update.

modules/API/external/external_api.js

@@ -167,6 +167,7 @@ const events = {
     'suspend-detected': 'suspendDetected',
     'tile-view-changed': 'tileViewChanged',
     'toolbar-button-clicked': 'toolbarButtonClicked',
+    'toolbar-visibility-changed': 'toolbarVisibilityChanged',
     'transcribing-status-changed': 'transcribingStatusChanged',
     'transcription-chunk-received': 'transcriptionChunkReceived',
     'whiteboard-status-changed': 'whiteboardStatusChanged'

react/features/toolbox/actions.any.ts

@@ -50,6 +50,13 @@ export function setToolboxVisible(visible: boolean) {
             type: SET_TOOLBOX_VISIBLE,
             visible
         });
+        // Notify external API consumers about the change in toolbox visibility
+        // if the old legacy APP.API bridge is available.
+        /* eslint-disable no-undef */
+        if (typeof APP !== 'undefined' && APP.API && typeof APP.API.notifyToolbarVisibilityChanged === 'function') {
+            APP.API.notifyToolbarVisibilityChanged(visible);
+        }
+        /* eslint-enable no-undef */
     };
 }
 
@@ -72,6 +79,18 @@ export function toggleToolboxVisible() {
         dispatch({
             type: TOGGLE_TOOLBOX_VISIBLE
         });
+
+        // After toggling, read the updated state and notify external API
+        // about the current visibility. This mirrors the behavior of
+        // setToolboxVisible and ensures consumers are informed when the
+        // visibility changes via toggle.
+        /* eslint-disable no-undef */
+        if (typeof APP !== 'undefined' && APP.API && typeof APP.API.notifyToolbarVisibilityChanged === 'function') {
+            const { visible: newVisible } = getState()['features/toolbox'];
+
+            APP.API.notifyToolbarVisibilityChanged(newVisible);
+        }
+        /* eslint-enable no-undef */
     };
 }