Click here to Skip to main content
15,884,099 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
CSS
I have the following code that detect if user is idle or not. On page load, a timer will run and if the user is idle for a certain of seconds the timer will pause and resume if the user is active. And I have also codes that detect if video is playing, if the video is playing timer should run and if the video is stop/pause a timeout will run and detect if the user is still active

The problem is even if video is playing, the timer paused and it will start to idle. What I want is when video is playing timer should countinue to increment.

Heres my code:


JavaScript
function setPlayingVideoToTrue(){playing_video = true;}

    function setPlayingVideoToFalse(){playing_video = false;}

    // check if a video iframe exists
    var iframe_videos = $('body').find('iframe');

    if(iframe_videos.length > 0){
	// create ready events for every iframe
	iframe_videos.each(function(index){
		// add a temporary id for the iframe
		// append additional parameters to the end of the iframe's src
		var temporary_player_id = 'iframe_player_'+ index;
		var new_iframe_src = $(this).attr('src') +'?api=1&player_id='+ temporary_player_id;
		$(this).attr('id', temporary_player_id);
		$(this).attr('src', new_iframe_src);

		// add event listener for ready
		$f(this).addEvent('ready', iframe_ready);
	});

	// when a player is ready, add event listeners for play, pause, finish, and playProgress
	function iframe_ready(player_id) {
		$f(player_id).addEvent('play', setPlayingVideoToTrue);
		$f(player_id).addEvent('playProgress', setPlayingVideoToTrue);
		$f(player_id).addEvent('pause', setPlayingVideoToFalse);
		$f(player_id).addEvent('finish', setPlayingVideoToFalse);
    }
    }


    function start_idle_timer(){
	var timer = 0;
	
	function increment_duration()
	{	
		if(isPaused === false)
		{
			timer++;
		}
		
		// increment timer if video is playing
		if(playing_video === true){
			clearTimeout(idleTimer);
			isPaused = false;
		}


		if(playing_video === false && isPaused === false){

			// stop timer if the user is idle for 3 minutes
		    var idleTimer = setTimeout(function(){
		    	// console.log('idle');
		    	clearInterval(check_time);
		    	isPaused = true;

		    	// a modal will apper to inform that user is on idle state
		    	$('#linkage').trigger('click');
		    	
		    	var modal_timer = 0;
		    	// timer for modal idle timer
		    	continue_modal_timer = setInterval(function(){
		    		modal_timer++;

		    		inactivity_timer = modal_timer;
		    		if(modal_timer == 60)
		    		{
		    			clearInterval(continue_modal_timer);
		    			clearTimeout(idleTimer);	
		    		}
		    	}, 1000)	
			}, 10000);
		}

		// bind to all elements on DOM possible events indicating the user is active
		$('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
		   	clearTimeout(idleTimer);
		    isPaused = false;
		});
	}

	// initialize the interval
	check_time = setInterval(increment_duration, 1000); 
    }

    // check if start_timer is present from the loading page to record the time duration of the user
    if($('.start_timer').length > 0){	
	start_idle_timer();
    }
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900