优化 react-idle-timer：精确识别用户活跃，排除视频播放干扰

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

function VideoPlayerActivityDetector() {
    const handleOnIdle = () => {
        console.log('用户闲置，执行相应操作 (例如：登出)');
        // authService.logout(); // 假设有登出服务
    };

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

    const handleOnAction = (event) => {
        console.log('用户正在操作', event);
    };

    const { getRemainingTime, activate } = useIdleTimer({
        timeout: 10000, // 10秒后检测为闲置
        onIdle: handleOnIdle,
        onActive: handleOnActive,
        onAction: handleOnAction,
        debounce: 500 // 防抖处理，防止频繁触发 onAction
    });

    return (
        <div>
            <h2>视频播放器</h2>
            <p>剩余活跃时间: {Math.ceil(getRemainingTime() / 1000)} 秒</p>
            <video
                onTimeUpdate={activate} // 视频播放时调用 activate 方法重置计时器
                controls
                src="https://www.w3schools.com/html/mov_bbb.mp4" // 示例视频源
                width="640"
                height="360"
            >
                您的浏览器不支持视频播放。
            </video>
            <p>当视频播放时，计时器将持续重置，防止误判为闲置。</p>
        </div>
    );
}

export default VideoPlayerActivityDetector;

import React, { useCallback, useRef, useEffect } from 'react';
import { useIdleTimer } from 'react-idle-timer';

// 简单的节流函数实现
const throttle = (func, limit) => {
    let inThrottle;
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!inThrottle) {
            func.apply(context, args);
            lastRan = Date.now();
            inThrottle = true;
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
};

function VideoPlayerActivityDetectorThrottled() {
    const handleOnIdle = () => {
        console.log('用户闲置，执行相应操作 (例如：登出)');
    };

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

    const { activate } = useIdleTimer({
        timeout: 10000,
        onIdle: handleOnIdle,
        onActive: handleOnActive,
    });

    // 对 activate 方法进行节流处理，每秒最多调用一次
    const throttledActivate = useCallback(
        throttle(activate, 1000), // 每 1000 毫秒 (1秒) 调用一次
        [activate] // 依赖项，确保 activate 变化时重新生成节流函数
    );

    return (
        <div>
            <h2>视频播放器 (节流优化)</h2>
            <video
                onTimeUpdate={throttledActivate} // 使用节流后的 activate
                controls
                src="https://www.w3schools.com/html/mov_bbb.mp4"
                width="640"
                height="360"
            >
                您的浏览器不支持视频播放。
            </video>
            <p>视频播放时，节流后的 activate 方法将确保计时器定期重置，同时优化性能。</p>
        </div>
    );
}

export default VideoPlayerActivityDetectorThrottled;