feat(user-status): change to online/away on system idle and lock

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

Author: ShGKme

src/main.js

@@ -103,6 +103,9 @@ ipcMain.on('app:relaunch', () => {
 })
 ipcMain.handle('app:config:get', (event, key) => getAppConfig(key))
 ipcMain.handle('app:config:set', (event, key, value) => setAppConfig(key, value))
+ipcMain.on('app:grantUserGesturedPermission', (event, id) => {
+	return event.sender.executeJavaScript(`document.getElementById('${id}')?.click()`, true)
+})
 ipcMain.on('app:toggleDevTools', (event) => event.sender.toggleDevTools())
 ipcMain.handle('app:anything', () => { /* Put any code here to run it from UI */ })
 ipcMain.on('app:openChromeWebRtcInternals', () => openChromeWebRtcInternals())

src/preload.js

@@ -108,6 +108,12 @@ const TALK_DESKTOP = {
 	 * @param {(event: import('electron').IpcRedererEvent, payload: { key: string, value: unknown, appConfig: import('./app/AppConfig.ts').AppConfig}) => void} callback - Callback
 	 */
 	onAppConfigChange: (callback) => ipcRenderer.on('app:config:change', callback),
+	/**
+	 * Grant a permission requiring a user gesture
+	 *
+	 * @param {string} id - Button ID to click on
+	 */
+	grantUserGesturedPermission: (id) => ipcRenderer.send('app:grantUserGesturedPermission', id),
 	/**
 	 * Trigger download of a URL
 	 *

src/shared/grantUserGesturedPermission.ts

@@ -0,0 +1,29 @@
+/*!
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Grant a permission requiring a user gesture:
+ * Create a hidden button that will be clicked by the main process to request the permission.
+ *
+ * @param requester - Function to request the permission
+ * @return - Promise that resolves with the result of the permission request
+ */
+export async function grantUserGesturedPermission<T>(requester: () => T) {
+	return new Promise<T>((resolve) => {
+		const id = `request-user-gestured-permission-${Math.random().toString(36).slice(2, 6)}`
+
+		const button = document.createElement('button')
+		document.body.appendChild(button)
+		button.id = id
+		button.className = 'visually-hidden'
+		button.addEventListener('click', () => {
+			const result = requester()
+			button.remove()
+			resolve(result)
+		}, { once: true, passive: true })
+
+		window.TALK_DESKTOP.grantUserGesturedPermission(id)
+	})
+}

src/shared/utils.ts

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export function once<F extends () => any>(func: F): F
+export function once<F extends (...args: any[]) => void>(func: F): F
+/**
+ * Singletone function decorator
+ *
+ * @param func - Function
+ */
+export function once<F extends (() => any) | ((...args: any[]) => void)>(func: F): F {
+	let wasCalled = false
+	let result: ReturnType<F>
+
+	return ((...args: Parameters<F>): ReturnType<F> => {
+		if (!wasCalled) {
+			wasCalled = true
+			result = func(...args)
+		}
+		return result
+	}) as F
+}
+
+/* eslint-enable @typescript-eslint/no-explicit-any */

src/talk/renderer/UserStatus/composables/IdleDetector.d.ts

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+// See: https://wicg.github.io/idle-detection/#api-idledetector
+
+type UserIdleState = 'active' | 'idle'
+
+type ScreenIdleState = 'locked' | 'unlocked'
+
+type IdleOptions = {
+	/**
+	 * Min 60_000 ms
+	 */
+	threshold?: number
+	signal?: AbortSignal
+}
+
+interface IdleDetector extends EventTarget {
+	userState: UserIdleState | null
+	screenState: ScreenIdleState | null
+
+	start(options?: IdleOptions): Promise<void>
+	onchange(callback: () => void): void
+}
+
+interface IdleDetectorConstructor {
+	requestPermission(): Promise<PermissionState>
+
+	new (): IdleDetector
+	prototype: IdleDetector
+}
+
+declare const IdleDetector: IdleDetectorConstructor

src/talk/renderer/UserStatus/composables/useIdleDetector.ts

@@ -0,0 +1,55 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createSharedComposable } from '@vueuse/core'
+import { onBeforeMount, onBeforeUnmount, readonly, ref } from 'vue'
+import { grantUserGesturedPermission } from '../../../../shared/grantUserGesturedPermission.ts'
+import { once } from '../../../../shared/utils.ts'
+
+/**
+ * Grant IdleDetector permission
+ */
+const grantIdleDetectorPermission = once(async () => {
+	const permission = await grantUserGesturedPermission(() => IdleDetector.requestPermission())
+	if (permission !== 'granted') {
+		throw new Error('Unexpected permission denied for IdleDetector')
+	}
+})
+
+/**
+ * Use IdleDetector API
+ *
+ * @param threshold - IdleDetector's threshold
+ */
+export const useIdleDetector = createSharedComposable((threshold: number = 60_000) => {
+	const userState = ref<UserIdleState | undefined>(undefined)
+	const screenState = ref<ScreenIdleState | undefined>(undefined)
+	const abortController = new AbortController()
+
+	onBeforeMount(async () => {
+		try {
+			await grantIdleDetectorPermission()
+
+			const idleDetector = new IdleDetector()
+			idleDetector.addEventListener('change', () => {
+				userState.value = idleDetector.userState!
+				screenState.value = idleDetector.screenState!
+			})
+			await idleDetector.start({
+				threshold,
+				signal: abortController.signal,
+			})
+		} catch (error) {
+			console.error('Unexpected error on starting IdleDetector:', error)
+		}
+	})
+
+	onBeforeUnmount(() => abortController.abort())
+
+	return {
+		screenState: readonly(screenState),
+		userState: readonly(userState),
+	}
+})

src/talk/renderer/UserStatus/composables/useIsAway.ts

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createSharedComposable } from '@vueuse/core'
+import { computed } from 'vue'
+import { useAppIdle } from './useAppIdle.ts'
+import { useIdleDetector } from './useIdleDetector.ts'
+
+/**
+ * Whether the user is away or active
+ *
+ * @param threshold - How long user is considered active
+ */
+export const useIsAway = createSharedComposable((threshold = 60_000) => {
+	const { userState, screenState } = useIdleDetector(threshold)
+	const isAppIdle = useAppIdle(threshold)
+
+	return computed(() => {
+		return screenState.value === 'locked' // System Locked - the user is away immediately
+			|| (userState.value !== 'active' && isAppIdle.value) // Check both to cover unavailable IdleDetector
+	})
+})

src/talk/renderer/UserStatus/useHeartbeat.ts

@@ -5,7 +5,7 @@
 
 import { createSharedComposable } from '@vueuse/core'
 import { onBeforeUnmount, watch } from 'vue'
-import { useAppIdle } from './composables/useAppIdle.ts'
+import { useIsAway } from './composables/useIsAway.ts'
 import { useUserStatusStore } from './userStatus.store.ts'
 
 // General notes:
@@ -30,7 +30,7 @@ const AWAY_THRESHOLD = 2 * 60 * 1000 // 2 minutes
  */
 export const useHeartbeat = createSharedComposable(() => {
 	const userStatusStore = useUserStatusStore()
-	const isAway = useAppIdle(AWAY_THRESHOLD)
+	const isAway = useIsAway(AWAY_THRESHOLD)
 
 	let heartbeatTimeout: number | undefined