优化React Idle Timer：在视频播放时保持用户活跃状态

import React from 'react';
import { useIdleTimer } from 'react-idle-timer';

function MyApp() {
    const handleOnIdle = () => {
        console.log('用户已闲置');
        // 例如：执行登出操作
        // authService.logout();
    };

    const handleOnActive = (event) => {
        console.log('用户已活跃', event);
    };

    const handleOnAction = (event) => {
        console.log('用户仍在活动', event);
    };

    const { getRemainingTime, getLastActiveTime, activate } = useIdleTimer({
        timeout: 10000, // 10秒不活动即视为闲置
        onIdle: handleOnIdle,
        onActive: handleOnActive,
        onAction: handleOnAction,
        debounce: 500 // 动作事件去抖
    });

    return (
        <div>
            <h1>我的React应用</h1>
            <p>剩余时间: {getRemainingTime() / 1000} 秒</p>
            <p>上次活跃时间: {new Date(getLastActiveTime()).toLocaleTimeString()}</p>

            {/* 视频播放器 */}
            <video
                onTimeUpdate={activate} // 关键：在视频时间更新时调用activate
                controls
                width="600"
                src="https://www.w3schools.com/html/mov_bbb.mp4" // 示例视频源
            >
                您的浏览器不支持视频播放。
            </video>

            {/* 其他应用内容 */}
        </div>
    );
}

export default MyApp;

import React, { useCallback } from 'react';
import { useIdleTimer } from 'react-idle-timer';
import { throttle } from 'lodash'; // 或者使用自定义的节流函数

function MyAppWithThrottling() {
    // ... (useIdleTimer 的初始化代码与上例相同)
    const { activate } = useIdleTimer({
        timeout: 10000,
        // ... 其他配置
    });

    // 使用 useCallback 包装节流函数，避免每次渲染都创建新的节流函数
    const throttledActivate = useCallback(
        throttle(() => {
            activate();
            console.log('Throttled activate called');
        }, 1000), // 每1000毫秒（1秒）最多调用一次
        [activate]
    );

    return (
        <div>
            {/* ... 其他内容 */}
            <video
                onTimeUpdate={throttledActivate} // 使用节流后的activate
                controls
                width="600"
                src="https://www.w3schools.com/html/mov_bbb.mp4"
            >
                您的浏览器不支持视频播放。
            </video>
            {/* ... 其他内容 */}
        </div>
    );
}

// 示例：使用 confirmPrompt 功能
const { getRemainingTime, activate } = useIdleTimer({
    timeout: 10000,
    onIdle: handleOnIdle,
    // ... 其他配置
    promptBeforeIdle: true, // 在即将闲置时显示提示
    // onPrompt: () => { /* 处理提示显示逻辑 */ },
    // onActive: (event) => { /* 用户确认活跃后触发 */ }
});