Skip to content

Commit a1901d0

Browse files
shakyShaneshakyShane
committed
use document visibility
1 parent 747bd3a commit a1901d0

File tree

5 files changed

+58
-40
lines changed

5 files changed

+58
-40
lines changed

‎special-pages/pages/new-tab/app/activity/components/Activity.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { memo } from 'preact/compat';
55
import { ActivityApiContext, ActivityContext, ActivityProvider, SignalStateContext, SignalStateProvider } from '../ActivityProvider.js';
66
import { useTypedTranslationWith } from '../../types.js';
77
import { useVisibility } from '../../widget-list/widget-config.provider.js';
8-
import { useOnMiddleClick, useDocumentVisibility } from '../../utils.js';
8+
import { useOnMiddleClick } from '../../utils.js';
99
import { useCustomizer } from '../../customizer/components/CustomizerMenu.js';
1010
import { useBatchedActivityApi, usePlatformName } from '../../settings.provider.js';
1111
import { ActivityHeading } from '../../privacy-stats/components/PrivacyStats.js';
@@ -17,6 +17,7 @@ import { ActivityBurningSignalContext, BurnProvider } from '../BurnProvider.js';
1717
import { useEnv } from '../../../../../shared/components/EnvironmentProvider.js';
1818
import { useComputed } from '@preact/signals';
1919
import { ActivityItemAnimationWrapper } from './ActivityItemAnimationWrapper.js';
20+
import { useDocumentVisibility } from '../../../../../shared/components/DocumentVisibility.js';
2021

2122
/**
2223
* @import enStrings from "../strings.json"
@@ -41,6 +42,7 @@ function ActivityConfigured({ expansion, toggle }) {
4142
const expanded = expansion === 'expanded';
4243
const { activity } = useContext(SignalStateContext);
4344
const { didClick } = useContext(ActivityApiContext);
45+
const visibility = useDocumentVisibility();
4446

4547
const ref = useRef(/** @type {HTMLUListElement|null} */ (null));
4648
useOnMiddleClick(ref, didClick);
@@ -72,7 +74,7 @@ function ActivityConfigured({ expansion, toggle }) {
7274
id: TOGGLE_ID,
7375
}}
7476
/>
75-
{itemCount.value > 0 && expanded && <ActivityBody canBurn={canBurn} />}
77+
{itemCount.value > 0 && expanded && <ActivityBody canBurn={canBurn} visibility={visibility} />}
7678
</div>
7779
{batched && itemCount.value > 0 && expanded && <Loader />}
7880
</Fragment>
@@ -82,9 +84,9 @@ function ActivityConfigured({ expansion, toggle }) {
8284
/**
8385
* @param {object} props
8486
* @param {boolean} props.canBurn
87+
* @param {DocumentVisibilityState} props.visibility
8588
*/
86-
function ActivityBody({ canBurn }) {
87-
const documentVisibility = useDocumentVisibility();
89+
function ActivityBody({ canBurn, visibility }) {
8890
const { isReducedMotion } = useEnv();
8991
const { keys } = useContext(SignalStateContext);
9092
const { burning, exiting } = useContext(ActivityBurningSignalContext);
@@ -93,8 +95,8 @@ function ActivityBody({ canBurn }) {
9395
return (
9496
<ul class={styles.activity} data-busy={busy}>
9597
{keys.value.map((id, index) => {
96-
if (canBurn && !isReducedMotion) return <BurnableItem id={id} key={id} documentVisibility={documentVisibility} />;
97-
return <RemovableItem id={id} key={id} canBurn={canBurn} documentVisibility={documentVisibility} />;
98+
if (canBurn && !isReducedMotion) return <BurnableItem id={id} key={id} documentVisibility={visibility} />;
99+
return <RemovableItem id={id} key={id} canBurn={canBurn} documentVisibility={visibility} />;
98100
})}
99101
</ul>
100102
);

‎special-pages/pages/new-tab/app/favorites/components/Favorites.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import { TileRow } from './TileRow.js';
1212
import { FavoritesContext } from './FavoritesProvider.js';
1313
import { CustomizerContext, CustomizerThemesContext } from '../../customizer/CustomizerProvider.js';
1414
import { signal, useComputed } from '@preact/signals';
15-
import { eventToTarget, useOnMiddleClick, useDocumentVisibility } from '../../utils.js';
15+
import { eventToTarget, useOnMiddleClick } from '../../utils.js';
16+
import { useDocumentVisibility } from '../../../../../shared/components/DocumentVisibility.js';
1617

1718
/**
1819
* @typedef {import('../../../types/new-tab.js').Expansion} Expansion
@@ -125,6 +126,7 @@ export function Favorites({ gridRef, favorites, expansion, toggle, openContextMe
125126
*/
126127
function VirtualizedGridRows({ WIDGET_ID, rowHeight, favorites, expansion, openFavorite, openContextMenu, add }) {
127128
const platformName = usePlatformName();
129+
const visibility = useDocumentVisibility();
128130

129131
// convert the list of favorites into chunks of length ROW_CAPACITY
130132
const rows = useMemo(() => {
@@ -166,7 +168,7 @@ function VirtualizedGridRows({ WIDGET_ID, rowHeight, favorites, expansion, openF
166168
onClick={clickHandler}
167169
>
168170
{rows.length === 0 && <TileRow key={'empty-rows'} items={[]} topOffset={0} add={add} visibility={'visible'} />}
169-
{rows.length > 0 && <Inner rows={rows} safeAreaRef={safeAreaRef} rowHeight={rowHeight} add={add} />}
171+
{rows.length > 0 && <Inner rows={rows} safeAreaRef={safeAreaRef} rowHeight={rowHeight} add={add} visibility={visibility} />}
170172
</div>
171173
);
172174
}
@@ -181,12 +183,12 @@ function VirtualizedGridRows({ WIDGET_ID, rowHeight, favorites, expansion, openF
181183
* @param {Favorite[][]} props.rows
182184
* @param {import("preact").RefObject<HTMLDivElement>} props.safeAreaRef
183185
* @param {number} props.rowHeight
186+
* @param {DocumentVisibilityState} props.visibility
184187
* @param {()=>void} props.add
185188
*/
186-
function Inner({ rows, safeAreaRef, rowHeight, add }) {
189+
function Inner({ rows, safeAreaRef, rowHeight, add, visibility }) {
187190
const { onConfigChanged, state } = useContext(FavoritesContext);
188191
const [expansion, setExpansion] = useState(state.config?.expansion || 'collapsed');
189-
const documentVisibility = useDocumentVisibility();
190192
const { start, end } = useVisibleRows(rows, rowHeight, safeAreaRef);
191193

192194
// force the children to be rendered after the main thread is cleared
@@ -217,7 +219,7 @@ function Inner({ rows, safeAreaRef, rowHeight, add }) {
217219
{subsetOfRowsToRender.map((items, rowIndex) => {
218220
const topOffset = expansion === 'expanded' ? (start + rowIndex) * rowHeight : 0;
219221
const keyed = `-${start + rowIndex}-`;
220-
return <TileRow key={keyed} items={items} topOffset={topOffset} add={add} visibility={documentVisibility} />;
222+
return <TileRow key={keyed} items={items} topOffset={topOffset} add={add} visibility={visibility} />;
221223
})}
222224
</Fragment>
223225
);

‎special-pages/pages/new-tab/app/index.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { callWithRetry } from '../../../shared/call-with-retry.js';
1414
import { CustomizerProvider } from './customizer/CustomizerProvider.js';
1515
import { CustomizerService } from './customizer/customizer.service.js';
1616
import { InlineErrorBoundary } from './InlineErrorBoundary.js';
17+
import { DocumentVisibilityProvider } from '../../../shared/components/DocumentVisibility.js';
1718

1819
/**
1920
* @import {Telemetry} from "./telemetry/telemetry.js"
@@ -115,14 +116,16 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
115116
<SettingsProvider settings={settings}>
116117
<TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
117118
<CustomizerProvider service={customizerApi} initialData={customizerData}>
118-
<WidgetConfigProvider
119-
api={widgetConfigAPI}
120-
widgetConfigs={init.widgetConfigs}
121-
widgets={init.widgets}
122-
entryPoints={entryPoints}
123-
>
124-
<App />
125-
</WidgetConfigProvider>
119+
<DocumentVisibilityProvider>
120+
<WidgetConfigProvider
121+
api={widgetConfigAPI}
122+
widgetConfigs={init.widgetConfigs}
123+
widgets={init.widgets}
124+
entryPoints={entryPoints}
125+
>
126+
<App />
127+
</WidgetConfigProvider>
128+
</DocumentVisibilityProvider>
126129
</CustomizerProvider>
127130
</TranslationProvider>
128131
</SettingsProvider>

‎special-pages/pages/new-tab/app/utils.js

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useState } from 'preact/hooks';
1+
import { useEffect } from 'preact/hooks';
22

33
/**
44
* Use this to verify the result of updating some local state.
@@ -76,26 +76,6 @@ export function eventToTarget(event, platformName) {
7676
return 'same-tab';
7777
}
7878

79-
export function useDocumentVisibility() {
80-
/** @type {Document['visibilityState']} */
81-
const initial = document.visibilityState;
82-
const [documentVisibility, setDocumentVisibility] = useState(/** @type {Document['visibilityState']} */ (initial));
83-
84-
useEffect(() => {
85-
const handleVisibilityChange = () => {
86-
setDocumentVisibility(document.visibilityState);
87-
};
88-
89-
document.addEventListener('visibilitychange', handleVisibilityChange);
90-
91-
return () => {
92-
document.removeEventListener('visibilitychange', handleVisibilityChange);
93-
};
94-
}, []);
95-
96-
return documentVisibility;
97-
}
98-
9979
/**
10080
* Custom hook to handle middle click event on an element. This is required because Preact doens't support the auxclick event.
10181
* @param {import('preact').RefObject<HTMLElement>} ref - The ref of the element to attach the event listener to.

‎special-pages/shared/components/DocumentVisibility.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { useContext, useEffect, useState } from 'preact/hooks';
2+
import { createContext, h } from 'preact';
3+
4+
const DocumentVisibilityContext = createContext(
5+
/** @type {DocumentVisibilityState} */
6+
('hidden'),
7+
);
8+
9+
export function DocumentVisibilityProvider({ children }) {
10+
/** @type {Document['visibilityState']} */
11+
const initial = document.visibilityState;
12+
const [documentVisibility, setDocumentVisibility] = useState(/** @type {Document['visibilityState']} */ (initial));
13+
14+
useEffect(() => {
15+
const handleVisibilityChange = () => {
16+
setDocumentVisibility(document.visibilityState);
17+
};
18+
19+
document.addEventListener('visibilitychange', handleVisibilityChange);
20+
21+
return () => {
22+
document.removeEventListener('visibilitychange', handleVisibilityChange);
23+
};
24+
}, []);
25+
26+
return <DocumentVisibilityContext.Provider value={documentVisibility}>{children}</DocumentVisibilityContext.Provider>;
27+
}
28+
29+
export function useDocumentVisibility() {
30+
return useContext(DocumentVisibilityContext);
31+
}

0 commit comments

Comments
 (0)