解决React Idle Timer在视频播放时误判空闲的策略

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

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

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

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

    // 从 useIdleTimer Hook 中获取 activate 方法
    const { getRemainingTime, activate } = useIdleTimer({
        timeout: 10000, // 10秒不活动即视为空闲
        onIdle: handleOnIdle,
        onActive: handleOnActive,
        onAction: handleOnAction,
        debounce: 500 // 防抖处理，避免事件过于频繁触发
    });

    return (
        <div>
            <h1>React Idle Timer与视频播放</h1>
            <p>距离空闲状态剩余时间：{Math.ceil(getRemainingTime() / 1000)} 秒</p>

            <div style={{ marginTop: '20px' }}>
                <video
                    onTimeUpdate={activate} // 视频播放时调用 activate 方法
                    controls
                    src="https://www.w3schools.com/html/mov_bbb.mp4" // 替换为你的视频源
                    width="640"
                    height="360"
                >
                    您的浏览器不支持视频播放。
                </video>
                <p>当视频播放时，即使没有鼠标键盘操作，空闲计时器也会被重置。</p>
            </div>
        </div>
    );
}

export default VideoPlayerActivityTracker;

import { useIdleTimer } from 'react-idle-timer';
import React, { useCallback } from 'react';
import { throttle } from 'lodash'; // 推荐使用 lodash 的 throttle 函数

function VideoPlayerActivityTrackerOptimized() {
    // ... 其他 useIdleTimer 配置 ...

    const { activate } = useIdleTimer({
        timeout: 10000,
        // ... 其他回调函数 ...
    });

    // 使用 useCallback 和 throttle 来优化 activate 的调用
    const throttledActivate = useCallback(
        throttle(() => activate(), 1000), // 每秒最多调用一次 activate
        [activate]
    );

    return (
        <div>
            {/* ... 其他内容 ... */}
            <video
                onTimeUpdate={throttledActivate} // 使用节流后的 activate
                controls
                src="https://www.w3schools.com/html/mov_bbb.mp4"
                width="640"
                height="360"
            />
        </div>
    );
}

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

function AppWithConfirmPrompt() {
    const [showConfirmModal, setShowConfirmModal] = useState(false);

    const { getRemainingTime, activate, reset } = useIdleTimer({
        timeout: 10000, // 10秒不活动触发 onPrompt
        promptBeforeIdle: 3000, // 在空闲前3秒触发 onPrompt
        onPrompt: () => {
            console.log('即将空闲，显示确认提示');
            setShowConfirmModal(true);
        },
        onIdle: () => {
            console.log('用户已空闲，确认提示已过期或用户未响应');
            setShowConfirmModal(false); // 关闭提示
            // authService.logout(); // 执行空闲操作
        },
        onActive: () => {
            console.log('用户活跃');
            setShowConfirmModal(false); // 用户活跃时关闭提示
        },
        onAction: (event) => {
            console.log('用户操作', event);
        },
        // confirmPrompt 选项可以直接集成库的内置提示，但通常更推荐自定义 UI
        // confirmPrompt: {
        //     // 启用内置提示，并可配置文本、按钮等
        //     // 具体配置请参考 react-idle-timer 官方文档
        // }
    });

    const handleUserConfirm = () => {
        console.log('用户点击确认，重置计时器');
        reset(); // 用户确认后重置计时器
        setShowConfirmModal(false);
    };

    return (
        <div>
            <h1>React Idle Timer与确认提示</h1>
            <p>距离空闲状态剩余时间：{Math.ceil(getRemainingTime() / 1000)} 秒</p>

            {showConfirmModal && (
                <div style={{
                    position: 'fixed', top: '50%', left: '50%',
                    transform: 'translate(-50%, -50%)',
                    background: 'rgba(255, 255, 255, 0.95)', padding: '30px',
                    border: '1px solid #ccc', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                    zIndex: 1000, textAlign: 'center'
                }}>
                    <h3>您看起来有一段时间没有活动了</h3>
                    <p>是否继续保持登录状态？</p>
                    <button
                        onClick={handleUserConfirm}
                        style={{
                            padding: '10px 20px', fontSize: '16px', cursor: 'pointer',
                            backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px'
                        }}
                    >
                        我还在！
                    </button>
                </div>
            )}

            <div style={{ marginTop: '20px' }}>
                <p>当计时器即将达到空闲阈值时，会弹出一个确认提示。</p>
                <p>用户点击“我还在”后，计时器将被重置。</p>
                <p>即使在观看视频，如果未与确认提示互动，最终仍会判定为空闲。</p>
            </div>
        </div>
    );
}

export default AppWithConfirmPrompt;