From 0c3026adfe93dbafaac40eddf6c8307863c2b142 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 5 May 2022 12:15:46 +0200 Subject: [PATCH 1/3] add visibilitychange listener Signed-off-by: Kerry Archibald --- .../beacon/LeftPanelLiveShareWarning.tsx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx index 43b00a8fa76..5cd1953dd4c 100644 --- a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx +++ b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import classNames from 'classnames'; -import React from 'react'; -import { BeaconIdentifier, Room } from 'matrix-js-sdk/src/matrix'; +import React, { useEffect } from 'react'; +import { Beacon, BeaconIdentifier, Room } from 'matrix-js-sdk/src/matrix'; import { useEventEmitterState } from '../../../hooks/useEventEmitter'; import { _t } from '../../../languageHandler'; @@ -61,6 +61,27 @@ const getLabel = (hasStoppingErrors: boolean, hasLocationErrors: boolean): strin return _t('You are sharing your live location'); }; +const useLivenessMonitor = (liveBeaconIds: BeaconIdentifier[], beacons: Map): void => { + useEffect(() => { + console.log('hhh does this fire too much?'); + // chromium sets the minimum timer interval to 1000ms + // for inactive tabs + // refresh beacon monitors when the tab becomes active again + const onPageVisibilityChanged = () => { + console.log('hhh onPageVisibilityChanged', document.visibilityState, liveBeaconIds); + if (document.visibilityState === 'visible') { + liveBeaconIds.map(identifier => beacons.get(identifier)?.monitorLiveness()); + } + }; + if (liveBeaconIds.length) { + document.addEventListener("visibilitychange", onPageVisibilityChanged); + } + () => { + document.removeEventListener("visibilitychange", onPageVisibilityChanged); + }; + }, [liveBeaconIds, beacons]); +}; + const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => { const isMonitoringLiveLocation = useEventEmitterState( OwnBeaconStore.instance, @@ -91,6 +112,8 @@ const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => { const hasLocationPublishErrors = !!beaconIdsWithLocationPublishError.length; const hasStoppingErrors = !!beaconIdsWithStoppingError.length; + useLivenessMonitor(liveBeaconIds, OwnBeaconStore.instance.beacons); + if (!isMonitoringLiveLocation) { return null; } From 081bfbcab969d32cd10f2ac78ee8ebdb421146ec Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 5 May 2022 18:03:25 +0200 Subject: [PATCH 2/3] test Signed-off-by: Kerry Archibald --- .../beacon/LeftPanelLiveShareWarning.tsx | 2 -- .../beacon/LeftPanelLiveShareWarning-test.tsx | 19 +++++++++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx index 5cd1953dd4c..b93d8de1ae7 100644 --- a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx +++ b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx @@ -63,12 +63,10 @@ const getLabel = (hasStoppingErrors: boolean, hasLocationErrors: boolean): strin const useLivenessMonitor = (liveBeaconIds: BeaconIdentifier[], beacons: Map): void => { useEffect(() => { - console.log('hhh does this fire too much?'); // chromium sets the minimum timer interval to 1000ms // for inactive tabs // refresh beacon monitors when the tab becomes active again const onPageVisibilityChanged = () => { - console.log('hhh onPageVisibilityChanged', document.visibilityState, liveBeaconIds); if (document.visibilityState === 'visible') { liveBeaconIds.map(identifier => beacons.get(identifier)?.monitorLiveness()); } diff --git a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx index d02f4d0c3d4..ba9bb21ea64 100644 --- a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx +++ b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx @@ -34,6 +34,7 @@ jest.mock('../../../../src/stores/OwnBeaconStore', () => { public getBeaconById = jest.fn(); public getLiveBeaconIds = jest.fn().mockReturnValue([]); public readonly beaconUpdateErrors = new Map(); + public readonly beacons = new Map(); } return { // @ts-ignore @@ -195,6 +196,24 @@ describe('', () => { expect(component.html()).toBe(null); }); + it('refreshes beacon liveness monitors when pagevisibilty changes to visible', () => { + OwnBeaconStore.instance.beacons.set(beacon1.identifier, beacon1); + OwnBeaconStore.instance.beacons.set(beacon2.identifier, beacon2); + const beacon1MonitorSpy = jest.spyOn(beacon1, 'monitorLiveness'); + const beacon2MonitorSpy = jest.spyOn(beacon1, 'monitorLiveness'); + + jest.spyOn(document, 'addEventListener').mockImplementation( + (_e, listener) => (listener as EventListener)(new Event('')), + ); + + expect(beacon1MonitorSpy).not.toHaveBeenCalled(); + + getComponent(); + + expect(beacon1MonitorSpy).toHaveBeenCalled(); + expect(beacon2MonitorSpy).toHaveBeenCalled(); + }); + describe('stopping errors', () => { it('renders stopping error', () => { OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error')); From 301386d07687b12223d5417eef34efd4b78210c1 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 5 May 2022 18:15:04 +0200 Subject: [PATCH 3/3] restore event listener mock Signed-off-by: Kerry Archibald --- .../views/beacon/LeftPanelLiveShareWarning-test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx index ba9bb21ea64..a05fbf348f7 100644 --- a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx +++ b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx @@ -104,6 +104,10 @@ describe('', () => { mocked(OwnBeaconStore.instance).getLiveBeaconIds.mockReturnValue([beacon2.identifier, beacon1.identifier]); }); + afterAll(() => { + jest.spyOn(document, 'addEventListener').mockRestore(); + }); + it('renders correctly when not minimized', () => { const component = getComponent(); expect(component).toMatchSnapshot();