diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 69ae715b..c595f173 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -285,11 +285,6 @@ export const InCallView: FC = ({ } }, [setGridMode]); - const toggleSpotlightExpanded = useCallback( - () => vm.toggleSpotlightExpanded(), - [vm], - ); - const Tile = useMemo( () => forwardRef< @@ -300,6 +295,9 @@ export const InCallView: FC = ({ ref, ) { const spotlightExpanded = useObservableEagerState(vm.spotlightExpanded); + const [onToggleExpanded] = useObservableEagerState( + vm.toggleSpotlightExpanded, + ); const showSpeakingIndicatorsValue = useObservableEagerState( vm.showSpeakingIndicators, ); @@ -324,7 +322,7 @@ export const InCallView: FC = ({ vms={model.vms} maximised={model.maximised} expanded={spotlightExpanded} - onToggleExpanded={toggleSpotlightExpanded} + onToggleExpanded={onToggleExpanded} targetWidth={targetWidth} targetHeight={targetHeight} showIndicators={showSpotlightIndicatorsValue} @@ -333,7 +331,7 @@ export const InCallView: FC = ({ /> ); }), - [vm, toggleSpotlightExpanded, openProfile], + [vm, openProfile], ); const layouts = useMemo(() => { diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 7d540858..226f711f 100644 --- a/src/state/CallViewModel.ts +++ b/src/state/CallViewModel.ts @@ -526,10 +526,6 @@ export class CallViewModel extends ViewModel { shareReplay(1), ); - public toggleSpotlightExpanded(): void { - this.spotlightExpandedToggle.next(); - } - private readonly gridModeUserSelection = new Subject(); /** * The layout mode of the media tile grid. @@ -665,6 +661,25 @@ export class CallViewModel extends ViewModel { shareReplay(1), ); + // To work around https://github.com/crimx/observable-hooks/issues/131 we must + // wrap the emitted function here in a non-function wrapper type + public readonly toggleSpotlightExpanded: Observable< + readonly [(() => void) | null] + > = this.layout.pipe( + map( + (l) => + l.type === "spotlight-landscape" || l.type === "spotlight-expanded", + ), + distinctUntilChanged(), + map( + (enabled) => + [ + enabled ? (): void => this.spotlightExpandedToggle.next() : null, + ] as const, + ), + shareReplay(1), + ); + public constructor( // A call is permanently tied to a single Matrix room and LiveKit room private readonly matrixRoom: MatrixRoom,