From bce8c567790ad3b6f7af2f36a350f137afd16bf8 Mon Sep 17 00:00:00 2001
From: Horatiu Muresan <horatiu.muresan@8x8.com>
Date: Wed, 26 Jul 2023 11:51:01 +0300
Subject: [PATCH] Add permission dlg for toggle camera

---
 lang/main.json                                |  2 +
 react/features/base/tracks/actions.web.ts     | 16 +++++++
 .../web/AllowToggleCameraDialog.tsx           | 44 +++++++++++++++++++
 react/features/base/tracks/middleware.web.ts  |  8 +++-
 4 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 react/features/base/tracks/components/web/AllowToggleCameraDialog.tsx

diff --git a/lang/main.json b/lang/main.json
index ef6b7a0f972b6..27e0bad372f84 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -267,6 +267,8 @@
         "addMeetingNote": "Add a note about this meeting",
         "addOptionalNote": "Add a note (optional):",
         "allow": "Allow",
+        "allowToggleCameraDialog": "Do you allow {{initiatorName}} to toggle your camera facing mode?",
+        "allowToggleCameraTitle": "Allow toggle camera?",
         "alreadySharedVideoMsg": "Another participant is already sharing a video. This conference allows only one shared video at a time.",
         "alreadySharedVideoTitle": "Only one shared video is allowed at a time",
         "applicationWindow": "Application window",
diff --git a/react/features/base/tracks/actions.web.ts b/react/features/base/tracks/actions.web.ts
index e57f11e9cfd3c..1dc378c40f28c 100644
--- a/react/features/base/tracks/actions.web.ts
+++ b/react/features/base/tracks/actions.web.ts
@@ -13,6 +13,7 @@ import { toggleScreenshotCaptureSummary } from '../../screenshot-capture/actions
 import { isScreenshotCaptureEnabled } from '../../screenshot-capture/functions';
 import { AudioMixerEffect } from '../../stream-effects/audio-mixer/AudioMixerEffect';
 import { getCurrentConference } from '../conference/functions';
+import { openDialog } from '../dialog/actions';
 import { JitsiTrackErrors, JitsiTrackEvents } from '../lib-jitsi-meet';
 import { setScreenshareMuted } from '../media/actions';
 import { MEDIA_TYPE, VIDEO_TYPE } from '../media/constants';
@@ -22,6 +23,7 @@ import {
     replaceLocalTrack,
     toggleCamera
 } from './actions.any';
+import AllowToggleCameraDialog from './components/web/AllowToggleCameraDialog';
 import {
     createLocalTracksF,
     getLocalDesktopTrack,
@@ -301,3 +303,17 @@ export function setCameraFacingMode(facingMode: string | undefined) {
         }
     };
 }
+
+/**
+ * Signals to open the permission dialog for toggling camera remotely.
+ *
+ * @param {Function} onAllow - Callback to be executed if permission to toggle camera was granted.
+ * @param {string} initiatorId - The participant id of the requester.
+ * @returns {Object} - The open dialog action.
+ */
+export function openAllowToggleCameraDialog(onAllow: Function, initiatorId: string) {
+    return openDialog(AllowToggleCameraDialog, {
+        onAllow,
+        initiatorId
+    });
+}
diff --git a/react/features/base/tracks/components/web/AllowToggleCameraDialog.tsx b/react/features/base/tracks/components/web/AllowToggleCameraDialog.tsx
new file mode 100644
index 0000000000000..cb80e7b757e4f
--- /dev/null
+++ b/react/features/base/tracks/components/web/AllowToggleCameraDialog.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { translate } from '../../../i18n/functions';
+import { getParticipantDisplayName } from '../../../participants/functions';
+import Dialog from '../../../ui/components/web/Dialog';
+
+
+interface IProps extends WithTranslation {
+
+    /**
+     * The participant id of the toggle camera requester.
+     */
+    initiatorId: string;
+
+    /**
+     * Function to be invoked after permission to toggle camera granted.
+     */
+    onAllow: () => void;
+}
+
+/**
+ * Dialog to allow toggling camera remotely.
+ *
+ * @returns {JSX.Element} - The allow toggle camera dialog.
+ */
+const AllowToggleCameraDialog = ({ onAllow, t, initiatorId }: IProps): JSX.Element => {
+    const initiatorName = useSelector((state: IReduxState) => getParticipantDisplayName(state, initiatorId));
+
+    return (
+        <Dialog
+            ok = {{ translationKey: 'dialog.allow' }}
+            onSubmit = { onAllow }
+            titleKey = 'dialog.allowToggleCameraTitle'>
+            <div>
+                { t('dialog.allowToggleCameraDialog', { initiatorName }) }
+            </div>
+        </Dialog>
+    );
+};
+
+export default translate(AllowToggleCameraDialog);
diff --git a/react/features/base/tracks/middleware.web.ts b/react/features/base/tracks/middleware.web.ts
index ab838ff364319..5f32c95cb5305 100644
--- a/react/features/base/tracks/middleware.web.ts
+++ b/react/features/base/tracks/middleware.web.ts
@@ -23,6 +23,7 @@ import {
     TRACK_UPDATED
 } from './actionTypes';
 import {
+    openAllowToggleCameraDialog,
     setCameraFacingMode,
     showNoDataFromSourceVideoError,
     toggleScreensharing,
@@ -147,10 +148,13 @@ function _addSetCameraFacingModeListener(conference: IJitsiConference) {
         JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
         (...args: any) => {
             if (args && args.length >= 2) {
-                const [ , eventData ] = args;
+                const [ sender, eventData ] = args;
 
                 if (eventData.name === CAMERA_FACING_MODE_MESSAGE) {
-                    APP.store.dispatch(setCameraFacingMode(eventData.facingMode));
+                    APP.store.dispatch(openAllowToggleCameraDialog(
+                        /* onAllow */ () => APP.store.dispatch(setCameraFacingMode(eventData.facingMode)),
+                        /* initiatorId */ sender._id
+                    ));
                 }
             }
         }