AngularJS show video after inactivity, hide video and reset to beginning on click

Question

I am attempting to make a sort of screensaver using AngularJS. What I would like is to have a video pop up and start playing after a specified number of seconds after the user stops interacting with the page(not moving their mouse or clicking). Then once the video is playing, if the user clicks on the video, I want the video to pause, reset to 0:00 and then hide as well as reset the inactivity timer so that it shows and starts playing after another x number of seconds of inactivity.

I am very new to AngularJS, but here is what I have come up with so far based on my knowledge of Javascript:

(function(){
    
    var myApp = angular.module('myApp', []);
    
    myApp.controller('myController', function($scope, $timeout){
        
        $scope.videoVisible = false;
        
        var video = $('#video1')[0];
        
        //5 second delay
        $timeout( function(){
            $scope.videoVisible = true;
            video.currentTime = 0;
            video.load();
        }, 5000 );

        $scope.hideVideo = function() {
          $scope.videoVisible = false;
          video.pause();
          video.currentTime = 0;
        }
        
        // This part should reset the timeout if the user is moving their mouse or clicking
        $(document.body).bind('mousemove keydown click', RESETTIMER);
        
    });
    
})();

Naren Murali · Accepted Answer

I had already made a similar functionality for another SO question.

SO Answer

I have modified it based on your requirements. Basically there are two functions you need to modify.

$scope.pause - which will pause the video, when the user has any activity.

$scope.play - Which will play the video when the user is inactive (for the below example, the time of inactivity is set to 5 seconds)

$scope.hide - Which hides the video player when the user has clicked on the paused video.

The most important function is.

monitorTimeout($scope.pause, 1000, 5000);

In the above function $scope.pause (1st parameter) defines the function that will run on each iteration. The 1000 (2nd parameter) signifies the number of times the first parameter is run. The final parameter signifies the timeout for the user inactivity (here it is 5 seconds), after which $scope.play is run.

Snippet

var myModule = angular.module('myApp', []);
myModule.controller("TextController", function($scope, $interval, $document, $timeout) {

  $scope.videoVisible = false;
  var video = $('#video1')[0];

  $scope.hideVideo = function() {
    $scope.videoVisible = false;
  }
  //function to call
  $scope.pause = function() {
    video.pause();
    video.currentTime = 0;
    console.log("user active");
  };

  $scope.play = function() {
    $scope.videoVisible = true;
    video.currentTime = 0;
    video.load();
    video.play();
    console.log("user inActive");
  }

  //main function
  //functionName - specify the function that needs to be repeated for the intervalTime
  //intervalTime - the value is in milliseconds, the functionName is continuously repeated for this time.
  //timeoutValue - the value is in milliseconds, when this value is exceeded the function given in functionName is stopped

  monitorTimeout($scope.pause, 1000, 5000);

  function monitorTimeout(functionName, intervalTime, timeoutValue) {
    //initialization parameters
    timeoutValue = timeoutValue || 5000;
    intervalTime = intervalTime || 1000;
    // Start a timeout
    var TimeOut_Thread = $timeout(function() {
      TimerExpired()
    }, timeoutValue);
    var bodyElement = angular.element($document);

    /// Keyboard Events
    bodyElement.bind('keydown', function(e) {
      TimeOut_Resetter(e)
    });
    bodyElement.bind('keyup', function(e) {
      TimeOut_Resetter(e)
    });

    /// Mouse Events    
    bodyElement.bind('click', function(e) {
      TimeOut_Resetter(e)
    });
    bodyElement.bind('mousemove', function(e) {
      TimeOut_Resetter(e)
    });
    bodyElement.bind('DOMMouseScroll', function(e) {
      TimeOut_Resetter(e)
    });
    bodyElement.bind('mousewheel', function(e) {
      TimeOut_Resetter(e)
    });
    bodyElement.bind('mousedown', function(e) {
      TimeOut_Resetter(e)
    });

    /// Touch Events
    bodyElement.bind('touchstart', function(e) {
      TimeOut_Resetter(e)
    });
    bodyElement.bind('touchmove', function(e) {
      TimeOut_Resetter(e)
    });

    /// Common Events
    bodyElement.bind('scroll', function(e) {
      TimeOut_Resetter(e)
    });
    bodyElement.bind('focus', function(e) {
      TimeOut_Resetter(e)
    });

    function TimerExpired() {
      if (theInterval) {
        $scope.play();
        $interval.cancel(theInterval);
        theInterval = undefined;
      }
    }

    function TimeOut_Resetter(e) {
      if (!theInterval) {
        theInterval = $interval(function() {
          functionName();
        }.bind(this), intervalTime);
      }

      /// Stop the pending timeout
      $timeout.cancel(TimeOut_Thread);

      /// Reset the timeout
      TimeOut_Thread = $timeout(function() {
        TimerExpired()
      }, timeoutValue);
    }

    var theInterval = $interval(function() {
      functionName();
    }.bind(this), intervalTime);
  }
});

AngularJS show video after inactivity, hide video and reset to beginning on click

Answers (1)

Related Questions