refactor(client): readMessage events (#28709)

apps/meteor/client/startup/index.ts

@@ -24,7 +24,6 @@ import './messageTypes';
 import './notifications';
 import './oauth';
 import './otr';
-import './readMessage';
 import './reloadRoomAfterLogin';
 import './renderMessage';
 import './renderNotification';

apps/meteor/client/views/room/components/BlazeTemplate.tsx

@@ -8,7 +8,7 @@ import React, { memo, useLayoutEffect, useRef } from 'react';
 
 import { useBlazePortals } from '../../../lib/portals/blazePortals';
 import { useRoom } from '../contexts/RoomContext';
-import { useRoomMessageContext } from './body/useRoomMessageContext';
+import { useRoomMessageContext } from './body/hooks/useRoomMessageContext';
 
 type PropsFromBox = 'className' | 'display' | 'flexGrow' | 'flexShrink' | 'flexDirection' | 'overflow' | 'w' | 'onClick' | 'onMouseEnter';
 

apps/meteor/client/views/room/components/body/RoomBody.tsx

@@ -44,9 +44,10 @@ import RoomForeword from './RoomForeword';
 import UnreadMessagesIndicator from './UnreadMessagesIndicator';
 import UploadProgressIndicator from './UploadProgressIndicator';
 import ComposerContainer from './composer/ComposerContainer';
-import { useFileUploadDropTarget } from './useFileUploadDropTarget';
-import { useRetentionPolicy } from './useRetentionPolicy';
-import { useUnreadMessages } from './useUnreadMessages';
+import { useFileUploadDropTarget } from './hooks/useFileUploadDropTarget';
+import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents';
+import { useRetentionPolicy } from './hooks/useRetentionPolicy';
+import { useUnreadMessages } from './hooks/useUnreadMessages';
 
 const RoomBody = (): ReactElement => {
 	const t = useTranslation();
@@ -538,6 +539,8 @@ const RoomBody = (): ReactElement => {
 		[toolbox],
 	);
 
+	useReadMessageWindowEvents();
+
 	return (
 		<>
 			{!isLayoutEmbedded && room.announcement && <Announcement announcement={room.announcement} announcementDetails={undefined} />}

apps/meteor/client/views/room/components/body/useFileUploadDropTarget.ts → apps/meteor/client/views/room/components/body/hooks/useFileUploadDropTarget.ts

@@ -4,10 +4,10 @@ import type { ReactNode } from 'react';
 import type React from 'react';
 import { useCallback, useMemo } from 'react';
 
-import { useReactiveValue } from '../../../../hooks/useReactiveValue';
-import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
-import { useChat } from '../../contexts/ChatContext';
-import { useRoom } from '../../contexts/RoomContext';
+import { useReactiveValue } from '../../../../../hooks/useReactiveValue';
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+import { useChat } from '../../../contexts/ChatContext';
+import { useRoom } from '../../../contexts/RoomContext';
 import { useDropTarget } from './useDropTarget';
 
 export const useFileUploadDropTarget = (): readonly [
@@ -35,7 +35,7 @@ export const useFileUploadDropTarget = (): readonly [
 	const chat = useChat();
 
 	const onFileDrop = useMutableCallback(async (files: File[]) => {
-		const { mime } = await import('../../../../../app/utils/lib/mimeTypes');
+		const { mime } = await import('../../../../../../app/utils/lib/mimeTypes');
 
 		const uploads = Array.from(files).map((file) => {
 			Object.defineProperty(file, 'type', { value: mime.lookup(file.name) });

apps/meteor/client/views/room/components/body/hooks/useReadMessageWindowEvents.ts

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+
+import { readMessage } from '../../../../../../app/ui-utils/client';
+import { useRoom } from '../../../contexts/RoomContext';
+
+export function useReadMessageWindowEvents() {
+	const { _id: rid } = useRoom();
+
+	useEffect(() => {
+		const handleWindowBlur = () => {
+			readMessage.disable();
+		};
+
+		const handleWindowFocus = () => {
+			readMessage.enable();
+			readMessage.read();
+		};
+
+		const handleWindowTouchEnd = () => {
+			readMessage.enable();
+		};
+
+		const handleWindowKeyUp = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				readMessage.readNow(rid);
+				readMessage.refreshUnreadMark(rid);
+			}
+		};
+
+		window.addEventListener('blur', handleWindowBlur);
+		window.addEventListener('focus', handleWindowFocus);
+		window.addEventListener('touchend', handleWindowTouchEnd);
+		window.addEventListener('keyup', handleWindowKeyUp);
+
+		return () => {
+			window.removeEventListener('blur', handleWindowBlur);
+			window.removeEventListener('focus', handleWindowFocus);
+			window.removeEventListener('touchend', handleWindowTouchEnd);
+			window.removeEventListener('keyup', handleWindowKeyUp);
+		};
+	}, [rid]);
+}

apps/meteor/client/views/room/components/body/useRoomMessageContext.ts → apps/meteor/client/views/room/components/body/hooks/useRoomMessageContext.ts

@@ -2,10 +2,10 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import { useLayout, usePermission, useSetting, useUser, useUserId, useUserPreference } from '@rocket.chat/ui-contexts';
 import { useCallback, useMemo } from 'react';
 
-import { AutoTranslate } from '../../../../../app/autotranslate/client';
-import { createMessageContext } from '../../../../../app/ui-utils/client/lib/messageContext';
-import { useReactiveValue } from '../../../../hooks/useReactiveValue';
-import { useRoomSubscription } from '../../contexts/RoomContext';
+import { AutoTranslate } from '../../../../../../app/autotranslate/client';
+import { createMessageContext } from '../../../../../../app/ui-utils/client/lib/messageContext';
+import { useReactiveValue } from '../../../../../hooks/useReactiveValue';
+import { useRoomSubscription } from '../../../contexts/RoomContext';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const useRoomMessageContext = (room: IRoom) => {

apps/meteor/client/views/room/components/body/useRoomRolesManagement.ts → apps/meteor/client/views/room/components/body/hooks/useRoomRolesManagement.ts

@@ -2,7 +2,7 @@ import type { IRole, IRoom, IUser } from '@rocket.chat/core-typings';
 import { useMethod, useStream } from '@rocket.chat/ui-contexts';
 import { useEffect } from 'react';
 
-import { RoomRoles, ChatMessage } from '../../../../../app/models/client';
+import { RoomRoles, ChatMessage } from '../../../../../../app/models/client';
 
 // const roomRoles = RoomRoles as Mongo.Collection<Pick<ISubscription, 'rid' | 'u' | 'roles'>>;
 

apps/meteor/client/views/room/components/body/useUnreadMessages.ts → apps/meteor/client/views/room/components/body/hooks/useUnreadMessages.ts

@@ -2,8 +2,8 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import type { Dispatch, SetStateAction } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import { LegacyRoomManager, RoomHistoryManager } from '../../../../../app/ui-utils/client';
-import { useReactiveValue } from '../../../../hooks/useReactiveValue';
+import { LegacyRoomManager, RoomHistoryManager } from '../../../../../../app/ui-utils/client';
+import { useReactiveValue } from '../../../../../hooks/useReactiveValue';
 
 interface IUnreadMessages {
 	count: number;

apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx

@@ -10,7 +10,7 @@ import VerticalBar from '../../../../../components/VerticalBar';
 import RoomAvatar from '../../../../../components/avatar/RoomAvatar';
 import type { Action } from '../../../../hooks/useActionSpread';
 import { useActionSpread } from '../../../../hooks/useActionSpread';
-import { useRetentionPolicy } from '../../../components/body/useRetentionPolicy';
+import { useRetentionPolicy } from '../../../components/body/hooks/useRetentionPolicy';
 import { useRoomActions } from '../hooks/useRoomActions';
 
 type RoomInfoProps = {

apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx

@@ -10,7 +10,7 @@ import VerticalBarContent from '../../../../../components/VerticalBar/VerticalBa
 import MessageListErrorBoundary from '../../../MessageList/MessageListErrorBoundary';
 import DropTargetOverlay from '../../../components/body/DropTargetOverlay';
 import ComposerContainer from '../../../components/body/composer/ComposerContainer';
-import { useFileUploadDropTarget } from '../../../components/body/useFileUploadDropTarget';
+import { useFileUploadDropTarget } from '../../../components/body/hooks/useFileUploadDropTarget';
 import { useChat } from '../../../contexts/ChatContext';
 import { useRoom, useRoomSubscription } from '../../../contexts/RoomContext';
 import { useTabBarClose } from '../../../contexts/ToolboxContext';

apps/meteor/client/views/room/providers/RoomProvider.tsx

@@ -11,7 +11,7 @@ import { RoomManager } from '../../../lib/RoomManager';
 import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
 import RoomNotFound from '../RoomNotFound';
 import RoomSkeleton from '../RoomSkeleton';
-import { useRoomRolesManagement } from '../components/body/useRoomRolesManagement';
+import { useRoomRolesManagement } from '../components/body/hooks/useRoomRolesManagement';
 import { RoomAPIContext } from '../contexts/RoomAPIContext';
 import { RoomContext } from '../contexts/RoomContext';
 import ComposerPopupProvider from './ComposerPopupProvider';