Merge pull request #794 from adityacp/video_tracking

Basic tracking for video lessons

4 files changed, 73 insertions, 14 deletions

diff --git a/yaksh/static/yaksh/js/show_toc.js b/yaksh/static/yaksh/js/show_toc.js
index a2507d0..55e9236 100644
--- a/yaksh/static/yaksh/js/show_toc.js
+++ b/yaksh/static/yaksh/js/show_toc.js
@@ -24,23 +24,49 @@ $(document).ready(function() {
     var totalSeconds;
     store_video_time(contents_by_time);
     var time_arr_length = video_time.length;
+    var total_duration;
+    player.on('ready', event => {
+        total_duration = parseInt(player.duration);
+        start_tracker((total_duration * 1000) / 4, player);
+    });
+
     player.on('timeupdate', event => {
-        if (time_arr_length > 0 && player.currentTime >= video_time[loc]) {
+        var current_time = player.currentTime;
+        $("#video_duration").val(get_time_in_hrs(total_duration));
+        $("#current_video_time").val(get_time_in_hrs(current_time));
+        if (time_arr_length > 0 && current_time >= video_time[loc]) {
             var content = contents_by_time[loc]; 
             loc += 1;
             if(content.content == 1) {
                 show_topic($("#toc_desc_"+content.id).val(), false);
             }
             else {
-                player.pause();
                 if(player.fullscreen.active) player.fullscreen.exit();
                 url = $("#toc_"+content.id).val();
-                ajax_call(url, "GET");
+                ajax_call(url, "GET", screen_lock=true);
             }
         }
     });
+    player.on('ended', event => {
+        var csrf = document.getElementById("track-form").elements[0].value;
+        ajax_call($("#track-form").attr("action"), $("#track-form").attr("method"),
+                  $("#track-form").serialize(), csrf, screen_lock=false);
+        window.location.href = $("#next_unit").attr("href");
+    });
 });
 
+
+function start_tracker(slice_duration, player) {
+    setTimeout(function run() {
+        if(player && player.playing) {
+            var csrf = document.getElementById("track-form").elements[0].value;
+            ajax_call($("#track-form").attr("action"), $("#track-form").attr("method"),
+                      $("#track-form").serialize(), csrf, screen_lock=false);
+        }
+        setTimeout(run, slice_duration);
+    }, slice_duration);
+}
+
 function show_topic(description, override) {
     var topic_div = $("#topic-description");
     if(override) {
@@ -51,8 +77,10 @@ function show_topic(description, override) {
 }
 
 function store_video_time(contents) {
-    for (var j = 0; j < contents.length; j++)
-    video_time.push(get_time_in_seconds(contents[j].time));
+    if(contents) {
+        for (var j = 0; j < contents.length; j++)
+        video_time.push(get_time_in_seconds(contents[j].time));
+    }
 }
 
 function get_time_in_seconds(time) {
@@ -63,6 +91,18 @@ function get_time_in_seconds(time) {
     return hh * 3600 + mm * 60 + ss;
 }
 
+function get_time_in_hrs(time) {
+    totalSeconds = parseInt(time)
+    hours = Math.floor(totalSeconds / 3600);
+    totalSeconds %= 3600;
+    minutes = Math.floor(totalSeconds / 60);
+    seconds = totalSeconds % 60;
+    hours = hours < 10 ? "0" + hours : hours;
+    minutes = minutes < 10 ? "0" + minutes : minutes;
+    seconds = seconds < 10 ? "0" + seconds : seconds;
+    return hours + ":" + minutes + ":" + seconds;
+}
+
 function lock_screen() {
     document.getElementById("loader").style.display = "block";
     if ($("#check").is(":visible")) {
@@ -87,7 +127,8 @@ function show_question(data) {
         e.preventDefault();
         lock_screen();
         var csrf = document.getElementById("submit-quiz-form").elements[0].value;
-        ajax_call($(this).attr("action"), $(this).attr("method"), $(this).serialize(), csrf);
+        ajax_call($(this).attr("action"), $(this).attr("method"),
+                  $(this).serialize(), csrf, screen_lock=true);
     });
 }
 
@@ -140,8 +181,8 @@ function show_message(message, msg_type) {
     }
 }
 
-function ajax_call(url, method, data, csrf) {
-    lock_screen();
+function ajax_call(url, method, data, csrf, screen_lock=true) {
+    if(screen_lock) {lock_screen();}
     $.ajax({
         url: url,
         timeout: 15000,
diff --git a/yaksh/templates/yaksh/show_lesson_statistics.html b/yaksh/templates/yaksh/show_lesson_statistics.html
index 31261f3..0c35e40 100644
--- a/yaksh/templates/yaksh/show_lesson_statistics.html
+++ b/yaksh/templates/yaksh/show_lesson_statistics.html
@@ -5,10 +5,19 @@
 {% block content %}
 <div class="container-fluid">
     <br>
-    <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
-        <i class="fa fa-arrow-left"></i>&nbsp;Back
-    </a>
-    <br><br>
+    <div class="row">
+        <div class="col-md-2">
+            <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
+                <i class="fa fa-arrow-left"></i>&nbsp;Back
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a class="btn btn-outline-dark" href="{% url 'stats:view_lesson_watch_stats' course_id lesson.id %}">
+                <i class="fa fa-line-chart"></i>&nbsp;Video Statistics
+            </a>
+        </div>
+    </div>
+    <br>
     {% if data %}
     <div class="row">
         <div class="col-md-4">
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index d27293e..d6d08ea 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -196,6 +196,11 @@
                     {% endif %}
                 {% endif %}
                 <div class="col-md-8">
+                    <form action="{% url 'stats:add_tracker' track_id %}" method="POST" id="track-form">
+                        {% csrf_token %}
+                        <input type="hidden" name="video_duration" id="video_duration">
+                        <input type="hidden" name="current_video_time" id="current_video_time">
+                    </form>
                     <div class="card">
                         <div class="card-header"><h3><strong>Lesson Description</strong></h3></div>
                         <div class="card-body">
@@ -226,7 +231,7 @@
                 </div>
             </div>
             <br>
-            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
+            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" id="next_unit">
                     Next&nbsp;<i class="fa fa-step-forward"></i>
             </a>
         {% endif %}
diff --git a/yaksh/views.py b/yaksh/views.py
index b3b1e02..95a7218 100644
--- a/yaksh/views.py
+++ b/yaksh/views.py
@@ -42,6 +42,7 @@ from yaksh.models import (
     LearningUnit, LearningModule, CourseStatus, question_types, Post, Comment,
     Topic, TableOfContents, LessonQuizAnswer, MicroManager
 )
+from stats.models import TrackLesson
 from yaksh.forms import (
     UserRegisterForm, UserLoginForm, QuizForm, QuestionForm,
     QuestionFilterForm, CourseForm, ProfileForm,
@@ -2817,6 +2818,9 @@ def show_lesson(request, lesson_id, module_id, course_id):
         if not learn_unit.is_prerequisite_complete(user, learn_module, course):
             msg = "You have not completed previous Lesson/Quiz/Exercise"
             return view_module(request, learn_module.id, course_id, msg=msg)
+    track, created = TrackLesson.objects.get_or_create(
+        user_id=user.id, course_id=course_id, lesson_id=lesson_id
+        )
 
     lesson_ct = ContentType.objects.get_for_model(learn_unit.lesson)
     title = learn_unit.lesson.name
@@ -2849,7 +2853,7 @@ def show_lesson(request, lesson_id, module_id, course_id):
                'course': course, 'state': "lesson", "all_modules": all_modules,
                'learning_units': learning_units, "current_unit": learn_unit,
                'learning_module': learn_module, 'toc': toc,
-               'contents_by_time': contents_by_time,
+               'contents_by_time': contents_by_time, 'track_id': track.id,
                'comments': comments, 'form': form, 'post': post}
     return my_render_to_response(request, 'yaksh/show_video.html', context)