React 应用中 react-idle-timer 与视频播放的协同处理

import { useIdleTimer } from 'react-idle-timer';
import authService from './authService'; // 假设的认证服务

const MyAppComponent = () => {
    const handleOnIdle = () => {
        console.log('用户处于空闲状态');
        console.log('最后活跃时间:', getLastActiveTime());
        authService.logout(); // 示例：用户空闲时执行登出
    };

    const handleOnActive = (event) => {
        console.log('用户处于活跃状态', event);
        console.log('剩余时间:', getRemainingTime());
    };

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

    const { getRemainingTime, getLastActiveTime } = useIdleTimer({
        timeout: 10000, // 10秒不活动即视为空闲
        onIdle: handleOnIdle,
        onActive: handleOnActive,
        onAction: handleOnAction,
        debounce: 500 // 防抖处理，避免频繁触发
    });

    // ... 其他组件逻辑
};

import React, { useCallback } from 'react';
import { useIdleTimer } from 'react-idle-timer';
import throttle from 'lodash.throttle'; // 或自行实现节流函数

const VideoPlayerWithIdleDetectionThrottled = () => {
    const handleOnIdle = () => {
        console.log('用户处于空闲状态，视频可能已暂停或播放完毕');
        // authService.logout();
    };

    const { activate, getRemainingTime } = useIdleTimer({
        timeout: 10000,
        onIdle: handleOnIdle,
        // ... 其他配置
    });

    // 对 activate 函数进行节流，例如每秒最多执行一次
    const throttledActivate = useCallback(
        throttle(() => activate(), 1000, { leading: true, trailing: false }),
        [activate]
    );

    return (
        <div>
            <h1>视频播放器 (节流优化)</h1>
            <video
                onTimeUpdate={throttledActivate} // 使用节流后的 activate
                controls
                width="640"
                height="360"
                src="https://www.w3schools.com/html/mov_bbb.mp4"
                type="video/mp4"
            >
                您的浏览器不支持视频播放。
            </video>
            <p>
                当前空闲计时器剩余时间: {Math.ceil(getRemainingTime() / 1000)} 秒
            </p>
        </div>
    );
};

export default VideoPlayerWithIdleDetectionThrottled;

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

const VideoPlayerWithConfirmPrompt = () => {
    const handleOnIdle = () => {
        console.log('用户最终进入空闲状态并被登出');
        // authService.logout();
    };

    const handleOnPrompt = () => {
        console.log('用户即将进入空闲状态，显示确认提示');
        // 在这里可以弹出一个模态框或通知，询问用户是否要继续
        // 示例：alert("您即将被登出，点击确定保持活跃。");
        // 实际应用中，你可能需要一个更友好的 UI
    };

    const handleOnActive = () => {
        console.log('用户已通过确认提示或常规操作重新活跃');
    };

    const { getRemainingTime, isPrompted, activate } = useIdleTimer({
        timeout: 10000, // 10秒不活动后进入提示阶段
        promptBeforeIdle: 5000, // 在真正空闲前5秒触发 onPrompt
        onPrompt: handleOnPrompt,
        onIdle: handleOnIdle,
        onActive: handleOnActive,
        // ... 其他配置
    });

    // 假设你有一个按钮来模拟用户点击确认提示中的“保持活跃”
    const handleKeepActiveClick = () => {
        activate(); // 手动激活计时器，用户选择保持活跃
        console.log('用户点击保持活跃，计时器已重置');
        // 关闭你的确认提示 UI
    };

    return (
        <div>
            <h1>视频播放器 (确认提示)</h1>
            <video
                controls
                width="640"
                height="360"
                src="https://www.w3schools.com/html/mov_bbb.mp4"
                type="video/mp4"
            >
                您的浏览器不支持视频播放。
            </video>
            {isPrompted() && (
                <div style={{ border: '1px solid red', padding: '10px', marginTop: '20px' }}>
                    <p>您已长时间未操作，即将被登出。是否保持活跃？</p>
                    <button onClick={handleKeepActiveClick}>保持活跃</button>
                </div>
            )}
            <p>
                当前空闲计时器剩余时间: {Math.ceil(getRemainingTime() / 1000)} 秒
            </p>
        </div>
    );
};

export default VideoPlayerWithConfirmPrompt;