Bug/relocate django vars (#117)

* Move django vars from js

-add valid json into player context on backend
-parse json on frontend and use js object as global var

video_xblock/backends/base.py

@@ -6,6 +6,7 @@
 """
 
 import abc
+import json
 import re
 
 from webob import Response
@@ -109,6 +110,8 @@ def get_frag(self, **context):
         """
         Returns a Fragment required to render video player on the client side.
         """
+        context['player_state'] = json.dumps(context['player_state'])
+
         frag = Fragment()
         frag.add_css(self.resource_string(
             'static/bower_components/video.js/dist/video-js.min.css'
@@ -140,7 +143,7 @@ def get_frag(self, **context):
         frag.add_javascript(self.render_resource(
             'static/js/videojs-speed-handler.js', **context
         ))
-        if context['player_state']['transcripts']:
+        if json.loads(context['player_state'])['transcripts']:
             frag.add_javascript(self.resource_string(
                 'static/bower_components/videojs-transcript/dist/videojs-transcript.js'
             ))

video_xblock/backends/brightcove.py

@@ -322,6 +322,8 @@ def get_frag(self, **context):
         Because of this it doesn't use `super.get_frag()`
         """
 
+        context['player_state'] = json.dumps(context['player_state'])
+
         frag = Fragment(
             self.render_resource('static/html/brightcove.html', **context)
         )
@@ -334,7 +336,7 @@ def get_frag(self, **context):
         frag.add_content(
             self.add_js_content('static/js/toggle-button.js')
         )
-        if context['player_state']['transcripts']:
+        if json.loads(context['player_state'])['transcripts']:
             frag.add_content(
                 self.add_js_content('static/bower_components/videojs-transcript/dist/videojs-transcript.js')
             )

video_xblock/static/js/player_state.js

@@ -18,25 +18,25 @@ var domReady = function(callback) {
         document.addEventListener("DOMContentLoaded", callback);
     }
 };
+
+var player_state_obj = JSON.parse('{{ player_state }}');
 var player_state = {
-    volume: {{ player_state.volume }},
-    currentTime: {{ player_state.current_time }},
-    playbackRate: {{ player_state.playback_rate }},
-    muted: {{ player_state.muted | yesno:'true,false' }},
-    transcriptsEnabled: {{ player_state.transcripts_enabled | yesno:'true,false' }},
-    captionsEnabled: {{ player_state.captions_enabled | yesno:'true,false' }},
-    captionsLanguage: '{{ player_state.captions_language }}'
+    volume: player_state_obj.volume,
+    currentTime: player_state_obj.current_time,
+    playbackRate: player_state_obj.playback_rate,
+    muted: player_state_obj.muted,
+    transcriptsEnabled: player_state_obj.transcripts_enabled,
+    captionsEnabled: player_state_obj.captions_enabled,
+    captionsLanguage: player_state_obj.captions_language
 };
 var xblockUsageId = window.location.hash.slice(1);
-var transcripts = { // eslint-disable-line
-    {% for transcript in player_state.transcripts %} // eslint-disable-line
-        '{{transcript.lang}}': { // eslint-disable-line
-            'label': '{{transcript.label}}', // eslint-disable-line
-            'url': '{{transcript.url}}', // eslint-disable-line
-        }, // eslint-disable-line
-    {% endfor %} // eslint-disable-line
-}; // eslint-disable-line
-
+var transcripts = {};
+player_state_obj.transcripts.forEach(function loopTranscript(transcript) {
+    transcripts[transcript.lang] = {
+        'label': transcript.label,
+        'url': transcript.url
+    }
+})
 /** Get transcript url for current caption language */
 var getDownloadTranscriptUrl = function(player) {
     var downloadTranscriptUrl;

video_xblock/static/js/transcript-download.js

@@ -6,7 +6,7 @@ domReady(function() {
     'use strict';
     videojs('{{ video_player_id }}').ready(function() {
         var player = this;
-        var transcripts = JSON.parse('{{ player_state.transcripts_object }}');
+        var transcripts = JSON.parse('{{ player_state }}').transcripts_object;
         var xblockUsageId = window.location.hash.slice(1);
         /** Get transcript url for current caption language */
         var getDownloadTranscriptUrl = function() {

video_xblock/tests/test_video_xblock.py

@@ -69,7 +69,7 @@ def test_player_state(self):
                 'transcripts_enabled': self.block.transcripts_enabled,
                 'captions_enabled': self.block.captions_enabled,
                 'captions_language': 'en',
-                'transcripts_object': '{}'
+                'transcripts_object': {}
             }
         )
 
@@ -100,7 +100,7 @@ def test_save_player_state(self):
             'transcriptsEnabled': True,
             'captionsEnabled': True,
             'captionsLanguage': 'ru',
-            'transcripts_object': '{}'
+            'transcripts_object': {}
         }
         factory = RequestFactory()
         request = factory.post('', json.dumps(data), content_type='application/json')
@@ -115,7 +115,7 @@ def test_save_player_state(self):
             'transcripts_enabled': data['transcriptsEnabled'],
             'captions_enabled': data['captionsEnabled'],
             'captions_language': data['captionsLanguage'],
-            'transcripts_object': '{}'
+            'transcripts_object': {}
         })
 
 

video_xblock/video_xblock.py

@@ -280,7 +280,7 @@ def player_state(self):
             'transcripts_enabled': self.transcripts_enabled,
             'captions_enabled': self.captions_enabled,
             'captions_language': self.captions_language or course.language,
-            'transcripts_object': json.dumps(transcripts_object)
+            'transcripts_object': transcripts_object
         }
 
     @staticmethod