feat(external-api) Add command to show custom in-meeting notification (#11897)

* feat(external-api) Add command to show custom in-meeting notification

* fix lint

* added uid to showNotifications, added hideNotifications

modules/API/API.js

@@ -75,6 +75,12 @@ import {
     resizeLargeVideo
 } from '../../react/features/large-video/actions.web';
 import { toggleLobbyMode, answerKnockingParticipant } from '../../react/features/lobby/actions';
+import {
+    hideNotification,
+    NOTIFICATION_TIMEOUT_TYPE,
+    NOTIFICATION_TYPE,
+    showNotification
+} from '../../react/features/notifications';
 import {
     close as closeParticipantsPane,
     open as openParticipantsPane
@@ -463,6 +469,58 @@ function initCommands() {
             APP.store.dispatch(stopSharedVideo());
         },
 
+        /**
+         * Shows a custom in-meeting notification.
+         *
+         * @param { string } arg.title - Notification title.
+         * @param { string } arg.description - Notification description.
+         * @param { string } arg.uid - Optional unique identifier for the notification.
+         * @param { string } arg.type - Notification type, either `error`, `info`, `normal`, `success` or `warning`.
+         * Defaults to "normal" if not provided.
+         * @param { string } arg.timeout - Timeout type, either `short`, `medium`, `long` or `sticky`.
+         * Defaults to "short" if not provided.
+         * @returns {void}
+         */
+        'show-notification': ({
+            title,
+            description,
+            uid,
+            type = NOTIFICATION_TYPE.NORMAL,
+            timeout = NOTIFICATION_TIMEOUT_TYPE.SHORT
+        }) => {
+            const validTypes = Object.values(NOTIFICATION_TYPE);
+            const validTimeouts = Object.values(NOTIFICATION_TIMEOUT_TYPE);
+
+            if (!validTypes.includes(type)) {
+                logger.error(`Invalid notification type "${type}". Expecting one of ${validTypes}`);
+
+                return;
+            }
+
+            if (!validTimeouts.includes(timeout)) {
+                logger.error(`Invalid notification timeout "${timeout}". Expecting one of ${validTimeouts}`);
+
+                return;
+            }
+
+            APP.store.dispatch(showNotification({
+                uid,
+                title,
+                description,
+                appearance: type
+            }, timeout));
+        },
+
+        /**
+         * Removes a notification given a unique identifier.
+         *
+         * @param { string } uid - Unique identifier for the notification to be removed.
+         * @returns {void}
+         */
+        'hide-notification': uid => {
+            APP.store.dispatch(hideNotification(uid));
+        },
+
         /**
          * Starts a file recording or streaming session depending on the passed on params.
          * For RTMP streams, `rtmpStreamKey` must be passed on. `rtmpBroadcastID` is optional.

modules/API/external/external_api.js

@@ -40,6 +40,7 @@ const commands = {
     email: 'email',
     grantModerator: 'grant-moderator',
     hangup: 'video-hangup',
+    hideNotification: 'hide-notification',
     initiatePrivateChat: 'initiate-private-chat',
     joinBreakoutRoom: 'join-breakout-room',
     localSubject: 'local-subject',
@@ -63,6 +64,7 @@ const commands = {
     setSubtitles: 'set-subtitles',
     setTileView: 'set-tile-view',
     setVideoQuality: 'set-video-quality',
+    showNotification: 'show-notification',
     startRecording: 'start-recording',
     startShareVideo: 'start-share-video',
     stopRecording: 'stop-recording',

react/features/notifications/actions.js

@@ -104,7 +104,7 @@ export function showErrorNotification(props: Object, type: ?string) {
  * Queues a notification for display.
  *
  * @param {Object} props - The props needed to show the notification component.
- * @param {string} type - Notification type.
+ * @param {string} type - Timeout type.
  * @returns {Function}
  */
 export function showNotification(props: Object = {}, type: ?string) {