diff --git a/app/ui/client/lib/UserAction.ts b/app/ui/client/lib/UserAction.ts index 847de8e1907..8925e0351b9 100644 --- a/app/ui/client/lib/UserAction.ts +++ b/app/ui/client/lib/UserAction.ts @@ -1,7 +1,5 @@ import { Meteor } from 'meteor/meteor'; -import { Tracker } from 'meteor/tracker'; import { ReactiveDict } from 'meteor/reactive-dict'; -import { Session } from 'meteor/session'; import { debounce } from 'lodash'; import { settings } from '../../../settings/client'; @@ -66,10 +64,6 @@ function handleStreamAction(rid: string, username: string, activityTypes: string performingUsers.set(rid, roomActivities); } export const UserAction = new class { - constructor() { - Tracker.autorun(() => Session.get('openedRoom') && this.addStream(Session.get('openedRoom'))); - } - addStream(rid: string): void { if (rooms.get(rid)) { return; diff --git a/client/lib/RoomManager.ts b/client/lib/RoomManager.ts index 78a4104bdde..f10a06c4257 100644 --- a/client/lib/RoomManager.ts +++ b/client/lib/RoomManager.ts @@ -132,7 +132,7 @@ export const RoomManager = new (class RoomManager extends Emitter<{ } })(); -const subscribeVistedRooms: Subscription = { +const subscribeVisitedRooms: Subscription = { getCurrentValue: () => RoomManager.visitedRooms(), subscribe(callback) { return RoomManager.on('changed', callback); @@ -166,7 +166,7 @@ export const useHandleRoom = (rid: IRoom['_id']): AsyncState return state; }; -export const useVisitedRooms = (): IRoom['_id'][] => useSubscription(subscribeVistedRooms); +export const useVisitedRooms = (): IRoom['_id'][] => useSubscription(subscribeVisitedRooms); export const useOpenedRoom = (): IRoom['_id'] | undefined => useSubscription(subscribeOpenedRoom); diff --git a/client/views/room/contexts/RoomContext.ts b/client/views/room/contexts/RoomContext.ts index 624cc4b9816..bea6ae8af3d 100644 --- a/client/views/room/contexts/RoomContext.ts +++ b/client/views/room/contexts/RoomContext.ts @@ -5,6 +5,7 @@ import { IRoom, IOmnichannelRoom, isOmnichannelRoom } from '../../../../definiti export type RoomContextValue = { rid: IRoom['_id']; room: IRoom; + subscribed: boolean; }; export const RoomContext = createContext(null); diff --git a/client/views/room/providers/RoomProvider.tsx b/client/views/room/providers/RoomProvider.tsx index ada05e29c23..8630ecc4741 100644 --- a/client/views/room/providers/RoomProvider.tsx +++ b/client/views/room/providers/RoomProvider.tsx @@ -1,7 +1,9 @@ import React, { ReactNode, useMemo, memo, useEffect } from 'react'; +import { UserAction } from '../../../../app/ui'; import { roomTypes } from '../../../../app/utils/client'; import { IRoom } from '../../../../definition/IRoom'; +import { useUserSubscription } from '../../../contexts/UserContext'; import { RoomManager, useHandleRoom } from '../../../lib/RoomManager'; import { AsyncStatePhase } from '../../../lib/asyncState'; import Skeleton from '../Room/Skeleton'; @@ -13,18 +15,23 @@ export type Props = { rid: IRoom['_id']; }; +const fields = {}; + const RoomProvider = ({ rid, children }: Props): JSX.Element => { const { phase, value: room } = useHandleRoom(rid); + + const subscribed = Boolean(useUserSubscription(rid, fields)); const context = useMemo(() => { if (!room) { return null; } room._id = rid; return { + subscribed, rid, room: { ...room, name: roomTypes.getRoomName(room.t, room) }, }; - }, [room, rid]); + }, [room, rid, subscribed]); useEffect(() => { RoomManager.open(rid); @@ -33,6 +40,17 @@ const RoomProvider = ({ rid, children }: Props): JSX.Element => { }; }, [rid]); + useEffect(() => { + if (!subscribed) { + return (): void => undefined; + } + + UserAction.addStream(rid); + return (): void => { + UserAction.cancel(rid); + }; + }, [rid, subscribed]); + if (phase === AsyncStatePhase.LOADING || !room) { return ; }