feat: adjust other notifications

wireapp · Dec 11, 2024 · 30b78c8 · 30b78c8
1 parent edc43df
commit 30b78c8
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "@wireapp/react-ui-kit": "9.28.0",
     "@wireapp/store-engine-dexie": "2.1.15",
     "@wireapp/telemetry": "0.1.4",
-    "@wireapp/webapp-events": "0.24.3",
+    "@wireapp/webapp-events": "file:.yalc/@wireapp/webapp-events",
     "amplify": "https://github.com/wireapp/amplify#head=master",
     "beautiful-react-hooks": "5.0.2",
     "classnames": "2.5.1",

diff --git a/src/script/calling/CallingRepository.ts b/src/script/calling/CallingRepository.ts
@@ -55,7 +55,6 @@ import {AvsDebugger} from '@wireapp/avs-debugger';
 import {Runtime} from '@wireapp/commons';
 import {WebAppEvents} from '@wireapp/webapp-events';
 
-import {showAppNotification} from 'Components/AppNotification';
 import {useCallAlertState} from 'Components/calling/useCallAlertState';
 import {CALL_QUALITY_FEEDBACK_KEY} from 'Components/Modals/QualityFeedbackModal/constants';
 import {flatten} from 'Util/ArrayUtil';
@@ -866,7 +865,7 @@ export class CallingRepository {
           ? t('videoCallParticipantRaisedSelfHandUp')
           : t('videoCallParticipantRaisedTheirHandUp', {name});
 
-        showAppNotification(handUpMessage);
+        amplify.publish(WebAppEvents.CALL.HAND_RAISED, {notificationMessage: handUpMessage});
 
         break;
       }
@@ -1129,9 +1128,9 @@ export class CallingRepository {
     const isScreenSharingSourceFromDetachedWindow = this.callState.isScreenSharingSourceFromDetachedWindow();
 
     if (joinedCall && isSharingScreen && isScreenSharingSourceFromDetachedWindow) {
+      amplify.publish(WebAppEvents.CALL.SCREEN_SHARING_ENDED);
       this.callState.isScreenSharingSourceFromDetachedWindow(false);
       void this.toggleScreenshare(joinedCall);
-      showAppNotification(t('videoCallScreenShareEnded'));
     }
   };
 

diff --git a/src/script/components/AppNotification/AppNotification.tsx b/src/script/components/AppNotification/AppNotification.tsx
@@ -24,8 +24,8 @@ import {toast, Toaster} from 'sonner';
 
 import * as Icon from 'Components/Icon';
 
-interface UseAppNotificationParams {
-  message: string;
+interface AppNotificationOptions {
+  message?: string;
   activeWindow?: Window;
   leadingIcon?: React.ElementType<any>;
   withCloseButton?: boolean;
@@ -41,46 +41,43 @@ const APP_NOTIFICATION_SELECTOR = '#app-notification';
 // It's necessary to display notifications in different windows (e.g. main window and detached call window).
 let roots: Record<string, Root> = {};
 
-export const useAppNotification = ({
-  message,
-  activeWindow = window,
-  leadingIcon,
-  withCloseButton = true,
-  autoClose = true,
-}: UseAppNotificationParams) => {
+export const useAppNotification = (props?: AppNotificationOptions) => {
   const notificationId = useRef<string | number | null>(null);
 
-  useEffect(() => {
-    const timeout = setTimeout(() => injectToaster(activeWindow));
+  const activeWindow = props?.activeWindow || window;
 
-    return () => {
-      clearTimeout(timeout);
-      setTimeout(() => clearRoots());
-    };
+  useEffect(() => {
+    setTimeout(() => {
+      clearRoots();
+    });
   }, [activeWindow]);
 
   return {
-    show: () => {
-      const id = toast.custom(
-        toastId => (
-          <AppNotification
-            message={message}
-            leadingIcon={leadingIcon}
-            withCloseButton={withCloseButton}
-            onClose={() => toast.dismiss(toastId)}
-          />
-        ),
-        {
-          duration: autoClose ? DEFAULT_NOTIFICATION_TIMEOUT : Infinity,
-          position: 'top-center',
-          unstyled: true,
-          dismissible: false,
-          style: {
-            top: 24,
+    show: (options?: Pick<AppNotificationOptions, 'message'>) => {
+      injectToaster(activeWindow);
+
+      setTimeout(() => {
+        const id = toast.custom(
+          toastId => (
+            <AppNotification
+              message={options?.message || props?.message || ''}
+              leadingIcon={props?.leadingIcon}
+              withCloseButton={props?.withCloseButton}
+              onClose={() => toast.dismiss(toastId)}
+            />
+          ),
+          {
+            duration: props?.autoClose === false ? Infinity : DEFAULT_NOTIFICATION_TIMEOUT,
+            position: 'top-center',
+            unstyled: true,
+            dismissible: false,
+            style: {
+              top: 24,
+            },
           },
-        },
-      );
-      notificationId.current = id;
+        );
+        notificationId.current = id;
+      });
     },
     close: () => {
       if (!notificationId.current) {
@@ -123,7 +120,7 @@ const clearRoots = () => {
   roots = {};
 };
 
-interface AppNotificationProps extends Pick<UseAppNotificationParams, 'message' | 'leadingIcon' | 'withCloseButton'> {
+interface AppNotificationProps extends Pick<AppNotificationOptions, 'message' | 'leadingIcon' | 'withCloseButton'> {
   onClose?: () => void;
 }
 

diff --git a/src/script/components/Modals/QualityFeedbackModal/QualityFeedbackModal.tsx b/src/script/components/Modals/QualityFeedbackModal/QualityFeedbackModal.tsx
@@ -25,7 +25,7 @@ import {container} from 'tsyringe';
 import {Button, ButtonVariant, Checkbox, CheckboxLabel} from '@wireapp/react-ui-kit';
 import {WebAppEvents} from '@wireapp/webapp-events';
 
-import {showAppNotification} from 'Components/AppNotification';
+import {useAppNotification} from 'Components/AppNotification';
 import {useCallAlertState} from 'Components/calling/useCallAlertState';
 import {ModalComponent} from 'Components/Modals/ModalComponent';
 import {RatingListLabel} from 'Components/Modals/QualityFeedbackModal/typings';
@@ -58,6 +58,10 @@ export const QualityFeedbackModal = () => {
   const {setQualityFeedbackModalShown, qualityFeedbackModalShown} = useCallAlertState();
   const {self: selfUser} = useKoSubscribableChildren(userState, ['self']);
 
+  const submittedNotification = useAppNotification({
+    message: t('qualityFeedback.notificationSubmitted'),
+  });
+
   if (!qualityFeedbackModalShown) {
     return null;
   }
@@ -76,7 +80,7 @@ export const QualityFeedbackModal = () => {
 
       currentStorageData[selfUser.id] = isChecked ? null : dateUntilShowModal.getTime();
       localStorage.setItem(CALL_QUALITY_FEEDBACK_KEY, JSON.stringify(currentStorageData));
-      showAppNotification(t('qualityFeedback.notificationSubmitted'));
+      submittedNotification.show();
     } catch (error) {
       logger.warn(`Can't send feedback: ${(error as Error).message}`);
     } finally {

diff --git a/src/script/components/calling/CallingCell/CallingCell.tsx b/src/script/components/calling/CallingCell/CallingCell.tsx
@@ -20,10 +20,13 @@
 import React, {useCallback, useEffect} from 'react';
 
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
+import {amplify} from 'amplify';
 import {container} from 'tsyringe';
 
 import {CALL_TYPE, REASON as CALL_REASON, STATE as CALL_STATE} from '@wireapp/avs';
+import {WebAppEvents} from '@wireapp/webapp-events';
 
+import {useAppNotification} from 'Components/AppNotification';
 import {callingContainer} from 'Components/calling/CallingCell/CallingCell.styles';
 import {CallingControls} from 'Components/calling/CallingCell/CallingControls';
 import {CallingHeader} from 'Components/calling/CallingCell/CallingHeader';
@@ -159,6 +162,23 @@ export const CallingCell = ({
     isMuted: isCurrentlyMuted,
   });
 
+  const screenSharingEndedNotification = useAppNotification({
+    message: t('videoCallScreenShareEnded'),
+    activeWindow: window,
+  });
+
+  useEffect(() => {
+    amplify.subscribe(WebAppEvents.CALL.SCREEN_SHARING_ENDED, () => {
+      console.log('WebAppEvents.CALL.SCREEN_SHARING_ENDED');
+
+      screenSharingEndedNotification.show();
+    });
+
+    return () => {
+      amplify.unsubscribeAll(WebAppEvents.CALL.SCREEN_SHARING_ENDED);
+    };
+  }, [screenSharingEndedNotification]);
+
   const handleMaximizeKeydown = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (!isOngoing) {

diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -21,6 +21,7 @@ import React, {useEffect, useRef, useState} from 'react';
 
 import {DefaultConversationRoleName} from '@wireapp/api-client/lib/conversation/';
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
+import {amplify} from 'amplify';
 import cx from 'classnames';
 import {container} from 'tsyringe';
 
@@ -35,6 +36,7 @@ import {
   RaiseHandIcon,
   Select,
 } from '@wireapp/react-ui-kit';
+import {WebAppEvents} from '@wireapp/webapp-events';
 
 import {useAppNotification} from 'Components/AppNotification/AppNotification';
 import {useCallAlertState} from 'Components/calling/useCallAlertState';
@@ -238,6 +240,20 @@ const FullscreenVideoCall = ({
   const [isCallViewOpen, toggleCallView] = useToggleState(false);
   const [isParticipantsListOpen, toggleParticipantsList] = useToggleState(false);
 
+  const handRaisedNotification = useAppNotification({
+    activeWindow: viewMode === CallingViewMode.DETACHED_WINDOW ? detachedWindow! : window,
+  });
+
+  useEffect(() => {
+    amplify.subscribe(WebAppEvents.CALL.HAND_RAISED, (event: {notificationMessage: string}) => {
+      handRaisedNotification.show({message: event.notificationMessage});
+    });
+
+    return () => {
+      amplify.unsubscribeAll(WebAppEvents.CALL.HAND_RAISED);
+    };
+  }, [handRaisedNotification]);
+
   function toggleIsHandRaised(currentIsHandRaised: boolean) {
     selfParticipant.handRaisedAt(new Date().getTime());
     sendHandRaised(!currentIsHandRaised, call);
@@ -435,14 +451,15 @@ const FullscreenVideoCall = ({
   const isModerator = selfUser && roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;
 
   const noti = useAppNotification({
-    message: 'Microphone temporarily on',
     activeWindow: viewMode === CallingViewMode.DETACHED_WINDOW ? detachedWindow! : window,
     withCloseButton: true,
     leadingIcon: Icon.MicOnIcon,
   });
 
   const handleOpen = () => {
-    noti?.show();
+    noti?.show({
+      message: 'Microphone temporarily on',
+    });
   };
 
   const handleClose = () => {

diff --git a/src/script/util/DebugUtil.ts b/src/script/util/DebugUtil.ts
@@ -39,7 +39,6 @@ import {container} from 'tsyringe';
 
 import {AvsDebugger} from '@wireapp/avs-debugger';
 
-import {showAppNotification} from 'Components/AppNotification';
 import {getStorage} from 'Util/localStorage';
 import {getLogger, Logger} from 'Util/Logger';
 
@@ -621,8 +620,4 @@ export class DebugUtil {
   disableForcedErrorReporting() {
     return disableForcedErrorReporting();
   }
-
-  renderAppNotification(message?: string) {
-    showAppNotification(message || 'Test notification');
-  }
 }
diff --git a/src/script/view_model/CallingViewModel.ts b/src/script/view_model/CallingViewModel.ts
@@ -294,11 +294,10 @@ export class CallingViewModel {
         this.callingRepository.rejectCall(conversation.qualifiedId);
       },
       startAudio: async (conversationEntity: Conversation) => {
-        if (conversationEntity.isGroup() && !this.teamState.isConferenceCallingEnabled()) {
-          this.showRestrictedConferenceCallingModal();
-        } else {
-          await handleCallAction(conversationEntity, CALL_TYPE.NORMAL);
-        }
+        // if (conversationEntity.isGroup() && !this.teamState.isConferenceCallingEnabled()) {
+        //   this.showRestrictedConferenceCallingModal();
+        // } else {
+        await handleCallAction(conversationEntity, CALL_TYPE.NORMAL);
       },
       startVideo: async (conversationEntity: Conversation) => {
         if (conversationEntity.isGroup() && !this.teamState.isConferenceCallingEnabled()) {