feat(shared-video/native): created ShareVideoConfirmDialog

react/features/shared-video/actions.any.ts

@@ -9,9 +9,10 @@ import {
     SET_DIALOG_SHOWN,
     SET_SHARED_VIDEO_STATUS
 } from './actionTypes';
-import { SharedVideoDialog } from './components';
+import { ShareVideoConfirmDialog, SharedVideoDialog } from './components';
 import { isSharedVideoEnabled } from './functions';
 
+
 /**
  * Marks dialog is in progress.
  *
@@ -175,3 +176,23 @@ export function setAllowedUrlDomians(allowedUrlDomains: Array<string>) {
         allowedUrlDomains
     };
 }
+
+/**
+ * Shows a confirmation dialog whether to play the external video link.
+ *
+ * @param {string} actor - The actor's name.
+ * @param {Function} onSubmit - The function to execute when confirmed.
+ *
+ * @returns {Function}
+ */
+export function showConfirmPlayingDialog(actor: String, onSubmit: Function) {
+    return (dispatch: IStore['dispatch']) => {
+        dispatch(setDialogInProgress(true));
+        dispatch(setDialogShown());
+        dispatch(openDialog(ShareVideoConfirmDialog, {
+            actorName: actor,
+            onCancel: () => dispatch(setDialogInProgress(false)),
+            onSubmit: () => onSubmit()
+        }));
+    };
+}

react/features/shared-video/actions.native.ts

@@ -1,35 +1 @@
-import i18n from 'i18next';
-
-import { IStore } from '../app/types';
-import { openDialog } from '../base/dialog/actions';
-import ConfirmDialog from '../base/dialog/components/native/ConfirmDialog';
-
-import { setDialogInProgress } from './actions.any';
-
 export * from './actions.any';
-
-/**
- * Shows a confirmation dialog whether to play the external video link.
- *
- * @param {string} actor - The actor's name.
- * @param {Function} onSubmit - The function to execute when confirmed.
- *
- * @returns {Function}
- */
-export function showConfirmPlayingDialog(actor: String, onSubmit: Function) {
-    return (dispatch: IStore['dispatch']) => {
-        dispatch(openDialog(ConfirmDialog, {
-            cancelLabel: 'dialog.Cancel',
-            confirmLabel: 'dialog.Ok',
-            descriptionKey: 'dialog.shareVideoConfirmPlay',
-            onCancel: () => dispatch(setDialogInProgress(false)),
-            onSubmit: () => {
-                dispatch(setDialogInProgress(false));
-                onSubmit();
-            },
-            title: i18n.t('dialog.shareVideoConfirmPlayTitle', {
-                name: actor
-            })
-        }));
-    };
-}

react/features/shared-video/actions.web.ts

@@ -1,9 +1,4 @@
-import { IStore } from '../app/types';
-import { openDialog } from '../base/dialog/actions';
-
 import { SET_DISABLE_BUTTON } from './actionTypes';
-import { setDialogInProgress, setDialogShown } from './actions.any';
-import ShareVideoConfirmDialog from './components/web/ShareVideoConfirmDialog';
 
 export * from './actions.any';
 
@@ -22,26 +17,3 @@ export function setDisableButton(disabled: boolean) {
         disabled
     };
 }
-
-/**
- * Shows a confirmation dialog whether to play the external video link.
- *
- * @param {string} actor - The actor's name.
- * @param {Function} onSubmit - The function to execute when confirmed.
- *
- * @returns {Function}
- */
-export function showConfirmPlayingDialog(actor: String, onSubmit: Function) {
-    return (dispatch: IStore['dispatch']) => {
-        dispatch(setDialogInProgress(true));
-        dispatch(setDialogShown());
-        dispatch(openDialog(ShareVideoConfirmDialog, {
-            actorName: actor,
-            onCancel: () => dispatch(setDialogInProgress(false)),
-            onSubmit: () => {
-                dispatch(setDialogInProgress(false));
-                onSubmit();
-            }
-        }));
-    };
-}

react/features/shared-video/components/index.native.ts

@@ -1,3 +1,4 @@
 // @ts-ignore
 export { default as SharedVideoDialog } from './native/SharedVideoDialog';
 export { default as SharedVideoButton } from './native/SharedVideoButton';
+export { default as ShareVideoConfirmDialog } from './native/ShareVideoConfirmDialog';

react/features/shared-video/components/index.web.ts

@@ -1,2 +1,3 @@
 export { default as SharedVideoDialog } from './web/SharedVideoDialog';
 export { default as SharedVideoButton } from './web/SharedVideoButton';
+export { default as ShareVideoConfirmDialog } from './web/ShareVideoConfirmDialog';

react/features/shared-video/components/native/ShareVideoConfirmDialog.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DialogProps } from '../../../base/dialog/constants';
+import ConfirmDialog from '../../../base/dialog/components/native/ConfirmDialog';
+
+interface IProps extends DialogProps {
+
+    /**
+     * The name of the remote participant that shared the video.
+     */
+    actorName: string;
+
+    /**
+     * The function to execute when canceled.
+     */
+    onCancel: () => void;
+
+    /**
+     * The function to execute when confirmed.
+     */
+    onSubmit: () => void;
+}
+
+/**
+ * Dialog to confirm playing a video shared from a remote participant.
+ *
+ * @returns {JSX.Element}
+ */
+export default function ShareVideoConfirmDialog({ actorName, onCancel, onSubmit }: IProps): JSX.Element {
+    const { t } = useTranslation();
+
+    return (
+        <ConfirmDialog
+            cancelLabel = 'dialog.Cancel'
+            confirmLabel = 'dialog.Ok'
+            descriptionKey = 'dialog.shareVideoConfirmPlay'
+            onCancel = { onCancel }
+            onSubmit = { onSubmit }
+            title = { t('dialog.shareVideoConfirmPlayTitle', {
+                name: actorName
+            }) } />
+    );
+}

react/features/shared-video/middleware.any.ts

@@ -17,9 +17,10 @@ import { RESET_SHARED_VIDEO_STATUS, SET_SHARED_VIDEO_STATUS } from './actionType
 import {
     resetSharedVideoStatus,
     setAllowedUrlDomians,
+    setDialogInProgress,
     setSharedVideoStatus,
     showConfirmPlayingDialog
-} from './actions';
+} from './actions.any';
 import {
     DEFAULT_ALLOWED_URL_DOMAINS,
     PLAYBACK_STATUSES,
@@ -67,6 +68,8 @@ MiddlewareRegistry.register(store => next => action => {
                         handleSharingVideoStatus(store, value, attributes, conference);
                     } else {
                         dispatch(showConfirmPlayingDialog(getParticipantDisplayName(getState(), from), () => {
+                            dispatch(setDialogInProgress(false));
+
                             handleSharingVideoStatus(store, value, attributes, conference);
 
                             return true; // on mobile this is used to close the dialog