Show the lesson contents on student interface

4 files changed, 105 insertions, 30 deletions

diff --git a/yaksh/static/yaksh/css/custom.css b/yaksh/static/yaksh/css/custom.css
index b737090..a3d5c79 100644
--- a/yaksh/static/yaksh/css/custom.css
+++ b/yaksh/static/yaksh/css/custom.css
@@ -145,3 +145,19 @@ body, .dropdown-menu {
 .CodeMirror-fullscreen .CodeMirror-scroll {
     max-height: none !important;
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar {
+    // Width of vertical scroll bar
+    width: 8px;
+    // Height of horizontal scroll bar
+    height: 10px;
+
+}
+::-webkit-scrollbar-thumb {
+border-radius: 8px;
+background: #c2c9d2;
+}
\ No newline at end of file
diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index 92038c9..0558bd0 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -1,6 +1,7 @@
 $(document).ready(function() {
     var simplemde = new SimpleMDE({
         element: document.getElementById("id_description"),
+        forceSync: true,
     });
     const player = new Plyr('#player');
     var timer = $("#vtimer");
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 236f8ef..4c54518 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -4,6 +4,8 @@
 
 {% block title %} {{ learning_module.name }} {% endblock %}
 {% block script %}
+<script type="text/javascript" src="{% static 'yaksh/js/lesson.js' %}">
+</script>
 <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
 </script>
 {% endblock %}
@@ -127,37 +129,94 @@
                 </a>
             {% endif %}
         {% else %}    <!--  Lesson body   -->
-            <div class="col" style="width: 100%">
-                {{lesson.html_data|safe}}
-            <br>
-            <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="oHmm3mPxg6Y"></div>
-            <script>
-              const player = new Plyr('#player');
-              window.player = player;
-            </script>
-            <br>
-            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
-                Next&nbsp;<i class="fa fa-step-forward"></i>
-            </a>
-            </div>
-            <br>
-            <div class="col-md-7">
-            {% with lesson.get_files as lesson_files %}
-                {% if lesson_files %}
-                    <div class="card">
-                        <div class="card-header">
-                            Files for this lesson
-                        </div>
-                        <div class="card-body">
-                            {% for f in lesson_files %}
-                                <a href="{{f.file.url}}" class="list-group-item">
-                                    {{forloop.counter}}.{{ f.file.name|file_title }}
-                                </a>
-                            {% endfor %}
+            <!-- Lesson Table of contents -->
+            <div class="row">
+                <div class="col-md-8">
+                    <div class="card-body">
+                    {% if lesson.video_path %}
+                        {% with lesson.video_path|video_name as video %}
+                            {% if video.1 == "others" %}
+                            <video id="player" playsinline controls>
+                                <source src="{{video.0}}" />
+                            </video>
+                            {% else %}
+                            <div id="player" data-plyr-provider="{{video.1}}" data-plyr-embed-id="{{video.0}}"></div>
+                            {% endif %}
+                        {% endwith %}
+                        <br>
+                        <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
+                        Next&nbsp;<i class="fa fa-step-forward"></i>
+                        </a>
+                    {% endif %}
+                    </div>
+                </div>
+                <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <a class="card-link" data-toggle="collapse" href="#toc-collapse">
+                            Table Of Contents&nbsp;<i class="fa fa-angle-down"></i>
+                        </a>
+                    </div>
+                    <div class="collapse show" id="toc-collapse">
+                        <div class="card-body" id="toc">
+                            <table class="table table-responsive">
+                                {% for content in toc %}
+                                    {% with content.get_toc_text as toc_name %}
+                                    <tr>
+                                        <td>
+                                            {{ toc_name }}
+                                        </td>
+                                        <td>
+                                            {{content.get_content_display}}
+                                        </td>
+                                        <td>
+                                            {{content.time}}
+                                        </td>
+                                    </tr>
+                                    {% endwith %}
+                                {% empty %}
+                                    <center>
+                                        <span class="badge badge-warning">No Table of contents added</span>
+                                    </center>
+                                {% endfor %}
+                            </table>
                         </div>
                     </div>
-                {% endif %}
-            {% endwith %}
+                </div>
+                </div>
+                <div class="col-md-8">
+                    <hr>
+                    <h3><strong>Lesson Description</strong></h3>
+                    <hr>
+                    <div class="col" style="width: 100%">
+                        {{lesson.html_data|safe}}
+                    </div>
+                    <br>
+                    {% if not lesson.video_path %}
+                    <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
+                        Next&nbsp;<i class="fa fa-step-forward"></i>
+                    </a>
+                    <br>
+                    {% endif %}
+                    <div class="col-md-7">
+                    {% with lesson.get_files as lesson_files %}
+                        {% if lesson_files %}
+                            <div class="card">
+                                <div class="card-header">
+                                    Files for this lesson
+                                </div>
+                                <div class="card-body">
+                                    {% for f in lesson_files %}
+                                        <a href="{{f.file.url}}" class="list-group-item">
+                                            {{forloop.counter}}.{{ f.file.name|file_title }}
+                                        </a>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        {% endif %}
+                    {% endwith %}
+                    </div>
+                </div>
             </div>
         {% endif %}
     </div>
diff --git a/yaksh/views.py b/yaksh/views.py
index 60d72e9..fffefe8 100644
--- a/yaksh/views.py
+++ b/yaksh/views.py
@@ -2689,7 +2689,6 @@ def show_lesson(request, lesson_id, module_id, course_id):
     toc = TableOfContents.objects.filter(
         course_id=course_id, lesson_id=lesson_id
     )
-
     all_modules = course.get_learning_modules()
     if learn_unit.has_prerequisite():
         if not learn_unit.is_prerequisite_complete(user, learn_module, course):