chore: Move VideoconfContext to ui-video-conf (#34950)

apps/meteor/client/hooks/roomActions/useStartCallRoomAction/useVideoConfMenuOptions.tsx

@@ -3,10 +3,10 @@ import { Box } from '@rocket.chat/fuselage';
 import { useEffectEvent, useStableArray } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { usePermission, useSetting, useUser } from '@rocket.chat/ui-contexts';
+import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '@rocket.chat/ui-video-conf';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '../../../contexts/VideoConfContext';
 import { VideoConfManager } from '../../../lib/VideoConfManager';
 import { useRoom } from '../../../views/room/contexts/RoomContext';
 import type { RoomToolboxActionConfig } from '../../../views/room/contexts/RoomToolboxContext';

apps/meteor/client/lib/VideoConfManager.ts

@@ -1,4 +1,4 @@
-import type { IRoom, IUser } from '@rocket.chat/core-typings';
+import type { CallPreferences, DirectCallData, DirectCallParams, IRoom, IUser, ProviderCapabilities } from '@rocket.chat/core-typings';
 import { Emitter } from '@rocket.chat/emitter';
 import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
@@ -17,32 +17,11 @@ const CALL_TIMEOUT = 10000;
 // How long are we gonna wait for a link after accepting an incoming call
 const ACCEPT_TIMEOUT = 5000;
 
-type DirectCallParams = {
-	uid: IUser['_id'];
-	rid: IRoom['_id'];
-	callId: string;
-};
-
-export type DirectCallData = DirectCallParams & {
-	dismissed: boolean;
-};
-
 type IncomingDirectCall = DirectCallParams & {
 	timeout: ReturnType<typeof setTimeout> | undefined;
 	acceptTimeout?: ReturnType<typeof setTimeout> | undefined;
 };
 
-export type CallPreferences = {
-	mic?: boolean;
-	cam?: boolean;
-};
-
-export type ProviderCapabilities = {
-	mic?: boolean;
-	cam?: boolean;
-	title?: boolean;
-};
-
 type CurrentCallParams = {
 	callId: string;
 	url: string;

apps/meteor/client/providers/VideoConfProvider.tsx

@@ -1,12 +1,11 @@
-import type { IRoom } from '@rocket.chat/core-typings';
+import type { CallPreferences, DirectCallData, IRoom, ProviderCapabilities } from '@rocket.chat/core-typings';
 import { useToastMessageDispatch, useSetting } from '@rocket.chat/ui-contexts';
+import type { VideoConfPopupPayload } from '@rocket.chat/ui-video-conf';
+import { VideoConfContext } from '@rocket.chat/ui-video-conf';
 import type { ReactElement, ReactNode } from 'react';
 import { useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type { VideoConfPopupPayload } from '../contexts/VideoConfContext';
-import { VideoConfContext } from '../contexts/VideoConfContext';
-import type { DirectCallData, ProviderCapabilities, CallPreferences } from '../lib/VideoConfManager';
 import { VideoConfManager } from '../lib/VideoConfManager';
 import VideoConfPopups from '../views/room/contextualBar/VideoConference/VideoConfPopups';
 import { useVideoConfOpenCall } from '../views/room/contextualBar/VideoConference/hooks/useVideoConfOpenCall';
@@ -44,7 +43,6 @@ const VideoConfContextProvider = ({ children }: { children: ReactNode }): ReactE
 
 	const contextValue = useMemo(
 		() => ({
-			manager: VideoConfManager,
 			dispatchOutgoing: (option: Omit<VideoConfPopupPayload, 'id'>): void => setOutgoing({ ...option, id: option.rid }),
 			dismissOutgoing: (): void => setOutgoing(undefined),
 			startCall: (rid: IRoom['_id'], confTitle?: string): Promise<void> => VideoConfManager.startCall(rid, confTitle),
@@ -56,6 +54,7 @@ const VideoConfContextProvider = ({ children }: { children: ReactNode }): ReactE
 			rejectIncomingCall: (callId: string): void => VideoConfManager.rejectIncomingCall(callId),
 			abortCall: (): void => VideoConfManager.abortCall(),
 			setPreferences: (prefs: Partial<(typeof VideoConfManager)['preferences']>): void => VideoConfManager.setPreferences(prefs),
+			loadCapabilities: VideoConfManager.loadCapabilities,
 			queryIncomingCalls: {
 				getSnapshot: (): DirectCallData[] => VideoConfManager.getIncomingDirectCalls(),
 				subscribe: (cb: () => void) => VideoConfManager.on('incoming/changed', cb),

apps/meteor/client/sidebar/RoomList/RoomListRow.tsx

@@ -1,11 +1,11 @@
 import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { SidebarSection } from '@rocket.chat/fuselage';
+import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
 import type { TFunction } from 'i18next';
 import type { ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 
 import SideBarItemTemplateWithData from './SideBarItemTemplateWithData';
-import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '../../contexts/VideoConfContext';
 import type { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import type { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 

apps/meteor/client/sidebar/hooks/useRoomList.ts

@@ -1,10 +1,10 @@
 import type { ILivechatInquiryRecord, IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { useDebouncedState } from '@rocket.chat/fuselage-hooks';
 import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts';
+import { useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
 import { useEffect } from 'react';
 
 import { useQueryOptions } from './useQueryOptions';
-import { useVideoConfIncomingCalls } from '../../contexts/VideoConfContext';
 import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled';
 import { useQueuedInquiries } from '../../hooks/omnichannel/useQueuedInquiries';
 

apps/meteor/client/sidebarv2/RoomList/RoomListRow.tsx

@@ -1,9 +1,9 @@
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
 import type { TFunction } from 'i18next';
 import { memo, useMemo } from 'react';
 
 import SidebarItemTemplateWithData from './SidebarItemTemplateWithData';
-import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '../../contexts/VideoConfContext';
 import type { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import type { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
 

apps/meteor/client/sidebarv2/hooks/useRoomList.spec.tsx

@@ -1,10 +1,10 @@
 import { mockAppRoot } from '@rocket.chat/mock-providers';
 import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { VideoConfContext } from '@rocket.chat/ui-video-conf';
 import { renderHook } from '@testing-library/react';
 
 import { useRoomList } from './useRoomList';
 import { createFakeRoom, createFakeSubscription, createFakeUser } from '../../../tests/mocks/data';
-import { VideoConfContext } from '../../contexts/VideoConfContext';
 
 const user = createFakeUser({
 	active: true,

apps/meteor/client/sidebarv2/hooks/useRoomList.ts

@@ -2,9 +2,9 @@ import type { ILivechatInquiryRecord } from '@rocket.chat/core-typings';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
 import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts';
+import { useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
 import { useMemo } from 'react';
 
-import { useVideoConfIncomingCalls } from '../../contexts/VideoConfContext';
 import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled';
 import { useQueuedInquiries } from '../../hooks/omnichannel/useQueuedInquiries';
 import { useSortQueryOptions } from '../../hooks/useSortQueryOptions';

apps/meteor/client/uikit/hooks/useMessageBlockContextValue.ts

@@ -1,17 +1,17 @@
 import type { IRoom, IMessage } from '@rocket.chat/core-typings';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
-import type { ContextType } from 'react';
-
-import { useUiKitActionManager } from './useUiKitActionManager';
 import {
 	useVideoConfDispatchOutgoing,
 	useVideoConfIsCalling,
 	useVideoConfIsRinging,
 	useVideoConfJoinCall,
-	useVideoConfManager,
+	useVideoConfLoadCapabilities,
 	useVideoConfSetPreferences,
-} from '../../contexts/VideoConfContext';
+} from '@rocket.chat/ui-video-conf';
+import type { ContextType } from 'react';
+
+import { useUiKitActionManager } from './useUiKitActionManager';
 import { useVideoConfWarning } from '../../views/room/contextualBar/VideoConference/hooks/useVideoConfWarning';
 
 export const useMessageBlockContextValue = (rid: IRoom['_id'], mid: IMessage['_id']): ContextType<typeof UiKitContext> => {
@@ -21,16 +21,15 @@ export const useMessageBlockContextValue = (rid: IRoom['_id'], mid: IMessage['_i
 	const isRinging = useVideoConfIsRinging();
 	const dispatchWarning = useVideoConfWarning();
 	const dispatchPopup = useVideoConfDispatchOutgoing();
-
-	const videoConfManager = useVideoConfManager();
+	const loadVideoConfCapabilities = useVideoConfLoadCapabilities();
 
 	const handleOpenVideoConf = useEffectEvent(async (rid: IRoom['_id']) => {
 		if (isCalling || isRinging) {
 			return;
 		}
 
 		try {
-			await videoConfManager?.loadCapabilities();
+			await loadVideoConfCapabilities();
 			dispatchPopup({ rid });
 		} catch (error: any) {
 			dispatchWarning(error.error);

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx

@@ -4,9 +4,9 @@ import { Button, Message, Box, Avatar, Palette, IconButton, ButtonGroup } from '
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useTranslation, useSetting } from '@rocket.chat/ui-contexts';
+import { useVideoConfJoinCall } from '@rocket.chat/ui-video-conf';
 import type { ReactElement } from 'react';
 
-import { useVideoConfJoinCall } from '../../../../../contexts/VideoConfContext';
 import { useTimeAgo } from '../../../../../hooks/useTimeAgo';
 import { VIDEOCONF_STACK_MAX_USERS } from '../../../../../lib/constants';
 import { useGoToRoom } from '../../../hooks/useGoToRoom';

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/IncomingPopup.tsx

@@ -2,6 +2,7 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import { Skeleton } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import {
+	useVideoConfSetPreferences,
 	VideoConfPopup,
 	VideoConfPopupContent,
 	VideoConfPopupControllers,
@@ -18,7 +19,6 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import VideoConfPopupRoomInfo from './VideoConfPopupRoomInfo';
-import { useVideoConfSetPreferences } from '../../../../../../contexts/VideoConfContext';
 import { AsyncStatePhase } from '../../../../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../../../../hooks/useEndpointData';
 

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/OutgoingPopup.tsx

@@ -10,12 +10,13 @@ import {
 	VideoConfPopupFooterButtons,
 	VideoConfPopupTitle,
 	VideoConfPopupHeader,
+	useVideoConfCapabilities,
+	useVideoConfPreferences,
 } from '@rocket.chat/ui-video-conf';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import VideoConfPopupRoomInfo from './VideoConfPopupRoomInfo';
-import { useVideoConfCapabilities, useVideoConfPreferences } from '../../../../../../contexts/VideoConfContext';
 
 type OutgoingPopupProps = {
 	id: string;

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/StartCallPopup.tsx

@@ -11,13 +11,15 @@ import {
 	VideoConfPopupFooter,
 	VideoConfPopupTitle,
 	VideoConfPopupFooterButtons,
+	useVideoConfSetPreferences,
+	useVideoConfCapabilities,
+	useVideoConfPreferences,
 } from '@rocket.chat/ui-video-conf';
 import type { ReactElement } from 'react';
 import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import VideoConfPopupRoomInfo from './VideoConfPopupRoomInfo';
-import { useVideoConfSetPreferences, useVideoConfCapabilities, useVideoConfPreferences } from '../../../../../../contexts/VideoConfContext';
 import { useVideoConfRoomName } from '../../hooks/useVideoConfRoomName';
 
 type StartCallPopupProps = {

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopup/TimedVideoConfPopup.tsx

@@ -1,19 +1,19 @@
 import type { IRoom } from '@rocket.chat/core-typings';
 import { useUserRoom } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
-import { useState } from 'react';
-
-import IncomingPopup from './IncomingPopup';
-import OutgoingPopup from './OutgoingPopup';
-import StartCallPopup from './StartCallPopup';
 import {
 	useVideoConfAcceptCall,
 	useVideoConfAbortCall,
 	useVideoConfRejectIncomingCall,
 	useVideoConfDismissCall,
 	useVideoConfStartCall,
 	useVideoConfDismissOutgoing,
-} from '../../../../../../contexts/VideoConfContext';
+} from '@rocket.chat/ui-video-conf';
+import type { ReactElement } from 'react';
+import { useState } from 'react';
+
+import IncomingPopup from './IncomingPopup';
+import OutgoingPopup from './OutgoingPopup';
+import StartCallPopup from './StartCallPopup';
 
 type TimedVideoConfPopupProps = {
 	id: string;

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfPopups/VideoConfPopups.tsx

@@ -1,12 +1,16 @@
 import { useCustomSound } from '@rocket.chat/ui-contexts';
-import { VideoConfPopupBackdrop } from '@rocket.chat/ui-video-conf';
+import type { VideoConfPopupPayload } from '@rocket.chat/ui-video-conf';
+import {
+	VideoConfPopupBackdrop,
+	useVideoConfIsCalling,
+	useVideoConfIsRinging,
+	useVideoConfIncomingCalls,
+} from '@rocket.chat/ui-video-conf';
 import type { ReactElement } from 'react';
 import { useEffect, useMemo } from 'react';
 import { FocusScope } from 'react-aria';
 
 import VideoConfPopup from './VideoConfPopup';
-import type { VideoConfPopupPayload } from '../../../../../contexts/VideoConfContext';
-import { useVideoConfIsCalling, useVideoConfIsRinging, useVideoConfIncomingCalls } from '../../../../../contexts/VideoConfContext';
 import VideoConfPopupPortal from '../../../../../portals/VideoConfPopupPortal';
 
 const VideoConfPopups = ({ children }: { children?: VideoConfPopupPayload }): ReactElement => {

apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useVideoCallAction.tsx

@@ -1,9 +1,9 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import { useTranslation, useUserRoom, useUserId, useUserSubscriptionByName, useSetting, usePermission } from '@rocket.chat/ui-contexts';
+import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '@rocket.chat/ui-video-conf';
 import { useMemo } from 'react';
 
-import { useVideoConfDispatchOutgoing, useVideoConfIsCalling, useVideoConfIsRinging } from '../../../../../contexts/VideoConfContext';
 import { VideoConfManager } from '../../../../../lib/VideoConfManager';
 import { useUserCard } from '../../../contexts/UserCardContext';
 import { useVideoConfWarning } from '../../../contextualBar/VideoConference/hooks/useVideoConfWarning';