React Idle Timer: Video Player Activity Detected as Idle

Question

I am currently using the react-idle-timer library in my React application to track user inactivity. However, I'm facing an issue where the video player activity is detected as idle by the library.

I have a video player component in my application, and even when the video is actively playing, the react-idle-timer triggers the idle state. This behavior is not desirable, as I want to differentiate between actual user inactivity and video playback activity.

I have already ensured that I am properly handling user interactions with the video player by listening to events like play, pause, and seek. However, the react-idle-timer still detects the video player as idle.

Has anyone encountered a similar issue with the react-idle-timer library or any other solution for tracking user inactivity in the presence of an active video player? Are there any specific configurations or workarounds that can be implemented to accurately detect user inactivity while ignoring video playback activity?

I appreciate any insights or suggestions to resolve this issue. Thank you!

const handleOnIdle = () => {
    console.log('user is idle')
    console.log('last active', getLastActiveTime())
    authService.logout();
}

const handleOnActive = (event) => {
    console.log('user is active', event)
    console.log('time remaining', getRemainingTime())
}

const handleOnAction = (event) => {
    console.log('User still active', event)
}

const { getRemainingTime, getLastActiveTime } = useIdleTimer({
    timeout: 10000,
    onIdle: handleOnIdle,
    onActive: handleOnActive,
    onAction: handleOnAction,
    debounce: 500
})

Answer 1

Option 1: Use the timeupdate video event to reset the idle timer while the video is playing (sandbox).

Get the active() method from the hook:

const { getRemainingTime, activate } = useIdleTimer({

Call it as the onTimeUpdate handler:

<video
  onTimeUpdate={activate}
  controls
  src='Big_Buck_Bunny_360_10s_1MB.mp4'
/>

Note: This calls activate() multiple times per second, while the video is playing. If you see any performance hit, throttle the handler to work once every second.

Option 2: Use the builtin Confirm Prompt of the react-idle-timer, and reset the timer if the user interacts with the app.