Add dropdown selection for lesson video options

4 files changed, 52 insertions, 19 deletions

diff --git a/yaksh/forms.py b/yaksh/forms.py
index d57d388..7a9eb87 100644
--- a/yaksh/forms.py
+++ b/yaksh/forms.py
@@ -515,6 +515,22 @@ class QuestionPaperForm(forms.ModelForm):
 
 
 class LessonForm(forms.ModelForm):
+    video_options = (
+            ("---", "Select Video Option"), ("youtube", "Youtube"),
+            ("vimeo", "Vimeo"), ("others", "Others")
+        )
+    video_option = forms.ChoiceField(
+        choices=video_options, required=False,
+        help_text='Add videos from youtube, vimeo or other',
+        widget=forms.Select({'class': 'custom-select'}))
+    video_url = forms.CharField(
+        widget=forms.TextInput(
+            {'class': form_input_class,
+             'placeholder': 'Video ID for Youtube, Vimeo and URL for others'}
+            ),
+        required=False
+        )
+
     def __init__(self, *args, **kwargs):
         super(LessonForm, self).__init__(*args, **kwargs)
         des_msg = "Enter Lesson Description as Markdown text"
@@ -524,13 +540,14 @@ class LessonForm(forms.ModelForm):
         self.fields['description'].widget.attrs.update(
             {'class': form_input_class, 'placeholder': des_msg}
         )
-        self.fields['video_path'].widget.attrs.update(
-            {'class': form_input_class,
-             'placeholder': dedent("""\
-                {'youtube': '', 'vimeo': '', 'others': ''}
-                """),
-             }
-        )
+        self.fields['video_path'].widget = forms.HiddenInput()
+        try:
+            video = literal_eval(self.instance.video_path)
+            key = list(video.keys())[0]
+            self.fields['video_option'].initial = key
+            self.fields['video_url'].initial = video[key]
+        except ValueError:
+            pass
 
     class Meta:
         model = Lesson
diff --git a/yaksh/static/yaksh/js/add_question.js b/yaksh/static/yaksh/js/add_question.js
index 479e8da..d5a6121 100644
--- a/yaksh/static/yaksh/js/add_question.js
+++ b/yaksh/static/yaksh/js/add_question.js
@@ -220,11 +220,4 @@ $(document).ready(() => {
             $('#id_language').children("option[value='other']").show();
         }
     })
-    $('#add_more').click(function() {
-        var form_idx = $(tc_type).val();
-        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
-        $(tc_type).val(parseInt(form_idx) + 1);
-        var form_type = "#id_"+'{{tc_class}}'+"_set-"+form_idx+"-type";
-        $(form_type).val($("#id_"+'{{tc_class}}'+"_set-0-type").val());
-    });
 });
\ No newline at end of file
diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index 64ac4da..d562197 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -16,6 +16,25 @@ $(document).ready(function() {
           }
         );
     });
+    var completion_msg = "Add Youtube and Vimeo video ID, for Others add "+
+                         "video file url e.g https://example.com/video.mp4"
+    $("#video_msg").attr("title", completion_msg);
+    $("#video_msg").tooltip();
+    $("#submit-lesson").click(function() {
+        var video_option = $("#id_video_option").val();
+        var video_url = $("#id_video_url").val();
+        if(video_option != "---") {
+            if(!video_url.trim()) {
+                $('#id_video_url').prop('required', true);
+            }
+            else {
+                $("#id_video_path").val("{'"+video_option+"': '"+video_url+"'}");
+            }
+        } else {
+            $('#id_video_url').prop('required', false);
+            $("#id_video_path").val(null);
+        }
+    });
     const player = new Plyr('#player');
     var timer = $("#vtimer");
     var totalSeconds;
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index 04838a6..385ebe0 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -84,9 +84,12 @@
                     Active: {{lesson_form.active}}
                     <br><br>
                     Video Path:
-                    <span class="badge badge-info">
-                        {{lesson_form.video_path.help_text}}    
-                    </span>
+                    <a data-toggle="tooltip" id="video_msg">
+                        <i class="fa fa-question-circle"></i>
+                    </a>
+                    {{lesson_form.video_option}}
+                    <br><br>
+                    {{lesson_form.video_url}}
                     {{lesson_form.video_path}}
                     <br>
                     Video File:
@@ -133,12 +136,13 @@
                     </center>
                     {% endif %}
                     <center>
-                        <button class="btn btn-success btn-lg" type="submit" id="submit" name="Save">
+                        <button class="btn btn-success btn-lg" type="submit" id="submit-lesson" name="Save">
                             <i class="fa fa-save"></i>
                             Save
                         </button>
                         {% if lesson_files %}
-                        <button class="btn btn-danger btn-lg" type="submit" id="submit" name="Delete"> <i class="fa fa-trash"></i>&nbsp;Delete Files
+                        <button class="btn btn-danger btn-lg" type="submit" name="Delete">
+                            <i class="fa fa-trash"></i>&nbsp;Delete Files
                         </button>
                         {% endif %}
                     </center>