chore: refactor new room sound (#34207)

apps/meteor/app/ui/client/lib/KonchatNotification.ts

@@ -10,7 +10,7 @@ import { router } from '../../../../client/providers/RouterProvider';
 import { stripTags } from '../../../../lib/utils/stringUtils';
 import { CustomSounds } from '../../../custom-sounds/client/lib/CustomSounds';
 import { e2e } from '../../../e2e/client';
-import { Subscriptions } from '../../../models/client';
+import { Subscriptions, Users } from '../../../models/client';
 import { getUserPreference } from '../../../utils/client';
 import { getUserAvatarURL } from '../../../utils/client/getUserAvatarURL';
 import { getUserNotificationsSoundVolume } from '../../../utils/client/getUserNotificationsSoundVolume';
@@ -207,27 +207,29 @@ class KonchatNotification {
 		}
 	}
 
-	public newRoom(rid: IRoom['_id']) {
+	public newRoom() {
 		Tracker.nonreactive(() => {
-			let newRoomSound = Session.get('newRoomSound') as IRoom['_id'][] | undefined;
-			if (newRoomSound) {
-				newRoomSound = [...newRoomSound, rid];
-			} else {
-				newRoomSound = [rid];
+			const uid = Meteor.userId();
+			if (!uid) {
+				return;
 			}
+			const user = Users.findOne(uid, {
+				fields: {
+					'settings.preferences.newRoomNotification': 1,
+					'settings.preferences.notificationsSoundVolume': 1,
+				},
+			});
+			const newRoomNotification = getUserPreference<string>(user, 'newRoomNotification');
+			const audioVolume = getUserNotificationsSoundVolume(user?._id);
 
-			return Session.set('newRoomSound', newRoomSound);
-		});
-	}
-
-	public removeRoomNotification(rid: IRoom['_id']) {
-		let newRoomSound = (Session.get('newRoomSound') as IRoom['_id'][] | undefined) ?? [];
-		newRoomSound = newRoomSound.filter((_rid) => _rid !== rid);
-		Tracker.nonreactive(() => Session.set('newRoomSound', newRoomSound));
-
-		const link = document.querySelector(`.link-room-${rid}`);
+			if (!newRoomNotification) {
+				return;
+			}
 
-		link?.classList.remove('new-room-highlight');
+			void CustomSounds.play(newRoomNotification, {
+				volume: Number((audioVolume / 100).toPrecision(2)),
+			});
+		});
 	}
 }
 

apps/meteor/client/hooks/useNotifyUser.ts

@@ -22,7 +22,7 @@ export const useNotifyUser = () => {
 		}
 
 		if ((!router.getRouteParameters().name || router.getRouteParameters().name !== sub.name) && !sub.ls && sub.alert === true) {
-			KonchatNotification.newRoom(sub.rid);
+			KonchatNotification.newRoom();
 		}
 	});
 

apps/meteor/client/hooks/useContinuousSoundNotification.ts → apps/meteor/client/hooks/useOmnichannelContinuousSoundNotification.ts

@@ -6,7 +6,7 @@ import { useUserSoundPreferences } from './useUserSoundPreferences';
 import { CustomSounds } from '../../app/custom-sounds/client/lib/CustomSounds';
 
 const query = { t: 'l', ls: { $exists: false }, open: true };
-export const useContinuousSoundNotification = () => {
+export const useOmnichannelContinuousSoundNotification = <T>(queue: T[]) => {
 	const userSubscriptions = useUserSubscriptions(query);
 
 	const playNewRoomSoundContinuously = useSetting('Livechat_continuous_sound_notification_new_livechat_room');
@@ -16,6 +16,8 @@ export const useContinuousSoundNotification = () => {
 
 	const continuousCustomSoundId = newRoomNotification && `${newRoomNotification}-continuous`;
 
+	const hasUnreadRoom = userSubscriptions.length > 0 || queue.length > 0;
+
 	useEffect(() => {
 		let audio: ICustomSound;
 		if (playNewRoomSoundContinuously && continuousCustomSoundId) {
@@ -39,7 +41,7 @@ export const useContinuousSoundNotification = () => {
 			return;
 		}
 
-		if (userSubscriptions.length === 0) {
+		if (!hasUnreadRoom) {
 			CustomSounds.pause(continuousCustomSoundId);
 			return;
 		}
@@ -48,5 +50,5 @@ export const useContinuousSoundNotification = () => {
 			volume: notificationsSoundVolume,
 			loop: true,
 		});
-	}, [continuousCustomSoundId, playNewRoomSoundContinuously, userSubscriptions, notificationsSoundVolume]);
+	}, [continuousCustomSoundId, playNewRoomSoundContinuously, userSubscriptions, notificationsSoundVolume, hasUnreadRoom]);
 };

apps/meteor/client/lib/chats/flows/sendMessage.ts

 import type { IMessage } from '@rocket.chat/core-typings';
 
-import { KonchatNotification } from '../../../../app/ui/client/lib/KonchatNotification';
 import { sdk } from '../../../../app/utils/client/lib/SDKClient';
 import { t } from '../../../../app/utils/lib/i18n';
 import { onClientBeforeSendMessage } from '../../onClientBeforeSendMessage';
@@ -12,8 +11,6 @@ import { processSlashCommand } from './processSlashCommand';
 import { processTooLongMessage } from './processTooLongMessage';
 
 const process = async (chat: ChatAPI, message: IMessage, previewUrls?: string[], isSlashCommandAllowed?: boolean): Promise<void> => {
-	KonchatNotification.removeRoomNotification(message.rid);
-
 	if (await processSetReaction(chat, message)) {
 		return;
 	}

apps/meteor/client/providers/CustomSoundProvider.tsx

@@ -3,7 +3,6 @@ import type { ReactNode } from 'react';
 import React, { useEffect } from 'react';
 
 import { CustomSounds } from '../../app/custom-sounds/client/lib/CustomSounds';
-import { useContinuousSoundNotification } from '../hooks/useContinuousSoundNotification';
 
 type CustomSoundProviderProps = {
 	children?: ReactNode;
@@ -18,8 +17,6 @@ const CustomSoundProvider = ({ children }: CustomSoundProviderProps) => {
 		void CustomSounds.fetchCustomSoundList();
 	}, [userId]);
 
-	useContinuousSoundNotification();
-
 	const streamAll = useStream('notify-all');
 
 	useEffect(() => {

apps/meteor/client/providers/OmnichannelProvider.tsx

@@ -19,6 +19,7 @@ import { ClientLogger } from '../../lib/ClientLogger';
 import type { OmnichannelContextValue } from '../contexts/OmnichannelContext';
 import { OmnichannelContext } from '../contexts/OmnichannelContext';
 import { useHasLicenseModule } from '../hooks/useHasLicenseModule';
+import { useOmnichannelContinuousSoundNotification } from '../hooks/useOmnichannelContinuousSoundNotification';
 import { useReactiveValue } from '../hooks/useReactiveValue';
 import { useShouldPreventAction } from '../hooks/useShouldPreventAction';
 
@@ -62,7 +63,6 @@ const OmnichannelProvider = ({ children }: OmnichannelProviderProps) => {
 	const getRoutingConfig = useMethod('livechat:getRoutingConfig');
 
 	const [routeConfig, setRouteConfig] = useSafely(useState<OmichannelRoutingConfig | undefined>(undefined));
-	const [queueNotification, setQueueNotification] = useState(new Set());
 
 	const accessible = hasAccess && omniChannelEnabled;
 	const iceServersSetting: any = useSetting('WebRTC_Servers');
@@ -150,13 +150,23 @@ const OmnichannelProvider = ({ children }: OmnichannelProviderProps) => {
 		}, [manuallySelected, omnichannelPoolMaxIncoming, omnichannelSortingMechanism]),
 	);
 
-	queue?.map(({ rid }) => {
-		if (queueNotification.has(rid)) {
-			return;
-		}
-		setQueueNotification((prev) => new Set([...prev, rid]));
-		return KonchatNotification.newRoom(rid);
-	});
+	useEffect(() => {
+		const observer = LivechatInquiry.find(
+			{ status: LivechatInquiryStatus.QUEUED },
+			{
+				sort: getOmniChatSortQuery(omnichannelSortingMechanism),
+				limit: omnichannelPoolMaxIncoming,
+			},
+		).observe({
+			added: (_inquiry) => {
+				KonchatNotification.newRoom();
+			},
+		});
+
+		return () => observer.stop();
+	}, [omnichannelPoolMaxIncoming, omnichannelSortingMechanism]);
+
+	useOmnichannelContinuousSoundNotification(queue ?? []);
 
 	const contextValue = useMemo<OmnichannelContextValue>(() => {
 		if (!enabled) {

apps/meteor/client/startup/notifications/index.ts

 import './konchatNotifications';
-import './notification';

apps/meteor/client/startup/notifications/notification.ts

-import { Meteor } from 'meteor/meteor';
-import { Session } from 'meteor/session';
-import { Tracker } from 'meteor/tracker';
-
-import { CustomSounds } from '../../../app/custom-sounds/client/lib/CustomSounds';
-import { Users } from '../../../app/models/client';
-import { getUserPreference } from '../../../app/utils/client';
-import { getUserNotificationsSoundVolume } from '../../../app/utils/client/getUserNotificationsSoundVolume';
-
-Meteor.startup(() => {
-	Tracker.autorun(() => {
-		const uid = Meteor.userId();
-
-		if (!uid) {
-			return;
-		}
-
-		const user = Users.findOne(uid, {
-			fields: {
-				'settings.preferences.newRoomNotification': 1,
-				'settings.preferences.notificationsSoundVolume': 1,
-			},
-		});
-		const newRoomNotification = getUserPreference<string>(user, 'newRoomNotification');
-		const audioVolume = getUserNotificationsSoundVolume(user?._id);
-
-		if (!newRoomNotification) {
-			return;
-		}
-
-		if ((Session.get('newRoomSound') || []).length > 0) {
-			setTimeout(() => {
-				if (newRoomNotification !== 'none') {
-					CustomSounds.play(newRoomNotification, {
-						volume: Number((audioVolume / 100).toPrecision(2)),
-					});
-				}
-			}, 0);
-		} else {
-			CustomSounds.pause(newRoomNotification);
-		}
-	});
-});