Remove auto refresh option

src/app/browser/main/index.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ScrollView, StyleSheet, Text, TouchableOpacity, useColorScheme, View } from 'react-native';
+import { ScrollView, StyleSheet, Text, useColorScheme, View } from 'react-native';
-import { CheckBox } from 'react-native-web';
-import { Translation, useTranslation } from 'react-i18next';
 import ipc, { events } from '../ipc.js';
-import { AccentColourContext, getAccounts, Root, useAsync, useEventListener } from '../util.js';
+import { getAccounts, Root, useAsync, useEventListener } from '../util.js';
 import Sidebar from './sidebar.js';
 import Update from './update.js';
 import Main from './main.js';
 import { BACKGROUND_COLOUR_MAIN_DARK, BACKGROUND_COLOUR_MAIN_LIGHT, BACKGROUND_COLOUR_SECONDARY_DARK, BACKGROUND_COLOUR_SECONDARY_LIGHT, TEXT_COLOUR_DARK, TEXT_COLOUR_LIGHT } from '../constants.js';
 
+const REFRESH_INTERVAL = 30 * 1000; // 30 seconds
+
 export interface AppProps {
     vibrancy?: boolean;
     insetTitleBarControls?: boolean;
@@ -26,7 +26,8 @@ export default function App(props: AppProps) {
     const [selectedUserId, setSelectedUserId] = useState<string | undefined>(undefined);
     const selectedUser = useMemo(() => users?.find(u => u.user.id === selectedUserId), [users, selectedUserId]);
 
-    const [auto_refresh, setAutoRefresh] = useState<number | undefined>(undefined);
+    const [focused, setFocused] = useState(ipc.getWindowFocused());
+    useEventListener(events, 'window:focused', setFocused, []);
 
     useEffect(() => {
         if (!selectedUser) setSelectedUserId(users?.[0]?.user.id);
@@ -40,30 +41,14 @@ export default function App(props: AppProps) {
     >
         <Sidebar users={users} selectedUser={selectedUserId} onSelectUser={setSelectedUserId}
             insetTitleBarControls={props.insetTitleBarControls}
-        >
+        />
-            <View style={[styles.content, styles.checkboxContainer]}>
-                <AccentColourContext.Consumer children={accent_colour => (
-                    <CheckBox
-                        value={!!auto_refresh}
-                        onValueChange={v => setAutoRefresh(v ? 30 * 1000 : undefined)}
-                        color={'#' + accent_colour}
-                        style={styles.checkbox}
-                    />
-                )} />
-                <TouchableOpacity style={styles.checkboxLabel} onPress={() => setAutoRefresh(auto_refresh ? undefined : 30 * 1000)}>
-                    <Translation keyPrefix="main_window:sidebar">{
-                        t => <Text style={theme.text}>{t('enable_auto_refresh')}</Text>
-                    }</Translation>
-                </TouchableOpacity>
-            </View>
-        </Sidebar>
 
         <View style={[styles.main, theme.main]}>
             <ScrollView style={styles.scroller} contentContainerStyle={styles.scrollerContent}>
                 <Update />
 
                 {selectedUser ? <Main key={selectedUser.user.id} user={selectedUser}
-                    autoRefresh={auto_refresh} /> : null}
+                    autoRefresh={focused ? REFRESH_INTERVAL : undefined} /> : null}
             </ScrollView>
         </View>
     </Root>;
@@ -82,22 +67,6 @@ const styles = StyleSheet.create({
     scrollerContent: {
         flex: 1,
     },
-    content: {
-        paddingVertical: 16,
-        paddingHorizontal: 20,
-    },
-    checkboxContainer: {
-        flex: 1,
-        marginRight: 20,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    checkbox: {
-        marginRight: 10,
-    },
-    checkboxLabel: {
-        flex: 1,
-    },
 });
 
 const light = StyleSheet.create({

src/app/browser/main/main.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import ipc, { events } from '../ipc.js';
@@ -28,11 +28,15 @@ export default function Main(props: {
     const [active_event, active_event_error, active_event_state, forceRefreshActiveEvent] = useAsync(useCallback(() => props.user.nsotoken ?
         ipc.getCoralActiveEvent(props.user.nsotoken) : Promise.resolve(null), [ipc, props.user.nsotoken]));
 
+    const [last_refresh_at, setLastRefreshAt] = useState(() => Date.now());
+
     const loading = announcements_state === RequestState.LOADING ||
         friends_state === RequestState.LOADING ||
         webservices_state === RequestState.LOADING ||
         active_event_state === RequestState.LOADING;
+
     const refresh = useCallback(() => Promise.all([
+        setLastRefreshAt(Date.now()),
         forceRefreshFriends(), forceRefreshWebServices(), forceRefreshActiveEvent(),
     ]), [forceRefreshFriends, forceRefreshWebServices, forceRefreshActiveEvent]);
 
@@ -42,6 +46,13 @@ export default function Main(props: {
         return () => clearTimeout(timeout);
     }, [ipc, props.user.nsotoken, loading, props.autoRefresh]);
 
+    useEffect(() => {
+        if (loading || !props.autoRefresh) return;
+
+        // When enabling auto refresh, update now if we haven't updated within the interval
+        if (last_refresh_at + props.autoRefresh < Date.now()) refresh();
+    }, [ipc, props.autoRefresh]);
+
     useEventListener(events, 'window:refresh', refresh, []);
 
     const showErrorDetails = useCallback(() => {

src/app/browser/util.tsx

@@ -30,17 +30,8 @@ export function Root(props: React.PropsWithChildren<{
     const [accent_colour, setAccentColour] = React.useState(() => ipc.getAccentColour());
     useEventListener(events, 'systemPreferences:accent-colour', setAccentColour, []);
 
-    const [window_focused, setWindowFocus] = useState(true);
+    const [window_focused, setWindowFocused] = useState(ipc.getWindowFocused());
-
+    useEventListener(events, 'window:focused', setWindowFocused, []);
-    useEffect(() => {
-        const handler = (event: FocusEvent) => setWindowFocus(event.type === 'focus');
-        window.addEventListener('focus', handler);
-        window.addEventListener('blur', handler);
-        return () => {
-            window.removeEventListener('focus', handler);
-            window.removeEventListener('blur', handler);
-        };
-    }, []);
 
     const [i18n, i18n_error] = useAsync(useCallback(async () => {
         const i18n = createI18n();

src/app/i18n/locale/de-de.ts

@@ -176,8 +176,6 @@ export const main_window = {
 
         add_user: 'User hinzufügen',
         discord_setup: 'Discord Rich Presence einrichten',
-
-        enable_auto_refresh: 'Automatisch aktualisieren',
     },
 
     update: {

src/app/i18n/locale/en-gb.ts

@@ -170,8 +170,6 @@ export const main_window = {
 
         add_user: 'Add user',
         discord_setup: 'Set up Discord Rich Presence',
-
-        enable_auto_refresh: 'Enable auto refresh',
     },
 
     update: {

src/app/i18n/locale/es-es.ts

@@ -177,8 +177,6 @@ export const main_window = {
 
         add_user: 'Añadir usuario',
         discord_setup: 'Configurar Discord Rich Presence',
-
-        enable_auto_refresh: 'Activar actualización automática',
     },
 
     update: {

src/app/i18n/locale/ja-jp.ts

@@ -134,8 +134,6 @@ export const main_window = {
 
         add_user: 'ユーザーを追加',
         discord_setup: 'Discord Rich Presenceを設定',
-
-        enable_auto_refresh: '自動更新',
     },
 
     update: {

src/app/main/ipc.ts

@@ -27,6 +27,7 @@ export function setupIpc(appinstance: App, ipcMain: IpcMain) {
 
     ipcMain.on('nxapi:browser:getwindowdata', e => e.returnValue = getWindowConfiguration(e.sender));
     ipcMain.on('nxapi:app:language', e => e.returnValue = appinstance.i18n.resolvedLanguage ?? appinstance.i18n.language);
+    ipcMain.on('nxapi:window:focused', e => e.returnValue = e.sender.isFocused());
 
     let accent_colour = systemPreferences.getAccentColor?.() || undefined;
 

src/app/preload/index.ts

@@ -100,6 +100,7 @@ const ipc = {
 
     getLanguage: () => language,
     getAccentColour: () => accent_colour,
+    getWindowFocused: () => focused,
 
     platform: process.platform,
 };
@@ -125,4 +126,8 @@ ipcRenderer.on('nxapi:systemPreferences:accent-colour', (event, c: string) => {
     events.emit('systemPreferences:accent-colour', c);
 });
 
+let focused: boolean = invSync('window:focused');
+window.addEventListener('focus', () => (focused = true, events.emit('window:focused', focused)));
+window.addEventListener('blur', () => (focused = false, events.emit('window:focused', focused)));
+
 contextBridge.exposeInMainWorld('nxapiElectronIpc', ipc);